/* ─── RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:        #F20538;
  --red-glow:   rgba(242,5,56,0.5);
  --bg:         #000000;
  --bg-card:    #0d0d0d;
  --full-base:  #5A0000;
  --busy-base:  #4A3000;
  --avail-base: #002A0C;
  --text:       #ffffff;
  --text-muted: rgba(255,255,255,0.52);
  --radius-card: 28px;
  --radius-btn:  999px;
  --ease-apple:  cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* Apple product-page exponential-out */
  --font-sf:     -apple-system, "SF Pro Display", "SF Pro Text", BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-sf-ar:  "SF Pro AR", "SF Arabic", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sf-exp: "SF Pro Expanded", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sf);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ─── LANGUAGE SWITCHING ──────────────────────────────── */
[data-lang="en"] .btn-ar,
[data-lang="en"] .tagline-ar,
[data-lang="en"] .tagline-ar-sub,
[data-lang="en"] .featured-title-ar,
[data-lang="en"] .endless-title-ar,
[data-lang="en"] .crowd-title-ar,
[data-lang="en"] .ew-slide-title-ar,
[data-lang="en"] .ew-slide-desc-ar,
[data-lang="en"] .label-ar,
[data-lang="en"] .cue-app-ar { display: none; }

[data-lang="ar"] .btn-en,
[data-lang="ar"] .tagline-en,
[data-lang="ar"] .featured-title-en,
[data-lang="ar"] .endless-title-en,
[data-lang="ar"] .crowd-title-en,
[data-lang="ar"] .ew-slide-title-en,
[data-lang="ar"] .ew-slide-desc-en,
[data-lang="ar"] .label-en,
[data-lang="ar"] .cue-app-en { display: none; }

[data-lang="ar"] .tagline-ar,
[data-lang="ar"] .tagline-ar-sub { display: block; }
[data-lang="en"] .tagline-ar,
[data-lang="en"] .tagline-ar-sub { display: none; }

[data-lang="ar"] .main-nav,
[data-lang="ar"] .hero-tagline,
[data-lang="ar"] .hero-buttons { direction: rtl; }

[data-lang="ar"] .main-nav a,
[data-lang="ar"] .mobile-nav a { font-family: var(--font-sf-ar); }

/* ─── HEADER ──────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(0,0,0,0.85);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  height: 56px;
  gap: 24px;
}

.wordmark {
  font-family: var(--font-sf-exp);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.5px;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

.main-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: -0.1px;
  transition: color 0.2s var(--ease-apple);
}
.main-nav a:hover { color: var(--text); }
.main-nav a.nav-active { color: var(--text); }

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.desktop-lang {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-family: var(--font-sf);
  color: var(--text-muted);
  transition: color 0.2s;
}
.desktop-lang:hover { color: var(--text); }
.desktop-lang .lang-en,
.desktop-lang .lang-ar { font-weight: 500; }
.desktop-lang .lang-en.active,
.desktop-lang .lang-ar.active { color: var(--text); }
.desktop-lang .lang-divider { color: rgba(255,255,255,0.22); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-apple), opacity 0.3s;
}

.mobile-lang-bar {
  display: none;
  background: #1a0008;
  border-top: 1px solid rgba(242,5,56,0.22);
  padding: 8px 0;
  text-align: center;
}
.mobile-lang-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-sf);
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}
.mobile-lang-toggle .lang-divider { color: rgba(255,255,255,0.22); }

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 12px 28px 20px;
  gap: 4px;
  background: rgba(0,0,0,0.97);
}
.mobile-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 17px;
  font-weight: 450;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s;
}
.mobile-nav a:hover,
.mobile-nav a.nav-active { color: var(--text); }
.mobile-nav.open { display: flex; }

/* ─── HERO ────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 56px;
  background: var(--bg);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 36px;
  padding: 64px 24px 88px;
}

.hero-logo-wrap {
  opacity: 0;
  transform: scale(0.9);
  animation: heroFadeIn 1s var(--ease-out) 0.15s forwards;
}

.hero-logo {
  width: clamp(160px, 28vw, 250px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 48px rgba(242,5,56,0.2));
}

.hero-tagline {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeIn 0.9s var(--ease-out) 0.42s forwards;
}

.tagline-en {
  font-family: var(--font-sf-exp);
  font-size: clamp(28px, 5.5vw, 56px);
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--text);
}

.tagline-ar {
  font-family: var(--font-sf-ar);
  font-size: clamp(26px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--text);
  text-align: center;
}
.tagline-ar-sub {
  font-family: var(--font-sf-exp);
  font-size: clamp(15px, 2.5vw, 22px);
  color: var(--text-muted);
  margin-top: 10px;
  letter-spacing: -0.5px;
}

/* Glow words — hero fires on load */
.tagline-en .glow-word,
.tagline-ar .glow-word-ar {
  display: inline-block;
  animation: wordGlow 2.6s var(--ease-apple) 1.1s forwards;
}

/* Cue App title glow — fires on scroll-visible */
.cue-app-title .glow-word,
.cue-app-title .glow-word-ar {
  display: inline-block;
  animation: none;
}
.cue-app-title.visible .glow-word,
.cue-app-title.visible .glow-word-ar {
  animation: wordGlow 2.6s var(--ease-apple) 0.1s forwards;
}

/* AR: cue-app-ar uses Arabic font */
.cue-app-ar { font-family: var(--font-sf-ar); }

.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeIn 0.9s var(--ease-out) 0.72s forwards;
}

/* ─── BUTTONS ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-btn);
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sf);
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 0 24px rgba(242,5,56,0.38);
  white-space: nowrap;
}
.btn-primary:hover {
  background: #d80030;
  box-shadow: 0 0 36px rgba(242,5,56,0.58);
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-btn);
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sf);
  letter-spacing: -0.2px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.btn-secondary:active { transform: scale(0.97); }

/* ─── SECTION SHARED ──────────────────────────────────── */
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.section-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 32px;
}

/* ─── HOME RESTAURANT CARD  (hr-) ───────────────────────── */
.hr-section {
  background: #111111;
  padding: 28px 20px;
}

.hr-card {
  background: #000000;
  border-radius: 28px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.hr-title {
  font-family: var(--font-sf);
  font-size: clamp(26px, 7.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--red);
  margin: 0 0 24px;
}

[data-lang="ar"] .hr-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.25;
}

.hr-img-wrap {
  width: 100%;
  margin-bottom: 24px;
}

.hr-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.hr-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hr-btn-primary,
.hr-btn-secondary {
  flex: 1;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sf);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 16px 20px;
  border-radius: 100px;
  text-decoration: none;
  transition: opacity 0.18s, transform 0.18s;
}

[data-lang="ar"] .hr-btn-primary,
[data-lang="ar"] .hr-btn-secondary { font-family: var(--font-sf-ar); }

.hr-btn-primary {
  background: var(--red);
  color: #ffffff;
}

.hr-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.hr-btn-secondary {
  background: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.80);
}

.hr-btn-secondary:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }

/* Desktop — image top, bottom bar with title left + buttons right */
@media (min-width: 769px) {
  .hr-section {
    padding: 40px;
  }

  .hr-card {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "img  img"
      "title btns";
    padding: 40px 40px 36px;
    gap: 0;
    border-radius: 32px;
  }

  .hr-title {
    grid-area: title;
    margin: 0;
    align-self: center;
    font-size: clamp(28px, 3.2vw, 52px);
  }

  .hr-img-wrap {
    grid-area: img;
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hr-img {
    max-height: 420px;
    width: auto;
    max-width: 100%;
  }

  .hr-btns {
    grid-area: btns;
    align-self: center;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .hr-btn-primary,
  .hr-btn-secondary {
    flex: none;
    min-width: 140px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .hr-section  { padding: 20px 16px; }
  .hr-card     { padding: 22px 18px 20px; border-radius: 22px; }
  .hr-title    { font-size: clamp(24px, 8vw, 32px); margin-bottom: 20px; }
  .hr-btn-primary, .hr-btn-secondary { font-size: 15px; padding: 14px 16px; }
}

/* ─── FEATURED RESTAURANTS ───────────────────────────── */
.featured {
  padding: 80px 0 100px;
  background: var(--bg);
}

.featured-title-ar { text-align: right; }

.restaurant-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
  align-items: end;
}

.restaurant-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #111;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), box-shadow 0.3s;
}
.restaurant-card.visible { opacity: 1; transform: translateY(0); }
.restaurant-card:nth-child(2) { transition-delay: 0.1s; }
.restaurant-card:nth-child(3) { transition-delay: 0.2s; }
.restaurant-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.65); }

.restaurant-img {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
}

.white-robata {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.72) 100%),
    linear-gradient(135deg, #2a1a0e 0%, #4a2e1a 40%, #1a0e08 100%);
}
.mana {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.72) 100%),
    linear-gradient(135deg, #1a1a2e 0%, #2a2a4a 40%, #0e0e1a 100%);
}
.roka {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.72) 100%),
    linear-gradient(135deg, #1a0e08 0%, #2e1a0e 40%, #0e0a06 100%);
}

.restaurant-name {
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.1px;
}

.carousel-arrow-btn {
  position: absolute;
  right: -20px;
  bottom: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  backdrop-filter: blur(8px);
}
.carousel-arrow-btn:hover { background: rgba(255,255,255,0.2); }

.restaurant-carousel { display: none; }

.carousel-track {
  display: flex;
  gap: 16px;
  transition: transform 0.45s var(--ease-out);
}

.carousel-slide {
  flex: 0 0 88%;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  background: #111;
}

.carousel-slide .restaurant-img {
  aspect-ratio: 4/3;
  width: 100%;
}

.restaurant-label-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(12px);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.1);
}

.carousel-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 16px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background 0.3s, width 0.3s;
  cursor: pointer;
}
.dot.active { background: var(--red); width: 18px; border-radius: 3px; }

/* .idot removed — replaced by .ew-dot */

/* ─── APP PAGE — emoji section ────────────────────────── */
.page-app .emoji-section {
  padding-top: calc(56px + 128px); /* header + cinematic black gap */
}

.emoji-section {
  padding-bottom: 60px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

/* Mobile Download button (top-right of emoji section) */
.emoji-download-mobile {
  display: none;
  justify-content: flex-end;
  padding: 0 24px 24px;
}

.emoji-rows-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 56px;
}

.emoji-row {
  overflow: hidden;
  width: 100%;
}

.emoji-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
}

.emoji-tile {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.05);
}

