/* ══════════════════════════════════════════════════════════════════
 BSA — home page (index.html)
 Hero carousel, opening animation, ticker, about, gallery, partners,
 app, contact. Loaded after base.css and layout.css.
 ══════════════════════════════════════════════════════════════════ */

/* ── SECTION SIZES (home overrides the shared helpers) ── */
section { padding:100px 0; }

/* Jumping from the nav lands a section just under the fixed 80px bar (html
   carries the matching scroll-padding-top). These sections also fill the screen
   below it, so a short one no longer leaves a strip of the next section in
   view; one with more content than fits simply grows past it as before.
   #gallery is listed too, and stays hidden when empty because [hidden] in
   base.css is !important. */
#about, #gallery, #partnerships, #app, #contact {
  min-height:calc(var(--vh) - 80px);
  display:flex; flex-direction:column; justify-content:center;
}
/* .section-inner has margin:0 auto, and auto cross-axis margins switch off a
   flex item's stretch — without this it shrinks to its content width. */
#about > .section-inner, #gallery > .section-inner, #partnerships > .section-inner,
#app > .section-inner, #contact > .section-inner { width:100%; }
.section-title { font-size:clamp(28px,4vw,46px); font-weight:700; color:var(--navy); line-height:1.3; margin-bottom:18px; }
body.ltr .section-title { font-family:'Playfair Display',serif; line-height:1.2; }
.section-sub { font-size:16px; color:var(--text-light); line-height:1.9; max-width:580px; }
/* Reveal */
.reveal { opacity:0; transform:translateY(40px); transition:all 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ── HERO ── */
#hero {
  position:relative;
  height:calc(100vh - 124px);
  min-height:640px;
  overflow:hidden;
  margin-top:80px;
}
/* Slides are stacked; the later ones paint on top. A slide that is merely
   opacity:0 still takes every click, so only the last slide's button ever
   worked. visibility:hidden takes hidden slides out of hit-testing and the
   tab order. Only .active transitions (the fade-in); dropping .leaving hides
   the old slide at once, since the new one already covers it.

   Motion (tune here; the script reads --slide-fade so the two stay in step):
     .slide-bg     the photo, on its own layer, zooms slowly the whole time a
                   slide is on screen (Ken Burns). The slide itself keeps the
                   scroll parallax, so the two transforms never fight.
     hand-over     the outgoing slide (.leaving) stays fully opaque underneath
                   and keeps zooming while the new one fades in on top — no
                   dip to navy half-way. Its text lifts away at once; the new
                   text rises into place after a short delay. */
#hero { --slide-fade:1.4s; --hero-zoom-dur:9s; --hero-zoom:1.10; }
.slide {
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;               /* immediate: even a slide mid-fade must not take clicks */
  transition:none;
  background:var(--navy);
}
.slide.active  { opacity:1; visibility:visible; pointer-events:auto; z-index:1; transition:opacity var(--slide-fade) ease; }
.slide.leaving { opacity:1; visibility:visible; z-index:0; }
/* Slides with no photo (the built-in ones, or an admin slide left blank)
   show the brand backdrop instead of an empty navy block. */
.slide-bg {
  position:absolute; inset:0; z-index:0;
  background:var(--navy) url(../img/placeholder-hero.jpg) center/cover no-repeat;
  transform-origin:50% 50%;
  backface-visibility:hidden;        /* keeps edges crisp while the layer scales */
}
.slide.active .slide-bg, .slide.leaving .slide-bg { animation:heroZoom var(--hero-zoom-dur) linear forwards; }
/* The zoom drifts towards a slightly different point on alternate slides. */
.slide:nth-child(even) .slide-bg { transform-origin:40% 45%; }
.slide:nth-child(odd)  .slide-bg { transform-origin:60% 55%; }
@keyframes heroZoom { from { transform:scale(1); } to { transform:scale(var(--hero-zoom)); } }
.slide::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(to left, rgba(27,42,74,0.82) 0%, rgba(27,42,74,0.55) 50%, rgba(27,42,74,0.15) 100%);
}
body.ltr .slide::before {
  background: linear-gradient(to right, rgba(27,42,74,0.82) 0%, rgba(27,42,74,0.55) 50%, rgba(27,42,74,0.15) 100%);
}
.slide-content {
  position:absolute;
  z-index:2;
  top:50%;
  right:8%;
  transform:translateY(calc(-50% + 28px));
  max-width:600px;
  color:var(--white);
  opacity:0;
  transition:opacity .5s ease, transform .5s ease;                       /* exit: quick */
}
body.ltr .slide-content { right:auto; left:8%; }
.slide.active .slide-content  { opacity:1; transform:translateY(-50%);
  transition:opacity 1s ease .45s, transform 1s cubic-bezier(.16,1,.3,1) .45s; }   /* entrance: after the photo starts to show */
