/* مِرقاة — Design System: Emerald Brand, Gold & Paper; RTL; Light & Dark */
:root{
  --navy:#0f4a3c;--navy2:#0a382d;--navy3:#062b22;--gold:#d9a63b;--gold2:#f0c766;--gold-ink:#875f0a;
  --brand:#0f5d4a;--brand2:#0a4638;--brand-soft:#e6f4ef;--clay:#b85c2e;
  --bg:#f8f9fa;--panel:#ffffff;--soft:#f0f4f2;--ink:#1c2321;--mu:#5a6864;--bd:#dce4e0;
  --ok:#137a3b;--ok-bg:#e2f5e9;--warn:#995400;--warn-bg:#fff2dc;--bad:#b42318;--bad-bg:#fde8e6;
  --sh:0 10px 30px rgba(15,74,60,.08);--sh2:0 18px 50px rgba(15,74,60,.14);
  --r:18px;--f:"Readex Pro","Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101715;--panel:#17221e;--soft:#1f2e29;--ink:#f0f6f4;--mu:#9ab3aa;--bd:#273b34;--gold-ink:#f0c766;
  --ok:#5fd28a;--ok-bg:#0f3321;--warn:#ffc061;--warn-bg:#3a2a07;--bad:#ff8a80;--bad-bg:#3d1411;
  --sh:0 10px 30px rgba(0,0,0,.45);--sh2:0 18px 50px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#101715;--panel:#17221e;--soft:#1f2e29;--ink:#f0f6f4;--mu:#9ab3aa;--bd:#273b34;--gold-ink:#f0c766;
  --ok:#5fd28a;--ok-bg:#0f3321;--warn:#ffc061;--warn-bg:#3a2a07;--bad:#ff8a80;--bad-bg:#3d1411;
  --sh:0 10px 30px rgba(0,0,0,.45);--sh2:0 18px 50px rgba(0,0,0,.6);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.75 var(--f);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.35;margin:0 0 .4em;font-weight:800}
