/*
 * The landing page only. Every other page keeps `style.css` untouched — a
 * one-screen layout with absolutely-placed glows has nothing to say about a
 * privacy policy, and sharing a stylesheet between them is how one gets broken
 * fixing the other.
 */
/* ⚠️ CONTENT STARTS AT THE TOP; ONLY THE FOOTNOTE IS PUSHED DOWN. It used to be
   `justify-content:center`, which centres the whole block in the viewport — fine
   on a laptop and absurd on a tall monitor, where it opened a huge gap above the
   logo (Bashar: *"a lot of unneeded empty space above the logo and text"*). The
   page still FILLS a short screen — `min-height` keeps the dark ground under it —
   but nothing is stretched to reach the bottom of a tall one. Pushing the
   footnote down instead just moved the same emptiness below the screenshots. */
.stage{
  position:relative; overflow:hidden;
  min-height:100dvh; display:flex; flex-direction:column;
  padding:42px 20px 18px;
}
/* Two soft lights, so a near-black page is not a flat black rectangle. */
.glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.30; pointer-events:none; z-index:0}
.glow.gold{width:520px;height:520px;background:#F0B429;top:-190px;inset-inline-start:-160px}
.glow.blue{width:560px;height:560px;background:#1E5AA8;bottom:-240px;inset-inline-end:-180px}

.stage .inner{position:relative; z-index:1; width:100%; max-width:1120px; margin:0 auto}

.top{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}

.intro .logo{width:190px;height:190px;border-radius:42px;display:block}
.intro h1{font-size:44px;line-height:1.1;margin:14px 0 6px;letter-spacing:-.5px}
.intro .tagline{color:var(--gold);font-weight:700;font-size:19px;margin-bottom:10px}
.intro .desc{color:var(--text-mute);font-size:16px;line-height:1.7;max-width:46ch}

.feats{display:grid;gap:12px}
.feat{display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:12px 14px}
.feat .fi{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.feat .fi svg{width:18px;height:18px}
.fi.g{background:rgba(240,180,41,.15);color:var(--gold)}
.fi.b{background:rgba(46,120,220,.16);color:#7FB2FF}
.feat h3{font-size:15px;margin:0 0 2px}
.feat p{font-size:13.5px;color:var(--text-mute);margin:0;line-height:1.55}

.get{margin-top:18px}
.get-label{display:block;font-size:13px;color:var(--text-mute);margin-bottom:8px}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:12px;text-decoration:none;
  background:#000;border:1px solid rgba(255,255,255,.18);border-radius:14px;
  padding:11px 20px;color:#fff;min-width:186px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.badge:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.4);
  box-shadow:0 14px 34px rgba(0,0,0,.5)}
.badge svg{width:27px;height:27px;flex:none}
/* ⚠️ THE BADGE TEXT IS ALWAYS LEFT-ALIGNED, even in Arabic: "App Store" and
   "Google Play" are Latin names, and letting them follow the page direction
   ragged-rights two lines that belong flush under each other. */
.badge>span:last-child{text-align:left;line-height:1.15}
.b-small{font-size:10.5px;color:#cfd6e6;letter-spacing:.02em}
.b-big{font-size:18px;font-weight:600;line-height:1.15;color:#fff}
/* ⚠️ NOT DIMMED. Greying them made the one thing people look for on a landing
   page invisible (Bashar: *"you made them grey and unnoticeable"*). They are the
   real black App Store / Google Play badges; what says the app is not out yet is
   the «قريباً» label above them, not a washed-out button. `pointer-events` alone
   stops a click going nowhere. */
.badge.off{pointer-events:none}

/* The screenshots: one row, scrollable rather than shrunk to nothing. */
.shots{margin-top:30px;overflow-x:auto;padding-bottom:6px}
.shots-track{display:flex;gap:18px;justify-content:center;min-width:max-content;margin:0 auto}
.shot{width:184px;text-align:center;flex:none}
.shot img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.55))}
.shot span{display:block;margin-top:9px;font-size:12.5px;color:var(--text-mute)}

.note{position:relative;z-index:1;text-align:center;color:var(--text-mute);
  font-size:12.5px;margin:22px auto 0;max-width:760px;line-height:1.7;
  padding-top:14px}
.note .copy{display:block;margin-top:5px;opacity:.75}

@media (max-width:900px){
  .stage{min-height:auto;padding:22px 16px 28px}
  .top{grid-template-columns:1fr;gap:24px}
  .intro{text-align:center}
  .intro .logo{margin:0 auto}
  .intro .desc{margin-inline:auto}
  .badges{justify-content:center}
  .shots-track{justify-content:flex-start}
}