/* ============ SECTION 1 : HERO — base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #05080c;
  --fg: #f2f6f9;
  --muted: rgba(242,246,249,.62);
  --accent: #5eead4;
  --line: rgba(255,255,255,.14);
  --font-latin: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-arabic: 'Tajawal', 'Noto Sans Arabic', system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-latin);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Arabic font & RTL */
@font-face {
  font-family: 'Tajawal';
  src: url('https://fonts.gstatic.com/s/tajawal/v20/IurY6Y5j_oScZZow4VOxCZZM.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: var(--font-arabic), var(--font-latin);
}

/* Language switcher */
.lang-switch {
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
  text-decoration: none;
  text-shadow: none;
}
.lang-switch:hover {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.04);
}

/* RTL layout fixes */
html[dir="rtl"] .hero-top { flex-direction: row-reverse; }
html[dir="rtl"] .btn-row { flex-direction: row-reverse; }
html[dir="rtl"] .foot-grid { direction: rtl; }
html[dir="rtl"] .form-grid { direction: rtl; }
html[dir="rtl"] .comm-chats { flex-direction: row-reverse; }
html[dir="rtl"] .comm-msg--user { flex-direction: row; }
html[dir="rtl"] .comm-msg--ai { flex-direction: row-reverse; }
html[dir="rtl"] .comm-msg-sender { flex-direction: row-reverse; }
html[dir="rtl"] .reg-step { flex-direction: row-reverse; }
html[dir="rtl"] .reg-step n { margin-left: 0; margin-right: 12px; }
html[dir="rtl"] .intro-logos { direction: rtl; }
html[dir="rtl"] .trio { direction: rtl; }
html[dir="rtl"] .mini-card { direction: rtl; }
html[dir="rtl"] .cards4 { direction: rtl; }
html[dir="rtl"] .step-card { direction: rtl; }
html[dir="rtl"] .cards3 { direction: rtl; }
html[dir="rtl"] .provide-card { direction: rtl; }
html[dir="rtl"] .trust-grid { direction: rtl; }
html[dir="rtl"] .form-field select { padding-right: 40px; background-position: right 12px center; }
html[dir="rtl"] .phone-row { direction: rtl; }

/* Tall scroll track = the duration of the single shot.
   380vh keeps the dolly slow and cinematic without a long
   black tail after the fade-out. */
#hero {
  position: relative;
  height: 380vh;
  background: transparent;
  z-index: 1;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* FIXED plate: the same frame stays behind the entire page,
   so sections dissolve in over the final image — one shot. */
#sequence-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100svh;
  display: block;
  background: #000;
  z-index: 0;
}

/* FIXED cinematic grade: persists over sections, then
   .post-hero gradient settles it into black. */
.hero-vignette {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.42), transparent 22%, transparent 62%, rgba(0,0,0,.78));
}

.hero-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  font-size: 13px;
  letter-spacing: .22em;
  z-index: 3;
}
.logo { font-weight: 800; letter-spacing: .34em; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.hero-register {
  color: var(--fg);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  text-shadow: none;
  transition: border-color .25s ease, background .25s ease;
}
.hero-register:hover {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.04);
}
.hero-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  padding: 30px 28px;
  z-index: 3;
}
/* single minimal cue — no numbers, no trackers */
.hero-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(242,246,249,.75);
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
  transition: opacity .3s linear;
}
.cue-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,.9), transparent);
  animation: cue-drop 1.8s ease-in-out infinite;
}
@keyframes cue-drop {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* loader — fixed plate above the film while frames develop */
.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04070b;
  transition: opacity .6s ease, visibility .6s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; width: min(320px, 80vw); }
.loader-logo { font-weight: 900; letter-spacing: .5em; margin-bottom: 18px; }
.loader-bar {
  height: 3px;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.loader-bar div { height: 100%; width: 0%; background: var(--accent); }
#loader-text { font-size: 12px; letter-spacing: .2em; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .hero-top { padding: 18px 20px; }
  .hero-bottom { padding: 22px 20px; }
  .hero-register { font-size: 10px; padding: 8px 14px; }
  .logo { font-size: 13px; }
  .hero-cue { font-size: 10px; gap: 8px; }
  .cue-line { height: 32px; }
}
@media (max-width: 400px) {
  .hero-top { padding: 14px 16px; }
  .hero-bottom { padding: 18px 16px; }
  .logo { font-size: 12px; }
  .hero-cue { font-size: 9px; gap: 6px; }
  .cue-line { height: 28px; }
}