.slide.leaving .slide-content { opacity:0; transform:translateY(calc(-50% - 22px)); }
@media (prefers-reduced-motion: reduce) {
  .slide-bg { animation:none !important; }
  .slide-content, .slide.active .slide-content, .slide.leaving .slide-content { transform:translateY(-50%); }
}
.slide-tag {
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--gold-light);
  border:1px solid var(--gold-light);
  padding:5px 14px;
  border-radius:2px;
  margin-bottom:18px;
}
body.ltr .slide-tag { font-family:'Lato',sans-serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; }
.slide-title {
  font-size: clamp(34px,5vw,62px);
  font-weight:700;
  line-height:1.3;
  margin-bottom:18px;
  text-shadow:0 2px 20px rgba(0,0,0,0.3);
}
body.ltr .slide-title { font-family:'Playfair Display',serif; line-height:1.15; }
.slide-desc {
  font-size:16px;
  font-weight:400;
  line-height:1.9;
  opacity:0.9;
  margin-bottom:32px;
  max-width:480px;
}
body.ltr .slide-desc { font-family:'Lato',sans-serif; font-weight:300; line-height:1.7; }
.slide-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--gold);
  color:var(--on-gold);
  padding:14px 30px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  border-radius:3px;
  transition:background 0.3s, transform 0.3s;
}
body.ltr .slide-btn { font-family:'Lato',sans-serif; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; }
.slide-btn:hover { background:var(--gold-light); transform:translateX(-4px); }
body.ltr .slide-btn:hover { transform:translateX(4px); }

.slider-dots { position:absolute; bottom:36px; right:8%; display:flex; gap:10px; z-index:2; }
body.ltr .slider-dots { right:auto; left:8%; }
.dot { width:8px; height:8px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; transition:all 0.3s; }
.dot.active { background:var(--gold); width:28px; border-radius:4px; }
.slider-arrows { position:absolute; bottom:30px; left:8%; display:flex; gap:12px; direction:ltr; z-index:2; }
body.ltr .slider-arrows { left:auto; right:8%; }
.arrow-btn { width:46px; height:46px; border:1px solid rgba(255,255,255,0.5); background:rgba(255,255,255,0.1); color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; transition:all 0.3s; }
.arrow-btn:hover { background:var(--gold); border-color:var(--gold); color:var(--on-gold); }


/* Scroll Banner */
/* The HTML holds ONE set of items; the script clones it until the track is
   longer than the window plus one set, then slides the track by exactly one
   set (--ticker-shift) and loops. A fixed pair of sets used to run out on
   wide screens: past ~1180px (Arabic) the end of the track scrolled into
   view after ~10s and the loop snapped back. Duration (--ticker-dur) is
   derived from the set width, so the speed is the same on every screen and
   in both languages.
   The banner is a flex container so the track sits on the start edge in
   both directions: right edge in RTL (overflowing left, sliding right),
   left edge in LTR (overflowing right, sliding left). */
.scroll-banner { background:var(--navy); padding:14px 0; overflow:hidden; display:flex; }
.scroll-track { display:flex; flex:0 0 auto; white-space:nowrap; will-change:transform;
  animation:scrollBannerRtl var(--ticker-dur,30s) linear infinite; }
body.ltr .scroll-track { animation-name:scrollBanner; }
.scroll-set { display:flex; flex:0 0 auto; }
.scroll-item { display:inline-flex; align-items:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:2px; color:rgba(255,255,255,0.7); padding:0 40px; }
body.ltr .scroll-item { font-family:'Lato',sans-serif; text-transform:uppercase; }
.scroll-item i { color:var(--gold); font-size:10px; }
@keyframes scrollBanner    { from{transform:translateX(0)} to{transform:translateX(calc(-1 * var(--ticker-shift,50%)))} }
@keyframes scrollBannerRtl { from{transform:translateX(0)} to{transform:translateX(var(--ticker-shift,50%))} }


