/* ============ MANJOOD Design Tokens ============ */
:root {
  --mj-red: #da281c;
  --mj-red-100: #f0908a;
  --mj-red-300: #991c14;
  --mj-red-a10: #da281c1a;
  --mj-orange: #ff9e1b;
  --mj-orange-100: #ffce8d;
  --mj-orange-300: #c57100;
  --mj-orange-a10: #ff9e1b1a;
  --mj-ink: #333333;
  --mj-ink-a10: #3333331a;
  --mj-gray-900: #4a4a4a;
  --mj-gray-800: #606060;
  --mj-gray-700: #777777;
  --mj-gray-500: #a4a4a4;
  --mj-gray-300: #d2d2d2;
  --mj-gray-200: #e8e8e8;
  --mj-white: #ffffff;

  --mj-cream: #faf6ef;
  --mj-warmgray: #f5f4f2;
  --mj-redtint: #fbefee;
  --mj-orangetint: #fff7ea;
  --mj-dark: #2e2e2e;
  --mj-maroon: #2b1d1c;

  --mj-font-ar: 'DIN Next LT Arabic', 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --mj-font-en: 'DIN Next', 'Barlow', 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --mj-ease: cubic-bezier(0.16, 1, 0.32, 1);
}

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
body {
  font-family: var(--mj-font-ar);
  background: var(--mj-white);
  color: var(--mj-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="en"] body { font-family: var(--mj-font-en); }
::selection { background: var(--mj-red); color: var(--mj-white); }

/* Utilities */
.text-red { color: var(--mj-red); }
.text-red-soft { color: var(--mj-red-100); }
.text-orange { color: var(--mj-orange); }
.text-ink { color: var(--mj-ink); }
.text-gray-brand { color: var(--mj-gray-700); }
.bg-red { background-color: var(--mj-red); }
.bg-orange { background-color: var(--mj-orange); }
.bg-ink { background-color: var(--mj-ink); }
.bg-cream { background-color: var(--mj-cream); }
.bg-warmgray { background-color: var(--mj-warmgray); }
.bg-redtint { background-color: var(--mj-redtint); }
.bg-orangetint { background-color: var(--mj-orangetint); }
.bg-dark { background-color: var(--mj-dark); }
.bg-maroon { background-color: var(--mj-maroon); }

/* Typography */
.h-display {
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.14;
  letter-spacing: -0.01em;
}
html[lang="en"] .h-display { letter-spacing: -0.022em; }
.h-sec {
  font-weight: 800;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.h-card {
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.45;
}
.b-lead {
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.75;
}
.b-body {
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.85;
}
.eyebrow {
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  letter-spacing: 0.01em;
}
html[lang="en"] .eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hairline { background: var(--mj-ink-a10); height: 1px; }

/* Keyframes */
@keyframes mj-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes mj-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20px, 14px) scale(1.05); }
}
@keyframes mj-pulse-dot {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}
@keyframes mj-road {
  to { background-position-x: 240px; }
}
@keyframes mj-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.anim-float { animation: mj-float 7s ease-in-out infinite; }
.anim-drift { animation: mj-drift 14s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .anim-float, .anim-drift { animation: none; }
}

/* Phone mockup */
.phone-frame {
  position: relative;
  width: 232px;
  aspect-ratio: 9 / 19;
  border-radius: 40px;
  background: var(--mj-ink);
  padding: 9px;
  box-shadow:
    0 0 0 1px #ffffff14 inset,
    0 32px 64px -28px rgba(51, 51, 51, 0.35);
}
@media (max-width: 640px) {
  .phone-frame { width: 196px; border-radius: 34px; padding: 8px; }
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #fff;
}
@media (max-width: 640px) {
  .phone-screen { border-radius: 27px; }
}
.phone-notch {
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 19px;
  border-radius: 999px;
  background: var(--mj-ink);
  z-index: 20;
}
@media (max-width: 640px) {
  .phone-notch { top: 14px; width: 62px; height: 16px; }
}

/* Header scrolled state */
#site-header.scrolled {
  background: rgba(255,255,255,0.86) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 12px 40px -20px rgba(51,51,51,0.22);
}

/* Store badge */
.store-badge {
  display: inline-flex;
  height: 50px;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1rem;
  padding: 0 1.25rem;
  color: #fff;
  transition: transform 0.3s var(--mj-ease);
}
.store-badge:hover { transform: translateY(-2px); }
.store-badge.apple { background: var(--mj-orange); box-shadow: 0 14px 30px -18px rgba(255,158,27,0.5); }
.store-badge.play { background: var(--mj-red); box-shadow: 0 14px 30px -18px rgba(218,40,28,0.5); }
.store-badge.ghost {
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset;
  color: #fff;
}
.store-badge.ghost:hover { background: rgba(255,255,255,0.2); }

/* Marquee */
.marquee-track {
  display: flex;
  width: max-content;
  gap: 4rem;
  white-space: nowrap;
  animation: mj-marquee 26s linear infinite;
}

/* Form inputs */
.landing-input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--mj-ink-a10);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--mj-ink);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.landing-input:focus {
  outline: none;
  border-color: var(--mj-red);
  box-shadow: 0 0 0 3px var(--mj-red-a10);
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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