/* Live Web — «من العدسة إلى النتيجة الأولى»
   Layout concept: every page opens on a dark stage where ONE object carries the service
   (the 360 lens, the browser window, the search result, the WhatsApp thread); content runs
   RTL on a 12-col grid, dense like the approved references, one blue accent spent on action. */
:root{
  color-scheme:dark;
  --ink-0:#070B16;      /* page ground, blue-biased near-black */
  --ink-1:#0C1324;      /* surface */
  --ink-2:#121B33;      /* raised */
  --ink-3:#1A2544;      /* hover / chips */
  --line:rgba(150,172,222,.14);
  --line-2:rgba(150,172,222,.26);
  --text:#E9EEF9;
  --muted:#9BA7C3;
  --dim:#7C88A6;        /* LWA11Y_v1: was #6B7796 (4.1:1 on the bands) → 5.2:1 */
  --accent:#3E7BFF;     /* Live blue — action only */
  --accent-fill:#2B63E0;/* LWA11Y_v1: solid blue under white text (5.3:1; #3E7BFF gave 3.8:1) */
  --accent-ink:#FFFFFF;
  --glow:#8DB8FF;       /* lens lines, drawn marks */
  --wa:#25D366;         /* WhatsApp only */
  --gold:#F2B84B;       /* the #1 position, used once per view */
  --f-display:"Noto Kufi Arabic","Kufi Fallback","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --f-data:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --r1:6px;--r2:10px;--r3:16px;--r4:24px;
  --wrap:1200px;
  --sp-settle:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-0);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.25;margin:0;text-wrap:balance;letter-spacing:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.eyebrow{font-family:var(--f-data);font-size:12.5px;letter-spacing:.08em;color:var(--glow);display:inline-flex;gap:8px;align-items:center;direction:ltr;unicode-bidi:isolate}