/* ── ABOUT ── */
#about { background:var(--white); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-img-wrap { position:relative; }
.about-img { width:100%; height:520px; object-fit:cover; border-radius:4px; display:block; }

/* ── GALLERY ── */
#gallery { background:var(--cream); }
.gallery-tabs { display:flex; gap:4px; margin-bottom:40px; border-bottom:2px solid var(--border);  }
.tab-btn { padding:12px 28px; font-size:14px; font-weight:700; border:none; background:none; color:var(--text-light); cursor:pointer; position:relative; transition:color 0.3s; margin-bottom:-2px; }
body.ltr .tab-btn { font-family:'Lato',sans-serif; font-size:13px; letter-spacing:1px; text-transform:uppercase; }
.tab-btn::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transition:transform 0.3s; }
.tab-btn.active { color:var(--navy); }
.tab-btn.active::after { transform:scaleX(1); }
.gallery-pane { display:none; }
.gallery-pane.active { display:block; }
.photo-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:12px; }
.photo-item { overflow:hidden; border-radius:3px; position:relative; cursor:pointer; }
.photo-item:nth-child(5) { grid-column:span 2; grid-row:span 2; }
.photo-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.photo-item:hover img { transform:scale(1.08); }
.photo-overlay { position:absolute; inset:0; background:rgba(27,42,74,0.7); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s; }
.photo-item:hover .photo-overlay { opacity:1; }
.photo-overlay i { color:white; font-size:28px; }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.video-thumb { position:relative; border-radius:4px; overflow:hidden; cursor:pointer; }
.video-thumb img { width:100%; height:220px; object-fit:cover; display:block; transition:transform 0.4s; }
.video-thumb:hover img { transform:scale(1.05); }
.play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; background:rgba(255,255,255,0.9); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform 0.3s,background 0.3s; }
.play-btn i { color:var(--navy); font-size:20px; margin-left:4px; }
.video-thumb:hover .play-btn { transform:translate(-50%,-50%) scale(1.15); background:var(--gold); }
.video-thumb:hover .play-btn i { color:var(--on-gold); }
.video-label { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(27,42,74,0.9)); padding:30px 16px 16px; color:white; font-size:14px; font-weight:600; text-align:right; }
body.ltr .video-label { text-align:left; font-family:'Lato',sans-serif; }


/* ── PARTNERSHIPS ── */
/* The light run is about(white) -> gallery(cream) -> here, so this band steps
   down again to a flat cream-dark. One colour, no overlay: that is enough to
   keep it distinct whether or not the gallery is showing (it hides itself when
   the admin has posted no photos), and the white partner cards have something
   to sit on. */
#partnerships { background:var(--cream-dark); border-top:1px solid var(--border); }
/* Flex + centred so two partners sit in the middle and five still fill a row. */
.partners-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:50px; }
.partner-card { flex:0 1 220px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 20px; border:1px solid var(--border); border-radius:4px; background:var(--white); transition:all 0.4s; text-align:center; text-decoration:none; color:inherit; }
.partner-logo { height:64px; width:100%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
/* Wide lockups get the card's full inner width; 100% keeps them inside the narrower phone cards. */
.partner-logo img { max-height:56px; max-width:min(180px,100%); width:auto; height:auto; object-fit:contain; }
.partner-card:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:0 10px 40px rgba(27,42,74,0.1); }
.partner-icon { width:64px; height:64px; background:var(--cream); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--navy); margin-bottom:14px; transition:background 0.3s,color 0.3s; }
.partner-card:hover .partner-icon { background:var(--navy); color:var(--gold); }
.partner-name { font-size:13px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.partner-type { font-size:11px; color:var(--text-light); }


/* ── APP ── */
#app { background:linear-gradient(135deg,var(--navy) 0%,#2D4070 100%); overflow:hidden; position:relative; }
#app::before { content:''; position:absolute; top:-100px; left:-100px; width:500px; height:500px; background:radial-gradient(circle,rgba(196,151,59,0.15) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
body.ltr #app::before { left:auto; right:-100px; }
#app .section-title { color:var(--white); }
#app .section-sub { color:rgba(255,255,255,0.65); }
#app .section-label { color:var(--gold-light); }
.app-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.app-feature { display:flex; gap:16px; align-items:flex-start; margin-bottom:28px;  }
.app-feature-icon { width:48px; height:48px; background:rgba(196,151,59,0.2); border:1px solid rgba(196,151,59,0.4); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--gold-light); font-size:18px; flex-shrink:0; }
.app-feature-text h4 { color:var(--white); font-size:15px; font-weight:700; margin-bottom:6px; }
body.ltr .app-feature-text h4 { font-family:'Lato',sans-serif; }
.app-feature-text p { color:rgba(255,255,255,0.6); font-size:13px; line-height:1.8; }
body.ltr .app-feature-text p { font-family:'Lato',sans-serif; line-height:1.6; }
.app-stores { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;  }
.store-btn { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); padding:14px 22px; border-radius:8px; color:white; text-decoration:none; transition:all 0.3s;  }
.store-btn:hover { background:rgba(255,255,255,0.18); border-color:var(--gold); }
.store-btn i { font-size:26px; }
.store-btn-text { line-height:1.3; text-align:right; }
body.ltr .store-btn-text { text-align:left; }
.store-btn-sub { font-size:10px; opacity:0.7; letter-spacing:1px; }
body.ltr .store-btn-sub { font-family:'Lato',sans-serif; text-transform:uppercase; }
.store-btn-name { font-size:15px; font-weight:700; }
/* ── Phone mockups ──
   Two devices, the front one overlapping the back one, with a gold glow
   behind. Frame = gradient metal rim + side buttons; screen = dynamic
   island + glass reflection over the real app screenshot. */
