/* وصلة — the marketing site. Arabic only, right-to-left by default.
   "Night sky": indigo ground, lavender-white text, one mint accent for the thing to press
   or the state that is live, violet as the quiet second colour. Alexandria carries the
   headlines, Readex Pro the reading, IBM Plex Mono anything a person types or copies.
   Written with logical properties; the light theme swaps tokens only. */
:root{
  --ink:#0F1633;
  --panel:#171F45;
  --panel-2:#121A3D;
  --line:#2B3566;
  --text:#E9E8F5;
  --muted:#B9B7D6;
  --dim:#8A8AB0;
  --mint:#5EEAD4;
  --mint-hi:#8DF3E3;
  --violet:#8B87F0;
  --ok:#5EEAD4;
  --on-mint:#0B1030;
  --display:"Alexandria","Readex Pro",system-ui,sans-serif;
  --sans:"Readex Pro","Alexandria",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --w:1080px;
  --r:14px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --ink:#F4F3FA; --panel:#FFFFFF; --panel-2:#EEEDF8; --line:#DAD9EA;
    --text:#0F1633; --muted:#4B4F73; --dim:#6E7196;
    --mint:#0F9E8C; --mint-hi:#0B8577; --ok:#0F9E8C; --on-mint:#FFFFFF;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.85 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
a{color:var(--mint);text-decoration:none}
a:hover{color:var(--mint-hi);text-decoration:underline}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:6px}
.skip-link{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:100;transform:translateY(-160%);
  background:var(--mint);color:var(--on-mint);font-weight:600;padding:10px 14px;border-radius:999px}
.skip-link:focus{transform:none;color:var(--on-mint);text-decoration:none}

/* Technical strings are Latin artifacts and stay left-to-right inside Arabic copy. */
.ltr,.mono,.addr,.conf pre,.brand-latin{direction:ltr;unicode-bidi:isolate}
.ltr{text-align:right}
.mono{font-family:var(--mono);font-size:.92em;color:var(--text)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ink) 84%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font:800 24px/1 var(--display)}
.brand:hover{text-decoration:none;color:var(--text)}
.brand .mark{width:34px;height:34px;flex:none;border-radius:10px;background:var(--mint);color:var(--on-mint);display:grid;place-items:center}
.brand .mark svg{width:70%;height:70%;display:block}
.nav{display:flex;align-items:center;gap:22px;font-size:14.5px}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--text);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:var(--mint);color:var(--on-mint);
  font:600 15px var(--sans);padding:9px 20px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--mint-hi);color:var(--on-mint);text-decoration:none}
.nav a.btn,.nav a.btn:hover{color:var(--on-mint)}
.btn.lg{font-size:17px;padding:13px 26px}
.btn.alt{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.alt:hover{background:var(--panel);color:var(--text)}
.nav-menu{display:none;margin:0 0 0 auto;padding:0;border:0}
[dir="rtl"] .nav-menu{margin:0 auto 0 0}
.nav-menu>summary{display:none}
@media (max-width:760px){
  .site-head .wrap{position:relative;gap:12px;min-width:0}
  .desktop-nav{display:none}
  .nav-menu{display:block;margin-inline-start:auto}
  .nav-menu>summary{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 14px;border:1px solid var(--line);
    border-radius:999px;color:var(--text);font:600 14px var(--sans);list-style:none;cursor:pointer}
  .nav-menu>summary::-webkit-details-marker{display:none}
  .nav-menu>summary::after{content:"+";font:400 20px/1 var(--mono);color:var(--mint)}
  .nav-menu[open]>summary::after{content:"−"}
  .nav-menu>.nav{display:none}
  .nav-menu[open]>.nav{display:flex;position:absolute;inset-block-start:100%;inset-inline:0;flex-direction:column;align-items:stretch;gap:2px;
    padding:12px 20px 18px;background:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 18px 35px rgba(0,0,0,.3)}
  .nav-menu>.nav a{display:flex;align-items:center;min-height:44px;width:100%;padding:9px 10px}
  .nav-menu>.nav .btn{justify-content:center;margin-top:6px}
}

/* ---------- offer bar ---------- */
.offer-bar{background:var(--panel-2);border-bottom:1px solid var(--line);color:var(--muted);font-size:13.5px}
.offer-bar .wrap{min-height:40px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.offer-bar strong{color:var(--mint);font-weight:600}
@media (max-width:560px){.offer-bar .wrap{gap:8px 14px;padding-block:8px}}

/* ---------- sections and type ---------- */
section{padding:84px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.eyebrow{font:500 13px var(--sans);color:var(--violet);letter-spacing:.02em;margin:0 0 12px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.25}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.35;margin-bottom:14px}
h3{font-size:1.08rem;font-weight:700;margin-bottom:6px}
.lede{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--muted);max-width:52ch;margin:18px 0 0;line-height:1.9}
p{margin:0 0 14px}
.muted{color:var(--muted)}
.narrow{max-width:60ch}

/* ---------- hero ---------- */
.hero{padding:72px 0 76px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 18% 20%,color-mix(in srgb,var(--violet) 18%,transparent),transparent 42%),
             radial-gradient(ellipse at 85% 80%,color-mix(in srgb,var(--mint) 12%,transparent),transparent 40%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero-grid>*{min-width:0}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--mint);font:500 13.5px var(--sans)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px color-mix(in srgb,var(--mint) 18%,transparent)}
.cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.cta-note{font-size:13.5px;color:var(--dim)}
.trust{display:flex;gap:10px 22px;flex-wrap:wrap;margin:28px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet)}

/* The signature: a household joined to a city. Three device chips, the wasla, one city.
   CSS only; the join line is the brand's whole idea, so it is drawn, not decorated. */
.join{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px 24px 22px;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.join-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.join-devices{display:flex;flex-direction:column;gap:8px}
.chip{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.chip.on i{background:var(--mint);box-shadow:0 0 10px var(--mint)}
.join-mark{width:64px;height:64px;border-radius:20px;background:var(--mint);color:var(--on-mint);display:grid;place-items:center;position:relative;z-index:1}
.join-mark svg{width:68%;height:68%;display:block}
.join-line{position:absolute;inset-inline:22%;top:50%;height:2px;background:repeating-linear-gradient(90deg,var(--mint) 0 8px,transparent 8px 16px);opacity:.5;
  animation:flow 1.6s linear infinite}
@keyframes flow{to{background-position:16px 0}}
[dir="rtl"] .join-line{animation-direction:reverse}
.join-city{background:var(--panel-2);border:1px solid var(--line);border-radius:16px;padding:14px 16px;text-align:center}
.join-city small{display:block;color:var(--dim);font-size:12px;margin-bottom:4px}
.join-city strong{display:block;font:800 22px var(--display)}
.join-city span{display:block;color:var(--mint);font-size:13px;margin-top:6px}
.join-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.join-foot b{color:var(--text);font-weight:600}
@media (max-width:520px){.join-row{grid-template-columns:1fr;gap:12px}.join-line{display:none}.join-mark{margin:0 auto}}
@media (prefers-reduced-motion:reduce){.join-line{animation:none}}

/* ---------- grids and cards ---------- */
.grid{display:grid;gap:14px;margin-top:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.grid>*{min-width:0}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.g3,.g2{grid-template-columns:1fr}}
@media (max-width:560px){.g4{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card p:last-child{margin-bottom:0}

.value-strip{padding:0;background:var(--panel-2)}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.value-grid>div{padding:24px 22px;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.value-grid>div:first-child{border-inline-start:1px solid var(--line)}
.value-grid strong{font:800 22px var(--display);color:var(--text)}
.value-grid span{font-size:13px;color:var(--muted)}
@media (max-width:760px){.value-grid{grid-template-columns:repeat(2,1fr)}.value-grid>div{border-bottom:1px solid var(--line)}}
@media (max-width:420px){.value-grid{grid-template-columns:1fr}}

.promise h3{font-size:1.2rem;margin-bottom:8px}
.promise p{margin:0}
.promise .ic{width:38px;height:38px;border-radius:12px;background:var(--panel-2);display:grid;place-items:center;margin-bottom:16px;color:var(--mint)}
.promise .ic svg{width:20px;height:20px}

.audience{display:block;color:var(--text);min-height:230px;position:relative;padding:24px;transition:border-color .2s ease,transform .2s ease}
.audience:hover{color:var(--text);text-decoration:none;border-color:var(--violet);transform:translateY(-3px)}
.audience>span{font-size:13px;color:var(--violet)}
.audience h3{font-size:1.25rem;line-height:1.4;margin:34px 0 10px;max-width:22ch}
.audience b{display:block;margin-top:18px;color:var(--mint);font-size:14px;font-weight:600}

.plan-list{padding:0;margin:20px 0;list-style:none;color:var(--muted);font-size:14.5px}
.plan-list li{position:relative;padding:6px 0;padding-inline-start:24px}
.plan-list li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--ok);font-family:var(--mono)}

/* steps: a real sequence, so the numbers mean something */
.steps{counter-reset:s;list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.steps>*{min-width:0}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.steps li::before{content:counter(s,arabic-indic);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--panel-2);border:1px solid var(--line);font:700 14px var(--display);color:var(--mint);margin-bottom:14px}

.srv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.srv .city{font:800 1.1rem var(--display)}
.srv.first{border-color:var(--mint)}
.addr{font:12.5px var(--mono);color:var(--muted);word-break:break-all;margin:10px 0 0;text-align:right}

/* pricing */
.price{display:flex;align-items:flex-start;gap:8px;margin:0 0 4px;direction:ltr;justify-content:flex-end}
.price .amt{font:800 clamp(2.6rem,6vw,3.6rem)/1 var(--display);color:var(--mint);letter-spacing:-.02em}
.price .per{font-size:14px;color:var(--muted);padding-top:12px;direction:rtl}
.math{margin:20px 0 0;padding:0;list-style:none;font-size:14.5px}
.math li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line)}
.math li:last-child{border-bottom:0}
.math .n{font-family:var(--mono);color:var(--mint);direction:ltr}

/* honesty block */
.hon h3{font:600 13px var(--sans);letter-spacing:.02em;margin-bottom:12px}
.hon ul{margin:0;padding-inline-start:1.1em}
.hon li{margin-bottom:9px}
.hon li:last-child{margin-bottom:0}
.hon .yes h3{color:var(--ok)}
.hon .no h3{color:var(--violet)}

/* faq */
details{border-bottom:1px solid var(--line);padding:16px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 20px var(--mono);color:var(--mint);flex:none;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:12px 0 0;color:var(--muted);max-width:70ch}

/* the config figure, kept because the private key staying on the device is a real promise */
.conf{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0}
.conf-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.conf-name{font:500 12.5px var(--mono);color:var(--muted);direction:ltr}
.conf-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.conf pre{margin:0;padding:18px 16px;font:13.5px/1.85 var(--mono);overflow-x:auto;text-align:left}
.conf .k{color:var(--violet)}.conf .s{color:var(--dim)}.conf .v{color:var(--text)}.conf .hl{color:var(--mint)}.conf .cm{color:var(--dim)}

/* closing */
.close{text-align:center;padding:96px 0}
.close .lede{margin-inline:auto}
.close-panel{background:radial-gradient(ellipse at 50% 120%,color-mix(in srgb,var(--violet) 22%,transparent),transparent 55%)}
.close-panel h2{font-size:clamp(1.9rem,4.2vw,3rem);max-width:22ch;margin-inline:auto}

/* footer */
footer{border-top:1px solid var(--line);padding:34px 0;font-size:13.5px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}
.legal{color:var(--dim)}

/* ---------- documents and feature pages ---------- */
.doc{padding:56px 0 84px}
.doc .wrap{max-width:74ch}
.doc h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:6px}
.doc h2{font-size:1.2rem;margin:38px 0 10px}
.doc p,.doc li{color:var(--muted)}
.doc ul{margin:0 0 14px;padding-inline-start:22px}
.doc li{margin:0 0 8px}
.doc strong{color:var(--text)}
.doc.feature .wrap{max-width:var(--w)}
.doc.feature .grid{margin-top:20px}
.tiles .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.tile-ic{width:24px;height:24px;display:block;margin-bottom:12px;color:var(--mint)}
.tiles h3{margin:0 0 4px;font-size:15.5px}
.tiles p{margin:0}
.art{margin:0}
.art svg{width:100%;height:auto;display:block}