/* Noor share landing — generated by web/scripts/build-share.mjs. Master tokens §6. */

:root{
  --noor-navy:#07111F; --noor-navy-soft:#0B1A2D; --noor-gold:#D4AF37;
  --noor-gold-soft:#E7CE8E; --noor-ivory:#F7F2E8; --noor-muted:#A9B4C3;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--noor-navy);color:var(--noor-ivory);
  font-family:var(--sans);position:relative;overflow-x:hidden;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.hero-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.hero-arch{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:120px;opacity:.85}
.shell{position:relative;z-index:1;width:100%;max-width:1160px;margin:0 auto;
  padding:34px clamp(20px,5vw,64px) 64px;flex:1;display:flex;flex-direction:column}
.s-brand{display:inline-flex;align-items:center;gap:12px;margin-bottom:clamp(18px,3vh,34px);align-self:flex-start}
.s-mark{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--noor-gold);
  border-radius:12px;color:var(--noor-gold);background:rgba(212,175,55,.06)}
.s-mark svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6}
.s-brand b{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.5px}
.s-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);align-items:center;flex:1}
.s-divider{display:flex;align-items:center;gap:10px;color:var(--noor-gold);margin-bottom:22px}
.s-divider .line{height:1px;width:56px;background:linear-gradient(90deg,var(--noor-gold),transparent)}
.s-divider .dot{width:7px;height:7px;transform:rotate(45deg);background:var(--noor-gold)}
.s-headline{font-family:var(--serif);font-weight:600;font-size:clamp(40px,6.4vw,72px);line-height:1.02;
  letter-spacing:.2px;text-wrap:balance;max-width:15ch}
