@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/NunitoSans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/NunitoSans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/NunitoSans-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Naskh Arabic";src:url(fonts/NotoNaskhArabic-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Naskh Arabic";src:url(fonts/NotoNaskhArabic-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Nastaliq Urdu";src:url(fonts/NotoNastaliqUrdu-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Nastaliq Urdu";src:url(fonts/NotoNastaliqUrdu-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --paper:#FCF8EF;
  --paper-2:#F6EFDF;
  --paper-3:#EFE5CE;
  --ink:#16261F;
  --ink-soft:#46564F;
  --emerald:#0A4A3C;
  --emerald-deep:#073629;
  --night:#04241B;
  --gold:#C49A45;
  --gold-soft:#E3CB92;
  --gold-ink:#8A6420;
  --gold-on-dark:#D9B66A;
  --cream-on-dark:#F4EBD6;
  --mist-on-dark:#CFE0D7;
  --rule:rgba(196,154,69,.55);
  --rule-dark:rgba(217,182,106,.45);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,4.5vw,40px);
  --wide:1180px;
  --narrow:720px;
  --head-h:68px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
:lang(ar){--serif:"Noto Naskh Arabic","Cormorant Garamond",serif;--sans:"Noto Naskh Arabic","Nunito Sans",system-ui,sans-serif}
:lang(ur){--serif:"Noto Nastaliq Urdu","Cormorant Garamond",serif;--sans:"Noto Nastaliq Urdu","Nunito Sans",system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans);font-feature-settings:"lnum" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
@supports (overflow:clip){body{overflow-x:clip}}
:lang(ar) body{font-size:18px;line-height:1.8}
:lang(ur) body{font-size:17px;line-height:2.15}
main{flex:1}
img{max-width:100%;height:auto;display:block}
a{color:var(--emerald);text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--gold)}
a:hover{text-decoration-color:var(--emerald)}
:focus-visible{outline:2px solid var(--emerald);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.dark :focus-visible,.download :focus-visible,.site-head.float:not(.solid) :focus-visible{outline-color:var(--gold-on-dark)}
h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--emerald);line-height:1.1;letter-spacing:-.005em;margin:0;text-wrap:balance}
:lang(ar) :is(h1,h2,h3){line-height:1.45;letter-spacing:0}
:lang(ur) :is(h1,h2,h3){line-height:1.9;letter-spacing:0}
p{margin:0 0 1em}
strong{font-weight:700}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--emerald);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{inset-inline-start:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header (legal pages: static cream; landing: .float) */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper);position:relative;z-index:50}
.site-head .wrap{display:flex;align-items:center;gap:16px;min-height:var(--head-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--emerald);margin-inline-end:auto}
.brand img{width:38px;height:38px;border-radius:9px;box-shadow:0 0 0 1px rgba(10,74,60,.12)}
.brand span{font:700 28px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.01em}
.nav{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:600}
.nav a{color:var(--ink-soft);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--emerald)}
.lang{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;font-size:13px;font-weight:700;letter-spacing:.06em}
.lang a,.lang span{padding:4px 10px;border-radius:999px;text-decoration:none;color:var(--ink-soft)}
.lang span{background:var(--emerald);color:#fff}
@media (max-width:620px){
  .site-head .wrap{flex-wrap:wrap;row-gap:4px;padding-block:12px}
  .nav{flex-basis:100%;flex-wrap:wrap;gap:4px 18px;font-size:14.5px}
  .nav .lang{margin-inline-start:auto}
}

.site-head.float{position:fixed;inset-inline:0;top:0;background:transparent;border-bottom-color:transparent;transition:background-color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.site-head.float .wrap{flex-wrap:nowrap;padding-block:0}
.site-head.float .nav{flex-basis:auto;gap:18px}
.site-head.float .brand{color:var(--cream-on-dark)}
.site-head.float .brand img{box-shadow:0 0 0 1px rgba(217,182,106,.4)}
.site-head.float .nav a{color:var(--mist-on-dark)}
.site-head.float .nav a:hover{color:#fff}
.site-head.float.solid{background:rgba(252,248,239,.94);border-bottom-color:var(--rule);box-shadow:0 8px 24px -20px rgba(7,54,41,.5)}
@supports (backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px)){.site-head.float.solid{background:rgba(252,248,239,.95);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}}
.site-head.float.solid .brand{color:var(--emerald)}
.site-head.float.solid .nav a{color:var(--ink-soft)}
.site-head.float.solid .nav a:hover{color:var(--emerald)}
.nav .sec{display:none}
@media (min-width:1080px){.nav .sec{display:inline}}
.head-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--gold);color:var(--night)!important;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.head-cta:hover{background:var(--gold-soft)}
@media (max-width:420px){.head-cta{display:none}}

/* compact menu below 1080 px */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--rule);border-radius:999px;color:var(--emerald)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:18px;height:18px}
.site-head.float:not(.solid) .menu summary{color:var(--cream-on-dark);border-color:var(--rule-dark)}
.menu ul{position:absolute;inset-inline-end:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:0 24px 40px -24px rgba(7,54,41,.55);min-width:210px;z-index:60}
.menu li a{display:block;padding:10px 12px;border-radius:9px;color:var(--ink)!important;text-decoration:none;font-weight:600;font-size:15.5px}
.menu li a:hover,.menu li a:focus-visible{background:var(--paper-2)}
.menu .menu-cta{display:none}
.menu .menu-cta a{background:var(--gold);color:var(--night)!important;text-align:center;margin-top:4px}
@media (max-width:420px){.menu .menu-cta{display:block}}
@media (min-width:1080px){.menu{display:none}}