.emoji-tile.highlight-red   { background: #2a0010; border-color: rgba(242,5,56,0.2); }
.emoji-tile.highlight-brown { background: #1e1600; border-color: rgba(74,48,0,0.35); }

/* Extra rows — hidden on desktop, shown on mobile */
.emoji-row-extra { display: none; }

.cue-app-title {
  text-align: center;
  font-family: var(--font-sf-exp);
  font-size: clamp(36px, 6.5vw, 68px);
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--text);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.cue-app-title.visible { opacity: 1; transform: translateY(0); }
.cue-app-en, .cue-app-ar { display: inline; }

/* Desktop: full-viewport height + cinematic breathing room — matches home/join hero */
@media (min-width: 769px) {
  .page-app .emoji-section {
    min-height: 100svh;
    padding-bottom: 160px;
  }
  .emoji-rows-wrap { margin-bottom: 88px; }
}

/* ─── ENDLESS WAITING ─────────────────────────────────── */
.endless {
  background: #111;
  padding: 112px 0 132px;
}

.endless-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(30px, 4.5vw, 54px);
  font-weight: 600;
  letter-spacing: -1.4px;
  color: #fff;
  margin-bottom: 44px;
  line-height: 1.05;
}
.endless-title-ar { text-align: right; display: none; font-family: var(--font-sf-ar); letter-spacing: 0; }
[data-lang="ar"] .endless-title-en { display: none; }
[data-lang="ar"] .endless-title-ar { display: block; }

/* ── Carousel wrapper — positions viewport + arrow ── */
.ew-wrap {
  position: relative;
}

/* Viewport clips the sliding track on desktop */
.ew-viewport {
  overflow: hidden;
  border-radius: 24px;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.ew-viewport:active,
.ew-viewport.is-dragging { cursor: grabbing; }

/* Track: horizontal flex strip of cards */
.ew-track {
  display: flex;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
  user-select: none;
  -webkit-user-select: none;
}

/* Each card fills full viewport width */
.ew-card {
  flex: 0 0 100%;
  background: #000;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  display: flex;
  flex-direction: row;
  min-height: 520px;
  overflow: hidden;
}

/* Slide 2: HTML order is content-panel first (LEFT), phone-panel second (RIGHT) */
.ew-card.ew-flip .ew-content-panel {
  padding: 56px 40px 56px 56px;
}
/* Flipped phone panel: center the composite screenshot vertically */
.ew-card.ew-flip .ew-phone-panel {
  align-items: center;
  padding: 40px 16px;
}
.ew-card.ew-flip .ew-phone-img {
  height: 420px;
  width: auto;
  max-width: 100%;
  border-radius: 0;
}

/* ── Phone panel ── */
.ew-phone-panel {
  flex: 0 0 42%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.ew-card:not(.ew-active) .ew-phone-panel {
  transform: scale(0.96);
}
.ew-card.ew-active .ew-phone-panel {
  transform: scale(1);
}

.ew-phone-img {
  width: auto;
  height: 420px;
  max-width: 100%;
  display: block;
}

/* ── Content panel — animates on slide change ── */
.ew-content-panel {
  flex: 1;
  padding: 56px 48px 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  /* inactive → active: delayed so text arrives AFTER the slide settles */
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: opacity, transform;
}

.ew-card:not(.ew-active) .ew-content-panel {
  opacity: 0.3;
  transform: translateX(22px);
  transition-delay: 0s;
}
.ew-card.ew-active .ew-content-panel {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.07s; /* slide first, then content arrives */
}
/* RTL: reverse card order so slide 1 (Live Map) is on the physical right;
   direction:ltr keeps offsetLeft reliable and avoids RTL overflow quirks. */
[dir="rtl"] .ew-track { direction: ltr; flex-direction: row-reverse; }
/* Restore Arabic text direction inside each card */
[dir="rtl"] .ew-content-panel { direction: rtl; text-align: right; }
[dir="rtl"] .ew-headline      { align-items: flex-start; }
/* Content panel enters from the left (track scrolls rightward when advancing) */
[dir="rtl"] .ew-card:not(.ew-active) .ew-content-panel { transform: translateX(-22px); }
[dir="rtl"] .ew-card.ew-active .ew-content-panel      { transform: translateX(0); }
/* Flip card (slide 2) — also flip its layout in RTL for visual variety */
[dir="rtl"] .ew-card.ew-flip { flex-direction: row-reverse; }

/* ── Icon + title column ── */
.ew-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ew-icon-svg {
  display: block;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 2px 16px rgba(255,0,61,0.28));
}

/* ── Slide title ── */
.ew-slide-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 700;
  letter-spacing: -0.9px;
  line-height: 1.1;
  background: linear-gradient(140deg, #FF003D 0%, #FF3B4F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ew-slide-title-ar { text-align: right; display: none; font-family: var(--font-sf-ar); letter-spacing: 0; }
[data-lang="ar"] .ew-slide-title-en { display: none; }
[data-lang="ar"] .ew-slide-title-ar { display: block; }

/* ── Slide description ── */
.ew-slide-desc {
  font-family: var(--font-sf);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.52);
  max-width: 320px;
}
.ew-slide-desc-ar { text-align: right; display: none; max-width: 100%; font-family: var(--font-sf-ar); direction: rtl; }
[data-lang="ar"] .ew-slide-desc-en { display: none; }
[data-lang="ar"] .ew-slide-desc-ar { display: block; }

/* ── Arrow button ── */
.ew-arrow-btn {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(30,30,30,0.92);
  border: 1px solid rgba(255,255,255,0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.ew-arrow-btn:hover {
  background: rgba(55,55,55,0.98);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-50%) scale(1.1);
}
.ew-arrow-btn:active {
  transform: translateY(-50%) scale(0.92);
  transition-duration: 0.1s;
}
.ew-arrow-btn svg { pointer-events: none; }

/* ── RTL: arrow moves to the left side and points left ── */
[dir="rtl"] .ew-arrow-btn {
  right: auto;
  left: 20px;
}
[dir="rtl"] .ew-arrow-btn svg {
  transform: scaleX(-1);
}
/* ── RTL: indicator fill grows from the right ── */
[dir="rtl"] .ew-ind-fill {
  left: auto;
  right: 0;
}

/* ── Progress footer ── */
.ew-footer {
  margin-top: 24px;
}

/* ── Unified segmented pill indicators — Apple-style ── */
.ew-indicators {
  display: flex;
  gap: 5px;
  align-items: center;
}

.ew-ind {
  position: relative;
  height: 3px;
  width: 30px;
  border-radius: 2px;
  background: rgba(255,255,255,0.18);
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1),
              background 0.3s ease;
}

.ew-ind.active {
  width: 88px;
  background: rgba(255,255,255,0.28);
}

.ew-ind-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: #ffffff;
  border-radius: 2px;
  pointer-events: none;
}

/* Prevent image dragging inside carousel */
.ew-card .ew-phone-img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}
/* Subtle phone opacity on inactive slide */
.ew-card:not(.ew-active) .ew-phone-img {
  opacity: 0.65;
  transition: opacity 0.5s ease;
}
.ew-card.ew-active .ew-phone-img {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* ─── LIVE CROWD VISIBILITY ───────────────────────────── */
.crowd {
  padding: 104px 0 128px;
  background: #090909;
}

.crowd-inner { text-align: center; }

.crowd-title {
  font-size: clamp(24px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.8px;
  margin-bottom: 88px;
}
.crowd-title-ar { display: none; font-family: var(--font-sf-ar); letter-spacing: 0; }

[data-lang="ar"] .crowd-title-en { display: none; }
[data-lang="ar"] .crowd-title-ar { display: block; }

.circles-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}

.status-circle-wrap {
  opacity: 0;
  transform: scale(0.82) translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.status-circle-wrap.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.status-circle {
  width: clamp(210px, 32vw, 250px);
  height: clamp(210px, 32vw, 250px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.full-circle      { background: var(--full-base); }
.busy-circle      { background: var(--busy-base); }
.available-circle { background: var(--avail-base); }

/* Scroll-linked fill — always starts at 0, clipped by overflow:hidden on parent */
.circle-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  pointer-events: none;
}

/* Per-circle fill colors */
#full-fill  { background: linear-gradient(180deg, #FF5070 0%, #E50030 100%); }
#busy-fill  { background: linear-gradient(180deg, #D4920A 0%, #9A6600 100%); }
#avail-fill { background: linear-gradient(180deg, #22C55E 0%, #15803D 100%); }

.circle-label {
  position: relative;
  z-index: 1;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 600;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  letter-spacing: -0.3px;
}


/* ─── LANGUAGE SWITCHING — new app sections ──────────── */
[data-lang="en"] .simplicity-title-ar,
[data-lang="en"] .simplicity-sub-ar,
[data-lang="en"] .live-title-ar,
[data-lang="en"] .live-sub-ar,
[data-lang="en"] .live-cta-ar,
[data-lang="en"] .dt-title-ar,
[data-lang="en"] .dt-sub-ar,
[data-lang="en"] .dt-btn-fine-ar,
[data-lang="en"] .dt-btn-casual-ar,
[data-lang="en"] .red-stmt-ar { display: none; }

[data-lang="ar"] .simplicity-title-en,
[data-lang="ar"] .simplicity-sub-en,
[data-lang="ar"] .live-title-en,
[data-lang="ar"] .live-sub-en,
[data-lang="ar"] .live-cta-en,
[data-lang="ar"] .dt-title-en,
[data-lang="ar"] .dt-sub-en,
[data-lang="ar"] .dt-btn-fine-en,
[data-lang="ar"] .dt-btn-casual-en,
[data-lang="ar"] .red-stmt-en { display: none; }

/* Block-level AR elements — titles and paragraphs */
[data-lang="ar"] .simplicity-title-ar,
[data-lang="ar"] .simplicity-sub-ar,
[data-lang="ar"] .live-title-ar,
[data-lang="ar"] .live-sub-ar,
[data-lang="ar"] .dt-title-ar,
[data-lang="ar"] .dt-sub-ar,
[data-lang="ar"] .red-stmt-ar { display: block; text-align: center; }

/* Inline AR elements — spans inside buttons / capsule */
[data-lang="ar"] .live-cta-ar,
[data-lang="ar"] .dt-btn-fine-ar,
[data-lang="ar"] .dt-btn-casual-ar { display: inline; }

/* ─── SIMPLICITY, EVERYWHERE ──────────────────────────── */
.simplicity {
  background: #000;
  padding: 120px 0 40px;
}

.simplicity-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}

.simplicity-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(32px, 5.5vw, 62px);
  font-weight: 700;
  letter-spacing: -1.8px;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 16px;
}

.simplicity-title-ar {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  display: none;
}

.simplicity-sub {
  font-family: var(--font-sf);
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,0.52);
  letter-spacing: -0.2px;
  margin-bottom: 64px;
}

.simplicity-sub-ar {
  font-family: var(--font-sf-ar);
  display: none;
}

[data-lang="ar"] .simplicity-inner { text-align: center; }

/* Phone trio */
.phone-trio-wrap {
  position: relative;
  width: 100%;
  height: clamp(380px, 58vw, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-trio-phone {
  position: absolute;
  width: clamp(170px, 23vw, 230px);
  will-change: transform, opacity;
  transition: opacity 0.1s;
}

.phone-trio-phone img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 28px;
}

.phone-left  { z-index: 1; opacity: 0.75; }
.phone-center { z-index: 3; }
.phone-right { z-index: 1; opacity: 0.75; }

/* ─── LIVE AROUND YOU ─────────────────────────────────── */
.live-around {
  background: #000;
  padding: 100px 0 100px;
}

.live-around-inner {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}

.live-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(28px, 4.5vw, 54px);
  font-weight: 700;
  letter-spacing: -1.4px;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 14px;
}

.live-title-ar {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  display: none;
}

.live-sub {
  font-family: var(--font-sf);
  font-size: clamp(14px, 2vw, 17px);
  color: rgba(255,255,255,0.52);
  letter-spacing: -0.2px;
  margin-bottom: 48px;
}

.live-sub-ar {
  font-family: var(--font-sf-ar);
  display: none;
}

[data-lang="ar"] .live-around-inner { text-align: center; }

.live-map-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  box-shadow: 0 24px 72px rgba(0,0,0,0.7);
}

.live-map-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.live-map-card img {
  width: 100%;
  height: auto;
  display: block;
}

.live-map-cta {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: #007AFF;
  color: #fff;
  padding: 12px 32px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 500;
  font-family: var(--font-sf);
  border: none;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.live-cta-ar { display: none; font-family: var(--font-sf-ar); }

[data-lang="ar"] .live-map-cta { font-family: var(--font-sf-ar); }

@media (min-width: 769px) {
  .live-map-cta {
    padding: 16px 44px;
    font-size: 18px;
    bottom: 28px;
  }
}

/* ─── DINING TYPES ────────────────────────────────────── */
.dining-types {
  background: #000;
  padding: 100px 0 100px;
}

.dining-types-inner {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}

.dt-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(28px, 4.5vw, 54px);
  font-weight: 700;
  letter-spacing: -1.4px;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 14px;
}

.dt-title-ar {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  display: none;
}

.dt-sub {
  font-family: var(--font-sf);
  font-size: clamp(14px, 2vw, 17px);
  color: rgba(255,255,255,0.52);
  letter-spacing: -0.2px;
  margin-bottom: 44px;
}

.dt-sub-ar {
  font-family: var(--font-sf-ar);
  display: none;
}

[data-lang="ar"] .dining-types-inner { text-align: center; }

.dt-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.dt-buttons.visible {
  opacity: 1;
  transform: translateY(0);
}

.dt-btn {
  width: 100%;
  padding: 20px 28px;
  border-radius: 999px;
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 600;
  font-family: var(--font-sf);
  letter-spacing: -0.3px;
  text-align: center;
  cursor: default;
  user-select: none;
}