.s-support{margin-top:20px;font-size:clamp(17px,2.2vw,22px);line-height:1.5;color:var(--noor-muted);max-width:42ch}
.s-cta{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
/* Thumb-first: the CTA sits directly under the brand row, above the headline,
   so it is the first tappable thing on a phone and never below the fold. */
.s-cta-top{margin-top:0;margin-bottom:clamp(22px,4vh,40px)}
.s-appstore{display:inline-flex;align-items:center;gap:12px;padding:14px 26px 14px 22px;border-radius:14px;
  background:linear-gradient(180deg,#0d1626,#0a1220);border:1px solid rgba(212,175,55,.45);
  color:var(--noor-ivory);box-shadow:0 14px 30px rgba(0,0,0,.4);transition:transform .15s ease,border-color .15s ease}
.s-appstore:hover{transform:translateY(-2px);border-color:var(--noor-gold)}
.s-appstore svg{width:30px;height:30px;fill:var(--noor-gold-soft);stroke:none}
.s-appstore span{display:flex;flex-direction:column;line-height:1.05}
.s-appstore small{font-size:12px;color:var(--noor-muted);letter-spacing:.4px}
.s-appstore strong{font-size:20px;font-weight:700;letter-spacing:.3px}
.s-android{font-size:15px;color:var(--noor-muted);font-weight:600;letter-spacing:.2px}
.s-strip{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:40px}
/* The non-active pillars are <a>s (they are the site's internal link graph), the
   active one is a <span>. text-decoration:none + colour reset keep the strip
   looking exactly as it did as six spans; the hover/focus states are new and are
   the affordance that tells a human the strip is now clickable. */
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid rgba(169,180,195,.22);color:var(--noor-muted);background:rgba(11,26,45,.55);
  text-decoration:none;transition:border-color .18s,color .18s,background .18s}
a.pill:hover,a.pill:focus-visible{color:var(--noor-gold-soft);border-color:rgba(212,175,55,.55);
  background:rgba(11,26,45,.85)}
a.pill:focus-visible{outline:2px solid var(--noor-gold);outline-offset:2px}
.pill .pi{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.pill i{font-style:normal;font-size:15px;font-weight:600;letter-spacing:.2px}
.pill.is-active{border-color:var(--noor-gold);color:#0d1626;background:linear-gradient(180deg,#E7CE8E,#D4AF37);
  box-shadow:0 0 22px rgba(212,175,55,.4)}
.s-url{display:flex;align-items:center;gap:9px;margin-top:28px;color:var(--noor-gold-soft);font-size:17px;font-weight:600}
.s-url svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.s-phone-wrap{display:flex;justify-content:center;align-items:center}
/* phone (shared with card, sized via --screenH) */
.phone{--screenH:560px}
.ph-frame{position:relative;padding:12px;border-radius:46px;
  background:linear-gradient(160deg,#3a3f47,#0c0f14 42%,#1c2027);
  box-shadow:0 34px 70px rgba(0,0,0,.5),inset 0 0 0 1.5px rgba(255,255,255,.06)}
.ph-notch{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:104px;height:11px;
  background:#04070c;border-radius:999px;z-index:2}
.ph-screen{position:relative;width:calc(var(--screenH) * 322 / 698);height:var(--screenH);
  border-radius:34px;overflow:hidden;background:#07111F}
.ph-shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ph-compass{width:100%;height:100%;display:grid;place-items:center;color:var(--noor-gold);
  background:radial-gradient(120% 90% at 50% 20%,#0e1f34,#07111F)}
.ph-compass svg{width:80%;height:auto}
/* ── per-locale typography + RTL ───────────────────────────────────────────
   ONE stylesheet for every language and both directions. Flexbox and Grid
   already follow dir, so the layout mirrors itself; only genuinely PHYSICAL
   values need a flip: the divider's 90deg gradient (it must fade away from the
   text edge) and the App Store button's asymmetric padding.
   Typography: Cormorant Garamond has no Arabic, no Devanagari, no Bengali and
   no Cyrillic, so those locales override BOTH font vars — otherwise the browser
   substitutes per glyph and the headline arrives as tofu or in three faces.
   The "loose" locales also get more leading (diacritics, matras and Bengali
   ascenders need the room) and letter-spacing is ZEROED — spacing an Arabic or
   Urdu word severs its cursive joins and renders it as disconnected letters. */
html[lang="ar"]{--serif:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Amiri","Traditional Arabic","Segoe UI",Tahoma,serif;--sans:"SF Arabic","Noto Sans Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,-apple-system,sans-serif}
html[lang="ar"] body{line-height:1.75}
html[lang="ar"] .s-headline,html[lang="ar"] .s-brand b,html[lang="ar"] .pill i{letter-spacing:normal}
html[lang="ar"] .s-headline{line-height:1.32;max-width:16ch}
html[lang="ar"] .s-support{line-height:1.85}
html[lang="ru"]{--serif:Georgia,"Times New Roman","Segoe UI",serif;--sans:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
html[lang="ur"]{--serif:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Awami Nastaliq","Noto Naskh Arabic","Segoe UI",Tahoma,serif;--sans:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif}
html[lang="ur"] body{line-height:1.75}
html[lang="ur"] .s-headline,html[lang="ur"] .s-brand b,html[lang="ur"] .pill i{letter-spacing:normal}
html[lang="ur"] .s-headline{line-height:1.32;max-width:16ch}
html[lang="ur"] .s-support{line-height:1.85}
html[lang="fa"]{--serif:"Vazirmatn","Noto Naskh Arabic","IRANSans","Segoe UI",Tahoma,serif;--sans:"Vazirmatn","Noto Sans Arabic","IRANSans","Segoe UI",Tahoma,system-ui,sans-serif}
html[lang="fa"] body{line-height:1.75}
html[lang="fa"] .s-headline,html[lang="fa"] .s-brand b,html[lang="fa"] .pill i{letter-spacing:normal}
html[lang="fa"] .s-headline{line-height:1.32;max-width:16ch}
html[lang="fa"] .s-support{line-height:1.85}
html[lang="bn"]{--serif:"Noto Serif Bengali","Noto Sans Bengali","Nirmala UI","Shonar Bangla","Vrinda",serif;--sans:"Noto Sans Bengali","Nirmala UI","Shonar Bangla","Vrinda",system-ui,sans-serif}
html[lang="bn"] body{line-height:1.75}
html[lang="bn"] .s-headline,html[lang="bn"] .s-brand b,html[lang="bn"] .pill i{letter-spacing:normal}
html[lang="bn"] .s-headline{line-height:1.32;max-width:16ch}
html[lang="bn"] .s-support{line-height:1.85}
html[lang="hi"]{--serif:"Noto Serif Devanagari","Noto Sans Devanagari","Nirmala UI","Mangal",serif;--sans:"Noto Sans Devanagari","Nirmala UI","Mangal",system-ui,sans-serif}
html[lang="hi"] body{line-height:1.75}
html[lang="hi"] .s-headline,html[lang="hi"] .s-brand b,html[lang="hi"] .pill i{letter-spacing:normal}
html[lang="hi"] .s-headline{line-height:1.32;max-width:16ch}
html[lang="hi"] .s-support{line-height:1.85}
[dir="rtl"] .s-divider .line{background:linear-gradient(270deg,var(--noor-gold),transparent)}
[dir="rtl"] .s-appstore{padding:14px 22px 14px 26px}
/* The Latin URL row is bidi-isolated in markup (dir="ltr" on the span); keep
   the row itself following the page direction so the globe icon leads. */
@media (max-width:860px){
  .s-grid{grid-template-columns:1fr;gap:36px}
  .s-phone-wrap{order:-1}
  .phone{--screenH:420px}
  .s-headline{max-width:none}
  html[lang]:not([lang="en"]) .s-headline{max-width:none}
}
@media (max-width:520px){
  .phone{--screenH:360px}
  /* One full-width thumb target — the whole point of hoisting the CTA. */
  .s-cta-top{gap:12px}
  .s-cta-top .s-appstore{width:100%;justify-content:center;padding:16px 22px}
}