/* language menu */
.langmenu{position:relative}
.langmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--rule);border-radius:999px;font-size:13.5px;font-weight:700;color:inherit}
.langmenu summary::-webkit-details-marker{display:none}
.langmenu summary svg{width:16px;height:16px;flex:none}
.site-head.float:not(.solid) .langmenu summary{color:var(--cream-on-dark);border-color:var(--rule-dark)}
.langmenu ul{position:absolute;inset-inline-end:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:0 24px 40px -24px rgba(7,54,41,.55);min-width:200px;z-index:60}
.langmenu li a{display:flex;justify-content:space-between;gap:14px;padding:9px 12px;border-radius:9px;color:var(--ink)!important;text-decoration:none;font-weight:600;font-size:15px}
.langmenu li a small{color:var(--gold-ink);font-weight:700;font-family:"Nunito Sans",sans-serif;letter-spacing:.08em}
.langmenu li a:hover,.langmenu li a:focus-visible{background:var(--paper-2)}
.langmenu li a[aria-current="page"]{background:var(--emerald);color:#fff!important}
.langmenu li a[aria-current="page"] small{color:var(--gold-soft)}

/* ornaments */
.orn{display:flex;align-items:center;gap:14px;color:var(--gold);margin:0 auto;max-width:280px}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:var(--rule)}
.orn svg{width:16px;height:16px;flex:none}
.rule{display:block;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);transform-origin:center}
.eyebrow{font:700 12.5px/1.2 "Nunito Sans",var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 14px}
:lang(ar) .eyebrow,:lang(ur) .eyebrow{font-family:var(--sans);letter-spacing:0;font-size:15px;line-height:1.6}

/* phone frame */
.phone{position:relative;border-radius:13.5%/6.3%;padding:3.2%;background:linear-gradient(160deg,#ecdcb0,#b78a3a 38%,#ecd59e 68%,#a77b2f);box-shadow:0 40px 70px -30px rgba(4,36,27,.6),0 10px 22px -12px rgba(4,36,27,.4)}
.phone::after{content:"";position:absolute;inset:3.2%;border-radius:11%/5.2%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);pointer-events:none}
.screen{position:relative;border-radius:11%/5.2%;overflow:hidden;background:var(--paper-2);aspect-ratio:780/1688}
.screen img{width:100%;height:100%;object-fit:cover}
.screen .shot{position:absolute;inset:0}
.screen .shot:first-child{position:relative}

/* store badges */
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.badge{display:block;padding:0;margin:0;line-height:0;cursor:default}
.badge img{height:48px;width:auto;max-width:none}
.stores-wrap{display:grid;gap:10px}
.soon{display:inline-flex;align-items:center;white-space:nowrap;min-height:30px;padding:0 12px;border:1px solid currentColor;border-radius:999px;font:700 11.5px/1 "Nunito Sans",var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
:lang(ar) .soon,:lang(ur) .soon{letter-spacing:0;font-size:14px;font-family:var(--sans);line-height:1.6}
@media (max-width:560px){.stores .soon{margin-inline-end:100%}}
.lang-note{font-size:14px;color:var(--ink-soft);margin:0;max-width:34em}

/* ============ HERO ============ */
.hero{position:relative;background:var(--night);color:var(--cream-on-dark)}
.hero-pin{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex}
.motion .hero{height:340vh}
.motion .hero-pin{position:sticky;top:0;height:100vh;height:100svh}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media picture,.hero-media img,.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-media img{object-fit:cover;object-position:70% 30%}
.hero-canvas{display:block;opacity:0;transition:opacity .6s var(--ease)}
.hero-canvas.on{opacity:1}
[dir="rtl"] .hero-media img{transform:scaleX(-1)}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom,rgba(4,36,27,.55),rgba(4,36,27,0) 22%),
  linear-gradient(to right,rgba(4,36,27,.92) 0%,rgba(4,36,27,.78) 34%,rgba(4,36,27,.2) 62%,rgba(4,36,27,0) 78%),
  linear-gradient(to top,rgba(4,36,27,.7),rgba(4,36,27,0) 30%)}
[dir="rtl"] .hero-scrim{background:
  linear-gradient(to bottom,rgba(4,36,27,.55),rgba(4,36,27,0) 22%),
  linear-gradient(to left,rgba(4,36,27,.92) 0%,rgba(4,36,27,.78) 34%,rgba(4,36,27,.2) 62%,rgba(4,36,27,0) 78%),
  linear-gradient(to top,rgba(4,36,27,.7),rgba(4,36,27,0) 30%)}