.eyebrow-ar{font-size:14px;color:var(--glow);font-weight:600;letter-spacing:0}
.h-xl{font-size:clamp(34px,5.6vw,72px)}
.h-l{font-size:clamp(28px,3.8vw,46px)}
.h-m{font-size:clamp(22px,2.4vw,30px)}
.h-s{font-size:20px}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.num{font-family:var(--f-data);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.accent-word{color:var(--glow)}
section{padding-block:clamp(56px,8vw,112px)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:760px}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(7,11,22,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:22px;font-weight:700;white-space:nowrap}
.brand small{display:block;font-family:var(--f-data);font-size:10.5px;color:var(--dim);letter-spacing:.14em;font-weight:400;margin-top:-4px}
.brand svg{width:34px;height:34px}
.nav{display:flex;gap:4px;margin-inline-start:auto;align-items:center}
.nav a,.nav summary{padding:8px 12px;border-radius:999px;color:var(--muted);font-size:15px;cursor:pointer;list-style:none;white-space:nowrap}
.nav a:hover,.nav summary:hover,.nav a[aria-current=page]{color:var(--text);background:var(--ink-2)}
.nav details{position:relative}
.nav details summary::-webkit-details-marker{display:none}
.nav details summary::after{content:"";display:inline-block;width:7px;height:7px;border-inline-start:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-inline-start:8px;vertical-align:2px}
.menu{position:absolute;inset-inline-start:0;top:calc(100% + 8px);background:var(--ink-1);border:1px solid var(--line-2);border-radius:var(--r3);padding:8px;min-width:280px;display:grid;gap:2px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.menu a{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:10px;border-radius:var(--r2);color:var(--text)}
.menu a span{display:block;font-size:13px;color:var(--dim)}
.menu svg{width:36px;height:36px}
.top-cta{display:flex;gap:10px;align-items:center}
.phone-txt{font-family:var(--f-data);font-size:15px;color:var(--text);direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:700;font-size:16px;border:1px solid transparent;cursor:pointer;font-family:var(--f-body);transition:transform .2s var(--sp-settle),background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-a{background:var(--accent-fill);color:var(--accent-ink)}
.btn-a:hover{background:#5a8fff}
.btn-wa{background:var(--wa);color:#04210F}
.btn-o{border-color:var(--line-2);color:var(--text);background:transparent}
.btn-o:hover{background:var(--ink-2)}
.btn svg{width:20px;height:20px}
.burger{display:none;margin-inline-start:auto;background:var(--ink-2);border:1px solid var(--line-2);color:var(--text);border-radius:12px;width:44px;height:44px;cursor:pointer}
@media (max-width:1023px){
  .nav,.top-cta .phone-txt{display:none}
  .burger{display:inline-grid;place-items:center}
  .top-cta{margin-inline-start:0}
  .top.open .nav{display:grid;position:absolute;inset-inline:0;top:100%;background:var(--ink-1);border-bottom:1px solid var(--line-2);padding:12px 16px 20px;gap:4px}
  .top.open .nav .menu{position:static;box-shadow:none;border:0;padding:0 0 0 0;min-width:0}
}
@media (max-width:520px){.top-cta .btn{padding:0 14px;font-size:14px}.brand small{display:none}}

/* LWNAV_v1 — cross-document view transitions: the old page fades out, the new one fades in (0.22 s) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:lwvt-out .2s ease-in both}
::view-transition-new(root){animation:lwvt-in .24s ease-out both}
@keyframes lwvt-out{to{opacity:0}}
@keyframes lwvt-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
/* ---------- cinematic stage ---------- */
/* LWCLS360_v1 — overflow:clip, not a scroll container: in RTL the 360 hotspot labels (left:0, translate -50%) overflowed the
   stage on the left and their first JS positioning shifted the whole stage (CLS 0.10 on mobile). */
.scene{position:relative;height:420vh;background:var(--ink-0)}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;overflow:clip}
.stage canvas.sky{position:absolute;inset:0;width:100%;height:100%}
.stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 30% 50%,transparent 40%,rgba(7,11,22,.85) 100%),linear-gradient(to left,rgba(7,11,22,.92) 0%,rgba(7,11,22,.55) 38%,transparent 62%)}
.chapters{position:absolute;inset:0;display:grid;align-items:center;pointer-events:none}
.chapter{grid-area:1/1;padding-inline:clamp(16px,6vw,96px);max-width:min(660px,100%);justify-self:start;opacity:var(--vis,0);transform:translateY(calc((1 - var(--vis,0)) * 26px));pointer-events:none}
.chapter[data-active]{pointer-events:auto}
.chapter .display{font-family:var(--f-display);font-size:clamp(36px,5.4vw,74px);line-height:1.12}
@media (min-width:1200px){.chapter{max-width:min(800px,100%)}}   /* LWHEROFIT_v1: the home line «كل يوم حد بيدوّر» stays on 2 lines on desktop */
.chapter .display em{font-style:normal;color:var(--glow)}
.chapter .sub{margin-top:18px;font-size:clamp(16px,1.6vw,20px);color:var(--muted);max-width:52ch}
.chapter .tag{display:inline-flex;gap:8px;align-items:center;margin-bottom:18px;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:13.5px;color:var(--glow);background:rgba(12,19,36,.6)}
.chapter .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.rail{position:absolute;inset-inline-end:clamp(12px,2vw,28px);top:50%;transform:translateY(-50%);display:grid;gap:10px;z-index:3}
.rail i{display:block;width:4px;height:34px;border-radius:4px;background:var(--line-2);position:relative;overflow:hidden}
.rail i::after{content:"";position:absolute;inset:0;background:var(--glow);transform:scaleY(var(--fill,0));transform-origin:top}
.hint{position:absolute;bottom:22px;inset-inline-start:50%;transform:translateX(50%);font-size:13px;color:var(--dim);display:flex;gap:8px;align-items:center;opacity:calc(1 - var(--prog,0) * 8)}
.hint b{display:block;width:18px;height:28px;border:1.5px solid var(--dim);border-radius:10px;position:relative}
.hint b::after{content:"";position:absolute;top:6px;left:50%;width:3px;height:6px;border-radius:2px;background:var(--dim);transform:translateX(-50%)}
@media (prefers-reduced-motion:no-preference){.hint b::after{animation:wheel 1.8s ease-in-out 3}@keyframes wheel{50%{transform:translate(-50%,7px)}}}
@media (max-width:767px){
  .vignette{background:linear-gradient(to top,rgba(7,11,22,.96) 0%,rgba(7,11,22,.7) 45%,transparent 75%)}
  .chapters{align-items:end;padding-bottom:calc(max(12vh,104px) + 72px + env(safe-area-inset-bottom,0px))}   /* LWMOCK_v1: clear the fixed dock (+72px: the stage starts under the header before any scroll) */
  .chapter .display{font-size:clamp(32px,9vw,44px)}
  .rail{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scene{height:auto}.stage{position:relative;height:auto;overflow:visible}
  .stage canvas{position:relative;height:60vh}
  .chapters{position:relative;display:grid;gap:40px;padding-block:40px}
  .chapter{grid-area:auto;opacity:1;transform:none;pointer-events:auto}
  .vignette,.rail,.hint{display:none}
}

/* ---------- inner-page hero ---------- */
.p-hero{padding-block:clamp(40px,6vw,88px) clamp(40px,6vw,80px);border-bottom:1px solid var(--line);background:radial-gradient(60% 80% at 15% 20%,rgba(62,123,255,.12),transparent 70%),var(--ink-0)}
.p-hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.p-hero h1{font-size:clamp(32px,5vw,62px);margin-block:14px 18px}
.p-hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.crumbs{font-size:13.5px;color:var(--dim);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--text)}
@media (max-width:1023px){.p-hero .grid{grid-template-columns:1fr}}

/* ---------- generic blocks ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1023px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r3);padding:clamp(20px,2.4vw,28px);min-width:0}
.card h3{font-size:21px;margin-bottom:8px}
.card p{color:var(--muted);font-size:15.5px}
.ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(62,123,255,.12);color:var(--glow);margin-bottom:16px}
.ico svg{width:26px;height:26px}
.band{background:var(--ink-1);border-block:1px solid var(--line)}
.ticks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--muted);font-size:15.5px}
.ticks li::before{content:"";width:18px;height:18px;margin-top:5px;border-radius:50%;border:1.5px solid var(--glow);background:radial-gradient(circle,var(--glow) 0 3px,transparent 3.5px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:13.5px;color:var(--muted);background:var(--ink-2)}
.source{font-size:12.5px;color:var(--dim);margin-top:12px}
.source a{text-decoration:underline;text-underline-offset:3px}

/* services trio (home) */
.svc{position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;gap:14px;min-height:100%;transition:border-color .25s,transform .25s var(--sp-settle)}
.svc:hover{border-color:var(--line-2);transform:translateY(-3px)}
.svc .vis{height:150px;border-radius:var(--r2);background:var(--ink-0);border:1px solid var(--line);position:relative;overflow:hidden}
.svc .go{display:flex;justify-content:space-between;align-items:center;color:var(--glow);font-weight:600;font-size:15px}
.svc .go svg{width:18px;height:18px;transform:scaleX(-1)}
/* mini visuals */
.vis-lens svg{position:absolute;inset:0;margin:auto;width:130px;height:130px}
.vis-lens .spin{transform-origin:65px 65px}
@media (prefers-reduced-motion:no-preference){.svc:hover .vis-lens .spin{animation:spin 6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}}
.vis-web{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:26px 1fr 1fr;gap:6px;padding:12px}
.vis-web i{border-radius:5px;background:var(--ink-3);transition:background .4s,transform .4s var(--sp-settle)}
.vis-web i:nth-child(1){grid-column:1/-1;background:rgba(62,123,255,.35)}
.vis-web i:nth-child(2){grid-column:1/3}
.svc:hover .vis-web i:nth-child(2){background:rgba(141,184,255,.28)}
.svc:hover .vis-web i:nth-child(4){background:rgba(242,184,75,.3);transform:scale(.94)}
.vis-rank{display:grid;gap:6px;padding:12px;align-content:center}
.vis-rank div{height:22px;border-radius:6px;background:var(--ink-3);display:flex;align-items:center;padding-inline:10px;font-family:var(--f-data);font-size:11px;color:var(--muted);direction:ltr;transition:transform .6s var(--sp-settle),background .4s}
.vis-rank .me{background:rgba(62,123,255,.3);color:var(--text);transform:translateY(84px)}
.svc:hover .vis-rank .me{transform:translateY(0);background:rgba(242,184,75,.3)}
.svc:hover .vis-rank .o{transform:translateY(28px)}
.vis-wa{padding:12px;display:grid;gap:8px;align-content:end}
.vis-wa p{max-width:80%;padding:7px 10px;border-radius:12px;font-size:12.5px;line-height:1.5;color:var(--text)}
.vis-wa .in{background:var(--ink-3);justify-self:end;border-end-end-radius:3px}
.vis-wa .out{background:rgba(37,211,102,.18);justify-self:start;border-end-start-radius:3px}

/* proof receipts */
.receipts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:1023px){.receipts{grid-template-columns:1fr}}
.receipt{background:#F4F6FB;color:#0C1324;border-radius:14px;padding:22px 22px 26px;position:relative;font-family:var(--f-data);font-size:14px;--cut:10px;
  -webkit-mask:radial-gradient(circle 9px at 50% 100%,transparent 98%,#000) bottom/22px 22px repeat-x, linear-gradient(#000,#000) top/100% calc(100% - 11px) no-repeat;
          mask:radial-gradient(circle 9px at 50% 100%,transparent 98%,#000) bottom/22px 22px repeat-x, linear-gradient(#000,#000) top/100% calc(100% - 11px) no-repeat}
.receipt h3{font-family:var(--f-data);font-size:15px;font-weight:600;direction:ltr;text-align:left;margin-bottom:4px}
.receipt .per{font-family:var(--f-body);font-size:13px;color:#56617E;margin-bottom:14px}
.receipt dl{margin:0;display:grid;gap:8px;border-top:1.5px dashed #B9C1D6;padding-top:14px}
.receipt dl div{display:flex;justify-content:space-between;gap:10px}
.receipt dt{font-family:var(--f-body);color:#3A4563}
.receipt dd{margin:0;font-weight:600;direction:ltr}
.receipt .big{font-size:30px;font-weight:700;color:#1947C9;border-top:1.5px dashed #B9C1D6;margin-top:14px;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline}
.receipt .big span{font-family:var(--f-body);font-size:13px;font-weight:500;color:#3A4563}

/* day clock */
.dayclock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.dayclock{grid-template-columns:1fr}}
.dayclock svg{width:100%;max-width:460px;margin-inline:auto;overflow:visible}
.jobs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jobs li{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--ink-1);cursor:default;transition:border-color .2s,background .2s}
.jobs li.on,.jobs li:hover{border-color:var(--glow);background:var(--ink-2)}
.jobs time{font-family:var(--f-data);color:var(--glow);font-size:15px;direction:ltr}
.jobs b{display:block;font-size:15.5px}
.jobs span{font-size:14px;color:var(--muted)}

/* whatsapp thread */
.phone{width:min(360px,100%);margin-inline:auto;background:#0B141A;border-radius:34px;border:1px solid var(--line-2);padding:14px;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.phone .bar{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.phone .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#3E7BFF,#8DB8FF);display:grid;place-items:center;font-family:var(--f-display);font-weight:700}
.phone .bar b{display:block;font-size:15px}.phone .bar small{color:var(--wa);font-size:12px}
.thread{display:grid;gap:8px;padding:14px 4px;min-height:360px;align-content:start}
.msg{max-width:84%;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.6;opacity:1}
.msg.in{background:#202C33;justify-self:end;border-start-end-radius:3px}
.msg.out{background:#005C4B;justify-self:start;border-start-start-radius:3px}
.msg .t{display:block;font-size:10.5px;color:rgba(255,255,255,.9);margin-top:2px;text-align:left;direction:ltr}
.msg.card-img{padding:6px}
.msg.card-img .rc{background:#0C1324;border-radius:9px;padding:10px 12px;display:grid;gap:4px;font-size:12.5px}
.msg.card-img .rc b{font-family:var(--f-display);font-size:13.5px;color:var(--glow)}
.demo-note{font-size:12.5px;color:var(--dim);text-align:center;margin-top:10px}
.typing{display:inline-flex;gap:4px;padding:10px 12px;background:#005C4B;border-radius:12px;justify-self:start}
.typing i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7)}
@media (prefers-reduced-motion:no-preference){.typing i{animation:tp 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}@keyframes tp{50%{opacity:.2}}}

/* team grid */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.mate{padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--ink-1);display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;min-width:0}
.mate .fx{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:17px;background:var(--ink-3);color:var(--glow)}
.mate b{display:block;font-size:14.5px;line-height:1.4}
.mate span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.mate.lead-m{grid-column:span 2;border-color:var(--glow);background:linear-gradient(135deg,rgba(62,123,255,.18),var(--ink-1))}
.mate.lead-m .fx{background:var(--accent);color:#fff}
@media (max-width:420px){.mate.lead-m{grid-column:auto}}

/* skin switcher */
.skins{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.skins{grid-template-columns:1fr}}
.skin-tabs{display:grid;gap:8px}
.skin-tabs button{all:unset;cursor:pointer;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--ink-1);display:grid;gap:2px}
.skin-tabs button b{font-size:15.5px}.skin-tabs button span{font-size:13px;color:var(--muted)}
.skin-tabs button[aria-selected=true]{border-color:var(--glow);background:var(--ink-2)}
.mock{border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:#fff;min-width:0}
.mock .chrome{display:flex;gap:6px;align-items:center;padding:10px 12px;background:#E8ECF4}
.mock .chrome i{width:10px;height:10px;border-radius:50%;background:#C3CADB}
.mock .chrome span{margin-inline-start:10px;font-family:var(--f-data);font-size:12px;color:#56617E;background:#fff;border-radius:6px;padding:3px 10px;direction:ltr}
.mock .mscr{position:relative;min-height:340px;padding:28px;display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;transition:background .5s,color .5s}
@media (max-width:640px){.mock .mscr{grid-template-columns:1fr;padding:20px}}
.mock .mscr h3,.mock .mscr h4{font-size:clamp(22px,3vw,32px);line-height:1.25;transition:color .5s}
.mock .mscr p{font-size:14px;margin-top:10px;opacity:.8}
.mock .mscr .b{display:inline-flex;margin-top:16px;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;transition:all .5s}
.mock .mscr .art{height:230px;border-radius:16px;position:relative;overflow:hidden;transition:all .5s}
.mock .fab{position:absolute;bottom:14px;right:14px;width:46px;height:46px;display:grid;place-items:center;transition:all .5s}
.mock .fab.l{right:auto;left:14px}

/* 360 lens lab */
.lens-lab{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px;align-items:center}
@media (max-width:900px){.lens-lab{grid-template-columns:1fr}}
.lens-box{position:relative;border-radius:22px;border:1px solid var(--line-2);background:radial-gradient(70% 70% at 50% 45%,#101B38,var(--ink-0));aspect-ratio:4/3;max-width:100%;touch-action:none;cursor:grab;overflow:hidden}
.lens-box:active{cursor:grabbing}
.lens-box canvas{width:100%;height:100%}
.lens-ctl{display:grid;gap:10px;margin-top:14px}
.lens-ctl label{font-size:14px;color:var(--muted);display:flex;justify-content:space-between}
input[type=range]{width:100%;accent-color:var(--accent)}

/* SERP preview tool */
.serp-tool{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px}
@media (max-width:900px){.serp-tool{grid-template-columns:1fr}}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:14px;color:var(--muted)}
.field input,.field textarea,.field select{background:var(--ink-0);border:1px solid var(--line-2);border-radius:12px;color:var(--text);padding:12px 14px;font:inherit;font-size:16px;width:100%}
.serp{background:#fff;color:#202124;border-radius:16px;padding:22px;font-family:Arial,var(--f-body);min-width:0}
.serp .u{font-size:13px;color:#4d5156;display:flex;gap:8px;align-items:center;direction:rtl}
.serp .u i{width:26px;height:26px;border-radius:50%;background:#EEF3FE;display:grid;place-items:center;font-style:normal;font-weight:700;color:#1947C9;font-size:12px}
.serp .t{font-size:20px;color:#1a0dab;margin:6px 0 4px;line-height:1.3;overflow-wrap:anywhere}
.serp .d{font-size:14px;color:#4d5156;line-height:1.6;overflow-wrap:anywhere}
.meter{height:6px;border-radius:6px;background:var(--ink-3);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:100% 50%;transition:transform .25s}
.meter.over i{background:#EF4444}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{display:grid;gap:14px;align-content:start}
.plan.pop{border-color:var(--glow);background:linear-gradient(180deg,rgba(62,123,255,.14),var(--ink-1) 50%)}
.plan .price{font-family:var(--f-display);font-size:40px}
.plan .price small{font-family:var(--f-body);font-size:15px;color:var(--muted);font-weight:400}
.badge{justify-self:start;padding:4px 10px;border-radius:999px;background:var(--accent-fill);color:#fff;font-size:12.5px;font-weight:700}

/* faq */
.faq{display:grid;gap:10px;max-width:880px}
.faq details{background:var(--ink-1);border:1px solid var(--line);border-radius:14px;padding:4px 20px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:600;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq-q{font:inherit;margin:0;flex:1;text-wrap:balance}   /* LWFAQH3_v1 — h3 inside summary keeps the summary look */
.faq summary::after{content:"+";font-family:var(--f-data);color:var(--glow);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:18px;color:var(--muted)}

/* cta */
.cta-band{border-radius:28px;padding:clamp(28px,5vw,60px);background:radial-gradient(80% 120% at 85% 0%,rgba(62,123,255,.35),transparent 60%),var(--ink-2);border:1px solid var(--line-2);display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
@media (max-width:900px){.cta-band{grid-template-columns:1fr}}
.cta-band .num-big{font-family:var(--f-data);font-size:clamp(28px,4vw,44px);direction:ltr;unicode-bidi:isolate;user-select:all}
.copy{all:unset;cursor:pointer;font-size:13px;color:var(--glow);border-bottom:1px dashed var(--glow)}

/* blog */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:1023px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.posts{grid-template-columns:1fr}}
.post{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r3);overflow:hidden;border:1px solid var(--line);background:var(--ink-1);transition:border-color .2s,transform .25s var(--sp-settle)}
.post:hover{border-color:var(--line-2);transform:translateY(-3px)}
.post .cover{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--ink-2)}
.post .cover canvas{width:100%;height:100%}
.post .body{padding:20px;display:grid;gap:8px;align-content:start}
.post .meta{font-size:13px;color:var(--dim);display:flex;gap:10px;flex-wrap:wrap}
.post h3{font-size:20px;line-height:1.4}
.post p{font-size:15px;color:var(--muted)}
.post.feature{grid-column:span 3;grid-template-columns:1.2fr 1fr;grid-template-rows:auto}
.post.feature .cover{aspect-ratio:auto;min-height:280px}
.post.feature h3{font-size:clamp(24px,2.6vw,32px)}
@media (max-width:1023px){.post.feature{grid-column:span 2}}
@media (max-width:640px){.post.feature{grid-column:auto;grid-template-columns:1fr}.post.feature .cover{min-height:200px}}

/* article */
.readbar{position:fixed;top:0;inset-inline:0;height:3px;z-index:60;background:transparent}
.readbar i{display:block;height:100%;width:100%;background:var(--glow);transform-origin:right;transform:scaleX(var(--read,0))}
.article{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:1023px){.article{grid-template-columns:1fr}.toc{display:none}}
.prose{max-width:68ch;font-size:18px}
.prose h2{font-size:clamp(24px,2.6vw,32px);margin:48px 0 14px;scroll-margin-top:90px}
.prose h3{font-size:21px;margin:30px 0 10px}
.prose p{margin-bottom:18px;color:#C9D2E6}
.prose ul,.prose ol{padding-inline-start:22px;color:#C9D2E6;margin-bottom:18px;display:grid;gap:8px}
.prose strong{color:var(--text)}
.prose .callout{border:1px solid var(--line-2);border-inline-start:4px solid var(--glow);border-radius:12px;padding:16px 18px;background:var(--ink-1);margin:24px 0}
.prose .callout p:last-child{margin:0}
.toc{position:sticky;top:96px;display:grid;gap:4px;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--ink-1)}
.toc b{font-size:14px;color:var(--dim);margin-bottom:6px}
.toc a{font-size:14.5px;color:var(--muted);padding:6px 10px;border-radius:8px;border-inline-start:2px solid transparent}
.toc a.on{color:var(--text);border-inline-start-color:var(--glow);background:var(--ink-2)}
.toc a.btn-wa{color:#04210F}
.sz-btns a.sz-btn.sz-btn-wa{color:#04210F}   /* Sada page content: white on WhatsApp green was 1.98:1 */
.author{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--ink-1);margin-top:36px}
.author .fx{width:56px;height:56px;border-radius:16px;background:var(--accent);display:grid;place-items:center;font-family:var(--f-display);font-size:22px;font-weight:700}

/* maestro */
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.menu-grid button{all:unset;cursor:pointer;padding:10px;border-radius:10px;background:#202C33;font-size:13px;display:grid;gap:2px;text-align:right}
.menu-grid button b{font-size:13.5px}.menu-grid button span{color:rgba(255,255,255,.6);font-size:12px}
.menu-grid button:hover{background:#2A3942}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--ink-1);padding-block:56px 110px;font-size:15px}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media (max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .cols{grid-template-columns:1fr}}
.foot h3,.foot h4{font-size:16px;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--muted)}
.foot a:hover{color:var(--text)}
.foot .legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-size:13.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* floating contact — the 360 lens: an orbit ring that draws once, then rests */
.fc{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:50;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.fc svg.ic{width:28px;height:28px;position:relative;z-index:1}
.fc .orbit{position:absolute;inset:-7px;width:74px;height:74px;pointer-events:none}
.fc .orbit circle{fill:none;stroke-width:1.5;stroke-dasharray:4 6}
.fc-wa{right:18px;background:var(--wa);color:#04210F}
.fc-wa .orbit circle{stroke:var(--wa)}
.fc-tel{left:18px;background:var(--ink-2);color:var(--text);border:1px solid var(--line-2)}
.fc-tel .orbit circle{stroke:var(--glow)}
@media (prefers-reduced-motion:no-preference){.fc .orbit{animation:orb 9s linear 2}@keyframes orb{to{transform:rotate(360deg)}}}
.fc .lbl{position:absolute;bottom:calc(100% + 10px);white-space:nowrap;background:var(--ink-2);border:1px solid var(--line-2);color:var(--text);font-size:13px;padding:6px 10px;border-radius:10px;opacity:0;transform:translateY(4px);transition:all .2s;pointer-events:none}
.fc-wa .lbl{right:0}.fc-tel .lbl{left:0}
.fc:hover .lbl,.fc:focus-visible .lbl{opacity:1;transform:none}

/* reveal (from a visible resting state) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes rv{from{opacity:.85;transform:translateY(22px)}to{opacity:1;transform:none}}
  }
}

/* ---------- the device: an Apple-style phone that searches, finds, and walks the place in 360° ---------- */
.sky{position:absolute;inset:0;width:100%;height:100%}
.device-wrap{position:absolute;inset:0;display:grid;place-items:center;perspective:1600px;pointer-events:none}
.device{--h:min(80svh,720px);height:var(--h);aspect-ratio:9/19.2;position:relative;transform-style:preserve-3d;will-change:transform;margin-inline-start:36vw}
.dv-frame{position:absolute;inset:0;border-radius:calc(var(--h)*.075);padding:calc(var(--h)*.014);
  background:linear-gradient(145deg,#3A4256 0%,#161B28 30%,#0C0F17 60%,#2B3244 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 60px 120px rgba(0,0,0,.65),0 0 90px rgba(62,123,255,.18)}
.dv-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--h)*.062);overflow:hidden;background:#fff;color:#1F2430;font-family:var(--f-body)}
.dv-island{position:absolute;top:calc(var(--h)*.028);left:50%;transform:translateX(-50%);width:28%;height:calc(var(--h)*.036);border-radius:999px;background:#05070C;z-index:5}
.dv-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,transparent 28%,transparent 70%,rgba(255,255,255,.05) 100%);z-index:6}
.scr{position:absolute;inset:0;padding:calc(var(--h)*.075) calc(var(--h)*.026) calc(var(--h)*.03);font-size:calc(var(--h)*.019);line-height:1.5;opacity:0}
.scr-search{opacity:1;background:#fff}
.sbar{display:flex;align-items:center;gap:.6em;border-radius:999px;padding:.75em 1em;background:#F1F3F6;box-shadow:0 1px 3px rgba(0,0,0,.08);font-size:1.12em;direction:rtl}
.sbar svg{width:1.25em;height:1.25em;color:#5F6776;flex:none}
.sbar .q{white-space:nowrap;overflow:hidden}
.sbar .caret{width:2px;height:1.2em;background:#2F6BFF;display:inline-block}
.gchips{display:flex;gap:.45em;margin:.8em 0;font-size:.86em;color:#4A5160}
.gchips span{padding:.3em .8em;border-radius:999px;border:1px solid #E1E5EC}
.gchips span:first-child{background:#E8F0FE;border-color:#C9DAFD;color:#1947C9}
.mapbox{height:22%;border-radius:.9em;overflow:hidden;position:relative;background:#E9EEE6}
.mapbox canvas{width:100%;height:100%}
.res{display:grid;grid-template-columns:3.4em 1fr;gap:.7em;align-items:center;padding:.7em;border-radius:.9em;border:1px solid #E6E9EF;margin-top:.55em;background:#fff;will-change:transform}
.res .th{width:3.4em;height:3.4em;border-radius:.7em;background:#DDE3EC;position:relative;overflow:hidden}
.res b{display:block;font-size:1em;color:#1A0DAB;font-weight:600}
.res small{display:block;color:#5F6776;font-size:.82em}
.res.me .th{background:conic-gradient(from 200deg,#C88A4A,#F2D9A6,#8C5A2B,#E8C07A,#C88A4A)}
.res.me .th::after{content:"360°";position:absolute;inset:auto 0 0 0;font:600 .62em var(--f-data);color:#fff;background:rgba(0,0,0,.45);text-align:center;padding:.15em 0}
.res.me{position:relative;z-index:2}
.res.me.top{border-color:#F2B84B;box-shadow:0 .5em 1.4em rgba(242,184,75,.35)}
.res .ln{height:.55em;border-radius:.3em;background:#E6E9EF;margin-top:.35em}
.tap{position:absolute;width:3.6em;height:3.6em;border-radius:50%;border:2px solid rgba(47,107,255,.9);background:rgba(47,107,255,.18);opacity:0;pointer-events:none;z-index:7;transform:translate(50%,-50%) scale(.4)}
.scr-pano{padding:0;background:#20160E}
.scr-pano canvas{width:100%;height:100%}
.hud{position:absolute;inset:auto 0 calc(var(--h)*.03) 0;display:flex;justify-content:center;gap:.6em;align-items:center;color:#fff;font-size:.9em}
.hud .cmp{width:2.6em;height:2.6em;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);position:relative;background:rgba(0,0,0,.35)}
.hud .cmp i{position:absolute;left:50%;top:12%;width:2px;height:38%;background:#F2B84B;transform-origin:50% 100%;translate:-50% 0}
.hud .pill{padding:.35em .8em;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.pano-top{position:absolute;top:calc(var(--h)*.07);inset-inline:calc(var(--h)*.026);display:flex;justify-content:space-between;color:#fff;font-size:.9em;align-items:center}
.pano-top span{padding:.3em .7em;border-radius:999px;background:rgba(0,0,0,.4)}
.scr-site{background:#1B130C;color:#F6EBDD;padding-top:calc(var(--h)*.07)}
.site-in{will-change:transform}
.site-nav{display:flex;justify-content:space-between;align-items:center;font-size:.85em;padding-bottom:.7em;border-bottom:1px solid rgba(246,235,221,.15)}
.site-nav b{font-family:var(--f-display);font-size:1.15em;color:#E8C07A}
.site-hero{margin-top:1em;border-radius:1em;height:32%;min-height:9em;background:linear-gradient(160deg,rgba(27,19,12,.1),rgba(27,19,12,.85)),conic-gradient(from 210deg at 70% 40%,#8C5A2B,#E8C07A,#6B4423,#C88A4A,#8C5A2B);display:flex;align-items:flex-end;padding:1em}
.site-hero h5{margin:0;font-family:var(--f-display);font-size:1.5em;line-height:1.25}
.site-btn{display:inline-block;margin-top:.9em;padding:.55em 1.2em;border-radius:999px;background:#E8C07A;color:#1B130C;font-weight:700;font-size:.9em}
.site-cards{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-top:.9em}
.site-cards div{border-radius:.8em;background:rgba(246,235,221,.08);padding:.7em;font-size:.82em}
.site-cards div i{display:block;height:3.2em;border-radius:.6em;margin-bottom:.4em;background:linear-gradient(135deg,#6B4423,#C88A4A)}
.scr-wa{background:#0B141A;color:#E9EDEF;padding-top:calc(var(--h)*.07)}
.wa-bar{display:flex;align-items:center;gap:.6em;padding-bottom:.7em;border-bottom:1px solid rgba(255,255,255,.08)}
.wa-bar .av{width:2.4em;height:2.4em;border-radius:50%;background:linear-gradient(135deg,#3E7BFF,#8DB8FF);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;color:#fff}
.wa-bar small{display:block;color:#25D366;font-size:.78em}
.wa-th{display:grid;gap:.5em;padding-top:.9em}
.wa-th p{margin:0;max-width:86%;padding:.5em .75em;border-radius:.8em;font-size:.92em;line-height:1.55;opacity:0;transform:translateY(.6em)}
.wa-th .in{background:#202C33;justify-self:end;border-start-end-radius:.2em}
.wa-th .out{background:#005C4B;justify-self:start;border-start-start-radius:.2em}
@media (max-width:767px){
  .device-wrap{place-items:start center;padding-top:calc(76px + 2svh)}
  .device{--h:min(52svh,520px);margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){
  .device-wrap{position:relative;padding-block:24px}
  .device{margin-inline-start:0}
}
.chapter .tag svg,.eyebrow svg{width:18px;height:18px;flex:none}
.chapter .display{font-weight:800;letter-spacing:-.01em}

/* ================= service scenes (each service has its own film) ================= */
.cine-vis{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;padding-inline-start:40vw;padding-inline-end:3vw}
@media (max-width:767px){.cine-vis{padding:78px 16px 0;place-items:start center}}
.cine-bg{position:absolute;inset:0;width:100%;height:100%}
.gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(141,184,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(141,184,255,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(70% 70% at 30% 50%,#000,transparent)}
.aside-note{position:absolute;bottom:18px;inset-inline-end:clamp(16px,3vw,40px);font-size:12px;color:var(--dim);z-index:3}

/* web design film: pencil → colour → every screen → one identity per client */
.wd-browser{width:min(100%,760px);aspect-ratio:16/10.5;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 50px 110px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);display:grid;grid-template-rows:auto 1fr;will-change:width,height}
@media (max-width:767px){.wd-browser{width:100%}}
.wd-chrome{display:flex;gap:6px;align-items:center;padding:9px 12px;background:#E9EDF4}
.wd-chrome i{width:9px;height:9px;border-radius:50%;background:#C6CCDA}
.wd-chrome span{margin-inline-start:8px;font:12px var(--f-data);color:#5A6480;background:#fff;border-radius:6px;padding:2px 10px;direction:ltr}
.wd-view{position:relative;container-type:inline-size;overflow:hidden;background:#F6F2EA}
.wd-sketch{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.wd-sketch path,.wd-sketch rect,.wd-sketch line,.wd-sketch circle{fill:none;stroke:#6B6458;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,1)}
.wd-site{--s-bg:#1B130C;--s-fg:#F6EBDD;--s-ac:#E8C07A;--s-card:rgba(246,235,221,.08);--s-r:14px;--s-font:var(--f-display);position:absolute;inset:0;padding:4cqw;background:var(--s-bg);color:var(--s-fg);display:grid;grid-template-rows:auto auto 1fr;gap:3cqw;clip-path:inset(0 0 0 var(--wipe,100%))}
.ws-nav{display:flex;justify-content:space-between;align-items:center;font-size:clamp(9px,1.7cqw,14px)}
.ws-nav b{font-family:var(--s-font);font-size:1.4em;color:var(--s-ac)}
.ws-nav span{display:flex;gap:1.4em;opacity:.8}
.ws-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3cqw;align-items:center}
.ws-hero h5{margin:0;font-family:var(--s-font);font-size:clamp(14px,4.4cqw,40px);line-height:1.2}
.ws-hero p{font-size:clamp(9px,1.7cqw,14px);opacity:.75;margin-top:.6em}
.ws-btn{display:inline-block;margin-top:1em;padding:.6em 1.3em;border-radius:var(--s-r);background:var(--s-ac);color:var(--s-bg);font-weight:700;font-size:clamp(9px,1.6cqw,14px)}
.ws-img{aspect-ratio:4/3;border-radius:var(--s-r);background:linear-gradient(160deg,transparent,rgba(0,0,0,.35)),conic-gradient(from 210deg at 70% 40%,var(--s-ac),var(--s-bg),var(--s-ac));box-shadow:0 1.5cqw 4cqw rgba(0,0,0,.25)}
.ws-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;align-content:start}
.ws-cards div{border-radius:var(--s-r);background:var(--s-card);padding:1.6cqw;font-size:clamp(9px,1.5cqw,13px)}
.ws-cards i{display:block;height:6cqw;min-height:26px;border-radius:calc(var(--s-r)*.7);margin-bottom:.5em;background:linear-gradient(135deg,var(--s-ac),transparent)}
.ws-fab{position:absolute;bottom:3cqw;width:max(34px,6cqw);height:max(34px,6cqw);display:grid;place-items:center;color:#fff;border-radius:var(--fab-r,50%);background:var(--fab-bg,#25D366);transition:none}
.ws-fab svg{width:55%;height:55%}.ws-fab.r{right:3cqw}.ws-fab.l{left:3cqw;background:var(--s-ac);color:var(--s-bg)}
@container (max-width:560px){.ws-hero{grid-template-columns:1fr}.ws-img{aspect-ratio:16/8}.ws-cards{grid-template-columns:1fr 1fr}.ws-hero h5{font-size:clamp(14px,7cqw,34px)}}
@container (max-width:380px){.ws-cards{grid-template-columns:1fr}.ws-nav span{display:none}.ws-hero p,.ws-nav{font-size:12px}.ws-btn{font-size:12px}}

/* SEO film: page three → page one, one documented step at a time */
.sr-browser{width:min(100%,640px);background:#fff;color:#202124;border-radius:16px;overflow:hidden;box-shadow:0 50px 110px rgba(0,0,0,.55);font-family:Arial,var(--f-body)}
.sr-top{display:flex;gap:10px;align-items:center;padding:12px 14px;background:#F1F3F6}
.sr-q{flex:1;background:#fff;border-radius:999px;padding:8px 14px;font-size:14px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sr-meta{display:flex;justify-content:space-between;padding:8px 16px;font-size:12px;color:#5f6368;border-bottom:1px solid #eee}
.sr-meta b{color:#1947C9;font-family:var(--f-data)}
.sr-list{position:relative;height:calc(6 * 64px);margin:8px 12px 12px}
.sr-row{position:absolute;inset-inline:0;height:56px;border-radius:10px;padding:8px 12px;display:grid;gap:5px;align-content:center;will-change:transform;background:#fff}
.sr-row i{display:block;height:9px;border-radius:5px;background:#E3E7EE}
.sr-row i:first-child{width:62%;background:#C9D6F5}
.sr-row i:nth-child(2){width:88%}
.sr-row.me{border:1.5px solid #3E7BFF;background:#F4F8FF;z-index:2;box-shadow:0 10px 26px rgba(62,123,255,.18)}
.sr-row.me.gold{border-color:#F2B84B;background:#FFF9EC;box-shadow:0 12px 30px rgba(242,184,75,.35)}
.sr-row.me b{font-size:13.5px;color:#1a0dab}.sr-row.me small{font-size:11.5px;color:#188038;font-family:var(--f-data);direction:ltr;text-align:right}
.sr-pos{position:absolute;inset-inline-start:-12px;top:50%;transform:translate(0,-50%);min-width:40px;height:26px;border-radius:13px;background:#2B63E0;color:#fff;font:600 12px var(--f-data);display:grid;place-items:center;padding:0 8px}
.sr-row.me.gold .sr-pos{background:#F2B84B;color:#1E2A3A}
.sr-page{position:absolute;inset-inline:0;bottom:-2px;text-align:center;font-size:12px;color:#5f6368}
.toasts{position:absolute;top:calc(50% - 250px);inset-inline-end:calc(58vw + 10px);display:grid;gap:8px;z-index:4;width:250px}
@media (max-width:1100px){.toasts{inset-inline-end:auto;inset-inline-start:16px;top:auto;bottom:12vh;width:220px}}
@media (max-width:767px){.toasts{display:none}}
.toast{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(18,27,51,.92);border:1px solid var(--line-2);font-size:13px;opacity:0;transform:translateX(-20px)}
.toast .fx{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent);font-family:var(--f-display);font-weight:700;font-size:13px}
.toast small{display:block;color:var(--muted);font-size:11.5px}

/* 360 film: full-bleed walk, tiny planet, then Maps & Facebook */
.p360-hot{position:absolute;top:0;left:0;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(7,11,22,.7);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:13px;white-space:nowrap;transform:translate(-50%,-50%);opacity:0}
.p360-hot::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-inline-end:6px}
.p360-cards{position:absolute;inset:0;display:grid;place-items:center;padding-inline-start:40vw;padding-inline-end:3vw;opacity:0;pointer-events:none}
@media (max-width:767px){.p360-cards{padding:84px 16px 0;place-items:start center}}
.p360-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:min(100%,640px)}
.mcard{background:#fff;color:#202124;border-radius:18px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5);font-family:Arial,var(--f-body)}
.mcard canvas{width:100%;aspect-ratio:1;display:block}
.mcard .in{padding:12px 14px;font-size:13px;line-height:1.6}
.mcard .in b{display:block;font-size:14.5px}
.mcard .tag360{display:inline-flex;gap:6px;align-items:center;margin-top:6px;padding:3px 9px;border-radius:999px;background:#E8F0FE;color:#1947C9;font-size:12px;font-weight:700}
.fbbar{display:flex;gap:8px;align-items:center;padding:10px 12px;font-size:12.5px}
.fbbar i{width:30px;height:30px;border-radius:50%;background:#1877F2;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700}
.fbcompass{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);border:1.5px solid #fff}
.fbcompass::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:11px;background:#fff;translate:-50% 0}

/* Maestro film: voice note → invoice → kitchen ticket → rider at the door */
.ms-stage{position:relative;width:min(100%,620px);height:min(78svh,640px);display:grid;place-items:center}
.ms-phone{--h:min(70svh,580px);height:var(--h);aspect-ratio:9/19;border-radius:calc(var(--h)*.075);padding:calc(var(--h)*.014);background:linear-gradient(145deg,#3A4256,#0C0F17 55%,#2B3244);box-shadow:0 50px 110px rgba(0,0,0,.6);position:relative;z-index:2}
@media (max-width:767px){.ms-phone{--h:min(54svh,480px)}.ms-stage{height:60svh}}
.ms-screen{position:relative;height:100%;border-radius:calc(var(--h)*.062);overflow:hidden;background:#0B141A;color:#E9EDEF;font-size:calc(var(--h)*.021)}
.ms-bar{display:flex;gap:.6em;align-items:center;padding:3.6em 1em .7em;background:#1F2C33}
.ms-bar .av{width:2.4em;height:2.4em;border-radius:50%;background:linear-gradient(135deg,#F2B84B,#E0955A);display:grid;place-items:center;font-weight:700;color:#1E2A3A}
.ms-bar small{display:block;color:#25D366;font-size:.8em}
.ms-chat{padding:.9em;display:grid;gap:.6em}
.ms-chat>div{max-width:86%;border-radius:.8em;padding:.55em .75em;opacity:0;transform:translateY(.6em)}
.ms-voice{justify-self:end;background:#202C33;display:grid;grid-template-columns:2em 1fr;gap:.5em;align-items:center;width:78%}
.ms-voice .play{width:2em;height:2em;border-radius:50%;background:#25D366;display:grid;place-items:center;color:#0B141A}
.ms-wave{display:flex;gap:2px;align-items:center;height:1.8em}
.ms-wave i{flex:1;border-radius:2px;background:rgba(233,237,239,.35)}
.ms-wave i.on{background:#25D366}
.ms-tr{justify-self:end;background:#202C33;font-size:.9em;color:#AEBAC1}
.ms-bill{justify-self:start;background:#005C4B;width:82%}
.ms-bill table{width:100%;border-collapse:collapse;font-size:.9em;margin-top:.4em}
.ms-bill td{padding:.15em 0}.ms-bill td:last-child{text-align:left;font-family:var(--f-data)}
.ms-bill .tot td{border-top:1px dashed rgba(255,255,255,.35);font-weight:700;padding-top:.35em}
.ms-ok{justify-self:end;background:#202C33;font-weight:700}
.ms-map{position:absolute;inset:0;opacity:0}
.ms-map canvas{width:100%;height:100%}
.ms-eta{position:absolute;inset:auto 1em 1.2em 1em;background:#fff;color:#1E2A3A;border-radius:1em;padding:.8em 1em;display:flex;justify-content:space-between;align-items:center;font-size:.95em;box-shadow:0 .6em 1.6em rgba(0,0,0,.35)}
.ms-eta b{font-size:1.1em}.ms-points{background:#F2B84B;border-radius:999px;padding:.25em .7em;font-weight:700;font-size:.85em}
.ms-ticket{position:absolute;z-index:1;inset-inline-end:calc(50% + min(18svh,150px));top:14%;width:190px;background:#FFFDF7;color:#1E2A3A;border-radius:6px 6px 0 0;padding:12px 14px 18px;font:12.5px/1.7 var(--f-data);box-shadow:0 30px 60px rgba(0,0,0,.5);clip-path:inset(0 0 var(--print,100%) 0);-webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) bottom/14px 14px repeat-x,linear-gradient(#000,#000) top/100% calc(100% - 7px) no-repeat;mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) bottom/14px 14px repeat-x,linear-gradient(#000,#000) top/100% calc(100% - 7px) no-repeat}
.ms-ticket h6{margin:0 0 6px;font:700 14px var(--f-body);text-align:center}
.ms-ticket div{display:flex;justify-content:space-between;gap:8px;direction:rtl}
.ms-ticket hr{border:0;border-top:1.5px dashed #B9C1D6;margin:6px 0}
@media (max-width:767px){.ms-ticket{inset-inline-end:auto;inset-inline-start:0;top:auto;bottom:0;width:160px;font-size:11px;z-index:3}}

/* ================= Maryam bubble ================= */
.bub{max-width:min(300px,78vw);background:#fff;color:#1E2A3A;border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:14px;line-height:1.6;box-shadow:0 18px 40px rgba(0,0,0,.35);transform-origin:100% 100%;transition:opacity .25s,transform .35s var(--sp-settle)}
.bub b{display:block;font-size:12.5px;color:#1947C9;margin-bottom:2px}
.bub[data-off]{opacity:0;transform:scale(.9) translateY(6px);pointer-events:none}
.bub button{all:unset;cursor:pointer;float:left;color:#8A93A8;font-size:16px;line-height:1;margin-inline-start:8px}

/* ================= voice search: «اسأل بصوتك» ================= */
.vbtn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--ink-2);color:var(--text);cursor:pointer;font:600 14px var(--f-body)}
.vbtn svg{width:18px;height:18px;color:var(--glow)}
@media (max-width:640px){.vbtn span{display:none}.vbtn{width:44px;padding:0;justify-content:center}}
.client-link{color:var(--muted);font-size:14px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.client-link svg{width:16px;height:16px}
.client-link:hover{color:var(--text)}
@media (max-width:1180px){.client-link span{display:none}}
.vs{position:fixed;inset:0;z-index:80;background:rgba(5,8,16,.86);backdrop-filter:blur(10px);display:grid;place-items:center;padding:16px}
.vs[hidden]{display:none!important}
.vs-box{width:min(680px,100%);max-height:92svh;overflow:auto;background:var(--ink-1);border:1px solid var(--line-2);border-radius:26px;padding:clamp(20px,4vw,36px);display:grid;gap:18px}
.vs-head{display:flex;justify-content:space-between;align-items:center}
.vs-x{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink-2);font-size:20px}
.orb{justify-self:center;width:128px;height:128px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,#8DB8FF,#3E7BFF 55%,#1B2A6B);color:#fff;display:grid;place-items:center;position:relative;box-shadow:0 20px 60px rgba(62,123,255,.45)}
.orb svg{width:44px;height:44px}
.orb i{position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(141,184,255,.5);opacity:0}
.orb.live i{animation:ring 1.6s ease-out infinite}.orb.live i:nth-child(2){animation-delay:.5s}.orb.live i:nth-child(3){animation-delay:1s}
@keyframes ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.vs-status{text-align:center;color:var(--muted);min-height:1.6em}
.vs-heard{text-align:center;font-family:var(--f-display);font-size:clamp(20px,3vw,28px);min-height:1.4em}
.vs-form{display:flex;gap:8px}
.vs-form input{flex:1;min-width:0;background:var(--ink-0);border:1px solid var(--line-2);border-radius:14px;color:var(--text);padding:12px 14px;font:inherit}
.vs-sug{display:flex;flex-wrap:wrap;gap:8px}
.vs-sug button{all:unset;cursor:pointer;padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;color:var(--muted);background:var(--ink-2)}
.vs-sug button:hover{color:var(--text)}
.vs-ans{display:grid;gap:10px}
.vs-card{display:grid;gap:6px;padding:16px;border-radius:16px;background:var(--ink-2);border:1px solid var(--line)}
.vs-card.vs-m{border-color:rgba(62,123,255,.45);background:linear-gradient(180deg,rgba(62,123,255,.12),rgba(12,19,36,.6))}
.vs-card.vs-m b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2BE071;margin-inline-end:8px;vertical-align:middle}
.vs-card.vs-m p{margin:0;line-height:1.75}
.vs-card.vs-m a{color:var(--glow);text-decoration:underline;text-underline-offset:3px;direction:ltr;unicode-bidi:isolate}
.vs-typing i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);margin:0 2px;animation:vsdot 1.2s infinite}
.vs-typing i:nth-child(2){animation-delay:.2s}.vs-typing i:nth-child(3){animation-delay:.4s}
@keyframes vsdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.vs-card b{font-size:17px}.vs-card p{color:var(--muted);font-size:15px}
.vs-card .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.vs-card .btn{min-height:40px;font-size:14px;padding:0 16px}
[hidden]{display:none!important}
/* LWHEROFIT_v1: long Arabic headlines wrapped to 5 lines on desktop → wider column, slightly smaller type (≤3 lines) */
.cine .chapter .display{font-size:clamp(30px,4vw,54px);line-height:1.18}
.cine .chapter{max-width:min(720px,100%)}
.toasts{inset-inline-end:auto;inset-inline-start:auto;left:3vw;top:15vh}
.ms-ticket{inset-inline-end:auto;inset-inline-start:calc(50% + 105px)}
@media (max-width:767px){.ms-ticket{inset-inline-start:auto;left:0}}
@media (max-width:640px){.top-cta .btn-wa{display:none}.top .wrap{gap:10px}
  /* LWMHEAD_v1 (Ismail 1 Oct): on the phone the header keeps logo + menu only — client area lives in the menu, the voice ask in the dock and the menu */
  .top-cta .client-link,.top-cta .vbtn{display:none}
  /* LWFONTFIT_v1 — the contact title is 1 line in the system font and 2 in Kufi: keep its 2 lines from the first paint (lab CLS 0.14) */
  .p-hero .grid:has(#contact-form) h1{min-height:2lh}}
.brand img.logo{height:44px;width:auto;display:block}
@media (max-width:520px){.brand img.logo{height:36px}}
.foot .brand img.logo{height:52px}
.post .cover img{width:100%;height:100%;object-fit:cover;display:block}
.more-link{display:flex;justify-content:center;margin-top:28px}
/* review fixes 29-09 */
.num,.num-big,.phone-txt,.csheet .n{white-space:nowrap}
.cta-band .num-big{font-size:clamp(26px,3.2vw,40px)}
.nav details summary::after{border:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);vertical-align:3px;margin-inline-start:9px}

/* ================= v3: contact capsule, premium mobile menu, app, portfolio ================= */
.cdock{position:fixed;z-index:56;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;
  background:rgba(12,19,36,.74);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(150,172,222,.22);box-shadow:0 22px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07)}
.cd-btn{all:unset;box-sizing:border-box;cursor:pointer;height:52px;min-width:52px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;color:var(--text);font:600 14px var(--f-body);transition:background .2s,transform .15s}
.cd-btn:hover{background:rgba(255,255,255,.08)}.cd-btn:active,.cd-maryam:active{transform:scale(.96)}
.cd-btn:focus-visible,.cd-maryam:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.cd-btn svg{width:22px;height:22px}.cd-voice svg{color:var(--glow)}
.cd-bars{display:inline-flex;gap:2px;align-items:center;height:16px}.cd-bars i{width:3px;border-radius:2px;background:var(--glow);height:40%}
.cd-bars i:nth-child(2){height:90%}.cd-bars i:nth-child(3){height:60%}.cd-bars i:nth-child(4){height:100%}
@media (prefers-reduced-motion:no-preference){.cd-voice:hover .cd-bars i{animation:bars .9s ease-in-out infinite alternate}.cd-bars i:nth-child(2){animation-delay:.15s}.cd-bars i:nth-child(3){animation-delay:.3s}.cd-bars i:nth-child(4){animation-delay:.45s}@keyframes bars{to{height:20%}}}
.cd-maryam{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 16px;border-radius:999px;background:linear-gradient(135deg,#2BE071,#1DAA55);color:#04210F;font-weight:700;box-shadow:0 10px 26px rgba(37,211,102,.35);transition:transform .15s}
.cd-maryam svg{width:20px;height:20px}
.cd-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3E7BFF,#8DB8FF);color:#fff;display:grid;place-items:center;font:800 17px var(--f-display);position:relative;box-shadow:0 0 0 2px #fff;flex:none}
.cd-av i{position:absolute;bottom:-1px;left:-1px;width:11px;height:11px;border-radius:50%;background:#25D366;border:2px solid #fff}
@media (prefers-reduced-motion:no-preference){.cd-av::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:avring 2.6s ease-out 1.2s 3;opacity:0}@keyframes avring{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}}
.cd-txt{display:grid;line-height:1.15}.cd-txt b{font-size:14.5px}.cd-txt small{font-size:11.5px;font-weight:600;opacity:.75}
.bub{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:57}
.csheet{position:fixed;z-index:58;right:18px;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:min(340px,calc(100vw - 24px));background:rgba(12,19,36,.96);backdrop-filter:blur(18px);border:1px solid var(--line-2);border-radius:22px;padding:18px;box-shadow:0 30px 70px rgba(0,0,0,.55);display:grid;gap:12px}
.csheet h3{font-size:17px;display:flex;justify-content:space-between;align-items:center}
.csheet .x{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ink-2)}
.csheet .n{font:600 30px var(--f-data);direction:ltr;text-align:center;letter-spacing:.02em;user-select:all;padding:6px 0}
.csheet .row{display:flex;gap:8px}.csheet .row>*{flex:1;min-width:0}
.csheet input{background:var(--ink-0);border:1px solid var(--line-2);border-radius:12px;color:var(--text);padding:11px 12px;font:inherit;direction:ltr;width:100%}
.csheet small{color:var(--muted);font-size:12.5px}
.csheet hr{border:0;border-top:1px solid var(--line);margin:2px 0}
@media (max-width:767px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .cdock{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));justify-content:space-between;padding:6px 8px}
  .cd-call{order:1}.cd-maryam{order:2}.cd-voice{order:3}
  .cd-btn{flex-direction:column;gap:2px;height:52px;padding:0 10px;font-size:11px;min-width:64px}
  .cd-btn svg{width:21px;height:21px}.cd-voice .cd-bars{display:none}
  .bub,.csheet{right:10px;left:10px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .csheet{border-radius:22px 22px 18px 18px}
}
/* voice overlay v2 */
.vwave{display:flex;gap:4px;justify-content:center;align-items:center;height:34px}
.vwave i{width:4px;height:20%;border-radius:3px;background:var(--glow);opacity:.45}
.orb.live~.vwave i{opacity:1}
@media (prefers-reduced-motion:no-preference){.orb.live~.vwave i{animation:vw .7s ease-in-out infinite alternate}.vwave i:nth-child(odd){animation-delay:.2s}.vwave i:nth-child(3n){animation-delay:.35s}@keyframes vw{from{height:15%}to{height:100%}}}
@media (max-width:767px){.vs{place-items:end center;padding:0}.vs-box{border-radius:26px 26px 0 0;max-height:88svh;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:no-preference){.vs:not([hidden]) .vs-box{animation:up .45s var(--sp-settle)}@keyframes up{from{transform:translateY(30px);opacity:.4}}}

/* ultra-premium mobile menu: the lens opens from the burger */
.mm{position:fixed;inset:0;z-index:90;background:radial-gradient(120% 70% at 0% 0%,rgba(62,123,255,.28),transparent 60%),linear-gradient(180deg,#0A1122,#070B16 60%);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(14px + env(safe-area-inset-top,0px)) 18px calc(28px + env(safe-area-inset-bottom,0px));display:grid;gap:18px;align-content:start;clip-path:circle(0 at var(--ox,40px) var(--oy,40px));visibility:hidden;transition:clip-path .6s var(--sp-settle),visibility 0s .6s}
.mm.open{clip-path:circle(150vmax at var(--ox,40px) var(--oy,40px));visibility:visible;transition:clip-path .6s var(--sp-settle)}
.mm>*{opacity:0;transform:translateY(14px)}
.mm.open>*{opacity:1;transform:none;transition:opacity .45s var(--sp-settle),transform .55s var(--sp-settle);transition-delay:calc(120ms + var(--i,0) * 55ms)}
.mm-top{display:flex;justify-content:space-between;align-items:center}
.mm-top img{height:40px;width:auto}
.mm-x{all:unset;cursor:pointer;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid var(--line-2)}
.mm-x svg{width:22px;height:22px}
.mm-ask{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--muted);font-size:15px}
.mm-ask .mic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;flex:none}.mm-ask svg{width:20px;height:20px}
.mm-ask b{display:block;color:var(--text);font-size:16px}
.mm-label{font:600 12px var(--f-data);letter-spacing:.12em;color:var(--dim);margin-bottom:-6px;direction:ltr;text-align:right}
.mm-svc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mm-svc a{display:grid;gap:8px;padding:14px;border-radius:18px;background:rgba(18,27,51,.9);border:1px solid var(--line);min-height:118px;align-content:space-between;position:relative;overflow:hidden}
.mm-svc a::after{content:"";position:absolute;inset:auto -30% -60% auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(62,123,255,.35),transparent 70%)}
.mm-svc .i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(62,123,255,.16);color:var(--glow)}.mm-svc .i svg{width:22px;height:22px}
.mm-svc b{font-size:15.5px;display:block}.mm-svc span{font-size:12.5px;color:var(--muted);line-height:1.5;display:block}
.mm-links{display:grid;border-top:1px solid var(--line)}
.mm-links a{display:flex;justify-content:space-between;align-items:center;padding:15px 4px;border-bottom:1px solid var(--line);font-family:var(--f-display);font-weight:700;font-size:21px}
.mm-links a small{font:500 12px var(--f-data);color:var(--dim)}
.mm-links a[aria-current=page]{color:var(--glow)}
.mm-maryam{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px;border-radius:20px;background:linear-gradient(135deg,rgba(37,211,102,.16),rgba(18,27,51,.9));border:1px solid rgba(37,211,102,.35)}
.mm-maryam p{font-size:13.5px;color:var(--muted)}.mm-maryam b{font-size:16px;display:block;color:var(--text)}
.mm-maryam .btn{grid-column:1/-1}
.mm-quick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.mm-quick a,.mm-quick button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:6px;padding:12px 6px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12.5px;color:var(--text);text-align:center}
.mm-quick svg{width:22px;height:22px;color:var(--glow)}
.mm-foot{font-size:12.5px;color:var(--dim);text-align:center}
@media (min-width:1024px){.mm{display:none}}
.burger svg{transition:transform .3s}

/* app install */
.standalone [data-install]{display:none!important}
.app-band{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
@media (max-width:900px){.app-band{grid-template-columns:1fr}}
.app-icon{width:120px;height:120px;border-radius:28px;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px var(--line-2);justify-self:center}
.ios-tip{font-size:13px;color:var(--muted)}

/* portfolio: real sites we built */
.pf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1023px){.pf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;margin-inline:-16px;padding-inline:16px}.pf>*{flex:0 0 84%;scroll-snap-align:center}}
.pf-card{position:relative;display:grid;gap:12px}
.pf-shot{position:relative;border-radius:16px;overflow:visible;aspect-ratio:16/10.4}
.pf-shot .desk{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:14px;border:1px solid var(--line-2);box-shadow:0 24px 50px rgba(0,0,0,.45);transition:transform .5s var(--sp-settle)}
.pf-shot .mob{position:absolute;left:14px;bottom:-16px;width:24%;max-width:120px;height:auto;aspect-ratio:9/19;object-fit:cover;object-position:top;border-radius:14px;border:3px solid #1B2440;box-shadow:0 20px 40px rgba(0,0,0,.55);transition:transform .5s var(--sp-settle)}
.pf-card:hover .desk{transform:translateY(-4px)}.pf-card:hover .mob{transform:translateY(-10px) rotate(-2deg)}
.pf-meta{display:grid;gap:4px;padding-top:6px;padding-inline-end:calc(24% + 22px);min-height:64px}
.pf-card:not(:has(.mob)) .pf-meta{padding-inline-end:0}
.pf-meta b{display:block;font-size:17px}.pf-meta span{font-size:13.5px;color:var(--muted)}
.pf-meta a{font:500 12.5px var(--f-data);color:var(--glow);direction:ltr;unicode-bidi:isolate;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-self:start;max-width:100%}
.pf-badge{position:absolute;top:10px;right:10px;padding:5px 10px;border-radius:999px;background:rgba(7,11,22,.85);border:1px solid rgba(242,184,75,.5);color:var(--gold);font-size:12px;font-weight:700;backdrop-filter:blur(6px)}

/* pricing strip */
.pstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.pstrip{grid-template-columns:1fr}}
.pstrip a{display:grid;gap:6px;padding:20px;border-radius:18px;border:1px solid var(--line);background:var(--ink-1);transition:border-color .2s}
.pstrip a:hover{border-color:var(--glow)}
.pstrip small{color:var(--muted)}.pstrip b{font-family:var(--f-display);font-size:28px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.pstrip b .num{font-family:var(--f-data)}.pstrip b span:not(.num){font:500 14px var(--f-body);color:var(--muted)}

.cd-l{display:none}
@media (max-width:767px){.cd-l{display:block}}
.linkish{all:unset;cursor:pointer;color:inherit}.linkish:hover{color:var(--text)}
.when{display:flex;gap:6px}
.when button{all:unset;cursor:pointer;flex:1;text-align:center;padding:8px 6px;border-radius:10px;border:1px solid var(--line-2);font-size:13.5px;color:var(--muted)}
.when button[aria-checked=true]{background:rgba(62,123,255,.18);border-color:var(--accent);color:var(--text)}
html.mm-lock,html.mm-lock body{overflow:hidden}
.mm-lock .cdock,.mm-lock .bub{opacity:0;pointer-events:none}
.cdock{transition:opacity .25s,transform .35s var(--sp-settle)}
.cdock.hide{transform:translateY(130%);opacity:0}
.cd-maryam[data-flash]{animation:flash .9s var(--sp-settle)}
@keyframes flash{30%{transform:scale(1.05);box-shadow:0 0 0 6px rgba(37,211,102,.25),0 10px 26px rgba(37,211,102,.35)}}
.cd-txt small{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:767px){.cd-txt small{max-width:120px}}
@media (max-width:360px){.cd-txt small{display:none}}
.mm a,.mm button{-webkit-tap-highlight-color:transparent}
.mm-links a:active,.mm-svc a:active,.mm-quick>*:active{transform:scale(.98)}

/* one number format everywhere: grouped, tight, never wrapped */
.ph{display:inline-flex;gap:.3em;direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-family:var(--f-data);font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph .t{color:var(--glow)}
.mm-quick{grid-template-columns:1fr 1fr}

/* twin numbers: one tail to remember, two keys */
.twin{display:grid;gap:12px;padding:20px;border-radius:20px;background:rgba(7,11,22,.55);border:1px solid var(--line-2);min-width:0}
.tw-k{font-size:13px;color:var(--muted)}
.tw-tail{font-size:clamp(34px,4.4vw,52px);font-weight:600;color:var(--glow);letter-spacing:.02em;line-height:1.1;white-space:nowrap}
.tw-rows{display:grid;gap:8px}
.tw-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line)}
.tw-pre{font-size:20px;font-weight:600;color:var(--gold);min-width:3.2em;text-align:center;padding:4px 8px;border-radius:10px;background:rgba(242,184,75,.1)}
.tw-row b{display:block;font-size:14.5px}.tw-row .ph-full{font-size:13px;color:var(--muted)}
.tw-row .copy{margin:0}
.tw-note{font-size:12.5px;color:var(--dim)}
@media (prefers-reduced-motion:no-preference){.twin:hover .tw-pre{animation:key .6s var(--sp-settle)}@keyframes key{40%{transform:translateY(-3px)}}}

/* X-ray — a report card from the team */
.xr{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.xr{grid-template-columns:1fr}}
.xr-form{display:flex;gap:10px;margin-top:22px}
.xr-form input,.xr-cmp-form input{flex:1;min-width:0;height:54px;border-radius:14px;border:1px solid var(--line-2);background:var(--ink-0);color:var(--text);font:500 17px var(--f-data);padding:0 16px;text-align:left}
.xr-form input:focus,.xr-cmp-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.xr-form .btn,.xr-cmp-form .btn{height:54px;flex:none}
.xr-msg{min-height:1.4em;margin-top:10px;font-size:14.5px;color:var(--muted)}.xr-msg.err{color:#FF9B8A}
.xr-stage{border-radius:24px;background:var(--ink-1);border:1px solid var(--line-2);padding:clamp(16px,2.4vw,26px);min-width:0}
.band .xr-stage{background:var(--ink-0)}
.xr-k{font:600 12.5px var(--f-body);color:var(--muted);letter-spacing:.02em;margin:0 0 10px}
.xr-team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:520px){.xr-team{grid-template-columns:1fr}}
.xr-team li{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line);transition:border-color .25s,background .25s,transform .25s var(--sp-settle)}
.xr-team b{display:block;font-size:14px}.xr-team small{display:block;font-size:12px;color:var(--muted)}
.xa{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3E7BFF,#8DB8FF);color:#fff;font:800 14px var(--f-display)}
.xr-team.mini{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px;margin-top:16px}
.xr-team.mini li{padding:0;background:none;border:0;justify-content:center}.xr-team.mini li>span:last-child{display:none}
.xr-team.mini .xa{opacity:.35;transition:opacity .2s,transform .3s var(--sp-settle),box-shadow .3s}
.xr-team.mini li.on .xa{opacity:1;transform:scale(1.18);box-shadow:0 0 0 4px rgba(62,123,255,.3)}
.xr-bar{height:6px;border-radius:999px;background:var(--ink-2);overflow:hidden}.xr-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--glow));transition:width .5s var(--sp-settle)}
.xr-now{margin:14px 0 0;font-size:15.5px;min-height:1.6em}
.xr-top{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.xr-id{min-width:0;flex:1}
.xr-host{font:600 clamp(18px,2.2vw,24px) var(--f-data);direction:ltr;text-align:right;margin:0;overflow-wrap:anywhere}
.xr-grade{margin:2px 0 12px;font:700 15px var(--f-display);color:var(--glow)}
.xr-cnt{display:flex;gap:8px;flex-wrap:wrap}
.xr-cnt>div{display:flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line);font-size:13px}
.xr-cnt b{font-size:17px}.xr-cnt .bad b{color:#FF8A80}.xr-cnt .warn b{color:var(--gold)}.xr-cnt .good b{color:#3DDC84}
.xr-g{position:relative;width:120px;height:120px;flex:none}
.xr-g svg{width:120px;height:120px;transform:rotate(-90deg)}
.xr-g circle{fill:none;stroke-width:9}.xr-g .bg{stroke:var(--line-2)}
.xr-g .fg{stroke:var(--glow);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.2s var(--sp-settle)}
.xr-g[data-g=good] .fg{stroke:#3DDC84}.xr-g[data-g=warn] .fg{stroke:var(--gold)}.xr-g[data-g=bad] .fg{stroke:#FF8A80}
.xr-gv{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.xr-gv b{font-size:34px;line-height:1}.xr-gv small{font-size:11.5px;color:var(--muted)}
.xr-report>.xr-k{margin-top:22px}
.xr-items{display:grid;gap:10px}
.xr-item{padding:14px 16px;border-radius:16px;background:var(--ink-2);border:1px solid var(--line);border-inline-start:4px solid var(--gold)}
.xr-item.fail{border-inline-start-color:#FF8A80;background:linear-gradient(90deg,transparent,rgba(229,72,77,.06))}
.xr-ih{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.xr-ih h4{font-size:16px;margin:0}
.xr-pill{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(242,184,75,.14);color:var(--gold)}
.xr-item.fail .xr-pill{background:rgba(229,72,77,.16);color:#FF8A80}
.xr-find{margin:8px 0 0;font-size:14.5px;overflow-wrap:anywhere}
.xr-why{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.xr-sign{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:12.5px;color:var(--glow)}.xr-sign .xa{width:24px;height:24px;font-size:11px}
.xr-ok{margin-top:14px;border-radius:14px;border:1px solid var(--line);background:var(--ink-2)}
.xr-ok summary{cursor:pointer;padding:12px 14px;font-weight:600;color:#3DDC84;list-style:none}
.xr-ok summary::-webkit-details-marker{display:none}
.xr-ok summary::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(61,220,132,.16);margin-inline-end:8px;font-size:12px}
.xr-ok ul{list-style:none;margin:0;padding:0 14px 12px;display:grid;gap:6px}
.xr-ok li{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:6px 0;border-top:1px solid var(--line)}.xr-ok li span{color:var(--dim);font-size:12.5px;white-space:nowrap}
.xr-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.xr-cmp-form{display:flex;gap:10px;margin-top:14px}
.xl-knows{margin:10px 0 18px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:rgba(12,19,36,.5)}
.xl-knows b{display:block;margin-bottom:6px}
.xl-knows.good b{color:#2BE071}.xl-knows.bad b{color:#FF6B6B}.xl-knows.warn b{color:#FFC857}
.xl-knows blockquote{margin:0;padding-inline-start:12px;border-inline-start:3px solid var(--line-2);color:var(--muted);font-size:15px;line-height:1.8}
.xl-knows small{display:block;margin-top:8px;color:var(--dim)}
.xr-watch{margin-top:18px;padding:16px;border:1px dashed var(--line-2);border-radius:16px;background:rgba(12,19,36,.5)}
.xr-watch b{display:block;font-family:var(--f-display);font-size:17px}
.xr-watch p{margin:6px 0 0;font-size:14px;color:var(--muted)}
.xr-watch-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.xr-watch-row input{flex:1;min-width:200px;height:48px;border-radius:12px;border:1px solid var(--line-2);background:var(--ink-0);color:var(--text);font:500 16px var(--f-data);padding:0 14px;text-align:left}
.xr-watch.on .xr-watch-row{display:none}
.xr-watch-msg{min-height:1.4em;color:var(--glow)}
.xr-cmp{margin-top:14px}
.xr-csum{display:flex;align-items:center;justify-content:center;gap:18px;padding:14px;border-radius:16px;background:var(--ink-2);border:1px solid var(--line)}
.xr-csum>div{display:grid;text-align:center;min-width:0}.xr-csum b{font-size:30px}.xr-csum span{font:500 12.5px var(--f-data);color:var(--muted);direction:ltr;overflow-wrap:anywhere}
.xr-csum i{font-style:normal;color:var(--dim);font-size:13px}
.xr-cline{margin:10px 0;font-size:14.5px}
.xr-tw{overflow-x:auto;border-radius:14px;border:1px solid var(--line)}
.xr-ctable{width:100%;border-collapse:collapse;font-size:14px}
.xr-ctable th,.xr-ctable td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right}
.xr-ctable th{font-size:12px;color:var(--muted);font-weight:600;background:var(--ink-2)}.xr-ctable th.num{direction:ltr;text-align:center}
.xr-ctable td.s{text-align:center;font-weight:800;width:22%}
.xr-ctable td.pass{color:#3DDC84}.xr-ctable td.warn{color:var(--gold)}.xr-ctable td.fail{color:#FF8A80}
.xr-ctable tr.behind{background:rgba(229,72,77,.07)}

/* pulse */
.pulse{display:grid;gap:14px;padding:clamp(16px,2.4vw,24px);border-radius:22px;background:var(--ink-0);border:1px solid var(--line-2);margin-bottom:clamp(28px,4vw,44px)}
.pl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pl-head small{color:var(--dim);font-size:12.5px;margin-inline-start:auto}
.live-dot{width:10px;height:10px;border-radius:50%;background:#2BE071;position:relative}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(43,224,113,.6);transform:scale(1);opacity:1}   /* LWCOMPOSITE_v1: ring by transform/opacity, not box-shadow */
@media (prefers-reduced-motion:no-preference){.live-dot::after{animation:live 2s ease-out infinite}@keyframes live{70%{transform:scale(3);opacity:0}100%{transform:scale(3);opacity:0}100%{box-shadow:0 0 0 0 rgba(43,224,113,0)}}}
.pl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pl-stats>div{padding:12px;border-radius:14px;background:var(--ink-2)}
.pl-stats b{display:block;font-size:clamp(22px,2.6vw,30px);color:var(--text)}.pl-stats span{font-size:12.5px;color:var(--muted);line-height:1.5;display:block}
@media (max-width:560px){.pl-stats{grid-template-columns:1fr 1fr 1fr}.pl-stats span{font-size:11px}}
.pl-feed{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-height:0}
.pl-feed li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--ink-1);border:1px solid var(--line);font-size:14.5px}
.pl-feed .fx{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3E7BFF,#8DB8FF);color:#fff;font:800 14px var(--f-display)}
.pl-feed .tx{min-width:0}.pl-feed .tx b{color:var(--glow)}.pl-feed .tx span{color:var(--text)}
.pl-feed .tx small{display:block;color:var(--dim);font-size:12.5px}
.pl-feed time{font:500 12px var(--f-data);color:var(--dim);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.pl-feed li.new{animation:plin .6s var(--sp-settle)}@keyframes plin{from{opacity:0;transform:translateY(-10px)}}}
.pl-feed .tx b{display:block;font-size:13px}.pl-feed .tx span{display:block}

/* «خطاب مريم» — a real letterhead sheet on the dark page */
.xr-letter-wrap{margin-top:22px}
.xr-letter{--paper:#F7F4EC;--ink:#1B2233;--mute:#5B6478;--lv:#C62828;position:relative;background:var(--paper);color:var(--ink);border-radius:6px;padding:clamp(20px,3.4vw,40px);box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);font-size:15.5px;line-height:1.9;overflow:hidden}
.xr-letter::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--lv)}
.xr-letter.warn{--lv:#B7791F}.xr-letter.good{--lv:#1F8A4C}
.xr-letter.loading{background:var(--ink-2);color:var(--text);box-shadow:none;border:1px dashed var(--line-2);text-align:center}
.xr-letter.loading::before{display:none}
.xr-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}.xr-dots i{width:8px;height:8px;border-radius:50%;background:var(--glow);opacity:.4}
@media (prefers-reduced-motion:no-preference){.xr-dots i{animation:blink 1.2s infinite}.xr-dots i:nth-child(2){animation-delay:.2s}.xr-dots i:nth-child(3){animation-delay:.4s}@keyframes blink{50%{opacity:1}}}
.xl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid rgba(27,34,51,.15)}
.xl-brand{display:flex;align-items:center;gap:10px}.xl-brand img{height:40px;width:auto}.xl-brand span{font:700 13px var(--f-display);color:var(--mute)}
.xl-meta{display:grid;text-align:left;font:500 12.5px var(--f-data);color:var(--mute);direction:ltr}
.xl-level{display:inline-block;margin:18px 0 6px;padding:4px 14px;border-radius:4px;border:2px solid var(--lv);color:var(--lv);font:800 15px var(--f-display);letter-spacing:.02em;transform:rotate(-1.5deg)}
.xl-to{margin:6px 0 0;color:var(--mute)}.xl-dom{font-family:var(--f-data);color:var(--ink);direction:ltr;unicode-bidi:isolate}
.xl-subj{font:800 clamp(17px,2vw,20px)/1.5 var(--f-display);margin:10px 0 4px;color:var(--ink)!important}
.xl-score{margin:0 0 10px;color:var(--mute)}.xl-score b{color:var(--lv);font-size:17px}
.xl-p{margin:10px 0 0}
.xl-h{font:800 14.5px var(--f-display);margin:20px 0 8px;color:var(--ink)!important}
.xl-plan{margin:0;padding-inline-start:22px;display:grid;gap:6px}.xl-plan li::marker{color:var(--lv);font-weight:800}
.xl-plan small{display:block;color:var(--mute);font-size:12.5px}
.xl-serp{background:#fff;border:1px solid #E3E6EC;border-radius:12px;padding:14px 16px;font-family:Arial,system-ui,sans-serif;direction:rtl}
.xl-serp cite{display:block;font-style:normal;color:#202124;font-size:13px;direction:ltr;text-align:right}
.xl-serp b{display:block;color:#1A0DAB;font-size:18px;font-weight:400;margin:4px 0}.xl-serp p{margin:0;color:#4D5156;font-size:14px;line-height:1.6}
.xl-sign{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:26px;padding-top:16px;border-top:1px solid rgba(27,34,51,.15)}
.xl-sign b{display:block;font:800 17px var(--f-display)}.xl-sign span{color:var(--mute);font-size:13px}
.xl-stamp{width:104px;height:104px;border-radius:50%;border:3px double var(--lv);color:var(--lv);display:grid;place-content:center;text-align:center;transform:rotate(-12deg);opacity:.85;flex:none}
.xl-stamp b{font:800 13px var(--f-data);letter-spacing:.1em}.xl-stamp span{font:800 14px var(--f-display);color:var(--lv)}.xl-stamp i{font:500 10px var(--f-data);font-style:normal}
.xl-note{margin:16px 0 0;font-size:11.5px;color:var(--mute)}
@media print{
  body.print-letter *{visibility:hidden!important}
  body.print-letter .xr-letter,body.print-letter .xr-letter *{visibility:visible!important}
  body.print-letter .xr-letter{position:absolute;inset:0;margin:0;box-shadow:none;border-radius:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.print-letter{background:#fff!important}
}

/* job icons instead of letters */
.fx svg,.xa svg,.cd-av svg,.av svg{width:56%;height:56%;display:block}
.fx,.xa,.av{display:grid;place-items:center}
.xr-sign .xa svg{width:62%;height:62%}

/* AI readiness band */
.xr-ai{margin-top:16px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(141,184,255,.12),rgba(18,27,51,.9));border:1px solid rgba(141,184,255,.3)}
.xr-ai-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.xr-ai-h b:first-child{font:700 15px var(--f-display)}.xr-ai-h .num{font-size:20px;color:var(--glow)}
.xr-ai-bar{height:6px;border-radius:999px;background:var(--ink-3);margin:10px 0;overflow:hidden}.xr-ai-bar i{display:block;height:100%;background:linear-gradient(90deg,#8DB8FF,#B38DFF);border-radius:999px;transition:width 1s var(--sp-settle)}
.xr-bots{display:flex;gap:6px;flex-wrap:wrap}.xr-bots span{font:600 12.5px var(--f-data);padding:4px 10px;border-radius:999px;direction:ltr}
.xr-bots .yes{background:rgba(61,220,132,.12);color:#3DDC84}.xr-bots .no{background:rgba(229,72,77,.14);color:#FF8A80}
.xr-ai-note{margin:8px 0 0;font-size:13px;color:var(--muted)}

/* portfolio: 5 live sites — two large, three regular */
@media (min-width:1024px){.pf{grid-template-columns:repeat(6,minmax(0,1fr))}.pf>.pf-card{grid-column:span 2}.pf>.pf-card:nth-child(-n+2){grid-column:span 3}}
@media (min-width:641px) and (max-width:1023px){.pf>.pf-card:first-child{grid-column:span 2}}

/* tables (prices) */
.tbl-wrap{overflow-x:auto;border-radius:18px;border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
.tbl th,.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:right}
.tbl th{background:var(--ink-2);color:var(--muted);font-size:13px;font-weight:600}
.tbl tr:last-child td{border-bottom:0}.tbl td.num{font-family:var(--f-data)}
a.chip:hover{color:var(--text);border-color:var(--glow)}

/* distinctive articles */
.byline{display:flex;gap:12px;align-items:center;margin-top:18px;color:var(--muted);font-size:14.5px}
.byline .fx{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#3E7BFF,#8DB8FF);color:#fff;flex:none}
.byline b{color:var(--text)}.byline small{color:var(--dim)}
.tldr{border:1px solid rgba(141,184,255,.35);background:linear-gradient(135deg,rgba(62,123,255,.12),rgba(12,19,36,.6));border-radius:18px;padding:18px 20px;margin:0 0 26px}
.tldr b{font-family:var(--f-display);color:var(--glow)}.tldr ul{margin:10px 0 0}
.prose ol.signs{counter-reset:s;list-style:none;padding:0;display:grid;gap:12px}
.prose ol.signs>li{counter-increment:s;position:relative;padding:14px 16px 14px 16px;padding-inline-start:58px;border-radius:14px;background:var(--ink-1);border:1px solid var(--line)}
.prose ol.signs>li::before{content:counter(s);position:absolute;inset-inline-start:14px;top:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(62,123,255,.18);color:var(--glow);font:700 14px var(--f-data)}
.tool-box{margin:28px 0;padding:clamp(18px,3vw,28px);border-radius:22px;background:linear-gradient(160deg,var(--ink-2),var(--ink-1));border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.tool-box h3{margin:6px 0 8px;font-size:clamp(19px,2.2vw,24px)}.tool-box>p{color:var(--muted);font-size:15px}
.tool-k{display:inline-flex;gap:8px;align-items:center;font:600 12.5px var(--f-data);letter-spacing:.06em;color:var(--glow);margin:0}.tool-k svg{width:16px;height:16px}
.xr-go{display:flex;gap:10px;margin-top:14px}.xr-go input{flex:1;min-width:0;height:50px;border-radius:14px;border:1px solid var(--line-2);background:var(--ink-0);color:var(--text);font:500 16px var(--f-data);padding:0 14px;text-align:left}
.code{position:relative;margin:14px 0;border-radius:14px;border:1px solid var(--line-2);background:#050810;overflow:auto}
.code pre{margin:0;padding:18px;font:500 13.5px/1.7 var(--f-data);color:#CFE0FF;text-align:left;white-space:pre}
.code .copy{position:absolute;top:10px;left:10px}
.seo-q{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px;counter-reset:q}
.seo-q li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--ink-0);border:1px solid var(--line)}
.seo-q .q{font-size:15px}.yn{display:flex;gap:6px}
.yn button{all:unset;cursor:pointer;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);font-size:13.5px;color:var(--muted)}
.yn button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.seo-q li.bad{border-color:rgba(229,72,77,.55);background:rgba(229,72,77,.07)}.seo-q li.ok{border-color:rgba(61,220,132,.4)}
.seo-res{display:flex;gap:14px;align-items:center;margin-top:14px;padding:14px 16px;border-radius:16px;background:var(--ink-0);border:1px solid var(--line-2)}
.seo-res b{font:700 30px var(--f-data);color:var(--glow);min-width:3ch}
@media (max-width:560px){.seo-q li{grid-template-columns:1fr}}
.qb{display:grid;gap:12px;margin-top:14px}.qb label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.qb input:not([type=checkbox]){height:46px;border-radius:12px;border:1px solid var(--line-2);background:var(--ink-0);color:var(--text);font:inherit;padding:0 12px}
.qb fieldset{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-wrap:wrap;gap:8px}.qb legend{padding:0 6px;color:var(--muted);font-size:13.5px}
.qb .ck{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--ink-0);border:1px solid var(--line-2);color:var(--text);font-size:14px;cursor:pointer}
.qb .ck input{accent-color:#3E7BFF;width:16px;height:16px}
.qb-out{margin:0;padding:14px;border-radius:14px;background:#050810;border:1px dashed var(--line-2);font:500 13.5px/1.8 var(--f-body);white-space:pre-wrap;color:#CFE0FF;min-height:80px}

.article>article,.article>.prose{min-width:0}
.prose .tbl-wrap,.prose .code{max-width:100%}

/* LWWRAP_v1 — old WordPress content inside the 2026 shell; 404 / 410 / search */
.wpx{--sas-font:var(--f-body);font-family:var(--f-body);overflow-x:clip}
:where(.wpx) section{padding-block:0}
:where(.wpx) p{margin:revert}
:where(.wpx) img,:where(.wpx) svg{display:revert}
.lost{text-align:center}
.lost-code{font:600 clamp(72px,15vw,150px)/1 var(--f-data);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--glow);opacity:.75;margin-bottom:10px}
.lost h1{font-size:clamp(30px,4.4vw,52px);text-wrap:balance}
.lost .lead{margin:14px auto 0;max-width:56ch}
.lost-q{display:flex;gap:10px;max-width:520px;margin:30px auto 0}
.lost-q input{flex:1;min-width:0;height:50px;border-radius:14px;border:1px solid var(--line-2);background:var(--ink-1);color:var(--text);font:500 16px var(--f-body);padding:0 16px}
.lost-go{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:22px;text-align:start}
.lost-go a{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--ink-1);color:var(--text);font-weight:600;transition:border-color .2s,background .2s}
.lost-go a:hover{border-color:var(--line-2);background:var(--ink-2)}
.lost-go svg{width:20px;height:20px;color:var(--glow);flex:none}
.lost-m{margin-top:22px;color:var(--muted)}
.lost-m a{display:inline-flex;align-items:center;gap:6px;color:var(--wa);font-weight:600}
.lost-m svg{width:18px;height:18px}
.lost-res{display:grid;gap:10px;margin-top:26px;text-align:start}
.lost-res a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--ink-1);color:var(--text)}
.lost-res a b{display:block;font:700 17px/1.5 var(--f-display)}
.lost-res a span{display:block;color:var(--muted);margin-top:4px;font-size:14px}
.lost-res p{color:var(--muted)}
@media(max-width:760px){.lost-go{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wpx>h1:first-child{max-width:1080px;margin:0 auto;padding:clamp(40px,6vw,76px) 16px 0;text-align:center;font-size:clamp(30px,4.4vw,52px);text-wrap:balance}
.wpx .sd-toc{top:84px}
.wpx .lwa-hero h2{color:var(--glow)}
.wpx .lwa-hero p,.wpx .lwa-card p,.wpx .lwa-fine{color:var(--muted)}
.wpx .lwa-badge{background:rgba(37,211,102,.12);color:#7BE6A5}
.wpx .lwa-card{background:var(--ink-1);border-color:var(--line);box-shadow:none}
.wpx .lwa-card h3,.wpx .lwa-list li b,.wpx .lwa-note b{color:var(--text)}
.wpx .lwa-list li{color:var(--muted);border-color:var(--line)}
.wpx .lwa-note{background:var(--ink-1);border-right-color:var(--accent);color:var(--muted)}
.wpx .lwa-cta a{background:var(--accent);color:var(--accent-ink)}
.wpx .lwa-wrap{padding-bottom:clamp(40px,6vw,80px)}
/* LWCONSENT_v1 */
.ckbar{position:fixed;z-index:57;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 36px));display:grid;gap:12px;padding:16px;border:1px solid var(--line-2);border-radius:18px;background:rgba(12,19,36,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:14px;line-height:1.7;color:var(--muted);animation:ckIn .5s var(--sp-settle)}
.ckbar b{display:block;color:var(--text);font:700 15px/1.5 var(--f-display);margin-bottom:4px}
.ckbar a{color:var(--glow);text-decoration:underline;text-underline-offset:3px}
.ckbar>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ckbar .btn{height:42px;padding:0 14px;font-size:14px;justify-content:center}
@keyframes ckIn{from{opacity:0;transform:translateY(12px)}}
@media(max-width:720px){.ckbar{left:12px;right:12px;width:auto;bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){.ckbar{animation:none}}
/* LWPANO_v1 — the lens lab on a real photo */
.lens-box .pano-flat{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#lens-lab[data-src] .lens-box{background:var(--ink-0);cursor:grab;overflow:hidden}
#lens-lab[data-src] .lens-box:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
#lens-lab[data-src] .lens-box canvas{opacity:0;transition:opacity .6s}
#lens-lab.pano-on .lens-box canvas{opacity:1}
.pano-cap{margin-top:10px;font-size:13px;color:var(--dim)}
/* LWPANO_v2 — lens switcher + full screen */
.pano-ui{position:absolute;inset:12px 12px auto 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none;z-index:2}
.pano-ui>*{pointer-events:auto}
.pano-modes{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(7,11,22,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(233,238,249,.14)}
.pano-modes button{border:0;background:transparent;color:#C9D3EA;font:600 13px/1 var(--f-body);padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.pano-modes button[aria-pressed="true"]{background:var(--accent-fill);color:#fff}
.pano-fs{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(233,238,249,.14);background:rgba(7,11,22,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer}
.pano-fs .i-out,.pano-fs.on .i-in{display:none}.pano-fs.on .i-out{display:inline}
.pano-ui button:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
#lens-lab:not(.pano-on) .pano-ui{visibility:hidden}
#lens-lab.is-full{position:fixed;inset:0;z-index:120;background:var(--ink-0);display:flex;flex-direction:column;gap:10px;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
#lens-lab.is-full .lens-box{flex:1;aspect-ratio:auto;min-height:0;border-radius:16px}
#lens-lab.is-full .pano-cap{display:none}
#lens-lab.is-full .lens-ctl{max-width:720px;width:100%;margin-inline:auto}
html.pano-lock,html.pano-lock body{overflow:hidden}
@media(max-width:480px){.pano-modes button{padding:7px 9px;font-size:12px}}
/* LWGYRO_v1 */
.pano-act{display:flex;gap:6px;align-items:center}
.pano-gyro{height:38px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:12px;border:1px solid rgba(233,238,249,.14);background:rgba(7,11,22,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font:600 12px/1 var(--f-body);cursor:pointer}
.pano-gyro.on{background:var(--accent);border-color:transparent}
.pano-gyro.on span{display:none}
.pano-gyro.hint{animation:gyHint 1.6s ease-in-out 3}
@keyframes gyHint{50%{box-shadow:0 0 0 6px rgba(62,123,255,.35)}}
@media(max-width:400px){.pano-modes button{padding:7px 7px;font-size:11.5px}.pano-gyro{padding:0 9px}}
@media(prefers-reduced-motion:reduce){.pano-gyro.hint{animation:none}}
@media(max-width:520px){.pano-gyro span{display:none}.pano-gyro{width:38px;padding:0;justify-content:center}}
/* LWIDS_v1 — official company data */
.foot .ids{display:flex;flex-wrap:wrap;gap:6px 18px;padding:14px 0 0;margin-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.foot .ids b{color:var(--muted);font-weight:600}
.idcard{position:relative;border:1px solid var(--line-2);border-radius:22px;background:linear-gradient(135deg,var(--ink-1),var(--ink-2));padding:clamp(18px,3vw,30px);overflow:hidden}
.idcard::after{content:"";position:absolute;inset-inline-start:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;border:2px dashed rgba(141,184,255,.18);pointer-events:none}
.idcard dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px;margin:0}
.idcard dt{font-size:12.5px;color:var(--dim);letter-spacing:.02em}
.idcard dd{margin:6px 0 0;color:var(--text);font-weight:600;line-height:1.6}
.idcard dd b{font:600 20px/1.3 var(--f-data);color:var(--text)}
.idcard dd small{display:block;color:var(--muted);font-weight:500;font-size:13px}
.idcard .cp{border:1px solid var(--line-2);background:transparent;color:var(--glow);font:600 11.5px/1 var(--f-body);padding:5px 9px;border-radius:8px;cursor:pointer;vertical-align:middle}
@media(max-width:860px){.idcard dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.idcard dl{grid-template-columns:1fr}}
/* LWSCENES_v1 */
.pano-scenes{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(7,11,22,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(233,238,249,.14)}
.pano-scenes button{border:0;background:transparent;color:#C9D3EA;font:600 13px/1 var(--f-body);padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.pano-scenes button[aria-pressed="true"]{background:rgba(233,238,249,.92);color:#0C1324}
#lens-lab:not(.pano-on) .pano-scenes{visibility:hidden}
#lens-lab canvas.swap{opacity:.35!important;transition:opacity .3s}
.pano-cap a{color:var(--glow);text-decoration:underline;text-underline-offset:3px}
/* LWXRTEASER_v1 — home launcher → the full X-ray on the SEO page */
.xr-teaser{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center;border:1px solid var(--line-2);border-radius:24px;padding:clamp(20px,4vw,40px);background:radial-gradient(80% 120% at 0% 0%,rgba(62,123,255,.14),transparent 60%),var(--ink-1)}
.xr-teaser .xr-go{margin:0}
.xr-faces{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.xr-faces .xa{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--ink-2);border:1px solid var(--line);color:var(--glow)}
.xr-faces .xa svg{width:18px;height:18px}
@media(max-width:820px){.xr-teaser{grid-template-columns:1fr}}
/* LWXRMEM_v1 — report ref, share link, before/after */
.xr-ref{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--dim)}
.xr-ref .num{font-family:var(--f-data);color:var(--muted)}
.xr-link{border:1px solid var(--line-2);background:transparent;color:var(--glow);font:600 12px/1 var(--f-body);padding:6px 10px;border-radius:8px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.xr-prev{margin-top:16px;border:1px solid var(--line-2);border-radius:16px;padding:14px 16px;background:var(--ink-1)}
.xr-prev.up{border-color:rgba(37,211,102,.45)}.xr-prev.down{border-color:rgba(242,184,75,.5)}
.xr-pline{font:700 16px/1.6 var(--f-display);color:var(--text);margin-top:4px}
.xr-fixed{color:#7BE6A5;margin-top:6px}.xr-broke{color:var(--gold);margin-top:6px}
/* LWPLAN360_v1 — «ارسم مكانك» */
.p3{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:26px;align-items:start}
.p3-side{display:grid;gap:14px}
.p3-types,.p3-tools,.p3-floors{display:flex;flex-wrap:wrap;gap:6px}
.p3 button{border:1px solid var(--line-2);background:var(--ink-1);color:var(--muted);font:600 13px/1 var(--f-body);padding:9px 12px;border-radius:10px;cursor:pointer}
.p3 button[aria-pressed="true"]{background:var(--accent-fill);border-color:transparent;color:#fff}
.p3-floors button.add{border-style:dashed}
.p3-out{min-height:88px;border:1px solid var(--line-2);border-radius:16px;padding:14px 16px;background:linear-gradient(135deg,var(--ink-1),var(--ink-2));display:grid;align-content:center;gap:2px}
.p3-out b{font:700 44px/1 var(--f-data);color:var(--text)}
.p3-out span{font:700 16px/1.4 var(--f-display);color:var(--text)}
.p3-out small{color:var(--muted);font-size:13px;line-height:1.6}
.p3-send.off{opacity:.45;pointer-events:none}
.p3-board{display:grid;gap:10px}
.p3-board canvas{width:100%;border:1px solid var(--line-2);border-radius:14px;background:var(--ink-0);touch-action:none;cursor:crosshair;display:block}
.p3-hint{font-size:13px;color:var(--dim)}
@media(max-width:900px){.p3{grid-template-columns:1fr}.p3-board{order:-1}}
.p3-acts{display:flex;gap:8px;flex-wrap:wrap}.p3-acts .btn{flex:1 1 200px;justify-content:center}
.p3-dl.off{opacity:.45;pointer-events:none}
.p3-note{border:1px dashed var(--line-2);border-radius:12px;padding:10px 12px;color:var(--glow);font-size:13.5px}
/* LWSHOPCOLORS_v1 */
.sc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:30px;align-items:start}
.sc-side{display:grid;gap:14px}
.sc-up{justify-content:center;cursor:pointer}
.sc-k{font-size:13px;color:var(--dim)}
.sc-sw{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sc-sw button{width:40px;height:40px;border-radius:12px;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.sc-sw button[aria-pressed="true"]{border-color:var(--text);transform:scale(1.08)}
.sc-sw .sc-mode{width:auto;padding:0 12px;background:var(--ink-2);color:var(--muted);font:600 12.5px var(--f-body);border:1px solid var(--line-2)}
.sc-note{color:var(--glow);font-size:13px}
.sc-phone{justify-self:center;width:min(100%,360px);border-radius:36px;padding:10px;background:#05070D;border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.sc-phone canvas{width:100%;height:auto;aspect-ratio:9/16;border-radius:28px;display:block}
@media(max-width:860px){.sc{grid-template-columns:1fr}.sc-phone{order:-1}}
/* LWMYMENU_v1 */
.mym{display:grid;gap:12px;max-width:760px}
.mym-rows{display:grid;gap:8px}
.mym-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:8px}
.mym-row input,.sg-form input{height:46px;border-radius:12px;border:1px solid var(--line-2);background:var(--ink-1);color:var(--text);font:500 15px var(--f-body);padding:0 14px;min-width:0}
.mym-note{color:var(--gold);font-size:13.5px}
/* LWSADAGEN_v1 */
.sg-sec{padding-block:clamp(56px,8vw,112px)}
.sg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:start}
.sg-form{display:grid;gap:12px}
.sg-msg{color:var(--muted);min-height:1.4em}
.sg-out{display:grid;gap:12px}
.sg-post{border:1px solid var(--line-2);border-radius:18px;background:var(--ink-1);padding:14px 16px;position:relative}
.sg-h{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.sg-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;font-weight:700}
.sg-h b{display:block;color:var(--text)}.sg-h small{color:var(--dim)}
.sg-b p{margin:0 0 8px;line-height:1.8;color:var(--muted)}
.sg-hook{color:var(--text)!important;font-weight:700}
.sg-tags{color:var(--glow)!important;font-size:14px}
.sg-cp{position:absolute;inset-inline-end:12px;top:14px;border:1px solid var(--line-2);background:transparent;color:var(--glow);font:600 12px var(--f-body);padding:6px 10px;border-radius:8px;cursor:pointer}
@media(max-width:860px){.sg{grid-template-columns:1fr}}
/* LWVOICEHINT_v1 — first-visit hint for the voice ask (an unusual way to use a website): near the mic, real example phrases */
.vh{position:fixed;z-index:85;width:min(300px,calc(100vw - 32px));padding:14px 16px 12px;border-radius:16px;background:var(--ink-2);border:1px solid var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.45);color:var(--text);font-size:14px;line-height:1.6;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.vh.on{opacity:1;transform:none}
.vh b{display:block;font-size:15px;margin-bottom:2px}
.vh q{color:var(--glow);font-weight:600;quotes:"«" "»";transition:opacity .25s}
.vh .vh-acts{display:flex;gap:8px;margin-top:10px}
.vh .vh-try{flex:1;min-height:40px;border-radius:999px;border:0;background:var(--accent-fill);color:#fff;font:700 14px var(--f-body);cursor:pointer}
.vh .vh-x{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);cursor:pointer;font:600 13.5px var(--f-body)}
.vh::after{content:"";position:absolute;bottom:-7px;left:var(--ax,50%);width:12px;height:12px;background:var(--ink-2);border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transform:translateX(-50%) rotate(45deg)}
.vh.below::after{bottom:auto;top:-7px;transform:translateX(-50%) rotate(225deg)}
@media (prefers-reduced-motion:reduce){.vh,.vh q{transition:none}}

/* ===== LWMOCK_v2 (6 Oct 2026) — «موقعك بتصميمنا»: a full mini-site in the visitor's identity (form + result + browser frame) ===== */
.mock-form{max-width:480px}.mock-form button{white-space:nowrap}
.mock-hint{margin-top:10px;font-size:13.5px;color:var(--muted);max-width:52ch}
.mock-ref{display:inline-block;margin:0 0 12px;line-height:1.7;padding:8px 14px;border-radius:999px;background:rgba(242,184,75,.14);border:1px solid rgba(242,184,75,.35);color:var(--text);font-size:14px;font-weight:700;max-width:100%;text-wrap:balance}.mock-ref b{font-weight:800;color:var(--gold)}
.mock-res{margin-top:18px}.mock-res .sub{margin-top:12px}
.mock-tag{display:inline-flex;flex-wrap:wrap;gap:6px 8px;align-items:center;line-height:1.5;padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(12,19,36,.7);color:var(--text);font-size:13.5px}
.mock-tag b{direction:ltr;unicode-bidi:isolate;font-family:var(--f-data)}.mock-tag svg{width:16px;height:16px;flex:none}
.mock-res .lnk,.mv-acts .lnk{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;padding:0 6px}
.stage.mock-on .scr{opacity:0!important}.stage.mock-on .scr-site{opacity:1!important}
.mock-on .scr-site{padding:calc(var(--h)*.075) calc(var(--h)*.026) calc(var(--h)*.03);background:#fff;color:#101828;overflow:hidden}
.mk-fit{width:390px;max-width:none;overflow:hidden;border-radius:calc(var(--h)*.02)}
.site-mark{position:absolute;inset-inline:0;bottom:calc(var(--h)*.012);text-align:center;font-size:.72em;color:#6B7280;background:rgba(255,255,255,.85);padding:2px 0}
.site-mark[hidden]{display:none}
@media (max-width:767px){.mock-form{flex-direction:column}.mock-form input,.mock-form button{width:100%}.mock-hint{display:none}
  .stage.mock-on .chapter .display,.stage.mock-on .chapter .tag,.stage.mock-on .chapter>.sub{display:none}.stage.mock-on .mock-res{margin-top:0}.stage.mock-on .mock-res .sub{font-size:14px;margin-top:8px}}

/* the browser frame under the scene */
.mock-view{padding-block:clamp(40px,6vw,80px);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--ink-1),var(--ink-0))}
.mock-view[hidden]{display:none}
.mv-head{max-width:760px;margin-bottom:22px}.mv-head h2 b{direction:ltr;unicode-bidi:isolate;font-family:var(--f-data);font-weight:600;color:var(--glow)}
.mv-tabs{display:flex;gap:8px;margin-bottom:14px}
.mv-tabs button{font:inherit;font-size:14px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--ink-1);color:var(--muted);cursor:pointer}
.mv-tabs button[aria-pressed=true]{background:var(--text);color:var(--ink-0);border-color:var(--text)}
.mv-frame{background:#0F1524;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.45);margin-inline:auto;transition:max-width .35s var(--sp-settle)}
.mv-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#161D2E;border-bottom:1px solid var(--line)}
.mv-chrome i{width:11px;height:11px;border-radius:50%;background:#F26B5B}.mv-chrome i:nth-child(2){background:#F2B84B}.mv-chrome i:nth-child(3){background:#43C664}
.mv-url{margin-inline-start:12px;flex:1;background:#0C1324;border-radius:8px;padding:5px 12px;font-family:var(--f-data);font-size:12.5px;color:var(--muted);direction:ltr;text-align:left}
.mv-screen{height:min(72vh,700px);overflow:auto;background:#fff;overscroll-behavior:contain}
.mv-frame[data-mode=mobile]{max-width:420px;border-radius:38px;padding:10px;background:#0B141A}
.mv-frame[data-mode=mobile] .mv-chrome{display:none}
.mv-frame[data-mode=mobile] .mv-screen{height:min(78vh,780px);border-radius:28px}
.mv-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.mv-note{margin-top:14px;font-size:13.5px;color:var(--muted);max-width:70ch}

/* ---- LWMOCK_v3 — the mini-site: a finished page in the client's colours. Canvas stays light; the brand colour is accent + ink band; nothing says «يُكتب هنا». ---- */
.mv-screen{height:min(82vh,840px)}
.mv-note svg{width:16px;height:16px;vertical-align:-3px;stroke:currentColor;fill:none;stroke-width:1.8}
.mk{container-type:inline-size;font-family:var(--f-body);color:#101828;background:#FCFCFD;line-height:1.6;font-size:15px;
  --ink-2:#475467;--line-k:#E7E9EF;--tint:color-mix(in srgb,var(--c1) 7%,#fff);--tint2:color-mix(in srgb,var(--c1) 14%,#fff);
  --ink:color-mix(in srgb,var(--c1) 22%,#0B1020);--ink-deep:color-mix(in srgb,var(--c1) 14%,#070A14);--acc:var(--c2);--wa:#1FAF5A}
.mk *{box-sizing:border-box;min-width:0}
.mk-t1,.mk-t2,.mk-t3{font-family:var(--f-display);font-weight:800;line-height:1.18;margin:0;text-wrap:balance;letter-spacing:-.01em}
.mk p{margin:0}.mk a{text-decoration:none;color:inherit;cursor:pointer}
.mk-i{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mk-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--c1);margin-bottom:10px}
.mk-h{margin-bottom:26px;max-width:62ch}.mk-h .mk-t2{font-size:clamp(22px,3.1cqw,32px)}.mk-h p{color:var(--ink-2);margin-top:8px;font-size:clamp(13.5px,1.25cqw,15.5px)}
.mk section,.mk footer,.mk header{padding:clamp(26px,4.4cqw,56px) clamp(16px,4.6cqw,64px)}
.mk-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;color:var(--c1)}
.mk-logo{height:36px;width:auto;max-width:130px;object-fit:contain}
.mk-mono{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--c1);color:var(--c1-ink);font-family:var(--f-display);font-weight:800;font-size:17px;flex:none}
.mk-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:13px;border-bottom:1px solid var(--line-k);position:sticky;top:0;background:rgba(252,252,253,.9);backdrop-filter:blur(10px);z-index:3}
.mk-nav nav{display:flex;gap:22px;font-size:14px;font-weight:600;color:var(--ink-2)}.mk-nav nav a{white-space:nowrap}
.mk-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:var(--c1);color:var(--c1-ink);font-weight:700;font-size:14px;white-space:nowrap}
.mk-pill bdi{font-family:var(--f-data);font-size:13px}
.mk-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap;transition:transform .2s}
.mk-btn:hover{transform:translateY(-2px)}
.mk-p{background:var(--wa);color:#fff;box-shadow:0 10px 24px rgba(31,175,90,.25)}.mk-o{border:1.5px solid var(--c1);color:var(--c1);background:transparent}
.mk-o bdi{font-family:var(--f-data);font-size:14px}
/* hero */
.mk-hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5cqw,64px);align-items:center;overflow:hidden;
  background:radial-gradient(60% 80% at 100% 0%,var(--tint2),transparent 70%),radial-gradient(40% 60% at 0% 100%,color-mix(in srgb,var(--acc) 12%,#fff),transparent 70%),var(--tint)}
.mk-brandline{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--c1);margin-bottom:14px;font-size:15px}
.mk-hero .mk-t1{font-size:clamp(30px,5cqw,58px);margin-bottom:14px}
.mk-hero .mk-t1::after{content:"";display:block;width:64px;height:4px;border-radius:4px;background:var(--acc);margin-top:14px}
.mk-hero p{color:var(--ink-2);font-size:clamp(14px,1.45cqw,17px);max-width:48ch}
.mk-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.mk-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;font-size:13px;color:var(--ink-2)}
.mk-meta span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line-k)}
.mk-hero-v{position:relative;display:grid;place-items:center;min-height:300px}
.mk-hero-v::before{content:"";position:absolute;inset:0;margin:auto;width:min(92%,420px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c1) 16%,#fff) 0 28%,transparent 29% 44%,color-mix(in srgb,var(--c1) 9%,#fff) 45% 46%,transparent 47% 66%,color-mix(in srgb,var(--c1) 7%,#fff) 67% 68%,transparent 69%)}
/* the WhatsApp card — the visitor's own service in the visitor's own city */
.mk-chat{position:relative;width:min(100%,360px);border-radius:26px;background:#fff;box-shadow:0 30px 70px color-mix(in srgb,var(--c1) 26%,transparent),0 2px 0 #fff inset;overflow:hidden;font-size:13.5px;transform:rotate(-2deg)}
.mk-chat-h{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--ink);color:#fff}
.mk-chat-h .mk-logo{height:32px;background:#fff;border-radius:8px;padding:3px}.mk-chat-h .mk-mono{width:32px;height:32px}
.mk-chat-h div{flex:1;display:grid;line-height:1.3}.mk-chat-h b{font-size:14px}.mk-chat-h span{font-size:11.5px;opacity:.75}
.mk-chat-h .mk-i{width:20px;height:20px;opacity:.9}
.mk-chat-b{display:grid;gap:8px;padding:16px 14px;background:color-mix(in srgb,var(--c1) 5%,#F2F4F7);min-height:190px;align-content:end}
.mk-bub{max-width:82%;padding:10px 13px;border-radius:16px;line-height:1.5;box-shadow:0 1px 1px rgba(16,24,40,.06)}
.mk-out{justify-self:start;background:#DCF8C6;border-end-start-radius:4px;color:#1B2A1F}
.mk-in{justify-self:end;background:#fff;border-end-end-radius:4px;padding:12px 16px}
.mk-img{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink-2);border:1px dashed var(--line-k)}
.mk-img .mk-i{width:18px;height:18px;color:var(--c1)}
.mk-typing{display:inline-flex;gap:4px}.mk-typing i{width:6px;height:6px;border-radius:50%;background:#98A2B3;animation:mkty 1.2s infinite}
.mk-typing i:nth-child(2){animation-delay:.2s}.mk-typing i:nth-child(3){animation-delay:.4s}
@keyframes mkty{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.mk-chat-f{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-top:1px solid var(--line-k)}
.mk-chat-f span{flex:1;padding:9px 14px;border-radius:999px;background:#F2F4F7;color:#98A2B3;font-size:13px}
.mk-chat-f b{width:38px;height:38px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center}.mk-chat-f .mk-i{width:20px;height:20px}
/* strip — what the site does */
.mk-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-block:18px;border-block:1px solid var(--line-k);background:#fff}
.mk-strip div{display:flex;align-items:center;gap:12px;color:#1D2939;font-size:14px;font-weight:600}
.mk-strip .mk-i{width:38px;height:38px;padding:9px;border-radius:12px;background:var(--tint);color:var(--c1)}
/* services */
.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.mk-n1{grid-template-columns:1fr}.mk-n2{grid-template-columns:1fr 1fr}
.mk-card{display:grid;gap:12px;padding:22px;border-radius:20px;border:1px solid var(--line-k);background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:transform .25s,box-shadow .25s;align-content:start}
.mk-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px color-mix(in srgb,var(--c1) 14%,transparent)}
.mk-card i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--tint2),var(--tint));color:var(--c1)}.mk-card i .mk-i{width:24px;height:24px}
.mk-card .mk-t3{font-size:17.5px}
.mk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mk-tags span{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:12.5px;background:#F2F4F7;color:var(--ink-2)}
.mk-tags .mk-wa{background:color-mix(in srgb,var(--wa) 12%,#fff);color:#157A3F;font-weight:700}
.mk-n1 .mk-card{grid-template-columns:auto 1fr;align-items:center;column-gap:18px}.mk-n1 .mk-card .mk-tags{grid-column:2}
/* works — brand-coloured art tiles */
.mk-works{background:#fff}
.mk-art-row{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:180px 180px;gap:14px}
.mk-art{position:relative;border-radius:18px;overflow:hidden;background:var(--tint2);isolation:isolate;box-shadow:inset 0 0 0 1px rgba(16,24,40,.05)}
.mk-art1{grid-row:1/3}
.mk-art::before{content:"";position:absolute;inset:0;background:
  radial-gradient(55% 55% at 72% 34%,color-mix(in srgb,var(--c1) 68%,#fff) 0,transparent 70%),
  radial-gradient(48% 48% at 22% 82%,color-mix(in srgb,var(--acc) 75%,#fff) 0,transparent 70%),
  linear-gradient(160deg,color-mix(in srgb,var(--c1) 30%,#fff),color-mix(in srgb,var(--acc) 28%,#fff))}
.mk-art2::before{background:radial-gradient(60% 60% at 30% 30%,color-mix(in srgb,var(--acc) 72%,#fff) 0,transparent 70%),radial-gradient(50% 50% at 80% 85%,color-mix(in srgb,var(--c1) 66%,#fff) 0,transparent 70%),linear-gradient(200deg,color-mix(in srgb,var(--acc) 26%,#fff),color-mix(in srgb,var(--c1) 32%,#fff))}
.mk-art3::before{background:radial-gradient(70% 60% at 50% 100%,color-mix(in srgb,var(--c1) 62%,#fff) 0,transparent 70%),linear-gradient(140deg,color-mix(in srgb,var(--c1) 20%,#fff),color-mix(in srgb,var(--acc) 42%,#fff))}
.mk-art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%),radial-gradient(120% 120% at 50% 50%,transparent 60%,rgba(16,24,40,.12) 100%)}
.mk-art span{position:absolute;inset-inline-start:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(16,24,40,.78);color:#fff;font-size:12.5px;font-weight:600;backdrop-filter:blur(6px)}
.mk-art span .mk-i{width:15px;height:15px;color:#fff}
/* coverage — radial map of the known city */
.mk-cov{background:var(--tint)}
.mk-map{position:relative;height:260px;display:grid;place-items:center;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--line-k)}
.mk-map i{position:absolute;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c1) 28%,#fff);background:color-mix(in srgb,var(--c1) 4%,transparent)}
.mk-map i:nth-child(1){width:150px;height:150px}.mk-map i:nth-child(2){width:300px;height:300px;border-style:dashed;opacity:.8}.mk-map i:nth-child(3){width:470px;height:470px;opacity:.5}
.mk-map b{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--c1);color:var(--c1-ink);font-size:16px;box-shadow:0 14px 30px color-mix(in srgb,var(--c1) 35%,transparent)}
.mk-map em{position:absolute;top:18px;inset-inline-end:18px;font-style:normal;font-size:13px;font-weight:700;color:var(--ink-2);background:#fff;padding:5px 12px;border-radius:999px;border:1px solid var(--line-k)}
/* faq — questions, closed */
.mk-faq{background:#fff}.mk-qa{display:grid;gap:10px;max-width:72ch}
.mk-q{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-radius:16px;background:#fff;border:1px solid var(--line-k);font-size:15.5px}
.mk-q .mk-i{width:20px;height:20px;color:var(--c1);transform:rotate(90deg)}
/* band + footer in the brand ink */
.mk-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;background:radial-gradient(70% 120% at 100% 0%,color-mix(in srgb,var(--c1) 55%,#0B1020),transparent 70%),var(--ink);color:#fff}
.mk-band .mk-eyebrow{color:var(--acc)}.mk-band .mk-t2{font-size:clamp(22px,3cqw,32px)}.mk-band p{margin-top:8px;font-size:16px;opacity:.85}
.mk-band .mk-num{font-size:24px;font-family:var(--f-data);opacity:1;letter-spacing:.02em}
.mk-foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;background:var(--ink-deep);color:#CBD2E0;font-size:13.5px;position:relative}
.mk-foot .mk-brand{color:#fff}.mk-foot .mk-logo{background:#fff;border-radius:6px;padding:3px}.mk-foot p{margin-top:10px;color:#98A2B3;max-width:40ch}
.mk-foot div>b{display:block;color:#fff;margin-bottom:8px}.mk-foot div>span{display:block;margin-bottom:5px}.mk-foot .dim{font-family:var(--f-data);direction:ltr;text-align:right;color:#98A2B3}
.mk-foot small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;color:#98A2B3}
.mk-fab{position:sticky;bottom:18px;margin:-60px 18px 18px auto;width:54px;height:54px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(31,175,90,.4);z-index:2}
.mk-fab .mk-i{width:26px;height:26px}
.mk-dock{display:none}
/* architecture B — ink band hero, the card hangs under it */
.mk-b .mk-hero{grid-template-columns:1fr;text-align:center;background:radial-gradient(70% 90% at 50% 0%,color-mix(in srgb,var(--c1) 60%,#0B1020),transparent 75%),var(--ink);color:#fff;padding-bottom:0}
.mk-b .mk-hero .mk-eyebrow,.mk-b .mk-brandline{color:var(--acc);justify-content:center}.mk-b .mk-hero p{color:rgba(255,255,255,.8);margin-inline:auto}.mk-b .mk-cta,.mk-b .mk-meta{justify-content:center}
.mk-b .mk-hero .mk-t1::after{margin-inline:auto}.mk-b .mk-meta span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.mk-b .mk-hero .mk-o{border-color:rgba(255,255,255,.5);color:#fff}
.mk-b .mk-hero-v{margin-top:30px;min-height:0;transform:translateY(26px)}.mk-b .mk-hero-v::before{display:none}.mk-b .mk-chat{transform:none}
.mk-b .mk-strip{padding-top:48px}
.mk-b .mk-grid{grid-template-columns:1fr 1fr}
/* architecture C — editorial: huge headline, medallion visual */
.mk-c .mk-hero{grid-template-columns:1.25fr .75fr;background:#fff;border-bottom:1px solid var(--line-k)}
.mk-c .mk-hero .mk-t1{font-size:clamp(34px,6cqw,70px);font-weight:900}
.mk-c .mk-hero-v::before{width:min(100%,360px);background:conic-gradient(from 90deg,var(--tint2),var(--tint),color-mix(in srgb,var(--acc) 18%,#fff),var(--tint2))}
.mk-c .mk-chat{transform:rotate(2deg)}
.mk-c .mk-strip{border-block:0;padding-block:8px;gap:10px}.mk-c .mk-strip div{padding:14px 16px;border-radius:16px;background:var(--tint)}
.mk-c .mk-grid{grid-template-columns:repeat(3,1fr)}.mk-c .mk-n3 .mk-card:first-child{grid-column:span 2;grid-template-columns:auto 1fr;align-items:center;column-gap:18px;background:linear-gradient(135deg,var(--tint),#fff)}.mk-c .mk-n3 .mk-card:first-child .mk-t3{font-size:24px}.mk-c .mk-n3 .mk-card:first-child .mk-tags{grid-column:2}
@container (max-width:699px){
  .mk{font-size:14px}.mk section,.mk footer,.mk header{padding-inline:16px}
  .mk-nav nav{display:none}.mk-pill bdi{display:none}.mk-pill{padding:9px 12px}
  .mk-hero,.mk-c .mk-hero{grid-template-columns:1fr}.mk-hero-v{min-height:0;margin-top:6px}.mk-chat{width:100%;transform:none}
  .mk-strip,.mk-grid,.mk-b .mk-grid,.mk-c .mk-grid,.mk-n2,.mk-foot{grid-template-columns:1fr}.mk-c .mk-n3 .mk-card:first-child{grid-column:auto}
  .mk-art-row{grid-template-columns:1fr 1fr;grid-template-rows:200px 130px}.mk-art1{grid-row:1;grid-column:1/3}
  .mk-map{height:220px}.mk-band{text-align:center;justify-content:center}
  .mk-fab{display:none}
  .mk-dock{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-k);box-shadow:0 -6px 20px rgba(16,24,40,.12)}
  .mk-dock a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;font-weight:800;color:#fff;font-size:15px}
  .mk-dock-tel{background:var(--c1);color:var(--c1-ink)!important}.mk-dock-wa{background:var(--wa)}
}

/* ===== LWKEYNOTE_v1 (9 Oct 2026) — the keynote layer, site-wide: a neutral stage, one accent, the key word white and the
   rest grey, glass surfaces, film grain, word-by-word reveals, smooth scroll (keynote.js). 3D scenes (.k3d) live on the
   home page (seven layers), Maryam (the 24-hour ring) and 360 (the little planet). Everything below is readable with the
   effect layer removed: the scenes' text is server HTML and the fallbacks are complete pages. ===== */
:root{--ink-0:#060709;--ink-1:#0b0d11;--ink-2:#11141a;--ink-3:#191d25;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);
  --text:#F3F1EC;--muted:#A6A8AE;--dim:#8A8D94;--glow:#9CC0FF;--k-grey:rgba(243,241,236,.5);--k-ease:cubic-bezier(.16,1,.3,1)}
body{background:var(--ink-0)}
body::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){body::after{animation:kgrain 1.4s steps(6) infinite}}
@keyframes kgrain{0%{background-position:0 0}20%{background-position:-37px 21px}40%{background-position:29px -43px}60%{background-position:-18px -12px}80%{background-position:41px 33px}100%{background-position:0 0}}
/* the key word is white, the rest of the line is grey */
.h-xl:has(.accent-word),.h-l:has(.accent-word),.h-m:has(.accent-word),.p-hero h1:has(.accent-word){color:var(--k-grey)}
.accent-word{color:var(--text)}
.chapter .display{color:var(--k-grey)}
.chapter .display em{color:var(--text)}
.h-xl,.h-l{line-height:1.14}
section{padding-block:clamp(72px,10vw,148px)}
.p-hero{background:radial-gradient(55% 75% at 18% 22%,rgba(62,123,255,.10),transparent 70%),var(--ink-0)}
.band{background:linear-gradient(180deg,var(--ink-1),var(--ink-0) 85%);border-color:var(--line)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--ink-1);border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -48px rgba(0,0,0,.9);transition:transform .55s var(--k-ease),border-color .4s,box-shadow .55s}
a.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 50px 90px -46px rgba(0,0,0,.95)}
.btn{min-height:52px;padding:0 26px;transition:transform .35s var(--k-ease),box-shadow .35s,background .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn-a{box-shadow:0 14px 40px -16px rgba(62,123,255,.75)}
.btn-o{background:rgba(255,255,255,.03);border-color:var(--line-2)}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .rv{animation:krv linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes krv{from{opacity:.3;transform:translateY(36px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}}}
/* words of a section heading arrive one by one (keynote.js wraps them only when the heading starts below the fold) */
.kw{display:inline-block;transition:opacity .9s var(--k-ease),transform .9s var(--k-ease),filter .9s var(--k-ease);transition-delay:calc(var(--i,0) * 55ms)}
.k-split:not(.k-in) .kw{opacity:0;transform:translateY(.42em);filter:blur(10px)}
@media (prefers-reduced-motion:reduce){.k-split .kw{opacity:1!important;transform:none!important;filter:none!important}}

/* ── 3D stages (shared) ─────────────────────────────────────── */
.k3d{position:relative;padding:0;background:var(--ink-0);border:0}
.k3d .k-stage{position:relative}
.k3d canvas.k-gl{display:none}
html.k3d-on .k3d .k-stage{height:100vh;height:100svh;overflow:hidden}
html.k3d-on .k3d canvas.k-gl{display:block;position:absolute;inset:0;width:100%;height:100%;will-change:filter}
.k-vig{display:none}
html.k3d-on .k-vig{display:block;position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 70% at 50% 48%,transparent 52%,rgba(6,7,9,.92) 100%)}
.k-g{color:var(--k-grey)}
.k-w{display:inline-block;will-change:transform,filter,opacity}

/* ── seven layers (home) ─────────────────────────────────────── */
.kl-head{max-width:820px;margin-inline:auto;text-align:center;display:grid;gap:16px;justify-items:center;padding:clamp(72px,10vw,140px) clamp(16px,4vw,32px) 40px}
.kl-head .h-xl{font-size:clamp(40px,7vw,104px);line-height:1.08}
.kl-list{list-style:none;margin:0 auto;padding:0 clamp(16px,4vw,32px) clamp(72px,10vw,140px);max-width:var(--wrap);display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;counter-reset:kl}
.kl-list li{position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--ink-1);display:grid;gap:10px;align-content:start}
.kl-list .n{font-family:var(--f-data);font-size:13px;color:var(--glow);direction:ltr;text-align:end}
.kl-list h3{font-size:clamp(22px,2vw,28px)}
.kl-list p{color:var(--muted);line-height:1.8}
.kl-list a{color:var(--glow);font-weight:600;font-size:15px;display:inline-flex;gap:8px;align-items:center;margin-top:4px}
.kl-list a svg{width:18px;height:18px;transform:scaleX(-1)}
.kl-end{display:none}
html.k3d-on .kl .kl-head{position:absolute;inset:0;padding:0 clamp(16px,4vw,32px);place-content:center;pointer-events:none;z-index:2}
html.k3d-on .kl .kl-list{position:absolute;inset-inline:0;bottom:clamp(36px,8vh,96px);display:grid;grid-template-columns:1fr;place-items:center;padding:0 clamp(16px,4vw,32px);z-index:3;pointer-events:none}
html.k3d-on .kl .kl-list li{grid-area:1/1;max-width:640px;width:100%;text-align:center;justify-items:center;background:none;border:0;padding:0;opacity:0;visibility:hidden}
html.k3d-on .kl .kl-list li.on{visibility:visible;pointer-events:auto}
html.k3d-on .kl .kl-list h3{font-size:clamp(30px,4.2vw,58px);font-weight:800;line-height:1.1}
html.k3d-on .kl .kl-list p{font-size:clamp(17px,1.6vw,22px);color:var(--k-grey);max-width:30em}
html.k3d-on .kl .kl-list .n{text-align:center;font-size:14px}
html.k3d-on .kl .kl-end{display:grid;position:absolute;inset:0;place-content:center;justify-items:center;text-align:center;gap:20px;padding-inline:16px;z-index:4;opacity:0;visibility:hidden}
html.k3d-on .kl .kl-end.on{visibility:visible}
.kl-end h2{font-size:clamp(44px,8vw,120px);line-height:1.05}
.kl-end .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.kl-prog{display:none}
html.k3d-on .kl-prog{display:grid;position:absolute;inset-inline-start:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);gap:9px;z-index:3;pointer-events:none}
.kl-prog i{display:block;width:2px;height:20px;border-radius:2px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.kl-prog i::after{content:"";position:absolute;inset:0;background:var(--text);transform:scaleY(var(--f,0));transform-origin:top}
@media (max-width:760px){.kl-prog{display:none!important}}

/* ── the 24-hour ring (Maryam) ───────────────────────────────── */
.kr-intro{max-width:900px;margin-inline:auto;text-align:center;display:grid;gap:18px;justify-items:center;padding:clamp(72px,10vw,140px) 16px 32px}
.kr-intro .h-xl{font-size:clamp(40px,7.2vw,110px);line-height:1.06}
.kr-intro .t{color:#8FB8FF;direction:ltr;unicode-bidi:isolate}
.kr-caps{list-style:none;margin:0 auto;padding:0 16px clamp(64px,8vw,120px);max-width:760px;display:grid;gap:14px;text-align:center}
.kr-caps li{font-size:clamp(20px,2.4vw,30px);font-weight:300;color:var(--k-grey)}
.kr-caps b{color:var(--text);font-weight:700}
.kr-caps b.a{color:#8FB8FF}
.kr-num{display:none}
html.k3d-on .kr .kr-intro{position:absolute;inset:0;place-content:center;padding:0 16px;z-index:2;pointer-events:none}
html.k3d-on .kr .kr-caps{position:absolute;inset-inline:0;bottom:clamp(56px,11vh,120px);display:grid;place-items:center;padding:0 16px;z-index:3;pointer-events:none}
html.k3d-on .kr .kr-caps li{grid-area:1/1;font-size:clamp(24px,3.3vw,48px);line-height:1.3;max-width:20em}
html.k3d-on .kr-num{display:block;position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-weight:800;font-size:clamp(68px,10vw,148px);line-height:1;pointer-events:none;opacity:0;direction:ltr;z-index:2;font-family:var(--f-display)}
.kr-num small{display:block;text-align:center;font-size:.15em;font-weight:400;color:var(--muted);margin-top:.55em;direction:rtl;font-family:var(--f-body)}

/* ── «حسابك أنت» — the visitor's own hours ─────────────────────── */
.kc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.kc{grid-template-columns:1fr}}
.kc-dial{position:relative;width:min(440px,84vw);aspect-ratio:1;margin-inline:auto}
.kc-dial::before{content:"";position:absolute;inset:-18%;background:radial-gradient(45% 45% at 50% 50%,rgba(47,210,124,.16),transparent 70%);z-index:0}
.kc-dial svg{position:relative;width:100%;height:100%;overflow:visible}
.kc-dial path{transition:fill .45s var(--k-ease)}
.kc-dial .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.kc-dial .c b{font-family:var(--f-display);font-weight:800;font-size:clamp(60px,9vw,116px);line-height:1;color:#2FD27C;direction:ltr}
.kc-dial .c span{color:var(--muted);font-size:15px;margin-top:6px}
.kc-ctl{display:grid;gap:20px;margin-top:30px;max-width:460px}
.kc-ctl label{display:grid;gap:8px;font-size:15px;color:var(--muted)}
.kc-ctl label b{color:var(--text);direction:ltr;unicode-bidi:isolate}
.kc-ctl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;direction:ltr;cursor:pointer}
.kc-ctl input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgba(255,255,255,.14)}
.kc-ctl input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.14)}
.kc-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d9d4c9 60%,#9c968b);box-shadow:0 6px 18px rgba(0,0,0,.6)}
.kc-ctl input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d9d4c9 60%,#9c968b)}
.kc-sum{font-weight:300;font-size:clamp(21px,2.3vw,30px);line-height:1.5;margin-top:10px}
.kc-sum b{font-weight:700;color:var(--text)}.kc-sum .a{color:#2FD27C}
.kc-now{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--muted);margin-top:8px}
.kc-now i{width:9px;height:9px;border-radius:50%;background:#2FD27C;box-shadow:0 0 12px #2FD27C;flex:none}
.kc-now.open i{background:#efe8db;box-shadow:0 0 12px #efe8db}

/* ── the little planet (360) ─────────────────────────────────── */
.kp-head{max-width:860px;margin-inline:auto;text-align:center;display:grid;gap:16px;justify-items:center;padding:clamp(72px,10vw,140px) 16px 28px}
.kp-head .h-xl{font-size:clamp(40px,6.6vw,96px)}
.kp-img{display:block;width:min(1100px,100%);margin:0 auto;border-radius:24px;border:1px solid var(--line)}
.kp-caps{list-style:none;margin:0 auto;padding:28px 16px clamp(64px,8vw,120px);max-width:760px;display:grid;gap:12px;text-align:center}
.kp-caps li{font-size:clamp(20px,2.3vw,30px);color:var(--text);font-weight:700}
.kp-caps li span{display:block;font-weight:300;font-size:.62em;color:var(--muted);margin-top:4px}
.kp-caps b{color:var(--gold)}
html.k3d-on .kp .kp-img{display:none}
html.k3d-on .kp .kp-head{position:absolute;inset-inline:0;top:clamp(64px,9vh,96px);padding:0 16px;z-index:2;pointer-events:none}
html.k3d-on .kp .kp-head .h-xl{font-size:clamp(34px,4.6vw,66px)}
html.k3d-on .kp .kp-caps{position:absolute;inset-inline:0;bottom:clamp(18px,4vh,44px);padding:0 16px;display:grid;place-items:center;z-index:2;pointer-events:none}
html.k3d-on .kp .kp-caps li{grid-area:1/1;opacity:0;transition:opacity .5s var(--k-ease),transform .5s var(--k-ease);transform:translateY(12px)}
html.k3d-on .kp .kp-caps li.on{opacity:1;transform:none}
html.k3d-on .kp .kp-nadir{display:block}
.kp-nadir{display:none;position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .5s;z-index:2}
.kp[data-st="1"] .kp-nadir{opacity:1}
.kp-nadir i{display:block;border:1.5px dashed var(--gold);border-radius:50%;width:var(--nd,120px);height:var(--nd,120px)}
@media (prefers-reduced-motion:no-preference){.kp-nadir i{animation:kspin 18s linear infinite}}
@keyframes kspin{to{transform:rotate(360deg)}}
.kp-nadir span{position:absolute;inset-inline-start:calc(100% + 14px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:14px;color:var(--gold);font-weight:600}

html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}
/* LWKEYNOTE_v1b — phone: captions clear the bottom dock; nothing widens the page */
#kc{overflow-x:clip}.xr-teaser>*{min-width:0}
@media (max-width:760px){html.k3d-on .kl .kl-list,html.k3d-on .kr .kr-caps,html.k3d-on .kp .kp-caps{bottom:calc(136px + env(safe-area-inset-bottom,0px))}.xr-teaser{grid-template-columns:minmax(0,1fr)}.xr-teaser .xr-go{flex-wrap:wrap}.xr-teaser .xr-go input{flex:1 1 100%}.xr-teaser .xr-go .btn{flex:1 1 100%;justify-content:center}}
/* LWKEYNOTE_v1c — wide screens: the layer captions stand beside the stack (the stack pans to the other side) */
@media (min-width:1000px) and (min-aspect-ratio:23/20){html.k3d-on .kl .kl-list{inset-inline:auto;inset-inline-start:clamp(32px,7vw,130px);bottom:auto;top:50%;transform:translateY(-50%);width:min(460px,36vw);place-items:start;padding:0}html.k3d-on .kl .kl-list li{text-align:start;justify-items:start}html.k3d-on .kl .kl-list .n{text-align:start}html.k3d-on .kl .kl-list h3{font-size:clamp(34px,3.6vw,56px)}}

/* ===== LWHERO_v1 (9 Oct 2026) — the home hero is the seven layers; every scene pins with CSS sticky so the page has its
   final layout from the first paint (the 3D starts on the first interaction); captions big and clear; one accent. ===== */
html.k3d-on .k3d{height:calc(100vh + var(--kpin,4000px));height:calc(100svh + var(--kpin,4000px))}
html.k3d-on .k3d>.k-stage{position:sticky;top:0}
html.k3d-on .kl{--kpin:4300px}html.k3d-on .kr{--kpin:3800px}html.k3d-on .kp{--kpin:3200px}
@media (max-width:999px),(max-aspect-ratio:23/20){html.k3d-on .kl{--kpin:4000px}html.k3d-on .kr{--kpin:3400px}html.k3d-on .kp{--kpin:2800px}}
html.k3d-on .k3d canvas.k-gl{opacity:0;transition:opacity .8s var(--k-ease)}
html.k3d-on .k3d.k-live canvas.k-gl{opacity:1}
.k-skip{display:none}
html.k3d-on .k-skip{display:inline-flex;position:absolute;z-index:6;inset-inline-end:clamp(14px,2.4vw,36px);top:86px;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(10,12,16,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--muted);font:600 13px/1.4 var(--f-body);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
html.k3d-on .k-skip.on{opacity:1;visibility:visible}
.k-skip svg{width:14px;height:14px;transform:rotate(-90deg)}
.k-skip:hover{color:var(--text);border-color:var(--glow)}

/* the hero, with or without 3D */
.kh{--kcol:min(600px,44vw);--kin:clamp(32px,6vw,120px);position:relative;background:var(--ink-0)}
.kh .k-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(96px,12vh,140px) clamp(16px,4vw,48px) 48px;max-width:1360px;margin-inline:auto}
.kh-box{position:relative;aspect-ratio:1;max-width:620px;width:100%;justify-self:center}
.kh-box2{display:none}
.kh-poster{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .8s var(--k-ease)}
.kh-intro{grid-row:1;grid-column:1;min-width:0}
.kh-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03);font:600 clamp(12.5px,1.05vw,14.5px)/1.5 var(--f-body);color:var(--muted)}
.kh-tag svg{width:15px;height:15px;flex:none;color:var(--glow)}
.kh-d{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(40px,5.3vw,90px);line-height:1.1;letter-spacing:-.005em;color:var(--k-grey);text-wrap:balance}
.kh-d em{font-style:normal;color:var(--text)}
.kh-sub{margin:20px 0 0;max-width:30em;font-size:clamp(18px,1.45vw,23px);line-height:1.6;color:var(--muted)}
.kh-sub b{color:var(--text);font-weight:700}
.kh .xr-go{display:flex;gap:10px;margin-top:28px;max-width:580px}
.kh .xr-go input{flex:1;min-width:0;height:60px;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);font:500 18px var(--f-data);padding:0 18px;text-align:left}
.kh .xr-go input:focus{outline:2px solid var(--glow);outline-offset:2px}
.kh .xr-go .btn{height:60px;padding-inline:24px;font-size:17px;white-space:nowrap}
.kh .mock-hint{margin:12px 0 0;font-size:14px;color:var(--dim)}
.kh .mock-hint a{color:var(--glow)}
.kh-score{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:26px 0 0;font-family:var(--f-display)}
.kh-score b{font-size:clamp(60px,6vw,104px);font-weight:800;line-height:1;color:var(--text)}
.kh-score span{font-size:24px;color:var(--muted)}
.kh-score bdi{font:600 18px var(--f-data);color:var(--glow);margin-inline-start:8px}
.kh-sum{margin:10px 0 14px;font-size:clamp(17px,1.4vw,21px);color:var(--text)}
.kh .mock-tag{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--dim)}
.kh .mock-tag svg{width:14px;height:14px}
.kh .mock-res .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.kh .mock-res .actions svg{width:16px;height:16px}
.kh .kl-list{grid-column:1/-1}
.kl-you{margin:6px 0 0;color:var(--glow);font-weight:600}
.kl-you[data-st=fail]{color:#FF8E8E}.kl-you[data-st=warn]{color:#F2C14E}
.kl-links{display:flex;flex-wrap:wrap;gap:4px 14px}
@media (max-width:860px){.kh .k-stage{grid-template-columns:minmax(0,1fr);padding-top:96px}.kh-box{grid-row:1;max-width:420px}.kh-intro{grid-row:2}}

/* the hero as a 3D stage */
html.k3d-on .kh .k-stage{display:block;max-width:none;padding:0;margin:0;overflow:hidden}
html.k3d-on .kh-box,html.k3d-on .kh-box2{display:block;position:absolute;max-width:none;width:auto;aspect-ratio:auto;left:2vw;right:calc(var(--kcol) + var(--kin) + 2vw);top:80px;bottom:4vh;pointer-events:none}
html.k3d-on .kh-box2{visibility:hidden}
html.k3d-on .kh.k-live .kh-poster{opacity:0}
html.k3d-on .kh-intro{position:absolute;z-index:3;inset-inline-start:var(--kin);top:0;bottom:0;width:var(--kcol);display:flex;flex-direction:column;justify-content:center;padding-top:40px}
html.k3d-on .kh .kl-list{inset-inline:auto;inset-inline-start:var(--kin);top:0;bottom:0;width:var(--kcol);transform:none;display:grid;align-content:center;place-items:center start;padding:40px 0 0}
html.k3d-on .kh .kl-list li{text-align:start;justify-items:start;max-width:none;gap:14px}
html.k3d-on .kh .kl-list .n{text-align:start;font:600 16px var(--f-data);color:var(--glow)}
html.k3d-on .kh .kl-list h3{font-size:clamp(42px,4.7vw,84px);line-height:1.08;font-weight:800}
html.k3d-on .kh .kl-list p{font-size:clamp(18px,1.55vw,24px);line-height:1.6;max-width:26em}
html.k3d-on .kh .kl-list .kl-you{font-size:clamp(17px,1.4vw,21px)}
html.k3d-on .kh .kl-list .kl-links a{font-size:16px}
html.k3d-on .kh .kl-end{inset:0 auto 0 auto;inset-inline-start:var(--kin);width:var(--kcol);display:grid;place-content:center start;justify-items:start;text-align:start;padding:40px 0 0}
html.k3d-on .kh .kl-end .row{display:flex;gap:12px;flex-wrap:wrap}
html.k3d-on .kh .kl-end .kh-sub:empty{display:none}
html.k3d-on .kh .k-vig{background:radial-gradient(90% 80% at 30% 50%,transparent 55%,rgba(6,7,9,.9) 100%)}
@media (max-width:999px),(max-aspect-ratio:23/20){
 html.k3d-on .kh-intro{inset-inline:16px;width:auto;top:auto;bottom:calc(92px + env(safe-area-inset-bottom,0px));display:block;padding:0}
 html.k3d-on .kh-box{left:0;right:0;top:72px;bottom:calc(100px + env(safe-area-inset-bottom,0px) + var(--kh-ib,340px))}
 html.k3d-on .kh-box2{left:0;right:0;top:72px;bottom:calc(150px + env(safe-area-inset-bottom,0px) + 200px)}
 html.k3d-on .kh .kl-list{inset-inline:16px;width:auto;top:auto;bottom:calc(130px + env(safe-area-inset-bottom,0px));display:grid;align-content:end;padding:0}
 html.k3d-on .kh .kl-list h3{font-size:clamp(30px,8.4vw,44px)}
 html.k3d-on .kh .kl-list p{font-size:clamp(16px,4.3vw,19px)}
 html.k3d-on .kh .kl-end{inset-inline:16px;width:auto;top:auto;bottom:calc(110px + env(safe-area-inset-bottom,0px));padding:0}
 html.k3d-on .kh .k-vig{background:radial-gradient(110% 70% at 50% 30%,transparent 55%,rgba(6,7,9,.9) 100%)}
 .kh-tag{margin-bottom:12px}
 .kh-d{font-size:min(9.4vw,5.3svh,46px)}
 .kh-sub{margin-top:12px;font-size:min(4.4vw,2.3svh,19px)}
 .kh .xr-go{margin-top:16px}.kh .xr-go input,.kh .xr-go .btn{height:54px}.kh .xr-go .btn{padding-inline:16px;font-size:15.5px}
 .kh .mock-hint{font-size:13px;margin-top:8px}
 .kh-score{margin-top:12px}.kh-score b{font-size:56px}
}
@media (max-width:420px){.kh .xr-go .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.kh .xr-go .btn{padding-inline:18px}}   /* LWA11Y_v2 — the label stays in the accessibility tree (PSI «Buttons must have discernible text») */

/* Maryam is ours; a client's own customers are Sada's (9 Oct 2026) */
.kn{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center}
.kn-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kn-list li{display:grid;gap:4px;padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--ink-1)}
.kn-list b{font-family:var(--f-display);font-size:20px}
.kn-list span{color:var(--muted);font-size:15.5px;line-height:1.6}
@media (max-width:860px){.kn{grid-template-columns:1fr}}
html.k3d-on .kh{margin-top:calc(-1 * var(--hdr,69px))}
.kh .xr-go.mock-form{flex-direction:row;flex-wrap:nowrap;max-width:580px}
.kh .mock-form input{width:auto;flex:1 1 auto;min-width:0}.kh .mock-form button{width:auto;flex:none}
@media (max-width:999px),(max-aspect-ratio:23/20){
 .kh.kh-has .kh-tag,.kh.kh-has .kh-intro .kh-sub{display:none}
 .kh.kh-has .kh-d{font-size:min(7.2vw,30px)}
 .kh .mock-res .actions{gap:8px;margin-top:10px}.kh .mock-res .actions .btn{padding:10px 14px;font-size:14.5px;min-height:0}
 .kh .mock-tag{font-size:12px}.kh-sum{font-size:15.5px;margin:6px 0 8px}
}
.kh.kh-has .kh-intro .kh-sub{display:none}.kh.kh-has .kh-intro .kh-d{font-size:clamp(30px,3.4vw,56px)}
@media (min-width:1000px) and (min-aspect-ratio:23/20){html.k3d-on .kh-intro,html.k3d-on .kh .kl-list,html.k3d-on .kh .kl-end{padding-bottom:96px}}
/* LWMARYAMFAB_v2 (9 Oct 2026) — Maryam's own mark: a glass capsule and a live orb; the old green pill is retired
   (WhatsApp green survives only as the small channel dot) */
.cd-maryam{background:linear-gradient(135deg,rgba(62,123,255,.30),rgba(62,123,255,.08) 60%),rgba(12,15,21,.9);color:var(--text);border:1px solid rgba(143,184,255,.42);border-radius:18px;height:56px;padding:0 7px 0 18px;gap:12px;box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 30px rgba(62,123,255,.22),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cd-maryam:hover{border-color:rgba(143,184,255,.75);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 40px rgba(62,123,255,.35),inset 0 1px 0 rgba(255,255,255,.1)}
.cd-av{width:42px;height:42px;background:none;box-shadow:none;border-radius:50%}
.cd-orb{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#3E7BFF,#9CC0FF,#ffffff,#5B8CFF,#3E7BFF);animation:cdorb 7s linear infinite}
.cd-orb::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:radial-gradient(70% 70% at 35% 28%,#2b3a5e,#0a0d13 72%)}
.cd-av b{position:relative;z-index:1;font:800 19px/1 var(--f-display);color:#fff;text-shadow:0 0 12px rgba(143,184,255,.8)}
.cd-av i{z-index:2;border-color:#0c0f15;background:#25D366}
.cd-av::after{border-color:rgba(143,184,255,.7)}
.cd-txt b{color:#fff;font-size:15px}.cd-txt small{color:var(--glow);opacity:1}
@keyframes cdorb{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.cd-orb{animation:none}}
.top .btn-wa{background:linear-gradient(135deg,#3E7BFF,#5E8EFF);color:#fff;box-shadow:0 8px 24px rgba(62,123,255,.32);border:1px solid rgba(255,255,255,.14)}
.top .btn-wa:hover{filter:brightness(1.08)}
.top .btn-wa svg{color:#fff}
.kh .k-stage>*{min-width:0}.kh-intro{max-width:100%}
html.k3d-on .kp .kp-caps b{color:var(--text)}
.kh .kl-list{width:100%;max-width:1200px;box-sizing:border-box}
.kh-poster{-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 74%,transparent 100%)}
.pstrip{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

/* ===== LWSADAPAGE_v1 (9 Oct 2026) — /sada/: «صدى» = an echo. One post goes out as rings to every platform, and the
   answers come back into one inbox. Hero mark is CSS only; the scroll scene (.ke) is DOM + GSAP (no WebGL). ===== */
.sd-hero{position:relative;padding:clamp(108px,13vh,150px) 0 clamp(48px,7vw,96px);overflow:hidden}
.sd-hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:900px;max-height:900px;background:radial-gradient(closest-side,rgba(62,123,255,.16),transparent 70%);pointer-events:none}
.sd-hg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.sd-ht .crumbs{margin-bottom:18px}
.sd-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sd-hero .chips{margin-top:22px}
.sd-mark{position:relative;aspect-ratio:1;width:100%;max-width:560px;justify-self:center;container-type:inline-size}
.sd-ring i{position:absolute;inset:0;margin:auto;width:34cqw;height:34cqw;border-radius:50%;border:1.5px solid rgba(143,184,255,.55);opacity:0;animation:sdecho 4.2s cubic-bezier(.2,.7,.2,1) infinite}
.sd-ring i:nth-child(2){animation-delay:1.4s}.sd-ring i:nth-child(3){animation-delay:2.8s}
@keyframes sdecho{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.75);opacity:0}}
.sd-core{position:absolute;inset:0;margin:auto;width:34cqw;height:34cqw;border-radius:50%;display:grid;place-content:center;text-align:center;gap:2px;
 background:radial-gradient(70% 70% at 35% 28%,#2b3a5e,#0a0d13 72%);border:1px solid rgba(143,184,255,.45);box-shadow:0 0 60px rgba(62,123,255,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.sd-core b{font:800 9.5cqw/1 var(--f-display);color:#fff;text-shadow:0 0 24px rgba(143,184,255,.7)}
.sd-core small{font-size:3.2cqw;color:var(--muted)}
.sd-p{position:absolute;left:50%;top:50%;--a:calc(var(--k) * 45deg - 90deg);transform:translate(-50%,-50%) rotate(var(--a)) translateX(44cqw) rotate(calc(-1 * var(--a)));
 padding:.5em 1em;border-radius:999px;font:600 clamp(11px,2.9cqw,15px)/1 var(--f-body);color:var(--muted);background:rgba(12,15,21,.85);border:1px solid var(--line-2);white-space:nowrap;animation:sdping 4.2s calc(var(--k) * .12s + .9s) infinite}
@keyframes sdping{0%,100%{color:var(--muted);border-color:var(--line-2);box-shadow:none}8%,22%{color:#fff;border-color:rgba(143,184,255,.8);box-shadow:0 0 22px rgba(62,123,255,.45)}}
@media (prefers-reduced-motion:reduce){.sd-ring i,.sd-p{animation:none}.sd-ring i{opacity:.35}.sd-ring i:nth-child(2){transform:scale(1.8);opacity:.2}.sd-ring i:nth-child(3){transform:scale(2.5);opacity:.1}}
@media (max-width:860px){.sd-hg{grid-template-columns:minmax(0,1fr)}.sd-mark{max-width:420px;grid-row:1}.sd-hero{padding-top:96px}}
.sd-who{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));display:grid}
.plans{align-items:stretch}

/* the echo scene */
.ke{--kcol:min(560px,42vw);--kin:clamp(32px,6vw,120px);position:relative}
.ke-scene{display:none}
.ke .k-stage{padding:clamp(56px,8vw,112px) 16px}
.ke-head{max-width:900px;margin:0 auto 32px;text-align:center;display:grid;gap:14px;justify-items:center}
.ke-caps{list-style:none;margin:0 auto;padding:0;max-width:var(--wrap);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.ke-caps li{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--ink-1);display:grid;gap:8px;align-content:start}
.ke-caps li.you{border-color:rgba(143,184,255,.55)}
.ke-caps .n{font:600 13px var(--f-data);color:var(--glow)}
.ke-caps h3{font-size:20px}.ke-caps p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}
html.k3d-on .ke .k-stage{padding:0;height:100svh;overflow:hidden}
html.k3d-on .ke-head{position:absolute;inset:0;margin:0;max-width:none;place-content:center;padding:0 16px;z-index:4;pointer-events:none}
html.k3d-on .ke-head .h-xl{font-size:clamp(40px,6.6vw,104px);line-height:1.08}
html.k3d-on .ke-scene{display:block;position:absolute;z-index:2;left:3vw;right:calc(var(--kcol) + var(--kin) + 3vw);top:86px;bottom:5vh;container-type:size}
html.k3d-on .ke-caps{position:absolute;z-index:3;inset-inline-start:var(--kin);top:0;bottom:0;width:var(--kcol);max-width:none;display:grid;grid-template-columns:1fr;align-content:center;padding:40px 0 96px;pointer-events:none}
html.k3d-on .ke-caps li{grid-area:1/1;border:0;background:none;padding:0;gap:14px;opacity:0;visibility:hidden;pointer-events:auto}
html.k3d-on .ke-caps .n{font-size:16px}
html.k3d-on .ke-caps h3{font-size:clamp(40px,4.5vw,80px);line-height:1.08;font-weight:800}
html.k3d-on .ke-caps p{font-size:clamp(18px,1.55vw,24px);max-width:24em}
html.k3d-on .ke-caps li.you h3{color:var(--glow)}
.ke-rings i{position:absolute;left:50%;top:50%;width:46cqmin;height:46cqmin;margin:-23cqmin 0 0 -23cqmin;border-radius:50%;border:2px solid rgba(143,184,255,.7);opacity:0}
.ke-p{position:absolute;left:50%;top:50%;--a:calc(var(--k) * 45deg - 90deg);transform:translate(-50%,-50%) rotate(var(--a)) translateX(43cqmin) rotate(calc(-1 * var(--a)));
 padding:.55em 1.1em;border-radius:999px;font:700 clamp(12px,2.6cqmin,17px)/1 var(--f-body);color:var(--muted);background:rgba(12,15,21,.9);border:1px solid var(--line-2);white-space:nowrap;opacity:0}
.ke-p.on{color:#fff;border-color:rgba(143,184,255,.85);box-shadow:0 0 26px rgba(62,123,255,.5)}
.ke-card{position:absolute;left:50%;top:50%;width:min(330px,56cqmin);transform:translate(-50%,-50%);border-radius:24px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),#0e1218;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px rgba(0,0,0,.55);display:grid;gap:12px}
.ke-ex{position:absolute;top:22px;inset-inline-end:22px;z-index:2;font:600 11px var(--f-body);padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.ke-ph{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden}
.ke-raw,.ke-des{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:8px}
.ke-raw{background:repeating-linear-gradient(135deg,#1a1f28 0 14px,#161a22 14px 28px);color:var(--muted);font-size:14px}
.ke-raw i{width:56px;height:44px;border:3px solid var(--muted);border-radius:10px;position:relative}
.ke-raw i::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border:3px solid var(--muted);border-radius:50%}
.ke-des{opacity:0;background:radial-gradient(60% 55% at 50% 62%,#e8a33c 0 38%,#b55d1c 39% 46%,transparent 47%),radial-gradient(120% 90% at 50% 0%,#5b1d16,#1d0a08 70%);align-content:start;padding-top:12%}
.ke-des b{font:800 clamp(20px,6.2cqmin,32px)/1.1 var(--f-display);color:#fff7e8;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.ke-des small{font-size:clamp(11px,2.6cqmin,14px);color:#ffd9a0;letter-spacing:.04em}
.ke-des i{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%)}
.ke-cap{display:grid;padding:0 4px;min-height:5.6em}
.ke-cap p{grid-area:2/1;margin:0;font-size:clamp(13px,3cqmin,16px);line-height:1.55;color:var(--text);opacity:0}
.ke-cap p:first-of-type{opacity:1}
.ke-d{grid-area:1/1;justify-self:start;font:600 11px var(--f-data);color:var(--glow);margin-bottom:6px}
.ke-meta{display:flex;justify-content:space-between;gap:8px;padding:0 4px 2px;font-size:12px;color:var(--dim)}
.ke-wa{position:absolute;left:calc(50% - min(330px,56cqmin) / 2 - 12cqmin);top:58%;width:min(290px,50cqmin);padding:14px;border-radius:18px;background:#0f1a14;border:1px solid rgba(37,211,102,.4);box-shadow:0 30px 60px rgba(0,0,0,.55);display:grid;gap:10px;opacity:0}
.ke-wa-h{display:flex;align-items:center;gap:8px}.ke-wa-h b{font-size:15px}.ke-wa-h small{color:#7ee2a8;font-size:12px}
.ke-wa-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#3E7BFF;color:#fff;font:800 14px var(--f-display)}
.ke-wa p{margin:0;font-size:clamp(13px,2.9cqmin,15.5px);line-height:1.5;background:rgba(255,255,255,.06);padding:10px 12px;border-radius:12px}
.ke-wa-b{display:flex;gap:8px}.ke-wa-b span{flex:1;text-align:center;padding:9px;border-radius:10px;border:1px solid var(--line-2);font-weight:700;font-size:14px}
.ke-wa-b .ok{background:#25D366;color:#06210f;border-color:#25D366}
.ke-you{justify-self:start;font:700 12px var(--f-body);color:#fff;background:#3E7BFF;padding:4px 10px;border-radius:999px}
.ke-inbox{position:absolute;left:50%;top:50%;width:min(360px,64cqmin);transform:translate(-50%,-50%);padding:14px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),#0e1218;border:1px solid rgba(143,184,255,.4);box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 50px rgba(62,123,255,.2);display:grid;gap:10px;opacity:0}
.ke-ib-h{display:flex;justify-content:space-between;align-items:baseline}.ke-ib-h b{font-size:17px}.ke-ib-h small{color:var(--glow);font-size:12px}
.ke-m{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05)}
.ke-m span{font:600 11px var(--f-body);color:var(--glow)}.ke-m p{margin:0;font-size:clamp(13px,2.9cqmin,15px)}
.ke-sug{padding:10px 12px;border-radius:12px;border:1px dashed rgba(143,184,255,.6);display:grid;gap:2px}
.ke-sug span{font:600 11px var(--f-body);color:#9CC0FF}.ke-sug p{margin:0;font-size:clamp(13px,2.9cqmin,15px)}
@media (max-width:999px),(max-aspect-ratio:23/20){
 html.k3d-on .ke-scene{left:0;right:0;top:76px;bottom:calc(140px + env(safe-area-inset-bottom,0px) + 190px)}
 html.k3d-on .ke-caps{inset-inline:16px;width:auto;top:auto;bottom:calc(126px + env(safe-area-inset-bottom,0px));align-content:end;padding:0}
 html.k3d-on .ke-caps h3{font-size:clamp(28px,8vw,42px)}html.k3d-on .ke-caps p{font-size:clamp(15px,4.2vw,18px)}
 .ke-wa{left:auto;right:4cqw;top:52%}
}
html.k3d-on .ke{--kpin:3600px}
@media (max-width:999px),(max-aspect-ratio:23/20){html.k3d-on .ke{--kpin:3300px}}
.sd-hero .kh-d{font-size:clamp(34px,4.3vw,70px)}
.sd-hero .kh-sub{font-size:clamp(17px,1.35vw,21px)}
.ke-des{background:radial-gradient(120% 90% at 50% 0%,#5b1d16,#1d0a08 70%)}
.ke-des::before{content:"";position:absolute;left:50%;top:60%;width:66%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
 background:radial-gradient(circle at 50% 50%,#7fb04a 0 5%,transparent 5.5%),radial-gradient(circle at 38% 44%,#7fb04a 0 2.2%,transparent 2.6%),radial-gradient(circle at 60% 40%,#7fb04a 0 1.8%,transparent 2.2%),
 radial-gradient(circle,transparent 0 55%,rgba(120,45,10,.55) 56% 62%,transparent 63%),repeating-conic-gradient(from 3deg,#f0b24a 0 3deg,#d88d2b 3deg 6deg,#e9a23a 6deg 9deg);
 box-shadow:0 0 0 6px #9b4a17,0 18px 40px rgba(0,0,0,.55),inset 0 -10px 30px rgba(90,30,0,.45)}
.ke-des b,.ke-des small{position:relative;z-index:1}
.sd-hero .kh-d{font-size:clamp(32px,3.6vw,58px)}
.ke-ex{inset-inline-end:auto;left:22px;right:auto;top:auto;bottom:calc(100% - 22px - min(306px,52cqmin) + 10px)}
@media (max-width:860px){.sd-mark{grid-row:2;max-width:340px}.sd-p{--r:40cqw;transform:translate(-50%,-50%) rotate(var(--a)) translateX(40cqw) rotate(calc(-1 * var(--a)));font-size:11px}}
.sd-hg{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.sd-hero .kh-d{font-size:clamp(32px,3.4vw,56px);text-wrap:wrap}
@media (max-width:860px){.sd-hg{grid-template-columns:minmax(0,1fr)}}
.sg-post{animation:sgin .7s var(--k-ease) both;animation-delay:calc(var(--i,0) * .18s)}
@keyframes sgin{from{opacity:0;transform:translateY(24px);filter:blur(8px)}}
.sg-echo{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line-2)}
.sg-echo::before{content:"جاهز للنشر على";font-size:12px;color:var(--dim);margin-inline-end:4px}
.sg-echo span{font:600 12px/1 var(--f-body);padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);animation:sdping 3.6s calc(var(--k) * .15s + .6s) 2}
.sg-wait{position:relative;min-height:280px;display:grid;place-content:center;justify-items:center;gap:4px;container-type:inline-size;overflow:hidden}
.sg-wait .sd-ring i{width:150px;height:150px}
.sg-wait b{position:relative;z-index:1;font:800 34px/1 var(--f-display);text-shadow:0 0 24px rgba(143,184,255,.7)}
.sg-wait span{position:relative;z-index:1;color:var(--muted);font-size:14px}
.sd-p,.ke-p{--a:calc(var(--k) * 36deg - 90deg)}.sd-p{font-size:clamp(10.5px,2.6cqw,14px)}

/* ===== LWDOCS_v1 (13 Oct 2026) — the guide pages (/sada-docs/, /maestro-docs/) and the free analysis package ===== */
.dk-hero h1{font-size:clamp(32px,4.6vw,60px);line-height:1.12}
.dk-vis{position:relative;display:grid;place-items:center;min-height:300px}
.dk-ex{position:absolute;top:12px;left:12px;font:600 11px var(--f-body);padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.dk-wa{position:relative;width:min(380px,100%);padding:16px;border-radius:24px;background:#0d1712;border:1px solid rgba(37,211,102,.35);box-shadow:0 30px 70px rgba(0,0,0,.5);display:grid;gap:10px}
.dk-wa-h{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.dk-wa-h span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#3E7BFF;color:#fff;font:800 15px var(--f-display)}
.dk-wa-h small{color:#7ee2a8;font-size:12px;margin-inline-start:auto}
.dk-bub{max-width:86%;padding:10px 12px;border-radius:14px;font-size:14.5px;line-height:1.55;background:rgba(255,255,255,.07);display:grid;gap:4px;opacity:0;animation:dkbub .6s var(--k-ease) forwards}
.dk-bub small{color:var(--dim);font-size:11.5px}
.dk-bub.out{justify-self:end;background:#1f5c3b;animation-delay:1s}.dk-bub.in:last-of-type{animation-delay:1.8s}
@keyframes dkbub{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dk-ticket,.dk-cash{position:relative;width:min(360px,100%);padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),#0e1218;border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.5);display:grid;gap:10px}
.dk-tk-h{display:flex;justify-content:space-between;align-items:center}.dk-tk-h span{font:700 12px var(--f-body);padding:4px 10px;border-radius:999px;background:rgba(143,184,255,.18);color:var(--glow)}
.dk-tk-n{font:700 28px var(--f-data);text-align:end}
.dk-tk-r,.dk-cash-r{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:14.5px}
.dk-tk-b,.dk-cash-b{text-align:center;padding:12px;border-radius:12px;background:#3E7BFF;color:#fff;font-weight:700}
.dk-cash{margin:18px 0;width:min(420px,100%)}.dk-cash-h{font-weight:700;display:flex;justify-content:space-between}.dk-cash .dk-ex{position:static}
.dk .toc{max-height:calc(100svh - 120px);overflow:auto}
.dk-prose{min-width:0}
.dk-sec{scroll-margin-top:90px;padding-bottom:12px}
.dk-sec>h2{display:flex;align-items:center;gap:12px}
.dk-n{flex:none;font:700 13px var(--f-data);color:var(--glow);padding:4px 9px;border-radius:999px;border:1px solid rgba(143,184,255,.4)}
.dk-steps{list-style:none;padding:0!important;margin:8px 0 20px;display:grid;gap:0!important;position:relative}
.dk-steps::before{content:"";position:absolute;inset-inline-start:21px;top:22px;bottom:22px;width:2px;background:var(--line-2)}
.dk-steps li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:16px;padding:10px 0}
.dk-sn{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 16px var(--f-data);color:#fff;background:#0e1218;border:2px solid rgba(143,184,255,.5);transition:background .4s,border-color .4s}
.dk-steps h3{margin:8px 0 4px!important;font-size:19px}.dk-steps p{margin:0!important}
@supports (animation-timeline:view()){.dk-sn{animation:dksn linear both;animation-timeline:view();animation-range:entry 60% cover 45%}}
@keyframes dksn{from{background:#0e1218;border-color:rgba(143,184,255,.35)}to{background:#3E7BFF;border-color:#3E7BFF;box-shadow:0 0 20px rgba(62,123,255,.45)}}
.dk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;margin:18px 0 22px}
.dk-card{display:grid;gap:6px;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--ink-1)}
.dk-card b{font-size:16px;color:var(--text)}.dk-card>span:last-child{font-size:14px;color:var(--muted)}
.dk-ci{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(62,123,255,.14);color:var(--glow)}
.dk-ci svg{width:20px;height:20px}
.dk-note{margin:16px 0;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);border-inline-start:4px solid var(--glow);background:var(--ink-1);color:#C9D2E6;font-size:15.5px;line-height:1.7}
.dk-note.dk-safe{border-inline-start-color:#2FD27C}
.dk-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font:700 12px var(--f-body);color:var(--glow);background:rgba(62,123,255,.14);border:1px solid rgba(143,184,255,.35);vertical-align:middle;margin-inline-end:6px}
.dk-tw{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:16px}
.dk-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px}
.dk-table th,.dk-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.dk-table thead th{background:var(--ink-2);font-weight:700;color:var(--text);font-size:14px}
.dk-table tbody th{text-align:start;font-weight:600;color:#C9D2E6;position:sticky;inset-inline-start:0;background:var(--ink-1)}
.dk-table td.y svg{width:20px;height:20px;color:var(--glow)}.dk-table td.n{color:var(--dim)}
.dk-table tr:last-child>*{border-bottom:0}
.dk-small{font-size:14px;color:var(--dim)}
.dk-help{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding:20px 22px;border-radius:20px;border:1px solid rgba(143,184,255,.35);background:radial-gradient(80% 120% at 0% 0%,rgba(62,123,255,.14),transparent 60%),var(--ink-1)}
.dk-help div{display:grid;gap:4px}.dk-help b{font-size:18px}.dk-help span{color:var(--muted);font-size:14.5px}
/* analysis package */
.dk-radar{position:relative;width:min(420px,100%);aspect-ratio:1;container-type:inline-size}
.dk-radar>i{position:absolute;inset:0;margin:auto;width:40cqw;height:40cqw;border-radius:50%;border:1.5px solid rgba(143,184,255,.5);animation:sdecho 4.2s cubic-bezier(.2,.7,.2,1) infinite;opacity:0}
.dk-radar>i:nth-of-type(2){animation-delay:2.1s}
.dk-rc{position:absolute;inset:0;margin:auto;width:40cqw;height:40cqw;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(70% 70% at 35% 28%,#2b3a5e,#0a0d13 72%);border:1px solid rgba(143,184,255,.45);box-shadow:0 0 50px rgba(62,123,255,.3)}
.dk-rc b{font:800 13cqw/1 var(--f-display)}.dk-rc small{font-size:3.3cqw;color:var(--muted);max-width:28cqw}
.dk-rp{position:absolute;left:50%;top:50%;--a:calc(var(--k) * 120deg - 90deg);transform:translate(-50%,-50%) rotate(var(--a)) translateX(40cqw) rotate(calc(-1 * var(--a)));display:grid;justify-items:center;gap:6px;padding:12px 14px;border-radius:16px;background:rgba(12,15,21,.9);border:1px solid var(--line-2);animation:sdping 4.2s calc(var(--k) * .5s + .8s) infinite}
.dk-rp b{font-size:clamp(13px,3.6cqw,17px)}
.dk-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.dk-pillar{padding:26px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),var(--ink-1);display:grid;gap:12px;align-content:start}
.dk-pillar h2{font-size:clamp(28px,3vw,40px);margin:0}.dk-pillar p{color:var(--muted);margin:0;line-height:1.7}
.dk-inc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.dk-inc li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px;border-radius:16px;background:var(--ink-1);border:1px solid var(--line)}
.dk-inc li>svg{width:24px;height:24px;color:var(--glow);margin-top:2px}.dk-inc b{display:block}.dk-inc span{color:var(--muted);font-size:14.5px}
.dk-honest{max-width:820px;padding:clamp(24px,4vw,40px);border-radius:24px;border:1px dashed rgba(143,184,255,.5);background:var(--ink-1)}
.dk-honest .lead strong{color:var(--text)}
@media (prefers-reduced-motion:reduce){.dk-bub{animation:none;opacity:1}.dk-radar>i,.dk-rp{animation:none}}

/* ===== LWPRODUCTS_v1 (15 Oct 2026) — Maestro + Sada product pages. Maestro's signature is the kitchen ticket (thermal paper,
   perforated edges, mono totals): it prints in the hero, carries the calculator and the plans. Sada keeps the echo rings and
   gains platform marks. The query each page answers is the H1, in the first viewport. ===== */
.px-ex{position:absolute;top:10px;inset-inline-end:10px;z-index:3;font:600 11px/1 var(--f-body);color:#3b2a10;background:#F2B84B;padding:5px 9px;border-radius:999px}
.mx-ey{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--gold);margin-bottom:14px}.mx-ey svg{width:18px;height:18px}
.sx-ey{color:var(--glow)}
.mx-hero h1,.sd-hero h1{font-family:var(--f-display);line-height:1.18;margin:0;text-wrap:balance;letter-spacing:-.01em}
.mx-hero h1 em,.sd-hero h1 em{font-style:normal;color:var(--gold)}.sd-hero h1 em{color:var(--glow)}
.mx-hero .lead,.sd-hero .lead{margin-top:18px;max-width:58ch}.mx-hero .lead b,.sd-hero .lead b{color:var(--text)}
.mx-hero{position:relative;padding:clamp(104px,13vh,148px) 0 clamp(48px,7vw,96px);overflow:hidden}
.mx-hero::before{content:"";position:absolute;inset:-25% auto auto -15%;width:70vw;height:70vw;max-width:900px;max-height:900px;background:radial-gradient(closest-side,rgba(242,184,75,.13),transparent 70%);pointer-events:none}
.mx-hg{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,72px);align-items:center}
.mx-ht .crumbs{margin-bottom:18px}.mx-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.mx-hero .chips{margin-top:22px}
/* the ticket — shared by hero, calculator, plans */
.tk{position:relative;background:#F7F2E7;color:#1E1A14;border-radius:4px;padding:22px 20px 26px;font-size:14.5px;
  --zz:radial-gradient(circle at 7px 0,transparent 6px,#000 6.5px) -7px 0/14px 100% repeat-x;
  -webkit-mask:linear-gradient(#000,#000) 0 9px/100% calc(100% - 18px) no-repeat,radial-gradient(circle 6px at 50% 0,transparent 98%,#000) 0 0/14px 9px repeat-x,radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 100%/14px 9px repeat-x;
  mask:linear-gradient(#000,#000) 0 9px/100% calc(100% - 18px) no-repeat,radial-gradient(circle 6px at 50% 0,transparent 98%,#000) 0 0/14px 9px repeat-x,radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 100%/14px 9px repeat-x;
  box-shadow:0 30px 70px rgba(0,0,0,.45);background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.018) 0 1px,transparent 1px 3px)}
.tk-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:12px;margin-bottom:10px;border-bottom:2px dashed rgba(30,26,20,.28)}
.tk-h b{font-family:var(--f-display);font-size:17px}.tk-h span{font-size:12.5px;color:#6b5f4c}
.tk-l,.tk-t{display:flex;justify-content:space-between;gap:12px;padding:6px 0}.tk-l span{color:#5a4f3e}.tk-l b{font-weight:700}
.tk-t{margin-top:8px;padding-top:12px;border-top:2px dashed rgba(30,26,20,.28);font-family:var(--f-display);font-size:18px}
.tk-t.neg b{color:#8a3b12}.tk-n{margin:12px 0 0;font-size:13px;color:#6b5f4c;line-height:1.6}
/* hero: chat prints the ticket */
.mx-print{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:18px;align-items:start;padding-top:8px}
.mx-ph{background:#0B141A;border:1px solid var(--line-2);border-radius:26px;padding:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);min-width:0}
.mx-ph-b{display:flex;gap:10px;align-items:center;padding:4px 6px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.mx-ph-b .av,.sxs-wa .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#F2B84B,#E0955A);color:#2a1a05;font:700 15px var(--f-display);flex:none}
.mx-ph-b b{display:block;font-size:14px}.mx-ph-b small{color:var(--wa);font-size:11.5px}
.mx-th{display:grid;gap:8px;padding:12px 4px 4px}
.mx-th .m,.sxs-dm .m{max-width:88%;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.6}
.mx-th .in,.sxs-dm .in{background:#202C33;justify-self:end;border-start-end-radius:3px}
.mx-th .out,.sxs-dm .out{background:#005C4B;justify-self:start;border-start-start-radius:3px}
.mx-slot{position:relative;padding-top:14px}
.mx-slot::before{content:"";position:absolute;top:0;inset-inline:-8px;height:14px;border-radius:7px;background:linear-gradient(#2a3350,#151c33);box-shadow:inset 0 -3px 0 #0a0f1f}
.mx-tk-p{transform-origin:top}
@media (prefers-reduced-motion:no-preference){.mx-tk-p{animation:mxprint 8s 2.5s infinite}}
@keyframes mxin{0%{opacity:0;transform:translateY(8px)}6%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mxprint{0%,62%{clip-path:inset(0 0 0 0);opacity:1;transform:none}70%{opacity:0}71%{clip-path:inset(0 0 100% 0);opacity:1;transform:translateY(-14px)}100%{clip-path:inset(0 0 0 0);transform:none}}
/* journey */
.mxj{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,4vw,48px);align-items:start}
.mxj-tabs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mxj-tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;width:100%;padding:16px 18px;border-radius:var(--r3);border:1px solid var(--line);background:var(--ink-1);position:relative;overflow:hidden}
.mxj-tabs button:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.mxj-tabs .n{grid-row:1/3;font-size:15px;color:var(--dim);padding-top:2px}
.mxj-tabs .tx b{display:block;font:700 17px/1.5 var(--f-display)}
.mxj-tabs .tx span{display:block;font-size:14.5px;color:var(--muted);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .45s var(--sp-settle)}
.mxj-tabs [aria-selected=true]{border-color:rgba(242,184,75,.55);background:linear-gradient(180deg,rgba(242,184,75,.10),var(--ink-1))}
.mxj-tabs [aria-selected=true] .n{color:var(--gold)}.mxj-tabs [aria-selected=true] .tx span{max-height:9em;margin-top:4px}
.mxj-tabs .tx i,.mxf li i,.mx-setup i{font-style:normal;font-size:11.5px;font-weight:700;color:#2a1a05;background:var(--gold);padding:1px 7px;border-radius:999px;margin-inline-start:4px;white-space:nowrap}
.mxj-tabs .bar{position:absolute;inset:auto 0 0 0;height:3px}.mxj-tabs .bar i{display:block;height:100%;width:0;background:var(--gold)}
.mxj.run [aria-selected=true] .bar i{animation:mxbar var(--d,5600ms) linear forwards}
@keyframes mxbar{to{width:100%}}
.mxj-stage{position:relative;min-height:440px;border-radius:var(--r4);border:1px solid var(--line);background:radial-gradient(120% 90% at 30% 0,rgba(242,184,75,.10),transparent 60%),var(--ink-1);padding:clamp(18px,3vw,34px);display:grid;place-items:center}
.mxj-p{display:none;width:min(420px,100%)}.mxj-p.on{display:block;animation:mxin2 .5s var(--sp-settle)}
@keyframes mxin2{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vn{display:flex;align-items:center;gap:8px}.vn b{color:var(--wa)}.wv{display:flex;gap:2px;align-items:center;height:22px}.wv i{width:3px;border-radius:2px;background:#8696a0}.vn small{font-size:11px;color:#8696a0}
.tr{font-style:italic;opacity:.92}
.mx-bt{width:100%;border-collapse:collapse;margin:8px 0}.mx-bt td{padding:3px 0;font-size:13px}.mx-bt td:last-child{text-align:left}.mx-bt .t td{border-top:1px dashed rgba(255,255,255,.3);padding-top:6px;font-weight:700}
.mx-qr{display:flex;gap:8px;margin-top:6px}.mx-qr span{flex:1;text-align:center;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px;font-size:12.5px}.mx-qr span:first-child{background:rgba(37,211,102,.2);border-color:var(--wa)}
.m.up{background:#173a33!important}.m.up small{display:block;color:var(--gold);font-size:11px}
.mx-ks,.mx-cu{background:#0E1426;border:1px solid var(--line-2);border-radius:18px;padding:16px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.mx-ks-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.mx-ks-h b{font-family:var(--f-display)}.live{color:#ff6b6b;font-size:12.5px;font-weight:700}
.mx-tk{border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;margin-top:10px;background:var(--ink-2)}.mx-tk.new{border-color:var(--gold);box-shadow:0 0 0 4px rgba(242,184,75,.12)}
.mx-tk p,.mx-dc p{margin:6px 0 0;font-size:14px}.mx-tk .ad{color:var(--muted);font-size:13px}
.r{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tag{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(242,184,75,.18);color:var(--gold)}.tag.ok{background:rgba(37,211,102,.16);color:#5ee39a}.tag.go{background:rgba(62,123,255,.2);color:var(--glow)}
.bt{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.bt span{font-size:12.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}.bt .on{background:var(--gold);color:#2a1a05;border-color:var(--gold);font-weight:700}
.mx-dr{display:grid;gap:12px}.mx-map{position:relative;height:170px;border-radius:16px;border:1px solid var(--line-2);color:var(--glow);background:linear-gradient(0deg,rgba(150,172,222,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(150,172,222,.06) 1px,transparent 1px) 0 0/24px 24px,#0E1426;overflow:hidden}
.mx-map svg{position:absolute;inset:0;width:100%;height:100%}.mx-map .home{position:absolute;top:8px;left:12px;font-style:normal;font-size:20px}
.mx-map .dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(242,184,75,.25);offset-path:path("M20 150 C 80 140, 90 70, 150 80 S 230 30, 280 22");offset-rotate:0deg;left:0;top:0}
@media (prefers-reduced-motion:no-preference){.mx-map .dot{animation:mxride 6s ease-in-out infinite}}
@keyframes mxride{from{offset-distance:0%}to{offset-distance:100%}}
.mx-dc{background:#0E1426;border:1px solid var(--line-2);border-radius:16px;padding:14px}.mx-trk{margin:0;font-size:13.5px;color:var(--muted)}
.mx-cu table{width:100%;border-collapse:collapse}.mx-cu th,.mx-cu td{text-align:start;padding:8px 6px;border-bottom:1px solid var(--line);font-size:14px}.mx-cu th{color:var(--dim);font-weight:600;font-size:12.5px}
.mx-settle{display:inline-block;margin:12px 0;padding:8px 14px;border-radius:999px;background:var(--gold);color:#2a1a05;font-weight:700;font-size:14px}
.m.sum{max-width:100%;background:#005C4B;padding:10px 12px;border-radius:12px;font-size:13.5px}
/* calculator */
.mxc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,4vw,56px);align-items:center}
.mxc-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}.mxc-in .field:last-of-type{grid-column:1/-1}
.mxc-h{grid-column:1/-1;font-size:13.5px;color:var(--dim);margin:0}
.mxc-r .tk{max-width:420px;margin-inline:auto;transform:rotate(-1.2deg)}
/* features */
.mxf-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mxf{background:var(--ink-0);border:1px solid var(--line);border-radius:var(--r3);padding:22px 22px 18px}
.mxf .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(242,184,75,.12);color:var(--gold);margin-bottom:12px}.mxf .ico svg{width:22px;height:22px}
.mxf h3{font:700 19px/1.4 var(--f-display);margin:0 0 10px}.mxf ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.mxf li{position:relative;padding-inline-start:18px;font-size:15px;color:var(--muted);line-height:1.65}.mxf li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.mx-excl{margin-top:28px;padding:22px;border:1px dashed rgba(242,184,75,.4);border-radius:var(--r3)}.mx-excl h3{margin:0 0 12px;font:700 18px var(--f-display);color:var(--gold)}
.mx-excl .chips{display:flex;flex-wrap:wrap;gap:8px}
/* plans */
.mx-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.mx-plan{display:grid;gap:12px;padding-top:26px}.mx-plan.pop{transform:translateY(-10px);background-color:#FFF9EC}
.mx-plan .badge{justify-self:start;background:#1E1A14;color:#F7F2E7;margin-bottom:-4px}
.mx-pp{display:flex;align-items:baseline;gap:8px}.mx-pp .num{font:700 44px/1 var(--f-display)}.mx-pp small{color:#6b5f4c}
.mx-plan ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}.mx-plan li{font-size:14.5px;padding-inline-start:20px;position:relative}.mx-plan li::before{content:"✓";position:absolute;inset-inline-start:0;color:#2f7a3c;font-weight:700}
.mx-plan .btn-o{border-color:#1E1A14;color:#1E1A14}
.mx-tw{overflow-x:auto;margin-top:34px;border:1px solid var(--line);border-radius:var(--r3)}
.mx-tbl{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}.mx-tbl th,.mx-tbl td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center}
.mx-tbl thead th{background:var(--ink-2);font-family:var(--f-display)}.mx-tbl tbody th{text-align:start;font-weight:500;color:var(--muted)}
.mx-tbl .yes{color:#5ee39a}.mx-tbl .yes svg{width:18px;height:18px}.mx-tbl .no{color:var(--dim)}.mx-tbl .lim td{font-weight:700;color:var(--gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mx-setup{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:s}
.mx-setup li{position:relative;padding:20px 18px;border:1px solid var(--line);border-radius:var(--r3);background:var(--ink-0)}
.mx-setup .n{font-size:13px;color:var(--gold)}.mx-setup h3{font:700 17px/1.45 var(--f-display);margin:6px 0}.mx-setup p{margin:0;font-size:14.5px;color:var(--muted)}
/* platform marks */
.bx{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bc,#333);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);flex:none}
.bx svg{width:52%;height:52%;fill:currentColor}.bx.sm{width:26px;height:26px}
.sd-p.bx,.ke-p.bx{padding:0;border:0;width:clamp(36px,8.6cqw,52px);height:clamp(36px,8.6cqw,52px);font-size:0}
.ke-p.bx{width:clamp(34px,7cqmin,50px);height:clamp(34px,7cqmin,50px)}
.ke-p.bx.on{box-shadow:0 0 0 3px rgba(143,184,255,.85),0 0 26px rgba(62,123,255,.6)}
.sg-echo .bx{padding:0;border:0;width:28px;height:28px}
/* sada — comment → DM → order */
.sxs{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr) minmax(0,.9fr);gap:18px;align-items:start;border:1px solid var(--line);border-radius:var(--r4);padding:clamp(18px,3vw,30px);background:var(--ink-0)}
.sxs-k{display:flex;align-items:center;gap:8px;font:700 15px var(--f-display);color:var(--muted);margin:0 0 12px}
.sxs-post{border:1px solid var(--line-2);border-radius:16px;overflow:hidden;background:var(--ink-1)}
.sxs-post .ph{aspect-ratio:4/3;display:grid;place-content:end start;padding:14px;background:radial-gradient(70% 70% at 70% 30%,#E8B76A,#A8662B 60%,#4a2a10)}
.sxs-post .ph b{font:700 20px var(--f-display);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}.sxs-post .ph small{color:#ffeccc;font-size:12.5px}
.sxs-post .c{padding:10px 14px;font-size:14px;border-top:1px solid var(--line)}.sxs-post .c b{margin-inline-end:6px}.sxs-post .c.out{color:var(--glow);background:rgba(62,123,255,.06)}
.sxs-dm{display:grid;gap:8px;background:#0B141A;border:1px solid var(--line-2);border-radius:18px;padding:14px}
.sxs-dm .ok{box-shadow:0 0 0 2px rgba(37,211,102,.5)}
.sxs-wa{background:#0B141A;border:1px solid var(--line-2);border-radius:18px;padding:14px}
.sxs-wa .h{display:flex;gap:8px;align-items:center;margin-bottom:10px}.sxs-wa .h small{color:var(--wa);font-size:11.5px;margin-inline-start:auto}
.sxs-wa .av{background:linear-gradient(135deg,#3E7BFF,#8DB8FF);color:#fff}
.sxs-wa p{margin:0;background:#005C4B;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.8}.sxs-wa .lnk{display:inline-block;margin-top:8px;font-size:13px;color:var(--glow)}
.sxs-rules{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}.sxs-rules li{font-size:13.5px;color:var(--muted);padding-inline-start:16px;position:relative}.sxs-rules li::before{content:"•";position:absolute;inset-inline-start:0;color:var(--glow)}
.sxs.play [data-s]{opacity:0;transform:translateY(8px);transition:opacity .45s var(--sp-settle),transform .45s var(--sp-settle)}.sxs.play [data-s].in{opacity:1;transform:none}
.sxs-re{position:absolute;bottom:12px;inset-inline-start:16px;background:none;border:1px solid var(--line-2);color:var(--muted);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
/* sada — brand guide */
.sxg{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);gap:clamp(14px,3vw,36px);align-items:center}
.sxg-site{border:1px solid var(--line-2);border-radius:16px;background:var(--ink-1);overflow:hidden}
.sxg-site .bar{display:flex;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}.sxg-site .bar i{width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.sxg-site .url{margin-inline-start:10px;font-size:12.5px;color:var(--dim);background:var(--ink-0);padding:3px 10px;border-radius:999px}
.sxg-site .tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px}.sxg-site .tabs span{font-size:12.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}.sxg-site .tabs .on{background:var(--accent-fill);color:#fff;border-color:transparent}
.sxg-site .lines{display:grid;gap:8px;padding:6px 16px 16px}.sxg-site .lines b{height:12px;width:55%;border-radius:4px;background:var(--ink-3)}.sxg-site .lines i{height:8px;border-radius:4px;background:var(--ink-2)}.sxg-site .lines .s{width:70%}
.cap{font-size:13px;color:var(--dim);margin:0;padding:0 16px 14px}
.sxg-arrow{color:var(--glow)}.sxg-arrow svg{width:34px;height:34px}
.sxg-card{position:relative;border:1px solid rgba(143,184,255,.4);border-radius:18px;background:linear-gradient(180deg,rgba(62,123,255,.10),var(--ink-1));padding:20px 20px 4px}
.sxg-card h3{margin:0 0 10px;font:700 20px var(--f-display)}.sxg-card ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sxg-card li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}.sxg-card li span{color:var(--muted);text-align:end}
.stamp{margin:14px 0 12px;display:inline-block;transform:rotate(-2deg);border:2px solid #ff8a7a;color:#ff8a7a;padding:6px 12px;border-radius:8px;font:700 14px var(--f-display)}
.sxg-card .cap{padding:0 0 14px}
/* sada — guards, platforms, more, plans */
.sx-guards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sx-guards li{border:1px solid var(--line);border-radius:var(--r3);padding:18px;background:var(--ink-0);display:grid;gap:6px}
.sx-guards b{font:700 16.5px/1.5 var(--f-display)}.sx-guards b::before{content:"✕ ";color:#ff8a7a}.sx-guards span{font-size:14.5px;color:var(--muted)}
.sx-plats{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sx-plats li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--ink-0);font-size:14.5px;min-width:0}
.sx-more .card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start}.sx-more .ico{grid-row:1/3}.sx-more h3{margin:0}.sx-more p{margin:0}
.sxp{display:grid;gap:12px;align-content:start;position:relative}.sxp.pop{border-color:var(--glow);background:linear-gradient(180deg,rgba(62,123,255,.14),var(--ink-1) 50%)}
.sxp .badge{position:absolute;top:18px;inset-inline-end:18px}.sxp .who{margin:0;font-size:13.5px;color:var(--dim)}.sxp h3{margin:0;font:700 24px var(--f-display)}
.sxp .price .num{font:700 40px/1 var(--f-display)}.sxp .price small{color:var(--muted)}
.sxq{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--ink-0);border:1px solid var(--line)}
.sxq div{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:13px;color:var(--muted)}.sxq b{color:var(--text)}
.sxq i{grid-column:1/-1;height:6px;border-radius:3px;background:var(--ink-3);position:relative;overflow:hidden}.sxq i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,var(--accent),var(--glow));border-radius:3px}
[dir=rtl] .sxq i::after{inset:0 0 0 auto}
.sxp ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}.sxp li{font-size:14.5px;color:var(--muted);padding-inline-start:20px;position:relative}.sxp li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--glow);font-weight:700}
@media (max-width:1020px){.mxf-g,.sx-guards{grid-template-columns:repeat(2,minmax(0,1fr))}.mx-setup{grid-template-columns:repeat(2,minmax(0,1fr))}.sx-plats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sxs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sxs-col:last-of-type{grid-column:1/-1}}
@media (max-width:860px){.mx-hg,.mxj,.mxc,.sxg{grid-template-columns:minmax(0,1fr)}.mx-print{max-width:520px}.mxj-stage{min-height:0}.mx-plans{grid-template-columns:minmax(0,1fr)}.mx-plan.pop{transform:none}
  .sxg-arrow{transform:rotate(-90deg);justify-self:center}.mx-hero{padding-top:96px}}
@media (max-width:640px){.mxf-g,.sx-guards,.mx-setup,.sxs{grid-template-columns:minmax(0,1fr)}.sx-plats{grid-template-columns:repeat(2,minmax(0,1fr))}.mxc-in{grid-template-columns:minmax(0,1fr)}
  .mx-print{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:10px}.mx-th .m{font-size:12.5px}.tk{padding:18px 14px 22px;font-size:13.5px}}
/* LWNOLETTER_v1 (15 Oct 2026) — Ismail: never a name's first letter as an avatar; an icon or nothing. */
.cd-av b svg{width:22px;height:22px;display:block}
.mx-ph-b .av svg,.sxs-wa .av svg,.phone .av svg,.ke-wa-av svg,.dk-wa-h span svg,.sg-av svg,.ms-bar .av svg{width:58%;height:58%;display:block}
.ke-wa-av,.dk-wa-h span,.sg-av{display:inline-grid;place-items:center}

.mx-hero h1,.sd-hero h1{font-size:clamp(30px,3.5vw,50px)}