/* ALMOSEF — almosef.com · token layer + components. No framework, no build step. */
:root{
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-alt:#F1F5F9; --border:#E2E8F0;
  --text:#0F172A; --text-muted:#64748B;
  --primary:#DC2626; --primary-strong:#B91C1C; --success:#16A34A; --warning:#D97706; --info:#2563EB;
  --ink:#0B0F14; --ink-surface:#141A21; --ink-alt:#10161D; --ink-border:#26303B; --ink-line:#1F2831;
  --on-ink:#F1F5F9; --on-ink-muted:#94A3B8; --on-ink-soft:#CBD5E1;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --shadow-lg:0 24px 60px rgba(11,15,20,.28);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms; --dur-base:300ms; --dur-slow:600ms; --stagger:80ms;
  --max:1100px; --gutter:24px;
  --font-ar:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif;
  --font-la:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font:var(--font-ar);
}
html[lang="en"]{--font:var(--font-la)}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0F14; --surface:#141A21; --surface-alt:#10161D; --border:#26303B;
    --text:#F1F5F9; --text-muted:#94A3B8; --primary:#EF4444; --primary-strong:#DC2626;
    --success:#22C55E; --warning:#F59E0B; --info:#3B82F6;
    --shadow-sm:0 1px 3px rgba(0,0,0,.5); --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(32px,6vw,52px);font-weight:700}
h2{font-size:clamp(24px,3.5vw,32px);font-weight:700}
h3{font-size:17px;font-weight:700}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}
.label{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.muted{color:var(--text-muted)}
.skip{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:200;background:var(--primary);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-md) 0}
.skip:focus{inset-inline-start:0;color:#fff}
section{padding-block:var(--sp-8)}
.band{background:var(--surface-alt);border-block:1px solid var(--border)}
.ink{background:var(--ink);color:var(--on-ink)}
.ink h2,.ink h1{color:var(--on-ink)}
.ink .muted{color:var(--on-ink-muted)}

/* ---------- header ---------- */
.hdr{position:sticky;inset-block-start:0;z-index:100;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(12px);border-block-end:1px solid var(--border);transition:box-shadow var(--dur-base) var(--ease-out)}
.hdr.is-stuck{box-shadow:var(--shadow-sm)}
.hdr-in{max-width:var(--max);margin-inline:auto;padding:12px var(--gutter);display:flex;align-items:center;gap:var(--sp-5)}
.mark{display:flex;align-items:center;gap:10px;flex:none}
.mark:hover{color:var(--text)}
.mark-dot{position:relative;width:11px;height:11px;border-radius:var(--r-pill);background:var(--primary);flex:none}
.mark-dot::after{content:"";position:absolute;inset:-6px;border-radius:var(--r-pill);border:2px solid var(--primary);animation:ping 2.4s var(--ease-out) infinite}
.mark-word{font-family:var(--font-la);font-weight:600;font-size:17px;letter-spacing:.16em}
.mark-sub{font-family:var(--font-ar);font-size:13px;color:var(--text-muted);padding-inline-start:8px;border-inline-start:1px solid var(--border)}
.nav{display:flex;gap:20px;font-size:14.5px;flex:1 1 auto;color:var(--text)}
.nav a{color:var(--text-muted)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding-inline:20px;border-radius:var(--r-pill);font-family:inherit;font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn:hover{transform:scale(1.02)}
.btn:active{transform:scale(.98)}
.btn-call{position:relative;background:var(--primary);color:#fff;flex:none}
.btn-call:hover{background:var(--primary-strong);color:#fff}
.btn-call::after{content:"";position:absolute;inset:0;border-radius:var(--r-pill);border:2px solid var(--primary);animation:ring 2s var(--ease-out) infinite;pointer-events:none}
.btn-ghost{border-color:var(--border);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--text);color:var(--text)}
.ink .btn-ghost{border-color:var(--ink-border);color:var(--on-ink)}
.ink .btn-ghost:hover{border-color:var(--on-ink-muted);color:var(--on-ink)}
.btn-light{background:#fff;color:var(--primary)}
.btn-light:hover{background:#F1F5F9;color:var(--primary)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--primary);color:#fff}
.btn-lg{min-height:52px;padding-inline:26px;font-size:16px}
.lang{min-height:38px;padding-inline:14px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-pill);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--text-muted);cursor:pointer;flex:none;transition:color var(--dur-fast),border-color var(--dur-fast)}
.lang:hover{color:var(--text);border-color:var(--text)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);cursor:pointer;flex:none;padding:0;position:relative}
.burger span{position:absolute;inset-inline:12px;height:1.6px;background:var(--text);transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast)}
.burger span:nth-child(1){inset-block-start:16px}
.burger span:nth-child(2){inset-block-start:21px}
.burger span:nth-child(3){inset-block-start:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink);padding-block:var(--sp-8)}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(#1B2530 1px,transparent 1px),linear-gradient(90deg,#1B2530 1px,transparent 1px);background-size:64px 64px;opacity:.5;pointer-events:none}
.hero-glow{position:absolute;inset-block-start:-140px;inset-inline-end:-120px;width:520px;height:520px;border-radius:var(--r-pill);background:radial-gradient(circle,rgba(220,38,38,.28),transparent 62%);pointer-events:none}
.hero-in{position:relative;display:flex;flex-wrap:wrap;gap:var(--sp-7);align-items:center}
.hero-copy{flex:1 1 420px;min-width:280px}
.hero .eyebrow{color:#F87171}
.hero h1{margin-block:var(--sp-5) 0}
.hero-sub{margin-block-start:var(--sp-5);max-width:52ch;font-size:17.5px;color:var(--on-ink-muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:var(--sp-6)}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:var(--sp-6);list-style:none;padding:0}
.trust li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--ink-border);border-radius:var(--r-pill);font-size:13.5px;color:var(--on-ink-soft)}
.dot{width:7px;height:7px;border-radius:var(--r-pill);flex:none}

