/* ================================================================
 * Yalla Market Landing — Base: variables, reset, utilities, keyframes
 * ================================================================ */
:root {
  --primary:      #FF6A00;
  --accent:       #FFA301;
  --dark:         #2C1C0F;
  --primary-dark: #D95A00;
  --txt:          #1a1a2e;
  --muted:        #666;
  --border:       rgba(0,0,0,.08);
  --font-arabic:  'Cairo', 'Tahoma', sans-serif;
}

/* Reset */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--txt); background:#fff; line-height:1.6; overflow-x:hidden;
}
[dir="rtl"] body,
[dir="rtl"] { font-family: var(--font-arabic); }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button { font-family:inherit; }

/* Layout */
.container { max-width:1120px; margin:0 auto; padding:0 24px; }

/* Section headers */
.section-label {
  text-align:center; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:2px;
  color:var(--primary); margin-bottom:12px;
}
.section-title {
  text-align:center; font-size:clamp(26px,4vw,40px);
  font-weight:800; color:var(--txt); margin-bottom:16px;
}
.section-subtitle {
  text-align:center; font-size:16px; color:var(--muted);
  max-width:560px; margin:0 auto 60px; line-height:1.7;
}

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ── Keyframes ── */
@keyframes fadeInUp    { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }
@keyframes floatIn     { from { opacity:0; transform:translateY(40px) scale(.96) } to { opacity:1; transform:translateY(0) scale(1) } }
@keyframes glowPulse   { 0%,100% { opacity:.5; transform:scale(1) } 50% { opacity:.8; transform:scale(1.05) } }
@keyframes float       { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-10px) } }
@keyframes pulse       { 0%,100% { opacity:1 } 50% { opacity:.4 } }
@keyframes typingBounce{ 0%,80%,100% { transform:scale(0) } 40% { transform:scale(1) } }
@keyframes spin        { to { transform:rotate(360deg) } }
@keyframes districtIn  {
  0%   { opacity:0; transform:perspective(600px) rotateX(-80deg) translateY(28px) scale(.88) }
  65%  { opacity:1; transform:perspective(600px) rotateX(5deg) translateY(-2px) scale(1.01) }
  82%  { transform:perspective(600px) rotateX(-1deg) translateY(0) scale(1) }
  100% { opacity:1; transform:perspective(600px) rotateX(0) translateY(0) scale(1) }
}
@keyframes districtOut {
  0%   { opacity:1; transform:perspective(600px) rotateX(0) translateY(0) scale(1) }
  100% { opacity:0; transform:perspective(600px) rotateX(80deg) translateY(-28px) scale(.88) }
}