.dt-btn-fine   { background: #2c2c2c; color: #fff; }
.dt-btn-casual { background: #e5e5e5; color: #111; }

.dt-btn-fine-ar, .dt-btn-casual-ar { display: none; }
[data-lang="ar"] .dt-btn { font-family: var(--font-sf-ar); }

/* ─── RED STATEMENT ───────────────────────────────────── */
.red-statement {
  background: #000;
  padding: 60px 0 160px;
}

.red-statement-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}

.red-stmt {
  font-family: var(--font-sf);
  font-size: clamp(17px, 2.6vw, 24px);
  line-height: 1.7;
  color: var(--red);
  letter-spacing: -0.3px;
}

.red-stmt-ar {
  font-family: var(--font-sf-ar);
  display: none;
  letter-spacing: 0;
}

/* ─── NEW SECTIONS RESPONSIVE ─────────────────────────── */
@media (max-width: 768px) {
  .simplicity { padding: 80px 0 20px; }
  .simplicity-sub { margin-bottom: 44px; }
  .phone-trio-wrap { height: clamp(300px, 80vw, 400px); }
  .phone-trio-phone { width: clamp(140px, 40vw, 190px); }

  .live-around { padding: 72px 0 72px; }
  .live-around-inner { max-width: 100%; }
  .live-map-card { max-width: 82%; }

  .dining-types { padding: 72px 0 72px; }
  .dt-btn { padding: 18px 24px; }

  .red-statement { padding: 40px 0 120px; }
  .red-stmt { font-size: clamp(15px, 4.5vw, 19px); }
}

/* ─── FOOTER ──────────────────────────────────────────── */
/* ─── FOOTER ──────────────────────────────────────────── */
.site-footer {
  background: #111111;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-sf);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Breadcrumb row */
.footer-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  font-size: 13px;
}

.fb-home {
  color: #9a9a9a;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.1px;
  transition: color 0.2s;
}
.fb-home:hover { color: #ffffff; }

.fb-chevron {
  color: rgba(255,255,255,0.28);
  font-size: 16px;
  line-height: 1;
  margin: 0 1px;
}

.fb-page {
  color: rgba(255,255,255,0.72);
  font-weight: 400;
  letter-spacing: -0.1px;
}

/* Dividers */
.footer-rule {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 0;
}

/* Columns grid */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  padding: 44px 0;
}

.fcol-title {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.2px;
  margin: 0 0 16px;
  line-height: 1.4;
}

.fcol-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.fcol-link {
  font-size: 13px;
  color: #9a9a9a;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.18s;
  display: block;
}
.fcol-link:hover { color: #ffffff; }

/* Bottom row */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 12px;
  color: #6e6e73;
  direction: ltr;
  margin: 0;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.flegal-link {
  font-size: 12px;
  color: #6e6e73;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s;
}
.flegal-link:hover { color: #ffffff; }

.flegal-sep {
  font-size: 12px;
  color: rgba(255,255,255,0.18);
  user-select: none;
}

/* Arabic */
[data-lang="ar"] .footer-cols   { direction: rtl; }
[data-lang="ar"] .footer-bottom { direction: rtl; }
[data-lang="ar"] .fcol-title,
[data-lang="ar"] .fcol-link,
[data-lang="ar"] .flegal-link,
[data-lang="ar"] .footer-copy   { font-family: var(--font-sf-ar); }

/* Tablet — 3-col grid */
@media (max-width: 1024px) {
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* Mobile — 2-col grid */
@media (max-width: 768px) {
  .footer-inner  { padding: 0 20px; }
  .footer-cols   { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; padding: 36px 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding: 16px 0 24px; gap: 10px; }
  [data-lang="ar"] .footer-bottom { align-items: flex-end; }
}

/* Small mobile — single column */
@media (max-width: 400px) {
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ─── KEYFRAMES ───────────────────────────────────────── */
@keyframes heroFadeIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wordGlow {
  0%   { text-shadow: none; }
  28%  { text-shadow: 0 0 20px rgba(255,255,255,1), 0 0 45px rgba(255,255,255,0.6), 0 0 80px rgba(255,255,255,0.28); }
  60%  { text-shadow: 0 0 15px rgba(255,255,255,0.75), 0 0 32px rgba(255,255,255,0.42); }
  100% { text-shadow: 0 0 12px rgba(255,255,255,0.55), 0 0 24px rgba(255,255,255,0.28); }
}

/* ─── RESPONSIVE: TABLET ──────────────────────────────── */
@media (max-width: 900px) {
  .ew-content-panel { padding: 44px 32px 44px 28px; }
}

/* ─── RESPONSIVE: MOBILE ──────────────────────────────── */
@media (max-width: 768px) {

  .main-nav       { display: none; }
  .desktop-lang   { display: none; }
  .hamburger      { display: flex; }
  .mobile-lang-bar { display: flex; justify-content: center; }

  .header-inner { padding: 0 20px; }

  /* Hero */
  .hero-inner { padding: 40px 20px 64px; gap: 28px; }
  .hero-logo  { width: clamp(140px, 52vw, 200px); }
  .tagline-en { font-size: clamp(26px, 8vw, 38px); letter-spacing: -1px; }

  /* Featured */
  .restaurant-grid     { display: none; }
  .restaurant-carousel {
    display: block;
    overflow: hidden;
    padding: 0 20px;
  }

  /* Emoji */
  .page-app .emoji-section { padding-top: calc(56px + 52px); min-height: 100svh; padding-bottom: 120px; }
  .emoji-download-mobile { display: flex; }
  .emoji-tile { width: 64px; height: 64px; font-size: 28px; border-radius: 14px; }
  .emoji-rows-wrap { gap: 10px; margin-bottom: 64px; }
  .emoji-row-extra { display: block; }

  /* Endless waiting — mobile */
  .endless { padding: 64px 0 80px; overflow: hidden; }
  .endless-title { margin-bottom: 28px; }
  /* On mobile LTR only — restores phone-left order; RTL handles it naturally */
  html[dir="ltr"] .ew-card.ew-flip { flex-direction: row-reverse; }
  .ew-card.ew-flip .ew-content-panel { padding: 28px 18px 28px 14px; }

  /* Viewport allows peek; section clips overflow */
  .ew-viewport { overflow: visible; border-radius: 0; }
  .ew-wrap { margin: 0 -8px; }

  /* Cards shrink to show next card peeking */
  .ew-card {
    flex: 0 0 calc(88vw - 28px);
    border-radius: 20px;
    min-height: 240px;
    margin-right: 10px;
  }

  .ew-phone-panel { flex: 0 0 42%; padding: 16px 8px; overflow: visible; align-items: flex-end; }
  .ew-phone-img { height: auto; width: 100%; max-width: none; }
  .ew-card.ew-flip .ew-phone-img { height: auto; width: 100%; max-width: none; }

  .ew-content-panel { padding: 28px 18px 28px 14px; gap: 10px; }
  .ew-headline { gap: 8px; }
  .ew-icon-svg { width: 32px; height: 32px; filter: none; }

  .ew-slide-title { font-size: clamp(18px, 5.5vw, 24px); }
  .ew-slide-desc { font-size: 13px; line-height: 1.5; max-width: 100%; }

  /* Arrow sits inside card right area on mobile */
  .ew-arrow-btn { right: 16px; width: 40px; height: 40px; }
  [dir="rtl"] .ew-arrow-btn { right: auto; left: 16px; }

  .ew-footer { margin-top: 16px; }
  .ew-ind { width: 22px; }
  .ew-ind.active { width: 60px; }

  /* Crowd */
  .crowd-title { margin-bottom: 60px; }
  .status-circle { width: 200px; height: 200px; }
  .circles-wrap { gap: 52px; }

  .carousel-arrow-btn { display: none; }
}

@media (max-width: 480px) {
  .hero-buttons { flex-direction: column; align-items: center; width: 100%; }
  .btn-primary, .btn-secondary { width: 100%; max-width: 280px; }
}

/* ─── REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ew-track          { transition: none; }
  .ew-content-panel  { transition: opacity 0.2s ease; transform: none !important; transition-delay: 0s !important; }
  .ew-phone-panel    { transition: opacity 0.2s ease; transform: none !important; }
  .ew-arrow-btn      { transition: background 0.15s; }
  .ew-ind            { transition: background 0.15s; }
}

/* ═══════════════════════════════════════════════════════
   JOIN CUE PAGE
   ═══════════════════════════════════════════════════════ */

/* ─── LANGUAGE SWITCHING — join page ─────────────────── */
[data-lang="en"] .j-ar { display: none; }
[data-lang="ar"] .j-en { display: none; }

/* On join page, hide mobile-lang-bar — join-strip replaces it */
.page-join .mobile-lang-bar { display: none !important; }

/* ─── JOIN HERO ───────────────────────────────────────── */
.join-hero {
  background: #000;
  padding-top: 56px; /* account for fixed header */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Strip — directly below fixed header */
.join-strip {
  background: #1a0005;
  padding: 10px 24px;
  text-align: center;
  border-bottom: 1px solid rgba(242,5,56,0.15);
}

.join-strip a,
.join-strip-cta {
  color: #FF4D72;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sf);
  letter-spacing: -0.1px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

[data-lang="ar"] .join-strip a,
[data-lang="ar"] .join-strip-cta {
  font-family: var(--font-sf-ar);
}

.join-hero-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 52px 24px 96px;
  gap: 28px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.join-hero-img-wrap {
  display: flex;
  justify-content: center;
}

.join-hero-img {
  width: clamp(200px, 52vw, 320px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.6));
}

.join-hero-headline {
  font-family: var(--font-sf-exp);
  font-size: clamp(34px, 8vw, 56px);
  font-weight: 700;
  letter-spacing: -1.8px;
  line-height: 1.06;
  background: linear-gradient(to bottom, #B01828 0%, #E8202F 50%, #F72538 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

[data-lang="ar"] .join-hero-headline {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.join-hero-desc {
  font-family: var(--font-sf);
  font-size: clamp(14px, 3.5vw, 16px);
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  max-width: 440px;
  text-align: center;
}

[data-lang="ar"] .join-hero-desc {
  font-family: var(--font-sf-ar);
}

/* ─── WHY SECTION ─────────────────────────────────────── */
.join-why {
  background: #111;
  padding: 72px 0 64px;
}

.join-why-inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 20px;
}

.join-why-title {
  font-family: var(--font-sf);
  font-size: clamp(17px, 3.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #fff;
  margin-bottom: 24px;
  text-align: left;
}

[data-lang="ar"] .join-why-title {
  text-align: right;
  font-family: var(--font-sf-ar);
}

.join-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ─── BASE CARD ───────────────────────────────────────── */
.jcard {
  background: #000;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.055);
}

/* Card title — red gradient, top darker, bottom brighter */
.jcard-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(30px, 7.5vw, 44px);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.08;
  background: linear-gradient(to bottom, #A01422 0%, #D82030 55%, #F72538 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-lang="ar"] .jcard-title {
  font-family: var(--font-sf-ar);
  text-align: right;
  letter-spacing: 0;
}

/* Card body text */
.jcard-body {
  font-family: var(--font-sf);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
}

[data-lang="ar"] .jcard-body {
  font-family: var(--font-sf-ar);
  text-align: right;
  direction: rtl;
}

/* ─── CARD 1 — Discovery ─────────────────────────────── */
.jcard-discovery {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
}

.jcard-discovery .jcard-body {
  padding-top: 20px;
}

/* ─── CARD 2 — Circles ───────────────────────────────── */
.jcard-circles {
  display: flex;
  flex-direction: row;
  padding: 28px 20px 28px 24px;
  gap: 12px;
  min-height: 300px;
  align-items: stretch;
}

/* In RTL the flex row reverses automatically */

.jcard-circles-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.jcard-circles-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
}

/* Circles */
.jcircle {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.jcircle-red    { background: #3D0008; }
.jcircle-yellow { background: #3A2E00; }
.jcircle-green  { background: #003814; }

.jcircle-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
}

.jcircle-red    .jcircle-fill { background: #FF3742; }
.jcircle-yellow .jcircle-fill { background: #FFCC00; }
.jcircle-green  .jcircle-fill { background: #34C759; }

/* ─── CARD 3 — Reservations ──────────────────────────── */
.jcard-reservations {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
}

.jcard-reservations .jcard-title {
  font-size: clamp(26px, 7vw, 40px);
}

.jcard-reservations .jcard-body {
  padding-top: 16px;
}

/* ─── CARD 4 — Kuwait ────────────────────────────────── */
.jcard-kuwait {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  justify-content: center;
}

.jcard-kuwait .jcard-title {
  font-size: clamp(26px, 7vw, 40px);
}

/* ─── CARD 5 — Team ──────────────────────────────────── */
.jcard-team {
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  overflow: visible; /* allow iPad parallax offset without clipping */
}

.jcard-team-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* Title wrapper — JS collapses this to height:0 initially and expands on scroll */
.jcard-team-title-wrap {
  width: 100%;
  overflow: hidden;
  /* padding-bottom provides the gap between title and iPad */
  padding-bottom: 14px;
}

.jcard-team-ipad {
  width: 100%;
  max-width: 340px;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  margin-bottom: 22px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.7);
}

.jcard-ipad-img {
  width: 100%;
  height: auto;
  display: block;
}

.jcard-team-title {
  font-size: clamp(26px, 7vw, 38px);
  text-align: center;
  margin-bottom: 0; /* spacing handled by wrapper padding-bottom */
}

[data-lang="ar"] .jcard-team-title { text-align: center; }

.jcard-team-body {
  text-align: center;
}

.jcard-team-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  font-family: var(--font-sf);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 12px 28px;
  border-radius: 100px;
  text-decoration: none;
  margin-top: 24px;
  transition: background 0.2s;
}

.jcard-team-btn:hover { background: rgba(255,255,255,0.22); }

[data-lang="ar"] .jcard-team-btn {
  font-family: var(--font-sf-ar);
}

/* ─── CARD 6 — Next Generation ───────────────────────── */
.jcard-nextgen {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}

.jcard-nextgen .jcard-body {
  padding-top: 20px;
}

/* ─── BENEFITS + FORM SECTION ────────────────────────── */
.join-bottom {
  background: #111;
  padding: 0 0 80px;
}

.join-bottom-inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Single transforming card — panels swap inside */
.jcard-apply {
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Shared panel base */
.jap-panel {
  width: 100%;
}

/* Benefits panel */
.jap-benefits {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Form panel — hidden until JS shows it */
.jap-form {
  padding: 32px 24px 28px;
  display: none;
  flex-direction: column;
  gap: 0;
}

.jbenefits-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 700;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.12;
  margin-bottom: 28px;
}

[data-lang="ar"] .jbenefits-title {
  font-family: var(--font-sf-ar);
  text-align: right;
  letter-spacing: 0;
}

.jbenefits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 28px;
}

.jbenefits-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* RTL direction on <html> naturally puts icon on right — no override needed */

.jbenefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(242,5,56,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jbenefit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

[data-lang="ar"] .jbenefit-text {
  text-align: right;
}

.jbenefits-item-title {
  display: block;
  font-family: var(--font-sf);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.2px;
}

[data-lang="ar"] .jbenefits-item-title {
  font-family: var(--font-sf-ar);
}

.jbenefits-item-desc {
  display: block;
  font-family: var(--font-sf);
  font-size: 13px;
  color: rgba(255,255,255,0.48);
  line-height: 1.5;
}

[data-lang="ar"] .jbenefits-item-desc {
  font-family: var(--font-sf-ar);
}

.jbenefits-cta {
  text-align: center;
}

/* (jcard-form replaced by .jap-form above) */

.jform-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 700;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.12;
  margin-bottom: 10px;
}

[data-lang="ar"] .jform-title {
  font-family: var(--font-sf-ar);
  text-align: right;
  letter-spacing: 0;
}

.jform-subtitle {
  font-family: var(--font-sf);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.48);
  margin-bottom: 24px;
}

[data-lang="ar"] .jform-subtitle {
  font-family: var(--font-sf-ar);
  text-align: right;
}

.jform {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jform-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jform-label {
  font-family: var(--font-sf);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.1px;
}

[data-lang="ar"] .jform-label {
  font-family: var(--font-sf-ar);
  text-align: right;
}

.jform-input {
  width: 100%;
  background: #1f1f1f;
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  font-size: 15px;
  font-family: var(--font-sf);
  color: #fff;
  outline: none;
  transition: background 0.2s;
  -webkit-appearance: none;
}

.jform-input::placeholder { color: rgba(255,255,255,0.22); }

.jform-input:focus {
  background: #282828;
  box-shadow: 0 0 0 2px rgba(242,5,56,0.28);
}

[data-lang="ar"] .jform-input {
  text-align: right;
  direction: rtl;
  font-family: var(--font-sf-ar);
}

.jform-submit-wrap {
  text-align: center;
  padding-top: 10px;
}

.jform-submit {
  min-width: 140px;
}

/* Back button — subtle text only, no box/border/background */
.jform-back {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  background: none !important;
  border: none !important;
  outline: none;
  box-shadow: none !important;
  border-radius: 0 !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  font-family: var(--font-sf);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.38);
  padding: 0;
  margin-bottom: 18px;
  letter-spacing: -0.1px;
  line-height: 1;
  transition: color 0.2s;
  align-self: flex-start;
}
.jform-back:hover { color: rgba(255,255,255,0.7); }
[data-lang="ar"] .jform-back { align-self: flex-end; font-family: var(--font-sf-ar); }

/* Inline validation errors */
/* Honeypot — visually hidden, bots fill it, real users skip it */
.jform-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.jform-error {
  display: block;
  font-family: var(--font-sf);
  font-size: 12px;
  color: #FF3B5C;
  min-height: 16px;
  padding: 2px 4px 0;
  transition: opacity 0.2s;
}
[data-lang="ar"] .jform-error { font-family: var(--font-sf-ar); text-align: right; }

.jform-input.is-error {
  box-shadow: 0 0 0 2px rgba(242,5,56,0.55);
  background: #1f1212;
}

/* Send error (generic) */
.jform-send-error {
  font-family: var(--font-sf);
  font-size: 13px;
  color: #FF3B5C;
  text-align: center;
  margin-top: 10px;
}
[data-lang="ar"] .jform-send-error { font-family: var(--font-sf-ar); }

/* Success state */
.jform-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 48px 0 32px;
}
.jform-success-icon svg { display: block; }
.jform-success-msg {
  font-family: var(--font-sf);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
}
[data-lang="ar"] .jform-success-msg { font-family: var(--font-sf-ar); }

/* ─── DESKTOP LAYOUT ──────────────────────────────────── */
@media (min-width: 900px) {
  .join-hero-inner {
    padding: 64px 24px 112px;
  }

  .join-hero-img {
    width: clamp(260px, 30vw, 360px);
  }

  .join-why {
    padding: 88px 0 80px;
  }

  .join-why-inner {
    max-width: 560px;
  }

  .jcard-circles {
    min-height: 340px;
  }

  .jcircle {
    width: 96px;
    height: 96px;
  }

  .join-bottom-inner {
    max-width: 560px;
  }
}

/* Lang toggle inside join page mobile nav */
.join-nav-lang {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-sf);
  color: rgba(255,255,255,0.52);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
  width: 100%;
  transition: color 0.2s;
}
.join-nav-lang:hover { color: var(--text); }
.join-nav-lang .lang-divider { color: rgba(255,255,255,0.22); margin: 0 6px; }

/* ─── JOIN PAGE MOBILE ────────────────────────────────── */
@media (max-width: 768px) {
  .join-hero-inner { padding: 40px 20px 72px; gap: 24px; }
  .join-why-inner  { padding: 0 16px; }
  .join-bottom-inner { padding: 0 16px; }

  .jcard-team-ipad { max-width: 100%; }

  .page-join .join-nav-lang { display: block; }
}

/* ─── JOIN PAGE REDUCED MOTION ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .jcircle-fill { transition: none; }
}

/* ═══════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════ */

/* ─── LANGUAGE SWITCHING — about page ────────────────── */
[data-lang="en"] .about-ar { display: none; }
[data-lang="ar"] .about-en { display: none; }

[data-lang="ar"] .about-pills-en { display: none; }
[data-lang="en"] .about-pills-ar { display: none; }

/* AR: font families */
[data-lang="ar"] .about-section-label,
[data-lang="ar"] .about-caption { font-family: var(--font-sf-ar); }

/* AR: card logo mark flips to left corner */
[data-lang="ar"] .about-card-logo-mark { right: auto; left: 20px; }

/* AR: section label and caption align right (RTL start) */
[data-lang="ar"] .about-section-label { text-align: right; font-family: var(--font-sf-ar); }
[data-lang="ar"] .about-caption       { text-align: center; font-family: var(--font-sf-ar); }

/* ─── SCROLL REVEAL ───────────────────────────────────── */
.about-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
}

.about-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero elements reveal (opacity only — no translateY flicker at top) */
.about-hero-logo.about-reveal,
.about-hero-text.about-reveal {
  transform: translateY(18px);
}
.about-hero-logo.about-reveal.visible,
.about-hero-text.about-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── ABOUT HERO ──────────────────────────────────────── */
.page-about .about-hero {
  min-height: 100svh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 56px; /* fixed header height */
}

.about-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px 28px 96px;
  gap: 32px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.about-hero-logo-img {
  width: clamp(220px, 40vw, 380px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 60px rgba(242,5,56,0.25));
}

.about-hero-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(30px, 6.5vw, 56px);
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 1.1;
  background: linear-gradient(to bottom, #B01828 0%, #E8202F 50%, #F72538 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-lang="ar"] .about-hero-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.about-hero-desc {
  font-family: var(--font-sf);
  font-size: clamp(14px, 2.2vw, 17px);
  line-height: 1.75;
  color: rgba(255,255,255,0.58);
  max-width: 500px;
  letter-spacing: -0.1px;
}

[data-lang="ar"] .about-hero-desc {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

/* ─── ABOUT SECTIONS ──────────────────────────────────── */
.about-section {
  background: #090909;
  padding: 80px 0;
}

.about-section-inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Section label — muted heading above card */
.about-section-label {
  font-family: var(--font-sf);
  font-size: clamp(15px, 2.5vw, 18px);
  font-weight: 500;
  color: rgba(255,255,255,0.48);
  letter-spacing: -0.2px;
  line-height: 1.4;
}

/* ─── ABOUT CARD ──────────────────────────────────────── */
.about-card {
  background: #000;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.055);
  overflow: hidden;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

/* Small Cue logo mark — top-right corner */
.about-card-logo-mark {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  opacity: 0.12;
  pointer-events: none;
  flex-shrink: 0;
}

.about-card-logo-mark img {
  width: 100%;
  height: auto;
  display: block;
}

/* Red gradient card title — matching jcard-title style */
.about-card-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(26px, 6vw, 40px);
  font-weight: 700;
  letter-spacing: -1.1px;
  line-height: 1.1;
  background: linear-gradient(to bottom, #A01422 0%, #D82030 55%, #F72538 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-lang="ar"] .about-card-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  text-align: right;
}

/* Card body text */
.about-card-body {
  font-family: var(--font-sf);
  font-size: clamp(13px, 2vw, 15px);
  line-height: 1.7;
  color: rgba(255,255,255,0.52);
  letter-spacing: -0.1px;
}

[data-lang="ar"] .about-card-body {
  font-family: var(--font-sf-ar);
  text-align: right;
  letter-spacing: 0;
  direction: rtl;
}

/* Caption beneath card */
.about-caption {
  font-family: var(--font-sf);
  font-size: 12px;
  color: rgba(255,255,255,0.28);
  letter-spacing: -0.1px;
  text-align: center;
  padding: 0 4px;
}

/* ─── PROBLEM SECTION — pills ─────────────────────────── */
.about-problem-card {
  padding: 28px 24px;
}

.about-pills-grid {
  width: 100%;
}

.about-pills-en,
.about-pills-ar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-sf);
  letter-spacing: -0.2px;
  white-space: nowrap;
  line-height: 1;
}

[data-lang="ar"] .about-pill { font-family: var(--font-sf-ar); }

/* Red problem pill */
.about-pill-red {
  background: linear-gradient(135deg, #3D0008 0%, #7A0010 100%);
  border: 1px solid rgba(242,5,56,0.3);
  color: rgba(255,255,255,0.9);
}

/* Silver / light pill */
.about-pill-silver {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.65);
}

/* Pill stagger delays */
.about-pill:nth-child(1) { transition-delay: 0s; }
.about-pill:nth-child(2) { transition-delay: 0.06s; }
.about-pill:nth-child(3) { transition-delay: 0.12s; }
.about-pill:nth-child(4) { transition-delay: 0.18s; }
.about-pill:nth-child(5) { transition-delay: 0.24s; }
.about-pill:nth-child(6) { transition-delay: 0.30s; }

/* ─── ALTERNATING SECTION BG TONES ───────────────────── */
.about-problem  { background: #090909; }
.about-solution { background: #070707; }
.about-kuwait   { background: #090909; }
.about-future   { background: #060606; padding-bottom: 140px; }

/* ─── DESKTOP — wider content ─────────────────────────── */
@media (min-width: 769px) {
  .about-section { padding: 96px 0; }

  .about-section-inner { max-width: 560px; }

  .about-hero-inner {
    padding: 88px 28px 112px;
    gap: 36px;
  }

  .about-hero-desc { max-width: 520px; }

  .about-card { padding: 36px 32px; }

  .about-problem-card { padding: 32px 28px; }

  .about-card-title {
    font-size: clamp(30px, 4.5vw, 44px);
  }
}

/* ─── MOBILE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-about .about-hero {
    padding-top: 56px;
    min-height: 100svh;
  }

  .about-hero-inner {
    padding: 56px 20px 80px;
    gap: 24px;
  }

  .about-hero-logo-img {
    width: clamp(180px, 58vw, 280px);
  }

  .about-hero-title {
    font-size: clamp(28px, 9vw, 40px);
    letter-spacing: -1px;
  }

  .about-section { padding: 64px 0; }

  .about-section-inner { padding: 0 20px; gap: 20px; }

  .about-card { padding: 28px 24px; gap: 14px; }

  .about-problem-card { padding: 24px 20px; }

  .about-pill { font-size: 14px; padding: 10px 18px; }

  .about-card-title {
    font-size: clamp(24px, 7.5vw, 34px);
    letter-spacing: -0.8px;
  }

  .about-card-body { font-size: 14px; }

  .about-section-label { font-size: 15px; }
}

/* ─── REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .about-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════
   SUPPORT PAGE
   ═══════════════════════════════════════════════════════ */

/* ─── HERO ────────────────────────────────────────────── */
.page-support .sp-hero {
  min-height: 100svh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 56px;
}

.sp-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px 104px;
  gap: 36px;
  max-width: 580px;
  margin: 0 auto;
  width: 100%;
}

.sp-hero-logo-wrap {
  opacity: 0;
  transform: scale(0.88) translateY(10px);
  animation: spHeroIn 1.1s var(--ease-out) 0.1s forwards;
}

.sp-hero-logo {
  width: clamp(108px, 26vw, 168px);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 44px rgba(242, 5, 56, 0.16));
}

.sp-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(18px);
  animation: spHeroIn 1s var(--ease-out) 0.35s forwards;
}

.sp-hero-title {
  font-family: var(--font-sf-exp);
  font-size: clamp(30px, 7vw, 56px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.08;
  background: linear-gradient(to bottom, #A81422 0%, #D81E2E 55%, #F22038 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

[data-lang="ar"] .sp-hero-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.sp-hero-desc {
  font-family: var(--font-sf);
  font-size: clamp(14px, 2.4vw, 17px);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.5);
  max-width: 440px;
  text-align: center;
  letter-spacing: -0.1px;
}

[data-lang="ar"] .sp-hero-desc {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

/* ─── FAQ SECTION ─────────────────────────────────────── */
.sp-faq {
  background: #0c0c0c;
  padding: 72px 0 96px;
}

.sp-faq-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-faq-heading {
  font-family: var(--font-sf);
  font-size: clamp(20px, 3.5vw, 26px);
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 8px;
}

[data-lang="ar"] .sp-faq-heading {
  font-family: var(--font-sf-ar);
  text-align: right;
  letter-spacing: 0;
}

/* ─── FAQ CARD ────────────────────────────────────────── */
.sp-card {
  background: #000;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.045);
  box-shadow: 0 2px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.72s var(--ease-out),
    transform 0.72s var(--ease-out),
    box-shadow 0.3s;
}

.sp-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.sp-card:hover {
  box-shadow: 0 6px 52px rgba(0, 0, 0, 0.65);
}

.sp-card-inner {
  padding: 28px 24px 8px;
}

/* ─── CATEGORY PILL ───────────────────────────────────── */
.sp-cat-pill {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #780D19 0%, #A81320 48%, #BE1A28 100%);
  border-radius: 999px;
  padding: 11px 24px;
  color: #fff;
  font-family: var(--font-sf);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.15px;
  margin-bottom: 18px;
  white-space: nowrap;
  user-select: none;
}

[data-lang="ar"] .sp-cat-pill {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

/* ─── Q&A LIST ────────────────────────────────────────── */
.sp-qa-list {
  list-style: none;
}

.sp-qa-item + .sp-qa-item {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── QUESTION BUTTON ─────────────────────────────────── */
.sp-qa-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 18px 0;
  gap: 14px;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}

[data-lang="ar"] .sp-qa-btn {
  text-align: right;
}

.sp-qa-q {
  font-family: var(--font-sf);
  font-size: clamp(14px, 2.4vw, 15.5px);
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
  letter-spacing: -0.15px;
  flex: 1;
}

[data-lang="ar"] .sp-qa-q {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.sp-qa-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  transition: transform 0.38s var(--ease-out);
}

.sp-qa-item.open .sp-qa-arrow {
  transform: rotate(180deg);
}

/* ─── ANSWER ──────────────────────────────────────────── */
.sp-qa-answer {
  overflow: hidden;
  height: 0;
  transition: height 0.44s var(--ease-out);
}

.sp-qa-answer p {
  padding: 0 0 22px;
  font-family: var(--font-sf);
  font-size: clamp(13px, 2vw, 14.5px);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -0.1px;
}

[data-lang="ar"] .sp-qa-answer p {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

/* ─── EMOTIONAL SECTION ───────────────────────────────── */
.sp-emotional {
  background: #000;
  padding: 130px 24px 148px;
}

.sp-emotional-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  max-width: 560px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.85s var(--ease-out),
    transform 0.85s var(--ease-out);
}

.sp-emotional-inner.visible {
  opacity: 1;
  transform: translateY(0);
}

.sp-chat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-emotional-text {
  font-family: var(--font-sf);
  font-size: clamp(38px, 8vw, 76px);
  font-weight: 700;
  letter-spacing: -2.2px;
  line-height: 1.1;
  color: var(--text);
  text-align: center;
}

[data-lang="ar"] .sp-emotional-text {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.2;
}

/* ─── CONTACT SECTION ─────────────────────────────────── */
.sp-contact {
  background: #0c0c0c;
  padding: 84px 0 128px;
}

.sp-contact-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
}

.sp-contact-inner.visible {
  opacity: 1;
  transform: translateY(0);
}

.sp-contact-heading {
  font-family: var(--font-sf);
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--text);
}

[data-lang="ar"] .sp-contact-heading {
  font-family: var(--font-sf-ar);
  text-align: right;
  letter-spacing: 0;
}

.sp-contact-blocks {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.sp-contact-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sp-contact-label {
  display: block;
  font-family: var(--font-sf);
  font-size: clamp(14px, 2.2vw, 16px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.2px;
  margin-bottom: 2px;
}

[data-lang="ar"] .sp-contact-label {
  font-family: var(--font-sf-ar);
  text-align: right;
  letter-spacing: 0;
}

.sp-contact-email {
  font-family: var(--font-sf);
  font-size: clamp(14px, 2.2vw, 16px);
  color: #4D8FD6;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  letter-spacing: -0.1px;
  display: inline-block;
  direction: ltr;
  transition: color 0.2s;
  white-space: nowrap;
}

.sp-contact-email:hover {
  color: #6AAAF0;
}

[data-lang="ar"] .sp-contact-email {
  display: block;
  text-align: right;
}

.sp-contact-value {
  display: block;
  font-family: var(--font-sf);
  font-size: clamp(14px, 2.2vw, 16px);
  color: rgba(255, 255, 255, 0.36);
  letter-spacing: -0.15px;
  line-height: 1.5;
}

[data-lang="ar"] .sp-contact-value {
  font-family: var(--font-sf-ar);
  text-align: right;
  letter-spacing: 0;
}

/* ─── KEYFRAMES ───────────────────────────────────────── */
@keyframes spHeroIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── DESKTOP ─────────────────────────────────────────── */
@media (min-width: 769px) {
  .sp-hero-inner {
    padding: 96px 28px 120px;
    gap: 40px;
  }

  .sp-faq { padding: 88px 0 112px; }

  .sp-faq-inner {
    max-width: 680px;
    padding: 0 32px;
    gap: 20px;
  }

  .sp-card-inner {
    padding: 36px 32px 12px;
  }

  .sp-cat-pill {
    font-size: 15px;
    padding: 12px 28px;
    margin-bottom: 22px;
  }

  .sp-qa-btn { padding: 20px 0; }

  .sp-qa-q { font-size: 16px; }

  .sp-qa-answer p {
    font-size: 15px;
    padding: 0 0 26px;
  }

  .sp-emotional {
    padding: 168px 28px 186px;
  }

  .sp-emotional-inner { gap: 36px; }

  .sp-contact { padding: 104px 0 152px; }

  .sp-contact-inner {
    max-width: 680px;
    padding: 0 32px;
    gap: 52px;
  }

  .sp-contact-blocks { gap: 40px; }
}

/* ─── MOBILE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .sp-hero-inner { padding: 64px 20px 88px; gap: 30px; }
  .sp-faq        { padding: 56px 0 72px; }
  .sp-faq-inner  { padding: 0 16px; gap: 14px; }
  .sp-card-inner { padding: 24px 20px 6px; }
  .sp-cat-pill   { padding: 10px 20px; font-size: 13.5px; }
  .sp-emotional  { padding: 100px 20px 116px; }
  .sp-emotional-text { letter-spacing: -1.6px; }
  .sp-contact    { padding: 68px 0 100px; }
  .sp-contact-inner { padding: 0 20px; gap: 36px; }
}

/* ─── REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sp-hero-logo-wrap {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sp-hero-text {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sp-card {
    opacity: 1;
    transform: none;
    transition: box-shadow 0.3s;
  }
  .sp-emotional-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sp-contact-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sp-qa-answer { transition: none; }
  .sp-qa-arrow  { transition: none; }
}


/* ═══════════════════════════════════════════════════════
   LIVE MAP PAGE
   ═══════════════════════════════════════════════════════ */

/* ─── LIGHT THEME OVERRIDE ───────────────────────────── */
.page-livemap {
  background: #ffffff;
  color: #1a1a1a;
}

/* ─── HERO ────────────────────────────────────────────── */
.lm-hero {
  background: #ffffff;
  padding-top: 56px; /* fixed header height */
}

.lm-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 36px;
  padding: 72px 24px 84px;
  max-width: 560px;
  margin: 0 auto;
}

/* Map image card */
.lm-map-wrap {
  width: 300px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 2px 12px rgba(0,0,0,0.09),
    0 6px 28px rgba(0,0,0,0.08);
  flex-shrink: 0;
  transition: width 0.52s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.lm-map-wrap.map-shrunk {
  width: 210px;
}

.lm-map-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hero copy block */
.lm-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.lm-hero-title {
  font-family: var(--font-sf);
  font-size: clamp(26px, 7vw, 44px);
  font-weight: 600;
  color: #111111;
  letter-spacing: -1.1px;
  line-height: 1.1;
  text-align: center;
}

[data-lang="ar"] .lm-hero-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.25;
}

.lm-hero-desc {
  font-family: var(--font-sf);
  font-size: 15.5px;
  color: #666666;
  line-height: 1.62;
  text-align: center;
  max-width: 320px;
}

[data-lang="ar"] .lm-hero-desc {
  font-family: var(--font-sf-ar);
  max-width: 340px;
}

/* ─── HERO ENTRANCE ANIMATIONS ───────────────────────── */
@keyframes lmMapIn {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

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

.lm-anim-map {
  opacity: 0;
  animation: lmMapIn 0.88s var(--ease-out) 0.1s forwards;
}

.lm-anim-copy {
  opacity: 0;
  animation: lmCopyIn 0.82s var(--ease-out) 0.38s forwards;
}

/* ─── DOT ECOSYSTEM SECTION ─────────────────────────── */
.lm-dots {
  background: #e8e8e8;
  padding: 52px 20px 24px;
}

.lm-dots-inner {
  max-width: 460px;
  margin: 0 auto;
}

.lm-dots-title {
  font-family: var(--font-sf);
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.5px;
  line-height: 1.15;
  text-align: start;
  margin-bottom: 28px;
}

[data-lang="ar"] .lm-dots-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

/* ─── DOT CARDS ─────────────────────────────────────── */
.lm-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 40px 24px 24px;
  margin-bottom: 16px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.lm-card:last-child { margin-bottom: 0; }

/* Orb container — centers the dot */
.lm-orb-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

/* The status dot */
.lm-orb {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Dot gradients — sphere shading from upper-left highlight */
.lm-orb-green {
  background: radial-gradient(circle at 34% 28%,
    #6acf52 0%,
    #318c1e 50%,
    #124c0a 100%);
}

.lm-orb-yellow {
  background: radial-gradient(circle at 34% 28%,
    #c8a01a 0%,
    #8a6a00 52%,
    #4e3a00 100%);
}

.lm-orb-red {
  background: radial-gradient(circle at 34% 28%,
    #cc2430 0%,
    #880c14 52%,
    #420006 100%);
}

.lm-orb-black {
  background: radial-gradient(circle at 34% 28%,
    #545454 0%,
    #202020 52%,
    #000000 100%);
}

/* Expandable content — height animated by JS */
.lm-card-expand {
  height: 0;
  overflow: hidden;
  transition: height 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.lm-card-expand-inner {
  padding-top: 4px;
  padding-bottom: 16px;
}

/* Card title */
.lm-card-title {
  font-family: var(--font-sf);
  font-size: 19px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.4px;
  line-height: 1.2;
  text-align: start;
  margin-bottom: 12px;
}

[data-lang="ar"] .lm-card-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

/* Divider under title */
.lm-card-rule {
  height: 1px;
  background: rgba(0, 0, 0, 0.10);
  margin-bottom: 14px;
}

/* Card description */
.lm-card-desc {
  font-family: var(--font-sf);
  font-size: 14.5px;
  color: #666666;
  line-height: 1.62;
  text-align: start;
}

[data-lang="ar"] .lm-card-desc {
  font-family: var(--font-sf-ar);
}

/* Footer row — holds the arrow button */
.lm-card-footer {
  display: flex;
  margin-top: 12px;
}

/* Arrow button — pushed to logical-end (right in LTR, left in RTL) */
.lm-card-btn {
  margin-inline-start: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.09);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444444;
  transition:
    transform   0.48s cubic-bezier(0.16, 1, 0.3, 1),
    background  0.2s ease;
  flex-shrink: 0;
}

.lm-card-btn:hover  { background: rgba(0, 0, 0, 0.14); }
.lm-card-btn:active { background: rgba(0, 0, 0, 0.18); }

/* Arrow rotates 180° when card is open */
.lm-card.open .lm-card-btn {
  transform: rotate(180deg);
}

/* ─── TRUST NOTE ─────────────────────────────────────── */
.lm-trust {
  background: #e8e8e8;
  padding: 32px 24px 68px;
}

.lm-trust-inner {
  max-width: 520px;
  margin: 0 auto;
}

.lm-trust-text {
  font-family: var(--font-sf);
  font-size: 13px;
  color: rgba(0, 0, 0, 0.36);
  line-height: 1.58;
  text-align: center;
}

[data-lang="ar"] .lm-trust-text {
  font-family: var(--font-sf-ar);
}

/* ─── FINAL CTA ─────────────────────────────────────── */
.lm-cta {
  background: #ffffff;
  padding: 88px 24px 104px;
}

.lm-cta-inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}

.lm-cta-line {
  font-family: var(--font-sf);
  font-size: clamp(20px, 5.5vw, 38px);
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.8px;
  line-height: 1.2;
}

[data-lang="ar"] .lm-cta-line {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.lm-cta-btn {
  display: inline-flex;
  align-items: center;
  background: #111111;
  color: #ffffff;
  text-decoration: none;
  padding: 14px 36px;
  border-radius: var(--radius-btn);
  font-family: var(--font-sf);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  transition: background 0.22s ease, transform 0.22s var(--ease-out);
}

.lm-cta-btn:hover  { background: #2a2a2a; transform: scale(1.025); }
.lm-cta-btn:active { background: #3a3a3a; transform: scale(0.98);  }

[data-lang="ar"] .lm-cta-btn { font-family: var(--font-sf-ar); }

/* ─── SCROLL REVEAL ──────────────────────────────────── */

/* Generic single-element reveal */
.lm-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.58s var(--ease-out), transform 0.58s var(--ease-out);
}

.lm-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Dot card reveal — CSS keyframe so cards are never invisible on-screen */
@keyframes lmCardIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lm-card-reveal {
  animation: lmCardIn 0.65s var(--ease-out) both;
}

/* Stagger: cards are nth-child 2–5 inside .lm-dots-inner (h2 is 1st) */
.lm-dots-inner .lm-card-reveal:nth-child(2) { animation-delay: 0.00s; }
.lm-dots-inner .lm-card-reveal:nth-child(3) { animation-delay: 0.09s; }
.lm-dots-inner .lm-card-reveal:nth-child(4) { animation-delay: 0.18s; }
.lm-dots-inner .lm-card-reveal:nth-child(5) { animation-delay: 0.27s; }

.lm-card-reveal.visible { /* kept for JS compatibility */ }

/* ─── DESKTOP ────────────────────────────────────────── */
@media (min-width: 769px) {

  .lm-hero-inner {
    gap: 48px;
    padding: 100px 40px 112px;
    max-width: 680px;
  }

  .lm-map-wrap {
    width: 420px;
    border-radius: 24px;
  }
  .lm-map-wrap.map-shrunk { width: 300px; }

  .lm-hero-title  { font-size: clamp(34px, 4.2vw, 52px); }

  .lm-hero-desc {
    font-size: 17px;
    max-width: 460px;
  }

  .lm-dots { padding: 68px 40px 28px; }

  .lm-dots-inner,
  .lm-trust-inner,
  .lm-cta-inner { max-width: 520px; }

  .lm-dots-title {
    font-size: clamp(24px, 3vw, 34px);
    margin-bottom: 36px;
  }

  .lm-card        { padding: 48px 36px 28px; margin-bottom: 20px; }
  .lm-orb         { width: 260px; height: 260px; }
  .lm-card-title  { font-size: 21px; }
  .lm-card-desc   { font-size: 16px; }
  .lm-card-btn    { width: 48px; height: 48px; }

  .lm-trust { padding: 36px 40px 80px; }
  .lm-trust-text  { font-size: 14px; }

  .lm-cta { padding: 112px 40px 136px; }
}

/* ─── MOBILE ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .lm-hero-inner { padding: 56px 20px 68px; gap: 28px; }
  .lm-map-wrap   { width: 280px; }
  .lm-dots       { padding: 44px 16px 20px; }
  .lm-dots-inner { max-width: 100%; }
  .lm-card       { padding: 36px 20px 20px; border-radius: 26px; }
  .lm-orb        { width: 180px; height: 180px; }
  .lm-trust      { padding: 28px 16px 56px; }
  .lm-cta        { padding: 72px 20px 88px; }
}

/* ─── REDUCED MOTION ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lm-anim-map,
  .lm-anim-copy {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .lm-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lm-card-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .lm-card-expand { transition: none; }
  .lm-card-btn    { transition: background 0.15s, color 0.15s; }
  .lm-cta-btn     { transition: background 0.15s; }
}

/* ═══════════════════════════════════════════════════════════
   RESERVATIONS PAGE
   ═══════════════════════════════════════════════════════════ */

/* ─── LIGHT THEME ─────────────────────────────────────────── */
.page-reservations {
  background: #ffffff;
  color: #111111;
}

/* ─── HERO ─────────────────────────────────────────────────── */
.rv-hero {
  background: #ffffff;
  padding-top: 56px;
}

.rv-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 140px 24px 80px;
  max-width: 560px;
  margin: 0 auto;
  gap: 0;
}

.rv-hero-img {
  width: 86%;
  max-width: 340px;
  height: auto;
  display: block;
  margin-bottom: 40px;
  border-radius: 4px;
}

.rv-hero-title {
  font-family: var(--font-sf);
  font-size: clamp(28px, 7.5vw, 48px);
  font-weight: 700;
  color: #111111;
  letter-spacing: -1.2px;
  line-height: 1.08;
  text-align: center;
  margin-bottom: 20px;
}

[data-lang="ar"] .rv-hero-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.3;
}

.rv-hero-desc {
  font-family: var(--font-sf);
  font-size: 16px;
  color: #555555;
  line-height: 1.65;
  text-align: center;
  max-width: 400px;
}

[data-lang="ar"] .rv-hero-desc {
  font-family: var(--font-sf-ar);
  max-width: 380px;
}

/* ─── HERO ANIMATIONS ─────────────────────────────────────── */
@keyframes rvImgIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes rvCopyIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes rvDescIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.rv-anim-img  { opacity: 0; animation: rvImgIn  0.9s var(--ease-out) 0.06s forwards; }
.rv-anim-copy { opacity: 0; animation: rvCopyIn 0.8s var(--ease-out) 0.32s forwards; }
.rv-anim-desc { opacity: 0; animation: rvDescIn 0.8s var(--ease-out) 0.48s forwards; }

/* ─── FEATURE SECTION ─────────────────────────────────────── */
.rv-features {
  background: #e8e8e8;
  padding: 52px 20px 28px;
}

.rv-features-inner {
  max-width: 460px;
  margin: 0 auto;
}

.rv-section-title {
  font-family: var(--font-sf);
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.5px;
  line-height: 1.18;
  text-align: start;
  margin-bottom: 20px;
}

[data-lang="ar"] .rv-section-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

/* Intro card */
.rv-intro-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 24px;
  margin-bottom: 16px;
}

.rv-intro-text {
  font-family: var(--font-sf);
  font-size: 16px;
  color: #333333;
  line-height: 1.65;
  text-align: start;
}

[data-lang="ar"] .rv-intro-text {
  font-family: var(--font-sf-ar);
}

/* ─── STEP CARDS ──────────────────────────────────────────── */
.rv-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 40px 24px 24px;
  margin-bottom: 16px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rv-card:last-child { margin-bottom: 0; }

/* Icon containers */
.rv-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.rv-icon-composite {
  position: relative;
  display: inline-block;
}

.rv-icon-main {
  width: 150px;
  height: 150px;
  display: block;
  color: #111111;
}

.rv-icon-single {
  width: 164px;
  height: 164px;
  display: block;
  color: #111111;
}

.rv-icon-badge {
  position: absolute;
  width: 62px;
  height: 62px;
  bottom: -8px;
  right: -12px;
  color: #111111;
}

/* Expandable content */
.rv-card-expand {
  height: 0;
  overflow: hidden;
  transition: height 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.rv-card-expand-inner {
  padding-top: 4px;
  padding-bottom: 16px;
}

.rv-card-title {
  font-family: var(--font-sf);
  font-size: 19px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.3px;
  line-height: 1.2;
  text-align: start;
  margin-bottom: 12px;
}

[data-lang="ar"] .rv-card-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.rv-card-rule {
  height: 1px;
  background: rgba(0, 0, 0, 0.10);
  margin-bottom: 14px;
}

.rv-card-desc {
  font-family: var(--font-sf);
  font-size: 14.5px;
  color: #666666;
  line-height: 1.65;
  text-align: start;
}

[data-lang="ar"] .rv-card-desc {
  font-family: var(--font-sf-ar);
}

/* Footer row with arrow button */
.rv-card-footer {
  display: flex;
  margin-top: 8px;
}

.rv-card-btn {
  margin-inline-start: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444444;
  transition:
    transform  0.48s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease;
  flex-shrink: 0;
}

.rv-card-btn:hover  { background: rgba(0, 0, 0, 0.13); }
.rv-card-btn:active { background: rgba(0, 0, 0, 0.18); }

.rv-card.open .rv-card-btn { transform: rotate(180deg); }

/* ─── TRACKING SECTION ────────────────────────────────────── */
.rv-tracking {
  background: #ffffff;
  padding: 80px 24px 100px;
}

.rv-tracking-inner {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.rv-tracking-icon-wrap {
  display: flex;
  justify-content: center;
}

.rv-tracking-clock {
  width: 88px;
  height: 88px;
  display: block;
}

.rv-tracking-badge {
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: -8px;
  right: -12px;
}

.rv-tracking-title {
  font-family: var(--font-sf);
  font-size: clamp(30px, 8vw, 52px);
  font-weight: 700;
  color: #111111;
  letter-spacing: -1.2px;
  line-height: 1.08;
  text-align: center;
}

[data-lang="ar"] .rv-tracking-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.3;
}

.rv-tracking-desc {
  font-family: var(--font-sf);
  font-size: 15px;
  color: #555555;
  line-height: 1.65;
  text-align: center;
  max-width: 320px;
}

[data-lang="ar"] .rv-tracking-desc {
  font-family: var(--font-sf-ar);
  max-width: 340px;
}

.rv-tracking-img {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  border-radius: 20px;
  margin-top: 8px;
}

/* ─── SCROLL REVEAL ───────────────────────────────────────── */
.rv-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.rv-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card entrance — CSS keyframe, always visible */
@keyframes rvCardIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rv-card-reveal {
  animation: rvCardIn 0.65s var(--ease-out) both;
}

.rv-features-inner .rv-card-reveal:nth-child(3) { animation-delay: 0.05s; }
.rv-features-inner .rv-card-reveal:nth-child(4) { animation-delay: 0.13s; }
.rv-features-inner .rv-card-reveal:nth-child(5) { animation-delay: 0.21s; }
.rv-features-inner .rv-card-reveal:nth-child(6) { animation-delay: 0.29s; }

/* ─── DESKTOP ─────────────────────────────────────────────── */
@media (min-width: 769px) {
  .rv-hero-inner   { padding: 88px 40px 104px; max-width: 680px; }
  .rv-hero-img     { max-width: 420px; margin-bottom: 52px; }
  .rv-hero-title   { font-size: clamp(36px, 4.5vw, 56px); }
  .rv-hero-desc    { font-size: 18px; max-width: 480px; }

  .rv-features     { padding: 68px 40px 32px; }
  .rv-features-inner { max-width: 520px; }
  .rv-section-title { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 28px; }

  .rv-intro-card   { padding: 32px 28px; margin-bottom: 20px; }
  .rv-intro-text   { font-size: 17px; }

  .rv-card         { padding: 48px 36px 28px; margin-bottom: 20px; }
  .rv-icon-main    { width: 160px; height: 160px; }
  .rv-icon-single  { width: 170px; height: 170px; }
  .rv-icon-badge   { width: 64px; height: 64px; bottom: -8px; right: -12px; }
  .rv-card-title   { font-size: 21px; }
  .rv-card-desc    { font-size: 16px; }
  .rv-card-btn     { width: 48px; height: 48px; }

  .rv-tracking     { padding: 100px 40px 120px; }
  .rv-tracking-inner { max-width: 520px; gap: 28px; }
  .rv-tracking-desc { font-size: 16px; max-width: 380px; }
  .rv-tracking-img  { max-width: 440px; }

  .rv-tracking-clock { width: 96px; height: 96px; }
  .rv-tracking-badge { width: 44px; height: 44px; }
}

/* ─── SMALL MOBILE ────────────────────────────────────────── */
@media (max-width: 480px) {
  .rv-hero-inner   { padding: 48px 20px 68px; }
  .rv-hero-img     { width: 90%; }
  .rv-features     { padding: 44px 16px 20px; }
  .rv-features-inner { max-width: 100%; }
  .rv-card         { padding: 36px 20px 20px; border-radius: 26px; }
  .rv-tracking     { padding: 68px 20px 80px; }
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rv-anim-img, .rv-anim-copy, .rv-anim-desc {
    animation: none; opacity: 1; transform: none;
  }
  .rv-reveal        { opacity: 1; transform: none; transition: none; }
  .rv-card-reveal   { animation: none; opacity: 1; transform: none; }
  .rv-card-expand   { transition: none; }
  .rv-card-btn      { transition: background 0.15s; }
}


/* ═══════════════════════════════════════════════════════════
   CUE — REWARDS PAGE  (rw- prefix, scoped)
   ═══════════════════════════════════════════════════════════ */

/* ─── PAGE BASE ───────────────────────────────────────────── */
.page-rewards {
  background: #ffffff;
  color: #111111;
}

/* ─── HERO ────────────────────────────────────────────────── */
.rw-hero {
  background: #ffffff;
  overflow: hidden;
}

.rw-hero-inner {
  max-width: 460px;
  margin: 0 auto;
  padding: 170px 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rw-hero-img {
  width: 52%;
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0 auto 40px;
}

.rw-hero-title {
  font-family: var(--font-sf);
  font-size: clamp(32px, 9vw, 52px);
  font-weight: 700;
  color: #111111;
  letter-spacing: -1.2px;
  line-height: 1.08;
  text-align: center;
  margin-bottom: 16px;
}

[data-lang="ar"] .rw-hero-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.3;
}

.rw-hero-desc {
  font-family: var(--font-sf);
  font-size: 16px;
  color: #555555;
  line-height: 1.65;
  text-align: center;
  max-width: 320px;
}

[data-lang="ar"] .rw-hero-desc {
  font-family: var(--font-sf-ar);
  max-width: 330px;
}

/* ─── HERO ANIMATIONS ─────────────────────────────────────── */
@keyframes rwImgIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rwCopyIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rwDescIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rw-anim-img  { opacity: 0; animation: rwImgIn  0.9s var(--ease-out) 0.06s forwards; }
.rw-anim-copy { opacity: 0; animation: rwCopyIn 0.8s var(--ease-out) 0.32s forwards; }
.rw-anim-desc { opacity: 0; animation: rwDescIn 0.8s var(--ease-out) 0.48s forwards; }

/* ─── FEATURES SECTION ────────────────────────────────────── */
.rw-features {
  background: #e8e8e8;
  padding: 52px 20px 40px;
}

.rw-features-inner {
  max-width: 460px;
  margin: 0 auto;
}

.rw-section-title {
  font-family: var(--font-sf);
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.5px;
  line-height: 1.18;
  text-align: start;
  margin-bottom: 20px;
}

[data-lang="ar"] .rw-section-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.rw-intro-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 24px;
  margin-bottom: 20px;
}

.rw-intro-text {
  font-family: var(--font-sf);
  font-size: 16px;
  color: #333333;
  line-height: 1.65;
  text-align: start;
}

[data-lang="ar"] .rw-intro-text {
  font-family: var(--font-sf-ar);
}

/* ─── REWARD CARDS ────────────────────────────────────────── */
.rw-card {
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rw-card:last-child { margin-bottom: 0; }

/* Gradient card backgrounds */
.rw-card--firststep {
  background: radial-gradient(circle at 50% 18%, #c478d4 0%, #8c3aaa 36%, #571a78 66%, #2c0d46 100%);
}
.rw-card--explorer {
  background: radial-gradient(circle at 50% 18%, #9caab6 0%, #5c6c7a 36%, #2e3e4e 66%, #121e2a 100%);
}
.rw-card--nightowl {
  background: radial-gradient(circle at 50% 18%, #f9df68 0%, #ca9810 36%, #8a6500 66%, #443200 100%);
}
.rw-card--weekendescape {
  background: radial-gradient(circle at 50% 18%, #e04038 0%, #9e1818 36%, #680808 66%, #2c0000 100%);
}

/* Visual area — badge image centered */
.rw-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 24px 24px;
  min-height: 260px;
}

.rw-badge-img {
  width: 210px;
  max-width: 70%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 52px rgba(0, 0, 0, 0.55));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.rw-card.open .rw-badge-img {
  transform: scale(1.05);
}

/* Button bar */
.rw-card-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px 20px;
}

.rw-card-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(180, 180, 180, 0.28);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.88);
  flex-shrink: 0;
  transition:
    transform  0.48s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease;
}

.rw-card-btn:hover  { background: rgba(180, 180, 180, 0.42); }
.rw-card-btn:active { background: rgba(180, 180, 180, 0.55); }

.rw-card.open .rw-card-btn { transform: rotate(180deg); }

/* Expandable content */
.rw-card-expand {
  height: 0;
  overflow: hidden;
  transition: height 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.rw-card-expand-inner {
  background: rgba(0, 0, 0, 0.30);
  padding: 20px 24px 28px;
}

.rw-card-title {
  font-family: var(--font-sf);
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1.2;
  text-align: start;
  margin-bottom: 10px;
}

[data-lang="ar"] .rw-card-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.rw-card-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 14px;
}

.rw-card-desc {
  font-family: var(--font-sf);
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  text-align: start;
}

[data-lang="ar"] .rw-card-desc {
  font-family: var(--font-sf-ar);
}

/* ─── ENDING SECTION ──────────────────────────────────────── */
.rw-ending {
  background: #ffffff;
  padding: 80px 24px 100px;
}

.rw-ending-inner {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.rw-ending-title {
  font-family: var(--font-sf);
  font-size: clamp(28px, 8vw, 48px);
  font-weight: 700;
  color: #111111;
  letter-spacing: -1px;
  line-height: 1.1;
  text-align: center;
}

[data-lang="ar"] .rw-ending-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.3;
}

.rw-ending-desc {
  font-family: var(--font-sf);
  font-size: 15px;
  color: #555555;
  line-height: 1.65;
  text-align: center;
  max-width: 300px;
}

[data-lang="ar"] .rw-ending-desc {
  font-family: var(--font-sf-ar);
  max-width: 340px;
}

/* ─── SCROLL REVEAL ───────────────────────────────────────── */
.rw-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.rw-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card entrance — CSS keyframe, no IO dependency */
@keyframes rwCardIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rw-card-reveal {
  animation: rwCardIn 0.65s var(--ease-out) both;
}

.rw-features-inner .rw-card-reveal:nth-child(3) { animation-delay: 0.05s; }
.rw-features-inner .rw-card-reveal:nth-child(4) { animation-delay: 0.13s; }
.rw-features-inner .rw-card-reveal:nth-child(5) { animation-delay: 0.21s; }
.rw-features-inner .rw-card-reveal:nth-child(6) { animation-delay: 0.29s; }

/* ─── DESKTOP ─────────────────────────────────────────────── */
@media (min-width: 769px) {
  .rw-hero-inner    { padding: 88px 40px 104px; max-width: 680px; }
  .rw-hero-img      { max-width: 380px; width: 54%; margin-bottom: 52px; }
  .rw-hero-title    { font-size: clamp(36px, 4.5vw, 58px); }
  .rw-hero-desc     { font-size: 18px; max-width: 480px; }

  .rw-features      { padding: 68px 40px 48px; }
  .rw-features-inner { max-width: 520px; }
  .rw-section-title { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 28px; }

  .rw-intro-card    { padding: 32px 28px; margin-bottom: 24px; }
  .rw-intro-text    { font-size: 17px; }

  .rw-card-visual   { min-height: 320px; padding: 56px 32px 28px; }
  .rw-badge-img     { width: 260px; max-width: 65%; }
  .rw-card-bar      { padding: 0 24px 24px; }
  .rw-card-btn      { width: 48px; height: 48px; }
  .rw-card-expand-inner { padding: 24px 32px 32px; }
  .rw-card-title    { font-size: 22px; }
  .rw-card-desc     { font-size: 16px; }

  .rw-ending        { padding: 100px 40px 120px; }
  .rw-ending-inner  { max-width: 520px; gap: 20px; }
  .rw-ending-desc   { font-size: 16px; max-width: 380px; }
}

/* ─── SMALL MOBILE ────────────────────────────────────────── */
@media (max-width: 480px) {
  .rw-hero-inner    { padding: 170px 20px 64px; }
  .rw-hero-img      { width: 58%; }
  .rw-features      { padding: 44px 16px 24px; }
  .rw-features-inner { max-width: 100%; }
  .rw-card-visual   { min-height: 240px; }
  .rw-badge-img     { width: 180px; }
  .rw-ending        { padding: 68px 20px 80px; }
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rw-anim-img, .rw-anim-copy, .rw-anim-desc {
    animation: none; opacity: 1; transform: none;
  }
  .rw-reveal        { opacity: 1; transform: none; transition: none; }
  .rw-card-reveal   { animation: none; opacity: 1; transform: none; }
  .rw-card-expand   { transition: none; }
  .rw-card-btn      { transition: background 0.15s; }
  .rw-badge-img     { transition: none; }
}


/* ════════════════════════════════════════════════════════════
   DASHBOARD  (db-)
   ════════════════════════════════════════════════════════════ */

/* ─── Page shell ──────────────────────────────────────────── */
.page-dashboard {
  background: #ffffff;
  color: #0a0a0a;
}

/* ─── HERO ────────────────────────────────────────────────── */
.db-hero {
  background: #ffffff;
  overflow: hidden;
}

.db-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 160px 24px 72px;
  max-width: 560px;
  margin: 0 auto;
}

.db-hero-img {
  width: 92%;
  max-width: 480px;
  border-radius: 20px;
  margin-bottom: 44px;
  object-fit: contain;
}

.db-hero-title {
  font-family: var(--font-sf);
  font-size: clamp(32px, 7vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #0a0a0a;
  margin: 0 0 18px;
}

[data-lang="ar"] .db-hero-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.3;
}

.db-hero-desc {
  font-family: var(--font-sf);
  font-size: 17px;
  line-height: 1.65;
  color: #555;
  margin: 0 0 36px;
  max-width: 400px;
}

[data-lang="ar"] .db-hero-desc {
  font-family: var(--font-sf-ar);
}

.db-cta-btn {
  display: inline-block;
  background: #0a0a0a;
  color: #ffffff;
  font-family: var(--font-sf);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 16px 52px;
  border-radius: 100px;
  text-decoration: none;
  transition: opacity 0.18s;
}

.db-cta-btn:hover { opacity: 0.82; }

/* Hero entrance animations */
@keyframes dbImgIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dbCopyIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.db-anim-img  { animation: dbImgIn  0.8s  var(--ease-out) 0.05s both; }
.db-anim-copy { animation: dbCopyIn 0.65s var(--ease-out) 0.28s both; }
.db-anim-desc { animation: dbCopyIn 0.65s var(--ease-out) 0.40s both; }
.db-anim-cta  { animation: dbCopyIn 0.65s var(--ease-out) 0.52s both; }

/* ─── FEATURES (overview) ─────────────────────────────────── */
.db-features {
  background: #e8e8ea;
  padding: 64px 24px 0;
}

.db-features-inner {
  max-width: 480px;
  margin: 0 auto;
}

.db-section-title {
  font-family: var(--font-sf);
  font-size: clamp(24px, 5.5vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #0a0a0a;
  margin: 0 0 24px;
}

[data-lang="ar"] .db-section-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.35;
}

.db-intro-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 20px;
}

.db-intro-text {
  font-family: var(--font-sf);
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin: 0;
}

[data-lang="ar"] .db-intro-text {
  font-family: var(--font-sf-ar);
}

/* ─── ROLES SECTION ───────────────────────────────────────── */
.db-roles {
  background: #e8e8ea;
  padding: 20px 24px 32px;
}

.db-roles-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── Role cards ──────────────────────────────────────────── */
.db-card {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.18s;
}

.db-card:hover { background: #fafafa; }

/* Entrance animation */
@keyframes dbCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.db-card-reveal { animation: dbCardIn 0.6s var(--ease-out) both; }
.db-roles-inner .db-card-reveal:nth-child(1) { animation-delay: 0.04s; }
.db-roles-inner .db-card-reveal:nth-child(2) { animation-delay: 0.12s; }
.db-roles-inner .db-card-reveal:nth-child(3) { animation-delay: 0.20s; }

.db-card-icon-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 20px;
}

.db-role-icon {
  width: 80px;
  height: 80px;
  color: #0a0a0a;
}

.db-card-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 22px;
  gap: 12px;
}

.db-card-label {
  font-family: var(--font-sf);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 0;
}

[data-lang="ar"] .db-card-label {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.db-card-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #e8e8ea;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, transform 0.32s var(--ease-out);
}

.db-card-btn:hover { background: #d8d8da; }
.db-card.open .db-card-btn { transform: rotate(180deg); }

/* Expand container */
.db-card-expand {
  overflow: hidden;
  transition: height 0.38s var(--ease-out);
}

.db-card-expand-inner {
  padding: 0 20px 24px;
}

.db-card-short {
  font-family: var(--font-sf);
  font-size: 14px;
  line-height: 1.6;
  color: #777;
  margin: 0 0 16px;
}

[data-lang="ar"] .db-card-short {
  font-family: var(--font-sf-ar);
}

.db-cap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.db-cap-list li {
  font-family: var(--font-sf);
  font-size: 14px;
  color: #333;
  padding-inline-start: 18px;
  position: relative;
}

.db-cap-list li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: #bbb;
}

[data-lang="ar"] .db-cap-list li {
  font-family: var(--font-sf-ar);
}

/* ─── LOWER SECTION ───────────────────────────────────────── */
.db-lower {
  background: #e8e8ea;
  padding: 20px 24px 96px;
}

.db-lower-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* ─── Status card ─────────────────────────────────────────── */
.db-status-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 24px 32px;
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.db-status-card[data-status="available"] { background: #d6f5da; }
.db-status-card[data-status="busy"]      { background: #fef3d0; }
.db-status-card[data-status="full"]      { background: #fde8e8; }

.db-status-title {
  font-family: var(--font-sf);
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: #0a0a0a;
  margin: 0 0 24px;
}

[data-lang="ar"] .db-status-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.35;
}

.db-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.db-status-pill {
  font-family: var(--font-sf);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 9px 22px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.16,1,0.3,1),
              color 0.3s cubic-bezier(0.16,1,0.3,1),
              transform 0.18s,
              box-shadow 0.3s cubic-bezier(0.16,1,0.3,1);
}

.db-status-pill:hover { transform: translateY(-1px); }

/* Muted default state */
.db-pill--available { background: #b2d8b4; color: #1a5e20; }
.db-pill--busy      { background: #f5d78a; color: #7a4e00; }
.db-pill--full      { background: #f5b8b8; color: #8a1010; }

/* Active (selected) state — full color */
.db-pill--available.active {
  background: #22c55e;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.40);
}
.db-pill--busy.active {
  background: #F5A623;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.40);
}
.db-pill--full.active {
  background: #F20538;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(242, 5, 56, 0.38);
}

[data-lang="ar"] .db-status-pill {
  font-family: var(--font-sf-ar);
}

.db-status-desc {
  font-family: var(--font-sf);
  font-size: 15px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

[data-lang="ar"] .db-status-desc {
  font-family: var(--font-sf-ar);
}

/* ─── Info blocks ─────────────────────────────────────────── */
.db-info-block {}

.db-info-title {
  font-family: var(--font-sf);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #0a0a0a;
  margin: 0 0 18px;
}

[data-lang="ar"] .db-info-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.35;
}

.db-info-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
}

.db-info-img {
  width: 80%;
  display: block;
  object-fit: cover;
  margin: 0 auto;
}

.db-info-desc {
  font-family: var(--font-sf);
  font-size: 15px;
  line-height: 1.65;
  color: #555;
  margin: 0;
  padding: 18px 20px 24px;
}

[data-lang="ar"] .db-info-desc {
  font-family: var(--font-sf-ar);
}

/* ─── Branch cards (inside the branches info-card) ────────── */
.db-branch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 0;
}

.db-branch-card {
  border-radius: 16px;
  padding: 20px 18px 16px;
  user-select: none;
  pointer-events: none;
}

.db-branch-card--light {
  background: #f0f0f2;
}

.db-branch-card--dark {
  background: #0a0a0a;
  color: #ffffff;
}

.db-branch-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.db-branch-name {
  font-family: var(--font-sf);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0 0 2px;
}

.db-branch-location {
  font-family: var(--font-sf);
  font-size: 13px;
  color: inherit;
  opacity: 0.6;
  margin: 0;
}

.db-branch-pill {
  font-family: var(--font-sf);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 100px;
  white-space: nowrap;
}

.db-branch-pill--available {
  background: #b2d8b4;
  color: #1a5e20;
}

.db-branch-pill--busy {
  background: #f5d78a;
  color: #7a4e00;
}

.db-branch-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}

.db-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.db-stat-num {
  font-family: var(--font-sf);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit;
  line-height: 1;
}

.db-stat-label {
  font-family: var(--font-sf);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.5;
}

.db-branch-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  font-family: var(--font-sf);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: opacity 0.18s;
}

.db-branch-btn:hover { opacity: 0.8; }

.db-branch-card--light .db-branch-btn {
  background: #e0e0e2;
  color: #0a0a0a;
}

.db-branch-card--dark .db-branch-btn {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.3);
}

/* ─── Scroll reveal ───────────────────────────────────────── */
.db-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.db-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── DESKTOP ─────────────────────────────────────────────── */
@media (min-width: 769px) {
  .db-hero-inner  { padding: 108px 40px 96px; max-width: 720px; }
  .db-hero-img    { max-width: 560px; width: 74%; border-radius: 24px; margin-bottom: 56px; }
  .db-hero-title  { font-size: clamp(38px, 4.8vw, 64px); }
  .db-hero-desc   { font-size: 18px; max-width: 500px; }
  .db-cta-btn     { font-size: 17px; padding: 18px 56px; }

  .db-features    { padding: 80px 40px 0; }
  .db-features-inner { max-width: 560px; }
  .db-section-title  { font-size: clamp(28px, 3.5vw, 40px); }
  .db-intro-card  { padding: 28px 24px; }
  .db-intro-text  { font-size: 16px; }

  .db-roles       { padding: 24px 40px 40px; }
  .db-roles-inner { max-width: 560px; gap: 14px; }
  .db-card-icon-area { padding: 52px 28px 20px; }
  .db-role-icon   { width: 88px; height: 88px; }
  .db-card-bar    { padding: 0 24px 24px; }
  .db-card-label  { font-size: 20px; }
  .db-card-btn    { width: 44px; height: 44px; }
  .db-card-expand-inner { padding: 0 24px 28px; }
  .db-card-short  { font-size: 15px; }
  .db-cap-list li { font-size: 15px; }

  .db-lower       { padding: 24px 40px 112px; }
  .db-lower-inner { max-width: 560px; gap: 80px; }
  .db-status-card { padding: 40px 32px; border-radius: 28px; }
  .db-status-title { font-size: clamp(22px, 3vw, 30px); }
  .db-status-pill { font-size: 15px; padding: 11px 26px; }
  .db-status-desc { font-size: 16px; }
  .db-info-title  { font-size: clamp(24px, 3vw, 34px); }
  .db-info-desc   { font-size: 16px; padding: 22px 24px 28px; }
  .db-branch-list { padding: 20px 20px 0; }
  .db-branch-stats { gap: 6px; }
  .db-stat-num    { font-size: 20px; }
}

/* ─── SMALL MOBILE ────────────────────────────────────────── */
@media (max-width: 480px) {
  .db-hero-inner  { padding: 170px 20px 60px; }
  .db-hero-img    { width: 94%; }
  .db-features    { padding: 52px 16px 0; }
  .db-roles       { padding: 16px 16px 24px; }
  .db-lower       { padding: 16px 16px 72px; }
  .db-lower-inner { gap: 48px; }
  .db-status-card { padding: 24px 18px 24px; }
  .db-branch-stats { gap: 2px; }
  .db-stat-num    { font-size: 16px; }
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db-anim-img, .db-anim-copy, .db-anim-desc, .db-anim-cta {
    animation: none; opacity: 1; transform: none;
  }
  .db-reveal     { opacity: 1; transform: none; transition: none; }
  .db-card-reveal { animation: none; opacity: 1; }
  .db-card-expand { transition: none; }
  .db-card-btn   { transition: background 0.15s; }
}


/* ════════════════════════════════════════════════════════════
   PRIVACY POLICY  (pp-)
   ════════════════════════════════════════════════════════════ */

.page-privacy {
  background: #ffffff;
  color: #0a0a0a;
}

/* ─── Shared inner width ──────────────────────────────────── */
.pp-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Hero ────────────────────────────────────────────────── */
.pp-hero {
  padding: 140px 0 56px;
  border-bottom: 1px solid #e8e8ea;
}

.pp-eyebrow {
  font-family: var(--font-sf);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 16px;
}

[data-lang="ar"] .pp-eyebrow {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.pp-title {
  font-family: var(--font-sf);
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: #0a0a0a;
  margin: 0 0 20px;
}

[data-lang="ar"] .pp-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.25;
}

.pp-lead {
  font-family: var(--font-sf);
  font-size: 17px;
  line-height: 1.7;
  color: #555;
  margin: 0;
  max-width: 560px;
}

[data-lang="ar"] .pp-lead {
  font-family: var(--font-sf-ar);
}

/* ─── Body (all sections) ─────────────────────────────────── */
.pp-body {
  padding: 16px 0 96px;
}

/* ─── Individual section ──────────────────────────────────── */
.pp-section {
  padding: 44px 0 0;
}

.pp-section--contact {
  padding-bottom: 8px;
}

.pp-section-title {
  font-family: var(--font-sf);
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0a0a0a;
  margin: 0 0 16px;
}

[data-lang="ar"] .pp-section-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.pp-text {
  font-family: var(--font-sf);
  font-size: 16px;
  line-height: 1.75;
  color: #444;
  margin: 0 0 14px;
}

[data-lang="ar"] .pp-text {
  font-family: var(--font-sf-ar);
}

.pp-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-list li {
  font-family: var(--font-sf);
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  padding-inline-start: 20px;
  position: relative;
}

.pp-list li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: #ccc;
}

[data-lang="ar"] .pp-list li {
  font-family: var(--font-sf-ar);
}

/* ─── Divider ─────────────────────────────────────────────── */
.pp-rule {
  border: none;
  border-top: 1px solid #e8e8ea;
  margin: 44px 0 0;
}

/* ─── Email link ──────────────────────────────────────────── */
.pp-email {
  display: inline-block;
  font-family: var(--font-sf);
  font-size: 16px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  margin-top: 4px;
  transition: opacity 0.18s;
}

.pp-email:hover { opacity: 0.75; }

/* ─── DESKTOP ─────────────────────────────────────────────── */
@media (min-width: 769px) {
  .pp-hero     { padding: 152px 0 72px; }
  .pp-inner    { padding: 0 40px; }
  .pp-lead     { font-size: 18px; }
  .pp-body     { padding: 16px 0 120px; }
  .pp-section  { padding-top: 56px; }
  .pp-rule     { margin-top: 56px; }
  .pp-text     { font-size: 17px; }
  .pp-list li  { font-size: 17px; }
}

/* ─── SMALL MOBILE ────────────────────────────────────────── */
@media (max-width: 480px) {
  .pp-hero    { padding: 120px 0 44px; }
  .pp-body    { padding: 8px 0 72px; }
  .pp-section { padding-top: 36px; }
  .pp-rule    { margin-top: 36px; }
}


/* ════════════════════════════════════════════════════════════
   CONTACT  (ct-)
   ════════════════════════════════════════════════════════════ */

.page-contact {
  background: #ffffff;
  color: #0a0a0a;
}

/* ─── Shared inner ────────────────────────────────────────── */
.ct-inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 24px;
}

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

/* ─── 1. HERO ─────────────────────────────────────────────── */
.ct-hero {
  background: #000000;
  padding: 160px 0 72px;
}

.ct-hero-inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.ct-hero-title {
  font-family: var(--font-sf);
  font-size: clamp(42px, 10vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: #ffffff;
  margin: 0 0 22px;
}

[data-lang="ar"] .ct-hero-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.2;
}

.ct-hero-desc {
  font-family: var(--font-sf);
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.50);
  margin: 0;
  max-width: 400px;
  margin-inline: auto;
}

[data-lang="ar"] .ct-hero-desc {
  font-family: var(--font-sf-ar);
}

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

.ct-anim-title { animation: ctTitleIn 0.75s var(--ease-out) 0.05s both; }
.ct-anim-desc  { animation: ctTitleIn 0.65s var(--ease-out) 0.22s both; }

/* ─── 2. CONTACT METHODS ──────────────────────────────────── */
.ct-methods {
  background: #111111;
  padding: 56px 0 64px;
}

.ct-email-card {
  background: #1c1c1c;
  border-radius: 28px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

[data-lang="ar"] .ct-email-card { align-items: flex-end; }

.ct-email-label {
  font-family: var(--font-sf);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin: 0 0 16px;
}

[data-lang="ar"] .ct-email-label {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.ct-email-addr {
  font-family: var(--font-sf);
  font-size: clamp(18px, 4.5vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 20px;
  word-break: break-all;
  transition: opacity 0.18s;
}

.ct-email-addr:hover { opacity: 0.72; }

.ct-email-desc {
  font-family: var(--font-sf);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.48);
  margin: 0 0 28px;
}

[data-lang="ar"] .ct-email-desc {
  font-family: var(--font-sf-ar);
  text-align: end;
}

.ct-email-btn {
  display: inline-flex;
  align-items: center;
  background: var(--red);
  color: #ffffff;
  font-family: var(--font-sf);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 13px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: opacity 0.18s, transform 0.18s;
}

.ct-email-btn:hover { opacity: 0.88; transform: translateY(-1px); }

[data-lang="ar"] .ct-email-btn { font-family: var(--font-sf-ar); }

.ct-email-response {
  font-family: var(--font-sf);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,0.32);
  margin: 20px 0 0;
}

[data-lang="ar"] .ct-email-response {
  font-family: var(--font-sf-ar);
  text-align: end;
}

/* ─── 3. RESTAURANT PARTNERSHIPS ─────────────────────────── */
.ct-partners {
  background: #111111;
  padding: 56px 0 64px;
}

.ct-partner-card {
  background: #1c1c1c;
  border-radius: 28px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

[data-lang="ar"] .ct-partner-card { align-items: flex-end; }

.ct-partner-icon {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  margin-bottom: 20px;
}

.ct-partner-title {
  font-family: var(--font-sf);
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #ffffff;
  margin: 0 0 14px;
}

[data-lang="ar"] .ct-partner-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.3;
  text-align: end;
}

.ct-partner-desc {
  font-family: var(--font-sf);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.48);
  margin: 0 0 28px;
}

[data-lang="ar"] .ct-partner-desc {
  font-family: var(--font-sf-ar);
  text-align: end;
}

.ct-partner-btn {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: #0a0a0a;
  font-family: var(--font-sf);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 13px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: opacity 0.18s, transform 0.18s;
}

.ct-partner-btn:hover { opacity: 0.82; transform: translateY(-1px); }

[data-lang="ar"] .ct-partner-btn { font-family: var(--font-sf-ar); }


/* ─── 6. FOLLOW CUE ──────────────────────────────────────── */
.ct-social {
  background: #111111;
  padding: 64px 0 72px;
}

.ct-social-title {
  font-family: var(--font-sf);
  font-size: clamp(22px, 5.5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 12px;
  text-align: center;
}

[data-lang="ar"] .ct-social-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
}

.ct-social-desc {
  font-family: var(--font-sf);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.45);
  margin: 0 0 32px;
  text-align: center;
}

[data-lang="ar"] .ct-social-desc { font-family: var(--font-sf-ar); }

.ct-social-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ct-social-card {
  background: #1c1c1c;
  border-radius: 20px;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}

.ct-social-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.ct-social-icon {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  transition: background 0.18s;
}

.ct-social-card:hover .ct-social-icon { background: rgba(255,255,255,0.13); }

.ct-social-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.ct-social-platform {
  font-family: var(--font-sf);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.ct-social-handle {
  font-family: var(--font-sf);
  font-size: 13px;
  color: rgba(255,255,255,0.40);
  letter-spacing: -0.01em;
}

.ct-social-arrow {
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out), color 0.2s;
}

.ct-social-card:hover .ct-social-arrow {
  transform: translateX(3px);
  color: rgba(255,255,255,0.65);
}

[dir="rtl"] .ct-social-card:hover .ct-social-arrow { transform: translateX(-3px); }

/* ─── 7. FINAL STATEMENT ──────────────────────────────────── */
.ct-final {
  background: #0a0a0a;
  padding: 96px 0 112px;
}

.ct-final-inner {
  text-align: center;
}

.ct-final-title {
  font-family: var(--font-sf);
  font-size: clamp(36px, 9vw, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #ffffff;
  margin: 0 0 20px;
}

[data-lang="ar"] .ct-final-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.2;
}

.ct-final-desc {
  font-family: var(--font-sf);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.45);
  margin: 0;
  max-width: 360px;
  margin-inline: auto;
}

[data-lang="ar"] .ct-final-desc { font-family: var(--font-sf-ar); }

/* ─── DESKTOP ─────────────────────────────────────────────── */
@media (min-width: 769px) {
  .ct-inner        { max-width: 600px; padding: 0 40px; }
  .ct-hero         { padding: 172px 0 88px; }
  .ct-hero-inner   { max-width: 600px; padding: 0 40px; }
  .ct-hero-title   { font-size: clamp(52px, 7vw, 88px); }
  .ct-hero-desc    { font-size: 19px; }

  .ct-methods      { padding: 72px 0 80px; }
  .ct-email-card   { padding: 44px 36px 40px; border-radius: 32px; }
  .ct-email-addr   { font-size: clamp(20px, 2.8vw, 30px); }

  .ct-partners     { padding: 72px 0 80px; }
  .ct-partner-card { padding: 44px 36px 40px; border-radius: 32px; }

  .ct-social       { padding: 80px 0 88px; }
  .ct-social-cards { flex-direction: row; gap: 16px; }
  .ct-social-card  { flex: 1; }

  .ct-final        { padding: 120px 0 140px; }
  .ct-final-title  { font-size: clamp(44px, 6vw, 80px); }
  .ct-final-desc   { font-size: 18px; max-width: 420px; }
}

/* ─── SMALL MOBILE ────────────────────────────────────────── */
@media (max-width: 480px) {
  .ct-hero         { padding: 140px 0 56px; }
  .ct-hero-inner   { padding: 0 20px; }
  .ct-inner        { padding: 0 16px; }
  .ct-email-card   { padding: 28px 22px 26px; border-radius: 22px; }
  .ct-partner-card { padding: 28px 22px 26px; border-radius: 22px; }
  .ct-social       { padding: 52px 0 60px; }
  .ct-final        { padding: 72px 0 88px; }
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ct-anim-title, .ct-anim-desc { animation: none; opacity: 1; transform: none; }
  .ct-reveal { opacity: 1; transform: none; transition: none; }
  .ct-social-card:hover { transform: none; }
  .ct-email-btn:hover, .ct-partner-btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   CAREERS PAGE  (cr-)
═══════════════════════════════════════════════════════════ */

.page-careers { background: #ffffff; }

/* ─── INNER WRAPPER ──────────────────────────────────────── */
.cr-inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.cr-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.cr-reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── 1. HERO ─────────────────────────────────────────────── */
.cr-hero {
  background: #ffffff;
  padding: 160px 0 80px;
}

.cr-hero-inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.cr-hero-title {
  font-family: var(--font-sf);
  font-size: clamp(44px, 11vw, 80px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: #0a0a0a;
  margin: 0 0 28px;
}

[data-lang="ar"] .cr-hero-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.2;
}

.cr-hero-desc {
  font-family: var(--font-sf);
  font-size: 17px;
  line-height: 1.78;
  color: #666;
  margin: 0;
  max-width: 480px;
  margin-inline: auto;
}

[data-lang="ar"] .cr-hero-desc { font-family: var(--font-sf-ar); }

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

.cr-anim-title { animation: crTitleIn 0.75s var(--ease-out) 0.05s both; }
.cr-anim-desc  { animation: crTitleIn 0.65s var(--ease-out) 0.22s both; }

/* ─── 2. FUTURE ROLES ─────────────────────────────────────── */
.cr-roles {
  background: #f5f5f7;
  padding: 80px 0 88px;
}

.cr-section-title {
  font-family: var(--font-sf);
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #0a0a0a;
  margin: 0 0 12px;
  text-align: center;
}

[data-lang="ar"] .cr-section-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.3;
}

.cr-section-desc {
  font-family: var(--font-sf);
  font-size: 16px;
  line-height: 1.65;
  color: #888;
  text-align: center;
  max-width: 340px;
  margin: 0 auto 44px;
}

[data-lang="ar"] .cr-section-desc { font-family: var(--font-sf-ar); }

.cr-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.cr-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 30px 26px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.055), 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}

.cr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 44px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
}

.cr-card-icon {
  width: 44px;
  height: 44px;
  background: #f0f0f2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  margin-bottom: 16px;
}

.cr-card-caption {
  display: block;
  font-family: var(--font-sf);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  opacity: 0.70;
  margin-bottom: 10px;
}

[data-lang="ar"] .cr-card-caption {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  text-align: end;
}

.cr-card-title {
  font-family: var(--font-sf);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 0 0 8px;
}

[data-lang="ar"] .cr-card-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  text-align: end;
}

.cr-card-desc {
  font-family: var(--font-sf);
  font-size: 15px;
  line-height: 1.62;
  color: #888;
  margin: 0;
}

[data-lang="ar"] .cr-card-desc {
  font-family: var(--font-sf-ar);
  text-align: end;
}

[data-lang="ar"] .cr-card-icon { margin-inline-start: auto; }

/* ─── 3. NO OPENINGS ──────────────────────────────────────── */
.cr-empty {
  background: #ffffff;
  padding: 100px 0 120px;
}

.cr-empty-inner { text-align: center; }

.cr-empty-title {
  font-family: var(--font-sf);
  font-size: clamp(22px, 5.5vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #0a0a0a;
  margin: 0 0 16px;
}

[data-lang="ar"] .cr-empty-title {
  font-family: var(--font-sf-ar);
  letter-spacing: 0;
  line-height: 1.3;
}

.cr-empty-desc {
  font-family: var(--font-sf);
  font-size: 16px;
  line-height: 1.7;
  color: #777;
  margin: 0 auto 24px;
  max-width: 380px;
}

[data-lang="ar"] .cr-empty-desc { font-family: var(--font-sf-ar); }

.cr-empty-note {
  display: block;
  font-family: var(--font-sf);
  font-size: 13px;
  color: #c0c0c0;
}

[data-lang="ar"] .cr-empty-note { font-family: var(--font-sf-ar); }

/* ─── DESKTOP ─────────────────────────────────────────────── */
@media (min-width: 769px) {
  .cr-inner          { max-width: 660px; padding: 0 40px; }
  .cr-hero           { padding: 180px 0 96px; }
  .cr-hero-inner     { max-width: 680px; padding: 0 40px; }
  .cr-hero-title     { font-size: clamp(56px, 7.5vw, 96px); }
  .cr-hero-desc      { font-size: 19px; }

  .cr-roles          { padding: 96px 0 104px; }
  .cr-cards          { grid-template-columns: 1fr 1fr; gap: 18px; }

  .cr-empty          { padding: 120px 0 140px; }
  .cr-empty-title    { font-size: clamp(24px, 3.2vw, 40px); }
  .cr-empty-desc     { font-size: 17px; max-width: 420px; }
}

/* ─── SMALL MOBILE ────────────────────────────────────────── */
@media (max-width: 480px) {
  .cr-hero           { padding: 140px 0 56px; }
  .cr-hero-inner     { padding: 0 20px; }
  .cr-inner          { padding: 0 16px; }
  .cr-card           { padding: 24px 20px; border-radius: 20px; }
  .cr-empty          { padding: 72px 0 88px; }
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cr-anim-title, .cr-anim-desc { animation: none; opacity: 1; transform: none; }
  .cr-reveal { opacity: 1; transform: none; transition: none; }
  .cr-card:hover { transform: none; }
}