/* ---------- device mock ---------- */
.mock-col{flex:0 1 340px;min-width:260px;display:flex;justify-content:center}
.mock{position:relative;width:300px;max-width:100%;border-radius:26px;border:1px solid var(--ink-border);background:var(--ink-surface);box-shadow:var(--shadow-lg);overflow:hidden;animation:float 4s var(--ease-in-out) infinite}
.mock-bar{padding:14px 18px;border-block-end:1px solid var(--ink-line);display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--on-ink-muted)}
.mock-map{position:relative;height:230px;background:var(--ink-alt)}
.mock-map>svg.mock-map-fallback{display:block;width:100%;height:100%}
.mock-map.is-live>.mock-map-fallback{display:none}
.mock-map .leaflet-container{width:100%;height:100%;background:var(--ink-alt);font-family:var(--font)}
.mock-map .leaflet-control-attribution{font-size:8.5px;line-height:1.4;background:rgba(11,15,20,.72);color:var(--on-ink-muted);padding:1px 5px;backdrop-filter:blur(2px)}
.mock-map .leaflet-control-attribution a{color:var(--on-ink-soft)}
.mock-map .leaflet-tile-pane{filter:saturate(.75) contrast(.95) brightness(.94)}
.mock-map .leaflet-overlay-pane path.route{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1400ms var(--ease-out)}
.mock-map.is-drawn .leaflet-overlay-pane path.route{stroke-dashoffset:0}
.unit-pin{width:18px;height:18px;border-radius:var(--r-pill);background:var(--primary);border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.user-pin{position:relative;width:14px;height:14px;border-radius:var(--r-pill);background:var(--info);border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.user-pin::after{content:"";position:absolute;inset:-11px;border-radius:var(--r-pill);border:2px solid var(--info);animation:ping 2s var(--ease-out) infinite}
.route{stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 900ms var(--ease-out)}
.is-drawn .route{stroke-dashoffset:0}
.pin{position:absolute;inset-inline-start:30px;inset-block-end:26px;width:16px;height:16px;border-radius:var(--r-pill);background:var(--info);box-shadow:0 0 0 4px rgba(59,130,246,.22)}
.pin-ping{position:absolute;inset-inline-start:22px;inset-block-end:18px;width:32px;height:32px;border-radius:var(--r-pill);border:2px solid var(--info);animation:ping 2s var(--ease-out) infinite;pointer-events:none}
.mock-body{padding:18px}
.mock-body p{font-size:14px;font-weight:600}
.mock-body .muted{font-size:12.5px;color:var(--on-ink-muted);margin-block-start:6px;font-weight:400}
.bar{margin-block-start:14px;height:5px;border-radius:var(--r-pill);background:var(--ink-line);overflow:hidden}
.bar i{display:block;width:62%;height:100%;background:var(--primary)}
.mock-sm{width:230px;border-radius:24px;border:1px solid var(--ink-border);background:var(--ink-surface);padding:20px;display:flex;flex-direction:column;gap:12px;animation:float 4s var(--ease-in-out) infinite}
.mock-sm .row{height:44px;border-radius:var(--r-md);background:var(--ink-alt);border:1px solid var(--ink-line)}
.mock-sm .row-primary{height:56px;border-radius:var(--r-md);background:var(--primary);color:#fff;display:grid;place-items:center;font-size:14.5px;font-weight:600}
.mock-sm .ver{margin-block-start:auto;font-family:var(--font-mono);font-size:10px;color:var(--on-ink-muted)}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-block-start:var(--sp-7)}
.card{padding:26px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.card:hover{transform:translateY(-4px);border-color:var(--primary)}
.card h3{margin-block-start:18px}
.card p{margin-block-start:8px;font-size:14.5px;color:var(--text-muted)}
.tile{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--surface-alt);color:var(--primary)}
.steps{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-block-start:var(--sp-7)}
.step-head{display:flex;align-items:center;gap:14px}
.step-n{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:16px;flex:none;transform:scale(.8);transition:transform var(--dur-base) var(--ease-out)}
.is-in .step-n{transform:scale(1)}
.step-line{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--border) 0 6px,transparent 6px 12px)}
.step h3{margin-block-start:20px;font-size:17.5px}
.step p{margin-block-start:8px;font-size:15px;color:var(--text-muted);max-width:34ch}
.split{display:flex;flex-wrap:wrap;gap:var(--sp-7)}
.split>*{flex:1 1 340px;min-width:280px}
.facts{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-block-start:var(--sp-6)}
.fact b{display:block;font-family:var(--font-mono);font-size:34px;font-weight:400;color:var(--text)}
.fact b.tbd{color:var(--text-muted)}
.fact span{font-size:13.5px;color:var(--text-muted)}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;gap:16px;padding-block:20px;border-block-end:1px solid var(--border)}
.rows .n{flex:none;margin-block-start:3px;color:var(--primary);font-family:var(--font-mono);font-size:12px}
.rows p:first-of-type{font-size:16px;font-weight:600}
.rows p+p{margin-block-start:5px;font-size:14.5px;color:var(--text-muted)}
.bullets{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.bullets li{display:flex;gap:12px;align-items:baseline;font-size:15.5px}
.bullets .dot{margin-block-start:8px;width:5px;height:5px;background:var(--primary)}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:var(--sp-5)}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding-inline:20px;border:1px solid var(--ink-border);border-radius:var(--r-md);color:var(--on-ink-muted);font-size:14px;cursor:not-allowed}
.badge em{font-family:var(--font-mono);font-style:normal;font-size:10px;letter-spacing:.14em;padding:3px 7px;border-radius:var(--r-pill);background:var(--ink-line);color:var(--on-ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:var(--sp-5)}
.chip{padding:9px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);font-size:15px}
.reqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.reqs li{display:flex;gap:12px;font-size:15px}
.reqs li::before{content:"—";color:var(--primary);flex:none}
.panel{padding:28px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{border-block-end:1px solid var(--border)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;cursor:pointer;font-size:16.5px;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-family:var(--font-mono);font-style:normal;color:var(--primary);font-size:18px;transition:transform var(--dur-base) var(--ease-out)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq .answer{display:grid;grid-template-rows:1fr;padding-block-end:22px;font-size:15.5px;color:var(--text-muted)}

/* ---------- CTA band, contact, footer ---------- */
.cta-band{background:var(--primary);color:#fff;text-align:center;padding-block:var(--sp-8)}
.cta-band h2{color:#fff}
.cta-band .btn{margin-block-start:var(--sp-5);font-family:var(--font-mono);font-size:17px}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-6)}
.contact a,.contact p.v{font-size:17px;font-weight:600;margin-block-start:8px;display:block}
.ftr{background:var(--ink);color:var(--on-ink-muted);padding-block:var(--sp-7) var(--sp-6)}
.ftr-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-6)}
.ftr .label{color:var(--on-ink-muted)}
.ftr .mark-word{color:var(--on-ink);font-size:15px}
.ftr-links{display:flex;flex-direction:column;gap:9px;font-size:14.5px;margin-block-start:12px}
.ftr-links a{color:var(--on-ink-muted)}
.ftr-links a:hover{color:#fff}
.ftr p{font-size:14px}
.legal{max-width:var(--max);margin:var(--sp-6) auto 0;padding-block-start:22px;border-block-start:1px solid var(--ink-line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.legal p{font-size:13px;color:var(--on-ink-muted);max-width:82ch}
.legal .c{font-family:var(--font-mono);font-size:12px;color:var(--on-ink-muted)}

/* ---------- documents (privacy / terms / support) ---------- */
.doc{max-width:780px;margin-inline:auto;padding-block:var(--sp-8)}
.doc h1{font-size:clamp(28px,4.4vw,40px)}
.doc .meta{margin-block-start:12px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);letter-spacing:.06em}
.doc h2{font-size:clamp(20px,2.6vw,24px);margin-block-start:var(--sp-7)}
.doc h3{margin-block-start:var(--sp-5)}
.doc p,.doc li{margin-block-start:var(--sp-3);color:var(--text)}
.doc ul,.doc ol{padding-inline-start:22px;margin:0}
.doc a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.notice{margin-block-start:var(--sp-5);padding:20px 22px;border:1px solid var(--primary);border-radius:var(--r-lg);background:color-mix(in srgb,var(--primary) 7%,var(--surface))}
.notice strong{display:block;font-size:15px;margin-block-end:6px;color:var(--primary)}
.notice p{margin-block-start:0;font-size:15px}
.toc{margin-block-start:var(--sp-5);padding:20px 22px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.toc ol{margin-block-start:10px;font-size:15px;columns:2;column-gap:28px}
.toc a{color:var(--text);text-decoration:none}
.toc a:hover{color:var(--primary)}
@media (max-width:640px){.toc ol{columns:1}}

/* ---------- motion ---------- */
@keyframes ring{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.7);opacity:0}}
@keyframes ping{0%{transform:scale(.4);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
.reveal.js-hide{opacity:0;transform:translateY(24px)}
.reveal{transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{position:fixed;inset-block-start:64px;inset-inline:0;flex-direction:column;gap:0;background:var(--surface);border-block-end:1px solid var(--border);box-shadow:var(--shadow-sm);padding:var(--sp-2) var(--gutter) var(--sp-4);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base)}
  .nav a{padding-block:14px;border-block-end:1px solid var(--border);font-size:16px}
  .nav.is-open{transform:none;opacity:1;visibility:visible}
  .burger{display:block;order:3}
  .lang{order:2}
  .btn-call{order:4}
  .mark-sub{display:none}
  section,.hero{padding-block:var(--sp-7)}
}
@media (max-width:520px){
  .hdr-in{gap:10px;padding-inline:16px}
  .mark-word{font-size:15px;letter-spacing:.12em}
  :root{--gutter:18px}
  .btn-call{padding-inline:16px}
  .cta-row .btn{width:100%}
  .facts{gap:var(--sp-5)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal.js-hide{opacity:1;transform:none}
}
@media print{.hdr,.ftr,.cta-band,.mock,.mock-sm{display:none}body{background:#fff;color:#000}}