h1{font-size:clamp(1.8rem,1.2rem + 2.6vw,3.1rem)}h2{font-size:clamp(1.45rem,1.1rem + 1.4vw,2.2rem)}h3{font-size:1.15rem}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:12px;top:8px;background:var(--gold);color:#1d1400;padding:8px 14px;border-radius:10px;z-index:100;transform:translateY(-200%)}
.skip:focus{transform:none}
.w{max-width:1200px;margin-inline:auto;padding-inline:16px}
.s{padding-block:clamp(44px,6vw,84px)}
.s.alt{background:var(--panel);border-block:1px solid var(--bd)}
.s.dark{background:var(--navy);color:#fff}
.s.dark .lead,.s.dark .mu{color:#c4d1ea}
.lead{font-size:1.12rem;color:var(--mu);max-width:62ch}
.mu{color:var(--mu)}
.center{text-align:center}.center .lead{margin-inline:auto}
.kicker{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--gold-ink);font-size:.95rem;margin-bottom:.4em}
.kicker::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--gold)}
.s.dark .kicker{color:var(--gold2)}
/* header */
#top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--bd)}
#top .in{max-width:1200px;margin-inline:auto;padding:8px 16px;display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:1.35rem;color:var(--navy)}
.brand-logo-mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--navy),#0f5d4a);color:var(--gold2);box-shadow:0 4px 12px rgba(15,74,60,0.25);flex-shrink:0}
.brand-text-col{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.brand-text-col strong{font-size:1.35rem;font-weight:800;color:var(--ink);letter-spacing:-0.5px}
:root[data-theme="dark"] .brand-text-col strong{color:#fff}
.brand-text-col small{font-size:0.72rem;font-weight:600;color:var(--gold-ink)}
.tag-free-mini{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--ok-bg);color:var(--ok);font-size:0.72rem;font-weight:800;margin-inline-start:4px;vertical-align:middle}
.tag-pro-mini{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--warn-bg);color:var(--gold-ink);font-size:0.72rem;font-weight:800;margin-inline-start:4px;vertical-align:middle}
.app-launch-btn{background:linear-gradient(135deg,#0f5d4a,#0a4638) !important;color:#fff !important;border:1px solid rgba(255,255,255,0.2) !important;box-shadow:0 4px 14px rgba(15,93,74,0.3) !important}
.app-launch-btn:hover{box-shadow:0 6px 20px rgba(15,93,74,0.45) !important}
.brand img{height:44px;width:auto}
:root[data-theme="dark"] .brand{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand{color:#fff}}
.nav{display:flex;gap:4px;margin-inline-start:8px}
.nav a{text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:600;color:var(--mu)}
.nav a:hover{background:var(--soft);color:var(--ink)}
.acts{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.ic{width:44px;height:44px;border-radius:12px;border:1px solid var(--bd);background:var(--panel);color:var(--ink);cursor:pointer;display:inline-grid;place-items:center;padding:0}
.ic svg{width:22px;height:22px}
.menu{display:none}
.mnav{display:flex;flex-direction:column;padding:8px 16px 14px;gap:2px;border-top:1px solid var(--bd)}
.mnav[hidden]{display:none}
.mnav a{padding:10px 8px;text-decoration:none;font-weight:700;border-radius:10px}
.mnav a:hover{background:var(--soft)}
@media (max-width:920px){.nav{display:none}.menu{display:inline-block}#top .btn.ghost{display:none}}
@media (max-width:420px){#top .btn.gold{padding-inline:12px;font-size:.88rem}.brand img{height:38px}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:14px;border:0;font-weight:800;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn.sm{min-height:40px;padding:6px 14px;border-radius:12px;font-size:.95rem}
.btn.gold{background:linear-gradient(180deg,#e7b54a,#d29a2a);color:#1d1400;box-shadow:0 6px 18px rgba(217,166,59,.35)}
.btn.navy{background:var(--navy);color:#fff}
:root[data-theme="dark"] .btn.navy{background:var(--navy3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.navy{background:var(--navy3)}}
.btn.ghost{background:transparent;border:1.5px solid var(--bd);color:var(--ink)}
.btn.white{background:#fff;color:var(--navy)}
.btn.line-w{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:10px}
/* hero: copy and artwork side by side on wide screens (artwork never cropped, text never over busy areas) */
.hero{position:relative;background:radial-gradient(120% 90% at 85% 20%,#424952 0%,#232933 65%);color:#fff;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.hero picture,.hero img.hi{display:block;width:100%}
.hero picture{grid-column:2;grid-row:1}
.hero img.hi{aspect-ratio:3/2;object-fit:contain;background:transparent}
.hero .copy{grid-column:1;grid-row:1;padding:clamp(20px,3.6vw,56px);padding-inline-end:clamp(10px,2vw,28px)}
.hero h1{color:#fff;font-size:clamp(1.7rem,1rem + 2.1vw,2.8rem)}
.hero .lead{color:#dbe5f7}
.hero .chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.hero .chips li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:3px 12px;border-radius:999px;font-size:.92rem}
.hero .btns .btn{min-width:150px}
.hero.solo{display:block}.hero.solo picture{grid-column:auto}
@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .hero picture,.hero .copy{grid-column:1;grid-row:auto}
  .hero img.hi{aspect-ratio:2/3}
  .hero .copy{padding:22px 16px 30px}
  .hero .btns .btn{flex:1 1 140px;min-width:0}
}
@media (min-width:761px) and (max-width:1080px){.hero .lead{font-size:1rem}.hero .chips{display:none}.hero .btns .btn{min-width:0}}
/* image frames: never crop artwork that carries text */
.fig{margin:0;border-radius:var(--r);overflow:hidden;background:var(--navy);box-shadow:var(--sh)}
.fig img{width:100%;height:auto;object-fit:contain}
.r1{aspect-ratio:1/1}.r32{aspect-ratio:3/2}.r23{aspect-ratio:2/3}
/* grids & cards */
.g{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.g6{grid-template-columns:repeat(auto-fill,minmax(min(46%,170px),1fr))}
.card{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.tile{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
a.tile:hover,button.tile:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.tile .fig{border-radius:0;box-shadow:none}
.tile .tx{padding:14px 16px 16px}
.tile .tx h3{margin:0 0 .2em}
.tile .tx p{margin:0;color:var(--mu);font-size:.96rem}
button.tile{font:inherit;text-align:start;cursor:pointer;padding:0}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,56px);align-items:center}
.split.rev>:first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}}
.ticks{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:8px}
.ticks li{position:relative;padding-inline-start:30px}
.ticks li::before{content:"✓";position:absolute;inset-inline-start:0;top:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#1d1400;font-size:.8rem;font-weight:800}
.steps{counter-reset:st;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));list-style:none;padding:0;margin:0}
.steps li{counter-increment:st;background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);padding:18px;position:relative}
.steps li::before{content:counter(st);display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--navy);color:var(--gold2);font-weight:800;margin-bottom:8px}
.steps b{display:block;margin-bottom:2px}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:1px 10px;font-size:.82rem;font-weight:700;background:var(--soft);color:var(--mu)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.bad{background:var(--bad-bg);color:var(--bad)}
.note{border-inline-start:4px solid var(--gold);background:var(--soft);border-radius:12px;padding:12px 14px;color:var(--mu);font-size:.95rem}
/* pricing */
.prices{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:stretch}
.price{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--bd);border-radius:22px;overflow:hidden;box-shadow:var(--sh)}
.price.best{border:2px solid var(--gold);box-shadow:0 18px 50px rgba(217,166,59,.25)}
.price .tx{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.price .amt{font-size:2rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .price .amt{color:var(--gold2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .price .amt{color:var(--gold2)}}
.price .per{color:var(--mu);font-size:.95rem}
.price .btn{margin-top:auto}
/* faq */
.faq{display:grid;gap:10px;max-width:860px;margin-inline:auto}
.faq details{background:var(--panel);border:1px solid var(--bd);border-radius:14px;padding:4px 16px}
.faq summary{cursor:pointer;font-weight:800;padding:12px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--gold-ink);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--mu)}
/* forms */
.form{display:grid;gap:14px}
.f{display:flex;flex-direction:column;gap:6px;font-weight:700}
.f small{font-weight:400;color:var(--mu)}
.inp{width:100%;min-height:50px;border:1.5px solid var(--bd);background:var(--panel);border-radius:12px;padding:10px 14px}
.inp:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(217,166,59,.25)}
.inp[aria-invalid="true"]{border-color:var(--bad)}
.inp.code{direction:ltr;text-align:center;letter-spacing:.12em;font-weight:800;text-transform:uppercase;font-size:1.15rem}
.inp.pin{direction:ltr;text-align:center;letter-spacing:.5em;font-weight:800;font-size:1.4rem;max-width:220px}
.err{color:var(--bad);font-weight:600;font-size:.92rem;min-height:1.2em}
.msg{border-radius:12px;padding:10px 14px;font-weight:600}
.msg.ok{background:var(--ok-bg);color:var(--ok)}.msg.bad{background:var(--bad-bg);color:var(--bad)}.msg.warn{background:var(--warn-bg);color:var(--warn)}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.opt{position:relative;display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--bd);border-radius:14px;padding:12px 14px;background:var(--panel);cursor:pointer}
.opt input{margin-top:6px;accent-color:var(--gold);width:18px;height:18px}
.opt:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,166,59,.2)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--bd);border-radius:999px;padding:8px 14px;cursor:pointer;background:var(--panel);font-weight:700;min-height:44px}
.seg input{accent-color:var(--gold)}
.seg label:has(input:checked){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--panel))}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
/* footer */
#foot{background:var(--navy);color:#c9d5ec;margin-top:0}
#foot .in{max-width:1200px;margin-inline:auto;padding:36px 16px 10px;display:grid;gap:22px;grid-template-columns:2fr 1fr 1fr 1fr}
#foot .fcol{display:flex;flex-direction:column;gap:6px}
#foot .fcol img{height:40px;width:auto;filter:brightness(0) invert(1)}
#foot b{color:#fff}
#foot a{color:#c9d5ec;text-decoration:none}
#foot a:hover{color:var(--gold2)}
#foot .fine{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-block:14px 22px;font-size:.9rem}
@media (max-width:760px){#foot .in{grid-template-columns:1fr 1fr}#foot .fcol:first-child{grid-column:1/-1}}
/* toast */
.toast{position:fixed;inset-inline:16px;bottom:18px;margin-inline:auto;max-width:460px;background:var(--navy);color:#fff;border-radius:14px;padding:12px 16px;box-shadow:var(--sh2);z-index:200;opacity:0;transform:translateY(10px);transition:.25s;font-weight:600}
.toast.on{opacity:1;transform:none}
.toast.bad{background:#8a1c12}
/* misc */
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.stat{font-variant-numeric:tabular-nums}
.sticky-cta{position:fixed;inset-inline:0;bottom:0;z-index:40;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--bd)}
.sticky-cta .btn{flex:1}
@media (max-width:760px){.sticky-cta{display:flex}body.has-cta{padding-bottom:76px}}
.table-wrap{overflow-x:auto;border:1px solid var(--bd);border-radius:14px;background:var(--panel)}
table.t{width:100%;border-collapse:collapse;font-size:.95rem}
table.t th,table.t td{padding:10px 12px;border-bottom:1px solid var(--bd);text-align:start;vertical-align:top}
table.t th{background:var(--soft);font-weight:800;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mu);margin-inline-end:6px}
.status-dot.ok{background:#22a35a}.status-dot.warn{background:#e0a100}.status-dot.bad{background:#d9372a}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Review release: neutral surfaces and clear, touch-friendly purchase cards. */
[hidden]{display:none!important}
.order-layout{grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:30px}
#offers .opt{position:relative;gap:8px;border-radius:18px;overflow:hidden;transition:transform .18s,box-shadow .18s;background:var(--panel);text-align:center}
#offers .opt:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
#offers .opt:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),var(--sh)}
#offers .stat{font-size:clamp(1.1rem,1.8vw,1.6rem);white-space:nowrap}
.offer-note{font-size:.8rem;color:var(--mu)}
.trial-visual{overflow:hidden;padding:0;border-radius:22px}
.trial-visual img{width:100%;height:auto}
.trial-details{padding:24px}
@media(max-width:800px){.order-layout{grid-template-columns:1fr}.order-layout>aside{display:grid;gap:16px}.order-layout>aside>.fig:first-child{max-height:460px;width:100%;overflow:hidden}.order-layout>aside>.fig:first-child img{object-fit:cover;object-position:50% 35%}#offers{gap:8px!important}#offers .opt{padding:6px!important}#offers b{font-size:.92rem}}
@media(prefers-reduced-motion:reduce){#offers .opt{transition:none}#offers .opt:hover{transform:none}}

.hero .kicker{color:var(--gold2)}

/* Launch: extend the existing hero artwork into the copy area. */
.hero.hero-launch{isolation:isolate;background:#081d38;grid-template-columns:47% 53%;padding-block:24px}
.hero-launch:before{content:"";position:absolute;inset:-25px;z-index:-2;background:url('/assets/img/s/01-home-desktop.webp') center/cover no-repeat;filter:blur(18px);opacity:.52;transform:scale(1.06)}
.hero-launch:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(8,29,56,.08) 20%,rgba(8,29,56,.65) 51%,rgba(8,29,56,.94) 100%)}
.hero-launch picture{position:relative;align-self:center;mask-image:linear-gradient(to right,#000 78%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 78%,transparent 100%)}
.hero-launch .copy{position:relative;padding-inline-start:clamp(24px,4vw,64px);padding-inline-end:10px}
.hero-launch h1{text-shadow:0 3px 20px #07152766}
.numbers-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:28px}.numbers-grid article{padding:24px 12px;text-align:center;background:var(--panel);border:1px solid var(--bd);border-radius:18px}.numbers-grid strong{display:block;color:var(--gold-ink);font-size:clamp(1.7rem,3vw,2.5rem);font-variant-numeric:tabular-nums}.numbers-grid span{display:block;font-weight:700}.count-note{max-width:900px;margin:20px auto 0;text-align:center;color:var(--mu);font-size:.85rem}
.price{position:relative;isolation:isolate;transition:transform .25s,box-shadow .25s}.price:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,#fff6 47%,transparent 63%);transform:translateX(-140%);animation:offer-shine 8s ease-in-out infinite}.price:after{content:"✦";position:absolute;top:14px;inset-inline-end:17px;color:#ffe6a2;font-size:25px;text-shadow:0 0 13px #c8942c;pointer-events:none}.price:hover{transform:translateY(-5px);box-shadow:0 22px 48px #bd8b2430}.price.best:before{animation-delay:1.6s}
@keyframes offer-shine{0%,65%{transform:translateX(-140%)}90%,100%{transform:translateX(140%)}}
@media(max-width:760px){.hero.hero-launch{display:flex;flex-direction:column;padding:0}.hero-launch picture{mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%)}.hero-launch .copy{padding:0 20px 32px;margin-top:-8px}.hero-launch:after{background:linear-gradient(to bottom,#081d3844,#081d38 72%)}.numbers-grid{grid-template-columns:repeat(2,1fr)}.numbers-grid article:last-child{grid-column:1/-1}.numbers-grid article{padding:17px 10px}}
@media(prefers-reduced-motion:reduce){.price:before{animation:none;display:none}.price{transition:none}}

#offers .opt:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#fff6 47%,transparent 63%);transform:translateX(-140%);animation:offer-shine 8s ease-in-out infinite}#offers .opt:after{content:"✦";position:absolute;top:12px;right:12px;color:#ffe6a2;text-shadow:0 0 12px #c8942c;pointer-events:none}@media(prefers-reduced-motion:reduce){#offers .opt:before{animation:none;display:none}}


/* ==========================================================================
   مِـرْقَـاة — Sticky Announcement Bar & Floating WhatsApp Widget
   ========================================================================== */

/* ---------- Sticky Announcement Bar ---------- */
.top-ann-bar {
  background: linear-gradient(90deg, #07231b 0%, #0f4a3c 35%, #185a49 65%, #07231b 100%);
  color: #ffffff;
  border-bottom: 1px solid rgba(217, 166, 59, 0.4);
  font-size: 0.84rem;
  position: relative;
  z-index: 52;
  transition: all 0.3s ease;
}
.top-ann-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  position: relative;
}
.top-ann-pill {
  background: rgba(217, 166, 59, 0.22);
  border: 1px solid rgba(217, 166, 59, 0.55);
  color: #ffe6a2;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.top-ann-text {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f1f8f5;
  font-size: 0.85rem;
}
.top-ann-text strong {
  color: #ffffff;
  font-weight: 700;
}
.top-ann-sep {
  color: rgba(255, 255, 255, 0.35);
}
.top-ann-cta {
  background: linear-gradient(135deg, #d9a63a, #b8861e);
  color: #0c2b22 !important;
  font-weight: 800;
  font-size: 0.76rem;
  padding: 5px 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.top-ann-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.top-ann-close {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease;
}
.top-ann-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}
@media (max-width: 860px) {
  .top-ann-wrap {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding-left: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .top-ann-text {
    font-size: 0.77rem;
    gap: 5px;
  }
  .top-ann-sep {
    display: none;
  }
}
@media (max-width: 480px) {
  .top-ann-pill {
    display: none;
  }
  .top-ann-cta {
    font-size: 0.72rem;
    padding: 3px 10px;
  }
}

/* ---------- WhatsApp Floating Widget ---------- */
.wa-float-widget {
  position: fixed;
  bottom: 26px;
  left: 24px;
  z-index: 999;
  font-family: inherit;
  direction: rtl;
}
.wa-float-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.wa-float-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.42), 0 2px 6px rgba(0, 0, 0, 0.15);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}
.wa-float-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55), 0 4px 10px rgba(0, 0, 0, 0.2);
}
.wa-float-btn svg {
  width: 30px;
  height: 30px;
  fill: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.wa-float-card {
  background: var(--panel, #ffffff);
  color: var(--ink, #142841);
  border: 1px solid var(--bd, #e2e8f0);
  border-radius: 16px;
  padding: 8px 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  pointer-events: auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.wa-float-link:hover .wa-float-card {
  transform: translateX(-4px);
  border-color: rgba(37, 211, 102, 0.5);
}
.wa-float-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--ink, #142841);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wa-float-desc {
  font-size: 0.74rem;
  color: var(--mu, #64748b);
  display: flex;
  align-items: center;
  gap: 6px;
}
.wa-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.25);
  animation: waDotPulse 2s infinite ease-in-out;
}
.wa-pulse-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: waPulseRing 2.4s infinite cubic-bezier(0.25, 0, 0.2, 1);
  pointer-events: none;
  opacity: 0;
}
@keyframes waDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.7; }
}
@keyframes waPulseRing {
  0% { transform: scale(0.9); opacity: 0.8; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (max-width: 760px) {
  .wa-float-widget {
    left: 14px;
    bottom: 20px;
  }
  body.has-cta .wa-float-widget {
    bottom: 84px;
  }
  .wa-float-card {
    display: none;
  }
  .wa-float-btn {
    width: 52px;
    height: 52px;
  }
  .wa-float-btn svg {
    width: 27px;
    height: 27px;
  }
}



/* Responsive mobile header and overflow safety */
html, body {
  overflow-x: clip;
}
@media (max-width: 540px) {
  #top .in {
    padding: 6px 10px;
    gap: 8px;
  }
  .brand-logo-mark {
    width: 36px;
    height: 36px;
  }
  .brand-text-col strong {
    font-size: 1.15rem;
  }
  .brand-text-col small {
    display: none;
  }
  .acts {
    gap: 6px;
  }
  .ic {
    width: 38px;
    height: 38px;
  }
  .app-launch-btn {
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
  }
}


/* --- Hero Social Proof Pill --- */
.hero-social-proof {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 0.88rem;
  color: #f1f5f9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.hero-social-proof .proof-stars {
  font-size: 0.95rem;
  letter-spacing: 2px;
}
.hero-social-proof .proof-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hero-social-proof .proof-rating {
  font-weight: 800;
  color: #fbbf24;
}
.hero-social-proof .proof-sep {
  opacity: 0.5;
}
.hero-social-proof strong {
  color: #fff;
  font-weight: 700;
}
@media (max-width: 640px) {
  .hero-social-proof {
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.82rem;
    justify-content: center;
    text-align: center;
    width: 100%;
  }
}


/* ==========================================================================
   MOBILE POLISH: PERFECT TOUCH TARGETS, ZERO OVERFLOW, RESPONSIVE HEADER
   ========================================================================== */
html {
  overflow-x: hidden !important;
  max-width: 100vw;
}
body {
  overflow-x: hidden !important;
  max-width: 100%;
  position: relative;
}

/* Ensure price card shine stays within card */
.price {
  overflow: hidden !important;
}

/* Responsive grid for tiers comparison section on mobile */
@media (max-width: 760px) {
  .tiers-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .tier-card {
    padding: 22px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Header actions optimization on small screens */
@media (max-width: 540px) {
  #top .in {
    padding: 8px 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* On mobile header, order CTA is already prominently in sticky bottom bar & drawer */
  #top .acts a[href*="/order/"] {
    display: none !important;
  }
  .acts {
    gap: 6px !important;
  }
  .app-launch-btn {
    padding: 7px 12px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .ic {
    min-width: 38px !important;
    min-height: 38px !important;
  }
}

/* Touch targets comfortable min-height */
@media (max-width: 760px) {
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .stage-selector-wrap a.btn {
    min-height: 38px;
    padding: 6px 12px;
  }
}


/* Total Mobile Safety Rules */
.hero, .hero-launch {
  overflow: hidden !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}
.tiers-duality-bar {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.tiers-duality-bar .btn {
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}
.prices, .price {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px) {
  .tiers-duality-bar {
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  .tiers-duality-bar > div {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .tiers-duality-bar a.btn {
    flex: 1 1 auto !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    padding: 8px 12px !important;
  }
}


/* Lift floating WA button above sticky CTA on mobile */
@media (max-width: 760px) {
  body.has-cta .wa-float-widget {
    bottom: 84px !important;
  }
}