/* direction:ltr keeps the Android on the left and the iPhone on the right in both languages. */
.phone-mockup { position:relative; display:flex; direction:ltr; justify-content:center; align-items:flex-end; padding:34px 0 14px; isolation:isolate; }
.phone-mockup::before { content:''; position:absolute; inset:6% 4% 4%; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%, rgba(196,151,59,0.32) 0%, rgba(196,151,59,0.10) 40%, rgba(196,151,59,0) 70%); filter:blur(14px); }
.phone { position:relative; width:250px; flex-shrink:0; padding:11px; border-radius:44px;
  background:linear-gradient(160deg,#34466c 0%,#0c1730 42%,#22335a 100%);
  box-shadow:0 50px 90px -24px rgba(0,0,0,0.75), 0 18px 34px -16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.10), inset 0 0 0 1px rgba(255,255,255,0.05);
  transition:transform 0.7s cubic-bezier(0.2,0.8,0.2,1); }
.phone::before { content:''; position:absolute; left:-3px; top:118px; width:3px; height:60px; border-radius:2px 0 0 2px; background:#0c1730; box-shadow:0 78px 0 0 #0c1730; }  /* volume */
.phone::after  { content:''; position:absolute; right:-3px; top:152px; width:3px; height:92px; border-radius:0 2px 2px 0; background:#0c1730; }  /* power */
.phone-frame { position:relative; overflow:hidden; border-radius:34px; background:#050a14; }
.phone-frame::before { content:''; position:absolute; top:11px; left:50%; transform:translateX(-50%); width:88px; height:26px; border-radius:16px; background:#050a14; z-index:2; box-shadow:0 0 0 1px rgba(255,255,255,0.04); }  /* dynamic island */
.phone-frame::after  { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(108deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0) 38%); }   /* glass */
/* height:auto is load-bearing: the img carries width/height attributes, and that
   height is a presentational hint. Without height:auto it wins, the box becomes
   228x1169, aspect-ratio is ignored (it only applies when a dimension is auto)
   and object-fit:cover crops the screenshot to a narrow vertical strip. */
.phone-screen { display:block; width:100%; height:auto; aspect-ratio:9/19.5; object-fit:cover; object-position:top; background:#0b1730; }
.phone-back  { transform:rotate(-7deg) translate(22px,30px); z-index:0; }
.phone-front { transform:rotate(5deg) translate(-22px,0); z-index:1; }
.phone-mockup:hover .phone-back  { transform:rotate(-3deg) translate(14px,20px); }
.phone-mockup:hover .phone-front { transform:rotate(2deg) translate(-14px,-8px); }
/* Android variant (the back/left phone): graphite frame with squarer corners,
   thinner bezel, punch-hole camera, power + volume on the right (Pixel layout),
   and an Android status bar painted over the iOS one baked into the capture. */
.phone-android { padding:9px; border-radius:36px;
  background:linear-gradient(160deg,#4a5160 0%,#161a22 40%,#2b313d 100%);
  box-shadow:0 50px 90px -24px rgba(0,0,0,0.75), 0 18px 34px -16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.04); }
.phone-android::before { left:auto; right:-3px; top:182px; height:74px; border-radius:0 2px 2px 0; background:#161a22; box-shadow:none; }  /* volume rocker */
.phone-android::after  { top:124px; height:44px; background:#161a22; }                                                             /* power */
.phone-android .phone-frame { border-radius:28px; background:#000; }
.phone-android .phone-frame::before { width:14px; height:14px; border-radius:50%; top:11px; background:#05070b;
  box-shadow:0 0 0 2px rgba(255,255,255,0.05), inset 0 0 3px rgba(120,150,200,0.45); }                                        /* punch-hole camera */
/* Painted over the iOS status bar baked into the capture (top ~4.9% of the screen). */
.android-status { position:absolute; top:0; left:0; right:0; height:25px; z-index:3; pointer-events:none; direction:ltr; background:#fff;
  display:flex; align-items:center; justify-content:space-between; padding:0 20px;
  color:#1B2A4A; font-family:'Lato',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.2px; }
.android-status i { font-size:10px; margin-left:5px; }


/* ── CONTACT ── */
#contact { background:var(--cream-dark); position:relative; overflow:hidden; }
/* A faint gold wash behind the form side so the card sits on something. */
#contact::before { content:''; position:absolute; inset:auto auto -30% -10%; width:60%; height:120%; pointer-events:none;   /* RTL: form is on the left */
  background:radial-gradient(ellipse at center, rgba(196,151,59,0.14) 0%, rgba(196,151,59,0) 65%); }
body.ltr #contact::before { inset:auto -10% -30% auto; }
#contact .section-inner { position:relative; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.contact-list { margin-top:36px; border-top:1px solid rgba(27,42,74,0.10); }
.contact-item { display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid rgba(27,42,74,0.10); }
.contact-icon { width:44px; height:44px; background:var(--navy); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:16px; flex-shrink:0; transition:background 0.3s,color 0.3s,transform 0.3s; }
.contact-item:hover .contact-icon { background:var(--gold); color:var(--navy); transform:translateY(-2px); }
.contact-item h4 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.contact-item p { font-size:13px; color:var(--text-light); line-height:1.8; }
.contact-item a { color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(27,42,74,0.25); transition:color 0.3s,border-color 0.3s; }
.contact-item a:hover { color:var(--gold-text); border-color:var(--gold); }
/* Addresses and numbers are Latin/LTR runs; isolating them keeps "+962 …"
   and "name@domain" in reading order inside Arabic text. */
.contact-item a.ltr, .contact-item .ltr { direction:ltr; unicode-bidi:isolate; display:inline-block; }
.contact-map { font-size:12px; margin-inline-start:8px; white-space:nowrap; }
.contact-map i { font-size:10px; margin-inline-end:4px; }
.form-wrap { position:relative; background:var(--white); padding:44px; border-radius:8px; box-shadow:0 10px 50px rgba(27,42,74,0.08); border-top:4px solid var(--gold); }
.form-wrap h3 { font-size:22px; color:var(--navy); margin-bottom:6px; font-weight:700; }
body.ltr .form-wrap h3 { font-family:'Playfair Display',serif; }
.form-intro { font-size:13px; color:var(--text-light); line-height:1.7; margin-bottom:26px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:12px; font-weight:700; letter-spacing:1px; color:var(--navy); margin-bottom:8px; }
body.ltr .form-group label { font-family:'Lato',sans-serif; text-transform:uppercase; }
.form-group label .req { color:var(--gold-text); margin-inline-start:3px; }
.form-group label .opt { font-weight:400; letter-spacing:0; color:var(--text-light); text-transform:none; margin-inline-start:4px; }
.form-group input,
.form-group select,
.form-group textarea { width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:4px; font-size:14px; font-family:inherit; color:var(--text); background:var(--cream); transition:border-color 0.3s,box-shadow 0.3s; outline:none; text-align:right; direction:rtl; }
body.ltr .form-group input,
body.ltr .form-group select,
body.ltr .form-group textarea { text-align:left; direction:ltr; font-family:'Lato',sans-serif; }
/* Email and phone are always typed left-to-right, whatever the page language. */
.form-group input[type=email], .form-group input[type=tel] { direction:ltr; }
body:not(.ltr) .form-group input[type=email], body:not(.ltr) .form-group input[type=tel] { text-align:right; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,42,74,0.1); background:var(--white); }
.form-group.invalid input, .form-group.invalid textarea { border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,0.12); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-submit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:15px; background:var(--navy); color:white; border:none; font-size:14px; font-weight:700; letter-spacing:1px; cursor:pointer; border-radius:4px; transition:background 0.3s,transform 0.2s; margin-top:8px; }
body.ltr .form-submit { font-family:'Lato',sans-serif; font-size:13px; letter-spacing:2px; text-transform:uppercase; }
.form-submit:hover { background:var(--gold); color:var(--on-gold); transform:translateY(-2px); }
.form-turnstile { margin:4px 0 14px; min-height:65px; }        /* Cloudflare Turnstile widget slot (shown only when a site key is set) */
.form-note { margin-top:14px; font-size:12px; color:var(--text-light); line-height:1.6; text-align:center; }
/* Success panel: replaces the fields once the message is away. */
.form-sent { text-align:center; padding:28px 8px 12px; outline:none; }   /* focused for announcement only */
.form-sent-icon { width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:#eaf7f1; color:#146c43; display:flex; align-items:center; justify-content:center; font-size:26px; }
.form-sent h4 { font-size:20px; color:var(--navy); margin-bottom:8px; }
body.ltr .form-sent h4 { font-family:'Playfair Display',serif; }
.form-sent p { font-size:14px; color:var(--text-light); line-height:1.8; max-width:340px; margin:0 auto 22px; }
.form-again { background:none; border:1.5px solid var(--border); color:var(--navy); padding:11px 22px; border-radius:4px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:border-color 0.3s,color 0.3s; }
.form-again:hover { border-color:var(--gold); color:var(--gold-text); }



/* ── VIDEO LIGHTBOX ── */
.video-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.35s;}
.video-lightbox.open{opacity:1;pointer-events:all;}
.video-lb-inner{position:relative;width:90vw;max-width:920px;}
.video-lb-close{position:absolute;top:-44px;right:0;background:none;border:none;color:white;font-size:32px;cursor:pointer;line-height:1;opacity:0.8;transition:opacity 0.2s;}
.video-lb-close:hover{opacity:1;}
.video-wrapper{position:relative;padding-bottom:56.25%;height:0;border-radius:6px;overflow:hidden;background:#000;}
.video-wrapper iframe,.video-wrapper video{position:absolute;inset:0;width:100%;height:100%;}


/* ── MISC ── */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.lightbox.open { opacity:1; pointer-events:all; }
.lightbox img { max-width:90vw; max-height:85vh; border-radius:3px; }
.lightbox-close { background:none; border:none; line-height:1; position:absolute; top:24px; right:30px; color:white; font-size:32px; cursor:pointer; transition:color 0.3s; }
.lightbox-close:hover { color:var(--gold); }


/* Visually hidden without an off-screen offset. left:-9999px was the
   cause of the "zoomed-out on Android" bug: in an RTL document, space to
   the left IS scrollable, so it made the page ~10,000px wide. */
.hp-field{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;}
.form-status{margin:14px 0 0;font-size:14px;line-height:1.6;display:none;padding:11px 15px;border-radius:5px;}
.form-status.show{display:block;}
.form-status.ok{background:#eaf7f1;color:#146c43;border:1px solid #b6e2cd;}
.form-status.err{background:#fdf0ef;color:#9b2620;border:1px solid #f3c6c2;}
.form-submit[disabled]{opacity:.6;cursor:not-allowed;}

.photo-item,.video-thumb{border:none;padding:0;background:none;font:inherit;
  color:inherit;display:block;width:100%;text-align:start;cursor:pointer;}


/* ── OPENING ANIMATION ──
   A navy panel with the crest, shown once per browser session on the home
   page. Timeline (tune the variables below; HOLD in the script sets when
   the panel starts to leave):
      0.00s  panel is up, the line-art backdrop fades in slowly
      0.15s  crest rises into place
      0.75s  gold rule draws out from the centre
      0.90s  soft gold glow breathes in behind the crest
      HOLD   the panel lifts upward, revealing the hero (same backdrop, so
             the two frames hand over seamlessly); the crest lifts a little
             faster than the panel for a touch of parallax */
#intro{
  --intro-crest-delay:.15s; --intro-crest-dur:.9s;
  --intro-rule-delay:.75s;  --intro-rule-dur:.55s;
  --intro-glow-delay:.9s;   --intro-glow-dur:1.1s;
  --intro-leave-dur:.75s;
  position:fixed;inset:0;z-index:10000;overflow:hidden;background:var(--navy);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
html.no-intro #intro{display:none;}
.intro-backdrop{position:absolute;inset:0;background:url(../img/placeholder-hero.jpg) center/cover no-repeat;
  opacity:0;transform:scale(1.05);animation:introBackdrop 1.6s ease-out forwards;}
.intro-backdrop::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(27,42,74,.35) 0%,rgba(27,42,74,.92) 70%);}
.intro-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:0 24px;}
.intro-glow{position:absolute;top:50%;left:50%;width:min(720px,140vw);height:min(720px,140vw);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(196,151,59,.30) 0%,rgba(196,151,59,.08) 42%,rgba(196,151,59,0) 68%);
  animation:introGlow var(--intro-glow-dur) ease-out var(--intro-glow-delay) forwards;}
.intro-crest{position:relative;display:block;width:min(340px,64vw);height:auto;
  opacity:0;transform:translateY(22px) scale(.94);
  animation:introCrest var(--intro-crest-dur) cubic-bezier(.16,1,.3,1) var(--intro-crest-delay) forwards;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.35));}
.intro-rule{position:relative;width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold),var(--gold-light));
  transform:scaleX(0);animation:introRule var(--intro-rule-dur) cubic-bezier(.16,1,.3,1) var(--intro-rule-delay) forwards;}
