/* Jalsa landing — black canvas, white type, one product picture. */
.site { min-height: 100vh; display: flex; flex-direction: column; background: #000; color: var(--text); overflow-x: hidden; }
.site main { flex: 1; }
.site-top {
  position: sticky; height: 56px; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 40px); background: rgba(0, 0, 0, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.site-top .brand-mark { height: 28px; }
.site-nav { display: flex; align-items: center; gap: 6px; }

/* Hero: one statement, one sentence, one action. */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px;
  min-height: calc(100svh - 56px); padding: clamp(56px, 10vh, 120px) clamp(16px, 4vw, 40px) clamp(72px, 12vh, 140px); margin-top: -56px; padding-top: calc(56px + clamp(56px, 10vh, 120px)); }
/* Background film: muted, looping, behind a neutral scrim so the type stays readable. */
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #000 url("/media/hero-poster.jpg?v=1") center / cover no-repeat; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-media video.playing { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35) 70%),
              linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 60%, #000 100%); }
.hero-title, .hero-sub { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }
.hero-sub { color: #c7c7cc; }
.hero-title { font-size: clamp(44px, 8vw, 96px); line-height: 1.02; letter-spacing: -0.05em; font-weight: 700; max-width: 12ch; }
.hero-title span { display: block; }
.hero-title-2 { color: #6e6e73; }
.hero-sub { max-width: 560px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--text-2); }
.join-box { display: flex; gap: 8px; width: min(540px, 100%); margin-top: 10px; padding: 6px; border-radius: 999px; background: rgba(20, 20, 22, 0.78); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.join-box .input { background: transparent; border: 0; box-shadow: none; height: 52px; border-radius: 999px; padding-inline: 20px; }
.join-box .input:focus { box-shadow: none; }
.join-box:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.site-top { transition: background-color 0.3s var(--ease); }
.site-top:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.join-box .btn { height: 52px; padding: 0 30px; }
.host-cta { color: #c7c7cc; font-size: 15px; margin-top: -8px; }
.host-cta a { font-weight: 500; }
.host-cta a .rtl-flip { display: inline-block; }
.error-text:empty { display: none; }

/* Facts: text-led, start-aligned, no cards. */
.facts { width: min(1080px, 100%); margin: 0 auto; padding: clamp(96px, 16vh, 180px) clamp(16px, 4vw, 40px) clamp(80px, 12vh, 140px); }
.facts-title { font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -0.04em; line-height: 1.06; max-width: 18ch; font-weight: 700; }
.facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: clamp(48px, 7vh, 80px); }
.fact h3 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 10px; }
.fact p { color: var(--text-2); font-size: 17px; line-height: 1.5; }

.site-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px clamp(16px, 4vw, 40px) max(28px, env(safe-area-inset-bottom)); background: #0e0e10; color: var(--text-3); font-size: 13px; }
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 15px; }
.foot-brand .brand-mark { height: 24px; }

html:lang(ar) .hero-title { line-height: 1.2; max-width: 14ch; }
html:lang(ar) .facts-title { line-height: 1.3; }

@media (max-width: 760px) {
  .facts-grid { grid-template-columns: 1fr; }
  .join-box { flex-direction: column; border-radius: 26px; }
  .join-box .btn { width: 100%; }
  .site-foot { flex-direction: column; align-items: flex-start; }
}