.hero-day{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(75% 70% at 88% 6%,rgba(255,250,236,.62),rgba(252,244,224,.24) 45%,rgba(252,244,224,0) 75%)}
[dir="rtl"] .hero-day{background:radial-gradient(75% 70% at 12% 6%,rgba(255,250,236,.62),rgba(252,244,224,.24) 45%,rgba(252,244,224,0) 75%)}
.hero-inner{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center;padding-top:calc(var(--head-h) + 24px);padding-bottom:56px}
.hero-copy{position:relative;max-width:600px}
.beats{position:relative;display:grid}
.beat{grid-area:1/1;align-self:center}
html:not(.motion) .beat{align-self:stretch}
.motion .beat{pointer-events:none}
.motion .beat.b0{pointer-events:auto}
.motion .beat:not(.b0){opacity:0}
.hero h1{font-size:clamp(42px,5.4vw,78px);font-weight:400;line-height:1.02;color:#fff;margin:0 0 20px}
:lang(ar) .hero h1{font-size:clamp(36px,5vw,64px);line-height:1.45;font-weight:700}
:lang(ur) .hero h1{font-size:clamp(30px,4.2vw,52px);line-height:2;font-weight:700}
.hero h1 .g{color:var(--gold-on-dark)}
.hero .eyebrow{color:var(--gold-on-dark)}
.hero-sub{font-size:clamp(17px,1.7vw,20px);color:var(--mist-on-dark);max-width:32em;margin-bottom:12px}
.hero-note{font-size:15px;color:var(--cream-on-dark);margin:0 0 26px;display:flex;flex-wrap:wrap;gap:6px 16px}
.hero-note span{display:inline-flex;align-items:center;gap:8px}
.hero-note span::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--gold-on-dark)}
.beat-k{font:700 12.5px/1.2 "Nunito Sans",var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-on-dark);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.beat-k::before{content:"";width:28px;height:1px;background:currentColor}
:lang(ar) .beat-k,:lang(ur) .beat-k{letter-spacing:0;font-size:15px;line-height:1.6;font-family:var(--sans)}
.beat-t{font:400 clamp(36px,4.8vw,64px)/1.05 var(--serif);color:#fff;margin:0 0 16px;text-wrap:balance}
:lang(ar) .beat-t{line-height:1.45;font-weight:700;font-size:clamp(30px,4vw,52px)}
:lang(ur) .beat-t{line-height:1.95;font-weight:700;font-size:clamp(26px,3.4vw,44px)}
.beat-p{font-size:clamp(16.5px,1.6vw,19px);color:var(--mist-on-dark);max-width:30em;margin:0}
.hero .stores-wrap{margin-top:26px}
.hero .soon{color:var(--gold-on-dark)}
.hero .lang-note{color:var(--mist-on-dark)}
.hero-device{position:relative;justify-self:center;width:min(300px,26vw)}
.hero-device .phone{will-change:transform}
.chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:rgba(252,248,239,.94);color:var(--emerald);font:700 13.5px/1.2 "Nunito Sans",var(--sans);white-space:nowrap;box-shadow:0 14px 30px -14px rgba(0,0,0,.55),0 0 0 1px rgba(196,154,69,.5);z-index:3}
:lang(ar) .chip,:lang(ur) .chip{font-family:var(--sans);font-size:14px;line-height:1.5}
.chip i{width:22px;height:22px;border-radius:50%;background:var(--emerald);color:var(--gold-on-dark);display:grid;place-items:center;flex:none}
.chip i svg{width:13px;height:13px}
.chip img{width:22px;height:22px}
.motion .chip{opacity:0}
html:not(.motion) .chip{display:none}
.c1{inset-inline-start:-34%;top:16%}
.c2{inset-inline-end:-30%;top:42%}
.c3{inset-inline-start:-26%;top:70%}
.hero-progress{position:absolute;z-index:3;inset-inline:var(--gutter);bottom:22px;display:flex;align-items:center;gap:14px;font:700 11.5px/1 "Nunito Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--mist-on-dark)}
.hero-progress .bar{flex:1;max-width:220px;height:1px;background:rgba(217,182,106,.3);position:relative;overflow:hidden}
.hero-progress .bar i{position:absolute;inset:0;background:var(--gold-on-dark);transform:scaleX(0);transform-origin:left}
[dir="rtl"] .hero-progress .bar i{transform-origin:right}
:lang(ar) .hero-progress,:lang(ur) .hero-progress{letter-spacing:0;font-size:13px;font-family:var(--sans)}
html:not(.motion) .hero-progress{display:none}

/* static hero (no JS, reduced motion, save-data): headline, badges, then the beats as a short list */
html:not(.motion) .hero-copy{display:flex;flex-direction:column}
html:not(.motion) .beats{display:contents}
html:not(.motion) .beat.b0{order:0}
html:not(.motion) .hero-copy .stores-wrap{order:1;margin:0 0 18px}
html:not(.motion) .beat:not(.b0){order:2;padding:12px 0;border-top:1px solid var(--rule-dark)}
html:not(.motion) .beat:not(.b0) .beat-k{margin:0 0 4px}
html:not(.motion) .beat:not(.b0) .beat-t{font-size:24px;line-height:1.2;margin:0 0 4px}
html:not(.motion) .beat:not(.b0) .beat-p{font-size:15.5px}
html:not(.motion) .beat.b4{display:none}
html:not(.motion) .hero-inner{padding-bottom:64px}

@media (max-width:1100px){.c1{inset-inline-start:-22%}.c2{inset-inline-end:-18%}.c3{inset-inline-start:-16%}}
@media (max-aspect-ratio:1/1),(max-width:760px){
  .hero-inner{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:stretch;gap:12px;padding-top:calc(var(--head-h) + 6px);padding-bottom:58px}
  .hero-device{order:-1;width:auto;height:clamp(220px,min(46svh,100vw),440px);aspect-ratio:820/1760;align-self:start}
  .hero-copy{align-self:end;max-width:640px}
  .hero-scrim{background:
    linear-gradient(to bottom,rgba(4,36,27,.6),rgba(4,36,27,0) 18%),
    linear-gradient(to top,rgba(4,36,27,.97) 0%,rgba(4,36,27,.93) 46%,rgba(4,36,27,.62) 62%,rgba(4,36,27,0) 80%)!important}
  .hero-media img{object-position:100% 0}
  .c1{inset-inline-start:auto;inset-inline-end:76%;top:20%}
  .c2{inset-inline-end:auto;inset-inline-start:76%;top:50%}
  .c1{inset-inline-end:68%}.c2{inset-inline-start:62%}
  :lang(ur) .chip{line-height:1.25;padding-block:3px}
  .c3{display:none}
  html:not(.motion) .hero-device{height:clamp(220px,40svh,420px)}
  html:not(.motion) .hero-inner{grid-template-rows:auto auto}
}
@media (max-width:760px){
  .hero h1{font-size:clamp(36px,10vw,52px);margin-bottom:12px}
  :lang(ar) .hero h1{font-size:clamp(30px,8.4vw,42px)}
  :lang(ur) .hero h1{font-size:clamp(26px,7.2vw,36px)}
  .beat-t{font-size:clamp(30px,8.6vw,44px);margin-bottom:10px}
  :lang(ar) .beat-t{font-size:clamp(26px,7.4vw,36px)}
  :lang(ur) .beat-t{font-size:clamp(22px,6.4vw,30px)}
  .hero-sub{font-size:16px;margin-bottom:8px}
  .beat-p{font-size:16px}
  .hero-note{font-size:14px;margin-bottom:0}
  .hero .stores-wrap{margin-top:16px;gap:6px}
  .badge img{height:42px}
  .chip{font-size:12px;padding:6px 10px 6px 7px}
  .chip i,.chip img{width:18px;height:18px}
  .hero-progress{bottom:16px}
  .hero-progress span:first-child{display:none}
  .hero-progress .bar{max-width:none}
}
@media (max-width:760px){:lang(ur) .hero-note{display:none}:lang(ur) .hero-device{height:clamp(190px,36svh,380px)}.motion .hero{height:300vh}}
:lang(ur) .hero h1 .g{white-space:nowrap}
@media (max-width:360px){.badge img{height:40px}.c1,.c2{display:none}}
@media (max-height:800px) and (max-width:760px){.hero-device{height:38svh}}
@media (max-height:640px) and (max-width:760px){.hero-sub{display:none}.hero-device{height:28svh}}
@media (max-width:420px){.hero .eyebrow{letter-spacing:.08em;font-size:11.5px}}

/* Naskh and Nastaliq read smaller than Latin at the same px size */
:lang(ar) .hero-sub,:lang(ar) .beat-p,:lang(ar) .lead{font-size:21px}
:lang(ar) .step p,:lang(ar) .section-head p,:lang(ar) .download p{font-size:19.5px}
:lang(ar) .hero-note,:lang(ar) .lang-note,:lang(ar) .ticks li,:lang(ar) .pillars p,:lang(ar) .plan p,:lang(ar) .price-note,:lang(ar) .facts li{font-size:17px}
:lang(ur) .hero-sub,:lang(ur) .beat-p,:lang(ur) .lead{font-size:19px}
@media (max-width:760px){:lang(ar) .hero-sub,:lang(ar) .beat-p{font-size:17.5px}:lang(ur) .hero-sub,:lang(ur) .beat-p{font-size:16px}}

/* ============ SECTIONS ============ */
.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.section-head{text-align:center;max-width:700px;margin:0 auto clamp(36px,5vw,64px)}
.section-head h2{font-size:clamp(36px,5vw,58px);font-weight:400;margin:16px 0 14px}
:lang(ar) .section-head h2,:lang(ur) .section-head h2{font-weight:700;font-size:clamp(30px,4vw,46px)}
.section-head p{color:var(--ink-soft);margin:0;text-wrap:balance;font-size:18px}
.dark{background:var(--emerald-deep);color:var(--cream-on-dark)}
.dark h2,.dark h3{color:#fff}
.dark .section-head p,.dark p{color:var(--mist-on-dark)}
.dark .eyebrow{color:var(--gold-on-dark)}
.dark .orn{color:var(--gold-on-dark)}
.dark .orn::before,.dark .orn::after{background:var(--rule-dark)}
.dark a{color:#fff;text-decoration-color:var(--gold-on-dark)}
.ui-note{text-align:center;font-size:14px;color:var(--ink-soft);margin:-28px auto 40px;max-width:40em}

/* ============ TOUR ============ */
.tour{background:linear-gradient(var(--paper),var(--paper-2))}
.tour-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px)}
.tour-device{position:sticky;top:calc(var(--head-h) + (100vh - var(--head-h) - min(620px,78vh))/2);top:calc(var(--head-h) + (100svh - var(--head-h) - min(620px,78svh))/2);height:min(620px,78vh);height:min(620px,78svh);display:flex;justify-content:center;align-self:start}
.tour-phone{position:relative;height:100%;aspect-ratio:820/1760}
.tour-phone .phone{position:absolute;inset:0}
.tour-phone .back{transform:translate(38%,6%) rotate(5deg) scale(.86);opacity:0;z-index:0}
[dir="rtl"] .tour-phone .back{transform:translate(-38%,6%) rotate(-5deg) scale(.86)}
.tour-phone .front{z-index:1}
.tour-meta{position:absolute;bottom:-34px;inset-inline:0;text-align:center;font:700 12px/1 "Nunito Sans",sans-serif;letter-spacing:.2em;color:var(--gold-ink)}
.tour-glow{position:absolute;inset:-12% -30%;background:radial-gradient(closest-side,rgba(227,203,146,.55),rgba(227,203,146,0));z-index:-1}
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:1px;background:var(--rule)}
.steps-col{position:relative}
.steps-col .line{position:absolute;inset-block:0;inset-inline-start:0;width:1px;background:var(--gold-ink);transform-origin:top;transform:scaleY(0)}
html:not(.motion) .steps-col{position:relative}
.steps-col .line{display:none}
.step{min-height:64vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;padding-inline-start:clamp(24px,3.4vw,48px);position:relative}
.step::before{content:"";position:absolute;inset-inline-start:-4px;top:50%;width:9px;height:9px;transform:translateY(-50%) rotate(45deg);background:var(--paper);border:1px solid var(--gold);transition:background-color .4s}
.step.on::before{background:var(--gold)}
.step-num{font:700 13px/1 "Nunito Sans",sans-serif;letter-spacing:.2em;color:var(--gold-ink);margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
:lang(ar) .step-num,:lang(ur) .step-num{letter-spacing:0}
.step-num b{font-weight:700;color:var(--emerald);letter-spacing:.14em;text-transform:uppercase}
:lang(ar) .step-num b,:lang(ur) .step-num b{letter-spacing:0;font-family:var(--sans);font-size:15px}
.step h3{font-size:clamp(32px,3.6vw,48px);font-weight:400;line-height:1.05;margin-bottom:16px}
:lang(ar) .step h3{font-weight:700;line-height:1.5;font-size:clamp(26px,3vw,38px)}
:lang(ur) .step h3{font-weight:700;line-height:2;font-size:clamp(23px,2.6vw,32px)}
.step p{color:var(--ink-soft);font-size:18px;max-width:34em}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:6px 0 0;padding:0}
.facts li{font-size:13.5px;font-weight:700;color:var(--emerald);border:1px solid var(--gold-soft);background:rgba(255,250,238,.8);border-radius:999px;padding:6px 12px}
:lang(ur) .facts li{line-height:1.9;padding:2px 12px}
.tier{display:inline-flex;align-items:center;gap:6px;font:700 11px/1.2 "Nunito Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--gold-soft);color:var(--gold-ink)}
.tier.mixed{text-transform:none;letter-spacing:.02em;font-size:12.5px;font-family:var(--sans)}
.tier.free{color:var(--emerald);border-color:rgba(10,74,60,.3)}
.tier.premium{background:var(--emerald);color:var(--gold-soft);border-color:var(--emerald)}
:lang(ar) .tier,:lang(ur) .tier{letter-spacing:0;font-family:var(--sans);font-size:13px;line-height:1.4}
.step .qstats{display:grid;grid-template-columns:repeat(4,1fr);max-width:30em;margin-top:8px;border-block:1px solid var(--rule)}
.step .qstats div{padding:12px 6px;text-align:center;border-inline-start:1px solid var(--rule)}
.step .qstats div:first-child{border-inline-start:0}
.step .qstats b{display:block;font:400 clamp(26px,2.6vw,34px)/1.1 "Cormorant Garamond",serif;color:var(--emerald)}
.step .qstats span{font-size:13px;color:var(--ink-soft)}
.tour-dots{display:none}
.beads{display:flex;gap:6px;margin:16px 0 4px;list-style:none;padding:0}
.beads img{width:34px;height:34px;filter:drop-shadow(0 6px 6px rgba(4,36,27,.25))}
.step-more{font-weight:700;margin-top:10px}
.step-phone{display:none}
@media (max-width:959px){
  .tour-grid{grid-template-columns:minmax(0,1fr);padding:0}
  .tour-device,.steps::before{display:none}
  .steps{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gutter) 10px;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 min(86%,420px);scroll-snap-align:center;min-height:0;justify-content:flex-start;padding:20px 20px 22px;background:#fffaf0;border:1px solid var(--rule);border-radius:22px;box-shadow:0 18px 30px -26px rgba(7,54,41,.5)}
  .step::before{display:none}
  .step h3{font-size:clamp(26px,7vw,32px);margin-bottom:10px}
  .step p{font-size:16px}
  .step-phone,html:not(.motion) .step-phone{display:flex;gap:12px;justify-content:center;margin:0 0 18px}
  .step-phone .phone{width:min(168px,42vw)}
  .facts li{font-size:12.5px;padding:5px 10px}
  .step-phone.two .phone{width:min(150px,36vw)}
  .step-phone.two .phone:last-child{margin-top:22px}
  .tour-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--gold-soft);transition:background-color .3s,transform .3s}
  .tour-dots i.on{background:var(--gold-ink);transform:scale(1.35)}
  .ui-note{margin:-20px var(--gutter) 24px}
}