#intro.leaving{animation:introLeave var(--intro-leave-dur) cubic-bezier(.76,0,.24,1) forwards;}
#intro.leaving .intro-inner{animation:introInnerLeave calc(var(--intro-leave-dur) * .8) cubic-bezier(.7,0,.3,1) forwards;}
@keyframes introBackdrop{to{opacity:.55;transform:scale(1);}}
@keyframes introCrest{to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes introRule{to{transform:scaleX(1);}}
@keyframes introGlow{to{opacity:1;}}
@keyframes introLeave{to{transform:translateY(-100%);}}
@keyframes introInnerLeave{to{transform:translateY(-70px);opacity:0;}}

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .about-grid,.form-grid,.app-grid { grid-template-columns:1fr; gap:40px; }
  .photo-grid { grid-template-columns:repeat(2,1fr); }
  .partners-grid { gap:14px; }
  .partner-card { flex-basis:calc(33.333% - 10px); }
  .partner-card { min-width:0; padding:22px 12px; }
  .video-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .phone-mockup { padding:26px 0 0; }
  .phone { width:200px; }
}
/* ── PHONES ── */
@media (max-width:600px) {
  section { padding:64px 0; }
  #hero { min-height:0; height:calc(100svh - 80px); max-height:760px; }
  .slide-content { right:20px; left:20px; max-width:none; }
  body.ltr .slide-content { left:20px; right:20px; }
  .slide-title { font-size:clamp(28px,8.5vw,40px); }
  .slide-desc { font-size:15px; margin-bottom:24px; }
  .slider-dots { bottom:28px; right:20px; }
  body.ltr .slider-dots { left:20px; }
  .slider-arrows { bottom:20px; left:20px; }
  body.ltr .slider-arrows { right:20px; }
  .arrow-btn { width:40px; height:40px; }
  .about-img { height:300px; }
  .photo-grid { grid-auto-rows:150px; gap:8px; }
  .video-grid { grid-template-columns:1fr; }
  .partners-grid { gap:12px; margin-top:36px; }
  .partner-card { flex-basis:calc(50% - 6px); }
  .form-wrap { padding:26px 20px; }
  .store-btn { flex:1 1 100%; justify-content:center; }
  .phone { width:152px; padding:7px; border-radius:30px; }
  .phone-frame { border-radius:24px; }
  .phone-frame::before { width:56px; height:17px; top:7px; }
  .phone::before { top:72px; height:38px; box-shadow:0 48px 0 0 #0c1730; }
  .phone::after { top:92px; height:58px; }
  .phone-back  { transform:rotate(-7deg) translate(14px,22px); }
  .phone-front { transform:rotate(5deg) translate(-14px,0); }
  .phone-android { padding:6px; border-radius:26px; }
  .phone-android .phone-frame { border-radius:20px; }
  .phone-android .phone-frame::before { width:9px; height:9px; top:7px; }
  .phone-android::before { top:112px; height:44px; }
  .phone-android::after { top:76px; height:28px; }
  .android-status { height:16px; font-size:7px; padding:0 10px; }
  .android-status i { font-size:7px; margin-left:3px; }
}