/* static tour: no sticky phone, each step carries its own screen */
html:not(.motion) .hero-device .shot:not(:first-child){display:none}
html:not(.motion) .tour-device,html:not(.motion) .steps::before{display:none}
html:not(.motion) .step-phone{display:flex;gap:14px;justify-content:center;margin:4px 0 28px}
html:not(.motion) .step::before{display:none}
@media (min-width:960px){
  html:not(.motion) .step .qstats{max-width:none}
  html:not(.motion) .tour-grid{grid-template-columns:1fr;max-width:980px}
  html:not(.motion) .step{display:grid;grid-template-columns:280px 1fr;column-gap:64px;align-content:center;min-height:0;padding:44px 0;border-top:1px solid var(--rule)}
  html:not(.motion) .step-phone{grid-column:1;grid-row:1/span 9;margin:0;align-self:center}
  html:not(.motion) .step-phone .phone{width:240px}
  html:not(.motion) .step-phone.two .phone{width:150px}
  html:not(.motion) .step>:not(.step-phone){grid-column:2}
}

/* ============ SHELF ============ */
.shelf-band{background:var(--paper);padding:clamp(48px,7vw,88px) 0 clamp(20px,3vw,40px);border-top:1px solid var(--rule)}
.shelf-head{text-align:center;margin-bottom:22px}
.shelf-head h2{font-size:clamp(32px,4.4vw,52px);font-weight:400;margin:0 0 10px}
:lang(ar) .shelf-head h2,:lang(ur) .shelf-head h2{font-weight:700;font-size:clamp(28px,3.6vw,42px)}
.shelf-head p{color:var(--ink-soft);margin:0}
.shelf{overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
.shelf::-webkit-scrollbar{display:none}
.shelf-row{display:flex;gap:12px;list-style:none;margin:0 auto;padding:8px var(--gutter) 40px;width:max-content}
.vol{width:122px;height:176px;flex:none;scroll-snap-align:start;border-radius:6px 12px 12px 6px;padding:14px 12px 12px 18px;position:relative;color:var(--cream-on-dark);background:linear-gradient(135deg,var(--c1,#0d5a48),var(--c2,#06352a));box-shadow:0 22px 34px -22px rgba(4,36,27,.7),inset 6px 0 0 rgba(0,0,0,.18),inset 7px 0 0 rgba(217,182,106,.5);display:flex;flex-direction:column}
[dir="rtl"] .vol{border-radius:12px 6px 6px 12px;padding:14px 18px 12px 12px;box-shadow:0 22px 34px -22px rgba(4,36,27,.7),inset -6px 0 0 rgba(0,0,0,.18),inset -7px 0 0 rgba(217,182,106,.5)}
.vol::before{content:"";position:absolute;inset:8px;inset-inline-start:13px;border:1px solid rgba(217,182,106,.55);border-radius:4px;pointer-events:none}
.vol .no{font:700 10px/1 "Nunito Sans",sans-serif;letter-spacing:.18em;color:var(--gold-on-dark);text-transform:uppercase}
:lang(ar) .vol .no,:lang(ur) .vol .no{letter-spacing:0;font-family:var(--sans);font-size:12px;line-height:1.5}
.vol svg{width:22px;height:22px;color:var(--gold-on-dark);margin:auto 0 8px}
.vol h3{color:#fff;font-size:18px;font-weight:700;line-height:1.08}
:lang(ar) .vol h3{font-size:15.5px;line-height:1.5}
:lang(ur) .vol h3{font-size:13.5px;line-height:1.9}
.vol .n{font-size:12px;color:var(--mist-on-dark);margin-top:4px}
.vol:nth-child(2){--c1:#1c5b3c;--c2:#0a3424}
.vol:nth-child(3){--c1:#174d55;--c2:#0a2c31}
.vol:nth-child(4){--c1:#5a4a1e;--c2:#2f260c}
.vol:nth-child(5){--c1:#0f5d4b;--c2:#04241B}
.vol:nth-child(6){--c1:#4c2e3a;--c2:#27151d}
.vol:nth-child(7){--c1:#2e4c2a;--c2:#152912}
.vol:nth-child(8){--c1:#6a4a22;--c2:#3a260e}
.vol:nth-child(9){--c1:#26394f;--c2:#111d2b}

/* ============ NUMBERS ============ */
.numbers{background:var(--paper-2);border-block:1px solid var(--rule);padding:clamp(56px,7vw,88px) 0}
.num-grid{display:grid;grid-template-columns:repeat(6,1fr);list-style:none;margin:0;padding:0}
.num-grid li{text-align:center;padding:10px 8px;border-inline-start:1px solid var(--rule)}
.num-grid li:first-child{border-inline-start:0}
.num-grid b{display:block;font:400 clamp(40px,4.4vw,60px)/1 "Cormorant Garamond",serif;color:var(--emerald);font-variant-numeric:lining-nums tabular-nums}
.num-grid span{display:block;margin-top:10px;font-size:15px;color:var(--ink-soft);font-weight:600}
@media (max-width:900px){.num-grid{grid-template-columns:repeat(3,1fr);row-gap:28px}.num-grid li:nth-child(4){border-inline-start:0}}
@media (max-width:480px){.num-grid{grid-template-columns:1fr 1fr}.num-grid li:nth-child(odd){border-inline-start:0}.num-grid li:nth-child(4){border-inline-start:1px solid var(--rule)}}

.num-h{text-align:center;font-size:clamp(28px,3.2vw,40px);font-weight:400;margin:0 0 clamp(28px,4vw,48px)}
:lang(ar) .num-h,:lang(ur) .num-h{font-weight:700}

/* ============ PRIVACY ============ */
.privacy{position:relative;overflow:hidden;padding:clamp(48px,6vw,76px) 0}
.privacy::before,.privacy::after{content:"";position:absolute;inset-inline:0;height:1px;background:var(--rule-dark)}
.privacy::before{top:10px}.privacy::after{bottom:10px}
.pillars{display:grid;gap:22px;grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto;list-style:none;padding:0}
.pillars li{border:1px solid var(--rule-dark);border-radius:20px;padding:24px 22px;background:rgba(255,255,255,.03)}
.pillars svg{width:34px;height:34px;color:var(--gold-on-dark);margin-bottom:16px}
.pillars h3{color:var(--gold-on-dark);font-size:26px;margin-bottom:8px}
:lang(ar) .pillars h3,:lang(ur) .pillars h3{font-size:21px}
.pillars p{margin:0;font-size:16px}
.privacy .more{text-align:center;margin:28px 0 0;font-weight:700}
@media (max-width:800px){.pillars{grid-template-columns:1fr;gap:12px}.pillars li{padding:18px 18px}.pillars svg{width:28px;height:28px;margin-bottom:8px}}

/* ============ PRICING ============ */
.pricing .seal{width:120px;height:120px;margin:0 auto 6px}
.plans{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);max-width:980px;margin:0 auto;list-style:none;padding:0}
.plan{background:#fffaf0;border:1px solid var(--rule);border-radius:20px;padding:30px 24px 26px;text-align:center;position:relative}
.plan h3{font-size:26px;margin-bottom:8px}
.plan .price{font:700 40px/1.1 var(--serif);color:var(--ink)}
.plan .price.txt{font-size:30px;color:var(--emerald)}
:lang(ar) .plan .price.txt{font-size:24px;line-height:1.6}
:lang(ur) .plan .price.txt{font-size:20px;line-height:2}
.plan .price small{font:600 15px "Nunito Sans",sans-serif;color:var(--ink-soft)}
.plan p{margin:10px 0 0;font-size:15.5px;color:var(--ink-soft)}
.plan.featured{border:2px solid var(--gold);box-shadow:0 24px 40px -26px rgba(138,100,32,.6)}
.plan .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--gold);color:var(--night);font:700 11.5px/1 "Nunito Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
:lang(ar) .plan .ribbon,:lang(ur) .plan .ribbon{letter-spacing:0;font-family:var(--sans);font-size:13px;line-height:1.3}
@media (max-width:820px){.plans{grid-template-columns:1fr;max-width:440px}.plan.featured{margin-top:8px}}
.price-note{max-width:760px;margin:26px auto 0;text-align:center;color:var(--ink-soft);font-size:15.5px}
.compare{max-width:860px;margin:clamp(40px,6vw,64px) auto 0;border-collapse:collapse;width:100%;font-size:15.5px}
.compare caption{font:400 30px/1.2 var(--serif);color:var(--emerald);margin-bottom:16px}
:lang(ar) .compare caption,:lang(ur) .compare caption{font-weight:700;font-size:24px;line-height:1.8}
.compare th,.compare td{padding:12px 10px;border-bottom:1px solid var(--rule);text-align:start;vertical-align:top}
.compare thead th{font:700 12px/1.2 "Nunito Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
:lang(ar) .compare thead th,:lang(ur) .compare thead th{letter-spacing:0;font-family:var(--sans);font-size:14px}
.compare td{text-align:center;width:22%;color:var(--ink-soft)}
.compare thead th:not(:first-child){text-align:center}
.compare tbody th{font-weight:600;color:var(--ink)}
.compare .y{color:var(--emerald);font-weight:700}
.compare td:last-child,.compare thead th:last-child{background:rgba(10,74,60,.07)}
.compare thead th:last-child{color:var(--emerald);border-radius:10px 10px 0 0}
.compare svg{width:18px;height:18px;vertical-align:-3px}
@media (max-width:520px){.compare{font-size:14.5px}.compare th,.compare td{padding:10px 6px}}

/* ============ FAQ (landing + support page) ============ */
.faq{max-width:var(--narrow);margin:0 auto}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;padding-inline-end:34px;position:relative;font:700 21px/1.3 var(--serif);color:var(--emerald)}
:lang(ar) .faq summary{line-height:1.7;font-size:19px}
:lang(ur) .faq summary{line-height:2;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;inset-inline-end:6px;top:50%;width:9px;height:9px;border-right:1.5px solid var(--gold-ink);border-bottom:1.5px solid var(--gold-ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .ans{padding:0 0 18px;color:var(--ink-soft)}
.faq .ans p:last-child,.faq .ans ul:last-child{margin-bottom:0}
.faq-more{text-align:center;margin-top:28px;font-weight:700}

/* ============ DOWNLOAD ============ */
.download{position:relative;overflow:hidden;background:var(--night);color:var(--cream-on-dark);padding:clamp(80px,11vw,150px) 0}
.download .bg{position:absolute;inset:-12% 0;background:url(hero/poster-end.webp) 70% 30%/cover no-repeat}
[dir="rtl"] .download .bg{transform:scaleX(-1)}
.download::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(4,36,27,.94),rgba(4,36,27,.8) 45%,rgba(4,36,27,.2));pointer-events:none}
[dir="rtl"] .download::after{background:linear-gradient(to left,rgba(4,36,27,.94),rgba(4,36,27,.8) 45%,rgba(4,36,27,.2))}
.download .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.download h2{color:#fff;font-size:clamp(38px,5vw,64px);font-weight:400;margin:0 0 16px}
:lang(ar) .download h2,:lang(ur) .download h2{font-weight:700;font-size:clamp(30px,4vw,46px)}
.download p{color:var(--mist-on-dark);font-size:18px;max-width:32em}
.download .soon{color:var(--gold-on-dark)}
.download .lang-note{color:var(--mist-on-dark)}
.download .phone{width:min(260px,60vw);justify-self:center}
@media (max-width:760px){.download .wrap{grid-template-columns:1fr}.download::after{background:linear-gradient(to top,rgba(4,36,27,.95) 30%,rgba(4,36,27,.55))!important}}

/* reveal helpers */
.motion:not(.ready) .hero-copy,.motion:not(.ready) .hero-device{opacity:0;animation:show-anyway .5s 1.2s forwards}
@keyframes show-anyway{to{opacity:1}}
.motion .rv{opacity:0;transform:translateY(24px)}

/* legal / text pages */
.page-head{padding-block:clamp(40px,7vw,80px) 28px;text-align:center}
.page-head h1{font-size:clamp(40px,6.5vw,64px);font-weight:400;margin:16px 0 10px}
.page-head p{color:var(--ink-soft);margin:0}
.prose{max-width:var(--narrow);margin:0 auto;padding:0 var(--gutter) clamp(56px,8vw,96px)}
.prose h2{font-size:clamp(27px,3.6vw,33px);margin:1.7em 0 .55em;padding-top:.8em;border-top:1px solid var(--rule)}
.prose h3{font-size:22px;margin:1.6em 0 .4em}
.prose ul{padding-inline-start:1.2em;margin:0 0 1em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--gold)}
.summary{background:var(--paper-2);border:1px solid var(--rule);border-radius:18px;padding:22px 24px;margin:8px 0 8px}
.summary h2{border:0;padding:0;margin:0 0 .5em;font-size:26px}
.summary ul{margin:0}
.data{margin:0 0 1em;border-top:1px solid var(--rule)}
.data div{padding:14px 0;border-bottom:1px solid var(--rule)}
.data dt{font:700 20px/1.25 var(--serif);color:var(--emerald)}
.data dd{margin:4px 0 0;color:var(--ink-soft);font-size:16px}
.data dd b{color:var(--ink);font-weight:600}
.callout{border-inline-start:2px solid var(--gold);padding:4px 0;padding-inline-start:18px;margin:1.2em 0;color:var(--ink-soft)}
.contact{background:var(--emerald);color:#EAF1EC;border-radius:20px;padding:26px 26px 24px;margin:8px 0 12px;text-align:center}
.contact p{margin:0 0 6px}
.contact a{font:700 clamp(24px,5vw,30px)/1.2 var(--serif);color:#fff;text-decoration-color:var(--gold-on-dark);word-break:break-word}
.contact p a{font:inherit;word-break:normal}

/* footer */
.site-foot{border-top:1px solid var(--rule);padding:44px 0 48px;font-size:14.5px;color:var(--ink-soft)}
.site-foot .wrap{display:grid;gap:22px}
@media (min-width:760px){.site-foot .wrap{grid-template-columns:1fr auto;align-items:start}}
.foot-brand{display:flex;align-items:center;gap:10px;color:var(--emerald);font:700 22px/1 "Cormorant Garamond",serif;margin-bottom:10px}
.foot-brand img{width:28px;height:28px;border-radius:7px}
.site-foot p{margin:0 0 4px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0;padding:0;font-weight:600}
.foot-links a{color:var(--ink-soft);text-decoration:none}
.foot-links a:hover{color:var(--emerald)}
.foot-langs{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:10px 0 0;padding:0}
.foot-langs a{color:var(--ink-soft);text-decoration:none;font-weight:600}
.foot-langs a[aria-current="page"]{color:var(--emerald);text-decoration:underline;text-decoration-color:var(--gold)}
.foot-fine{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:18px;font-size:13px;line-height:1.6}
.foot-fine p{margin:0 0 4px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}