/* DriverWing — الموقع التعريفي. تصميم هادي بمساحات واسعة وخطوط كبيرة، وضع فاتح/داكن، عربي/إنجليزي (RTL/LTR). */
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-500.woff) format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-600.woff) format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url(fonts/plex-arabic-700.woff) format('woff');font-weight:700;font-display:swap}

:root{
  --bg:#f5f6fa;--bg-2:#ffffff;--soft:#eef1f7;--ink:#0b1220;--ink-2:#3b4660;--muted:#6b768d;--line:#e3e7ef;
  --accent:#1d5cff;--accent-2:#6d8dff;--accent-ink:#ffffff;--ok:#12a36f;
  --shadow:0 20px 60px #0b122014,0 2px 8px #0b12200f;--radius:28px;--radius-sm:16px;
  --font-ar:'Plex Arabic',-apple-system,'Segoe UI',Tahoma,sans-serif;--font-en:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
  --dark-bg:#06080f;--dark-ink:#f4f7ff;
  color-scheme:light;
}
html[data-theme=dark]{--bg:#06080f;--bg-2:#0e1220;--soft:#121727;--ink:#f4f7ff;--ink-2:#c6cee0;--muted:#8d98b3;--line:#1e2538;--shadow:0 24px 70px #00000066,0 2px 8px #00000055;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ar);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang=en] body{font-family:var(--font-en);letter-spacing:-.005em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.wrap.narrow{width:min(820px,calc(100% - 40px))}
.center{text-align:center}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--accent);color:#fff;padding:8px 14px;border-radius:10px;z-index:99}.skip:focus{inset-inline-start:8px}

/* ---- Typography ---- */
.eyebrow{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.display{margin:0;font-size:clamp(44px,7.2vw,92px);line-height:1.02;font-weight:700;letter-spacing:-.02em;background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 60%,var(--accent)));-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang=ar] .display{line-height:1.22;letter-spacing:0}
.display-sm{margin:0;font-size:clamp(32px,5vw,56px);line-height:1.15;font-weight:700;letter-spacing:-.015em}
html[lang=ar] .display-sm{line-height:1.35;letter-spacing:0}
.title{margin:0;font-size:clamp(30px,4.4vw,52px);line-height:1.12;font-weight:700;letter-spacing:-.015em;max-width:18ch}
html[lang=ar] .title{line-height:1.35;letter-spacing:0}
.center .title{margin-inline:auto}
.lead{margin:22px 0 0;font-size:clamp(18px,2vw,22px);color:var(--ink-2);max-width:60ch}
.sub{margin:16px 0 0;font-size:18px;color:var(--ink-2);max-width:62ch}
.center .sub{margin-inline:auto}
.note{margin:36px 0 0;color:var(--muted);font-size:15px}
.tiny{margin:22px 0 0;color:var(--muted);font-size:14px}.tiny a{color:var(--accent);font-weight:700}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:16px;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px #1d5cff44}
.btn-primary:hover{background:#1748d6;box-shadow:0 16px 40px #1d5cff55}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--soft)}
.btn-sm{padding:10px 18px;font-size:14px}.btn-lg{padding:18px 34px;font-size:18px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.center .cta-row{justify-content:center}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.01em}
.brand img{border-radius:9px}
.links{display:flex;gap:26px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.links a{transition:color .2s}.links a:hover{color:var(--ink)}
.nav-tools{display:flex;align-items:center;gap:10px}
.icon-btn,.lang-btn{height:36px;min-width:36px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s}
.icon-btn:hover,.lang-btn:hover{background:var(--soft)}
.icon-btn .moon{display:none}html[data-theme=dark] .icon-btn .sun{display:none}html[data-theme=dark] .icon-btn .moon{display:inline}
.burger{display:none;width:40px;height:36px;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 8px}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.burger[aria-expanded=true] span:nth-child(2){opacity:0}.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;padding:8px 20px 18px;border-top:1px solid var(--line);background:var(--bg)}
.mobile-menu a{padding:12px 0;font-weight:700;border-bottom:1px solid var(--line)}
.mobile-menu.open{display:flex}
@media(max-width:900px){.links{display:none}.nav-tools .btn{display:none}.burger{display:flex}}

/* ---- Hero ---- */
.hero{position:relative;padding:96px 0 40px;overflow:hidden}
.hero-inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero .lead{text-align:center}
.glow{position:absolute;border-radius:50%;opacity:.7;pointer-events:none;will-change:transform}
.glow-a{width:900px;height:900px;background:radial-gradient(circle,#6d8dff66 0%,#6d8dff22 30%,transparent 62%);top:-260px;inset-inline-start:-160px}
.glow-b{width:800px;height:800px;background:radial-gradient(circle,#c084fc55 0%,#c084fc1a 30%,transparent 62%);top:120px;inset-inline-end:-200px;opacity:.35}
html[data-theme=dark] .glow{opacity:.45}
.hero-shot{position:relative;margin-top:64px;width:min(1080px,100%)}
.browser{border-radius:var(--radius);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow)}
.browser img{aspect-ratio:1600/1000;width:100%}
.browser-bar{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;background:var(--soft);border-bottom:1px solid var(--line);direction:ltr}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.browser-bar i:nth-child(2){background:#febc2e}.browser-bar i:nth-child(3){background:#28c840}
.browser-bar span{margin-left:auto;margin-right:auto;font-size:12.5px;color:var(--muted);font-family:var(--font-en);background:var(--bg-2);padding:4px 14px;border-radius:8px;border:1px solid var(--line)}
.browser.wide{margin-top:48px}
.float-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:16px;background:color-mix(in srgb,var(--bg-2) 82%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow);font-size:13.5px;font-weight:700;animation:float 6s ease-in-out infinite}
.float-chip b{display:grid;place-items:center;min-width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;font-size:15px;font-family:var(--font-en)}
.chip-a{top:14%;inset-inline-start:-14px}.chip-b{top:48%;inset-inline-end:-18px;animation-delay:-2s}.chip-c{bottom:10%;inset-inline-start:6%;animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:800px){.float-chip{display:none}.hero{padding-top:56px}}

/* ---- Stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:70px 0 20px}
.stats div{text-align:center;padding:18px 10px;border-radius:var(--radius-sm)}
.stats b{display:block;font-size:clamp(34px,4.5vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1;font-family:var(--font-en);color:var(--ink)}
.stats b small{font-size:.45em;margin-inline-start:2px;font-family:var(--font-ar)}
.stats span{display:block;margin-top:8px;color:var(--muted);font-size:14px;font-weight:600}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr;padding-top:40px}}

/* ---- Sections ---- */
.section{padding:110px 0;content-visibility:auto;contain-intrinsic-size:auto 900px}
.section.soft{background:var(--soft)}
.dark-section{background:var(--dark-bg);color:var(--dark-ink);--ink:#f4f7ff;--ink-2:#c6cee0;--muted:#8d98b3;--line:#1e2538;--bg-2:#0e1220;--soft:#121727}
@media(max-width:800px){.section{padding:72px 0}}

/* ---- Pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.pillar{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .3s}
.pillar:hover{transform:translateY(-6px)}
.pillar-media{height:240px;border-radius:20px;overflow:hidden;background:var(--soft);display:grid;place-items:center;position:relative}
.pillar-media img{width:100%;height:100%;object-fit:cover;object-position:top;background:var(--soft)}
.phone-media{background:linear-gradient(160deg,#0b1020,#1d2a55)}
.phone-media img{width:auto;height:118%;margin-top:40px;border-radius:26px;box-shadow:0 20px 40px #0008}
.map-media{background:linear-gradient(160deg,#0b1020,#132043)}
.mini-map{width:100%;height:100%}.mini-map .grid path{stroke:#ffffff14;stroke-width:1}.mini-map .route{fill:none;stroke:url(#mg);stroke-width:6;stroke-linecap:round;stroke-dasharray:12 10;animation:dash 3s linear infinite}.mini-map .dot{fill:#fff;stroke:#2563eb;stroke-width:4}
@keyframes dash{to{stroke-dashoffset:-44}}
.pillar h3{margin:22px 0 8px;font-size:22px;font-weight:700}
.pillar p{margin:0;color:var(--ink-2);font-size:15.5px}
@media(max-width:900px){.pillars{grid-template-columns:1fr}}

/* ---- Split ---- */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
@media(max-width:960px){.split{grid-template-columns:1fr;gap:40px}}
.feature-list{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:18px}
.feature-list li{display:grid;gap:3px;padding-inline-start:18px;border-inline-start:3px solid var(--accent)}
.feature-list b{font-size:17px}.feature-list span{color:var(--ink-2);font-size:15px}
.check-list{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:12px}
.check-list li{padding-inline-start:34px;position:relative;font-weight:600}
.check-list li::before{content:'✓';position:absolute;inset-inline-start:0;top:0;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);display:grid;place-items:center;font-size:14px;font-weight:900}

/* ---- Map mock ---- */
.map-mock{position:relative;border-radius:var(--radius);overflow:hidden;background:#0e1424;border:1px solid #1e2538;box-shadow:0 30px 80px #0009;aspect-ratio:520/420}
.map-mock svg{width:100%;height:100%;display:block}
.map-mock .streets path{stroke:#1c2540;stroke-width:14;stroke-linecap:round}
.map-mock .blocks rect{fill:#131a2e}
.map-mock .fence{fill:#2563eb1c;stroke:#3b82f6;stroke-width:2;stroke-dasharray:6 6}
.map-mock .branch circle{fill:#2563eb}.map-mock .branch rect{fill:#fff}
.map-mock .trail-casing{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.map-mock .trail{fill:none;stroke:#2563eb;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.map-mock .gap{fill:none;stroke:#94a3b8;stroke-width:4;stroke-dasharray:3 9;stroke-linecap:round}
.map-mock .rider circle{fill:#2563eb;stroke:#fff;stroke-width:3}.map-mock .rider text{font-size:15px}
.map-mock .pin path{fill:#e11d48}.map-mock .pin circle{fill:#fff}
.map-card{position:absolute;inset-inline-end:18px;top:18px;display:grid;gap:2px;padding:12px 16px;border-radius:16px;background:#0e1220e6;backdrop-filter:blur(12px);border:1px solid #1e2538;color:#f4f7ff;min-width:190px}
.map-card b{font-size:15px}.map-card .ok{color:#34d399;font-size:13px;font-weight:700}.map-card small{color:#8d98b3;font-size:11.5px}

/* ---- Phones ---- */
.phones{display:flex;justify-content:center;align-items:flex-end;gap:26px;margin:56px 0 46px;perspective:1400px}
.phone{margin:0;width:240px;border-radius:38px;padding:10px;background:#0b0d13;border:1px solid #2a3145;box-shadow:0 30px 70px #0007,inset 0 0 0 2px #1a1f2e;transition:transform .5s}
.phone img{border-radius:30px;width:100%;height:auto;aspect-ratio:640/1358;background:#0b0d13}
.phone figcaption{text-align:center;color:var(--muted);font-size:13.5px;font-weight:700;padding:12px 0 4px}
.phone.big{width:290px}
.phone.tilt-l{transform:rotateY(18deg) translateY(20px)}.phone.tilt-r{transform:rotateY(-18deg) translateY(20px)}
.phones:hover .phone{transform:none}
@media(max-width:800px){.phones{gap:12px}.phone{width:31%;padding:5px;border-radius:22px}.phone img{border-radius:18px}.phone.big{width:36%}.phone.tilt-l,.phone.tilt-r{transform:none}}

/* ---- Grids ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.mini{background:var(--bg-2);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.mini b{display:block;font-size:18px;margin-bottom:6px}.mini p{margin:0;color:var(--ink-2);font-size:15px}
.sec-grid{margin-top:52px}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}

/* ---- Steps ---- */
.steps{list-style:none;padding:0;margin:52px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.steps li{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:22px;padding:24px 20px;box-shadow:var(--shadow);display:grid;gap:6px;align-content:start}
.steps i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent);color:#fff;font-style:normal;font-weight:800;font-family:var(--font-en);margin-bottom:8px}
.steps b{font-size:17px}.steps span{color:var(--ink-2);font-size:14.5px}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---- Roles ---- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.role{background:var(--bg-2);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow);transition:transform .3s}
.role:hover{transform:translateY(-4px)}
.role span{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--soft);font-size:26px;margin-bottom:14px}
.role b{display:block;font-size:18px;margin-bottom:6px}.role p{margin:0;color:var(--ink-2);font-size:15px}
@media(max-width:900px){.roles{grid-template-columns:1fr 1fr}}@media(max-width:560px){.roles{grid-template-columns:1fr}}

/* ---- Modules ---- */
.modules{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:44px}
.module{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;background:var(--bg-2);border:1px solid var(--line);font-size:14.5px;font-weight:700}
.module span{font-size:20px}
@media(max-width:1000px){.modules{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){.modules{grid-template-columns:1fr 1fr}}

/* ---- FAQ ---- */
.faq{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;font-size:18px;font-weight:700;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:26px;color:var(--accent);transition:transform .25s;flex:none}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 20px;color:var(--ink-2)}

/* ---- Contact ---- */
.contact{background:radial-gradient(1200px 500px at 50% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--line);padding:36px 0;color:var(--muted);font-size:14px}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.footer-links{display:flex;flex-wrap:wrap;gap:18px;font-weight:600}
.footer-links a:hover{color:var(--ink)}
.copy{margin:0}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.float-chip,.mini-map .route{animation:none}}

/* ---- Hero animated scene (بديل الصورة): خريطة مبسطة بثلاثة مناديب يتحركون + بطاقات حية ---- */
.hero-scene{position:relative;margin-top:64px;width:min(1080px,100%)}
.scene-card{position:relative;border-radius:var(--radius);overflow:hidden;background:#0a1020;border:1px solid #1e2740;box-shadow:0 40px 100px #0b122033,0 2px 8px #0b12201a;aspect-ratio:1000/560}
html[data-theme=dark] .scene-card{box-shadow:0 40px 100px #00000088}
.scene{width:100%;height:100%;display:block}
.scene .streets path{stroke:#182238;stroke-width:16;stroke-linecap:round}
.scene .blocks rect{fill:#111a30}
.scene .fence{fill:#2563eb14;stroke:#3b82f6;stroke-width:2;stroke-dasharray:8 8}
.scene .fence-pulse{transform-origin:470px 290px;animation:pulse 3s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.scene .branch circle{fill:#2563eb}.scene .branch rect{fill:#fff}
.scene .tr{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.85;stroke-dasharray:14 12;animation:dash 2.4s linear infinite}
.scene .tr1{stroke:url(#sg)}.scene .tr2{stroke:url(#sg2)}.scene .tr3{stroke:url(#sg3)}
.scene .rider circle{stroke:#fff;stroke-width:3;paint-order:stroke}.scene .r1 circle{fill:#2563eb}.scene .r2 circle{fill:#7c3aed}.scene .r3 circle{fill:#059669}
.scene .rider text{font-size:18px}
.scene .pin path{fill:#e11d48}.scene .pin circle{fill:#fff}
.scene-card-ui{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:#0e1424f2;border:1px solid #243052;color:#f4f7ff;box-shadow:0 14px 34px #0008;animation:cardIn 8s ease-in-out infinite}
.scene-card-ui i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#1a2340;font-style:normal;font-size:19px;flex:none}
.scene-card-ui i.live{background:#34d399;box-shadow:0 0 0 0 #34d39966;animation:live 1.6s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 #34d39977}100%{box-shadow:0 0 0 14px #34d39900}}
.scene-card-ui b{display:block;font-size:14px;line-height:1.3}.scene-card-ui span{display:block;font-size:12px;color:#9aa6c2;margin-top:2px}
.scene-card-ui.c1{top:6%;inset-inline-start:4%}.scene-card-ui.c2{bottom:9%;inset-inline-end:4%;animation-delay:-3s}.scene-card-ui.c3{top:8%;inset-inline-end:4%;animation-delay:-5.5s}
@keyframes cardIn{0%,8%{opacity:0;transform:translateY(10px)}14%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-8px)}}
.scene-stats{position:absolute;bottom:7%;inset-inline-start:4%;display:flex;gap:10px}
.scene-stats div{display:grid;justify-items:center;gap:1px;min-width:92px;padding:10px 12px;border-radius:14px;background:#0e1424f2;border:1px solid #243052;color:#f4f7ff}
.scene-stats b{font-size:22px;font-family:var(--font-en);line-height:1}.scene-stats span{font-size:11px;color:#9aa6c2}
@media(max-width:800px){.scene-card-ui,.scene-stats{display:none}.hero-scene{margin-top:40px}}
@media(prefers-reduced-motion:reduce){.scene .tr,.scene .fence-pulse,.scene-card-ui,.scene-card-ui i.live{animation:none}}
.footer-mail{font-weight:700;color:var(--ink)}

/* ===== شاشات التطبيق المبنية بـ HTML (تتبدل لغتها مع الموقع وتتحرك) ===== */
.ph{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 10px 0;border-radius:30px;background:linear-gradient(180deg,#0f1424,#0a0e1a);color:#f4f7ff;font-family:var(--font-ar);aspect-ratio:640/1280;overflow:hidden;text-align:start;font-size:11px;line-height:1.4}
html[lang=en] .ph{font-family:var(--font-en)}
.ph-top{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 2px}
.ph-title{font-weight:700;font-size:12px}.ph-brand{font-weight:800;font-size:13px;font-family:var(--font-en)}
.ph-ico{font-style:normal;color:#8d98b3}
.ph-dots{display:flex;gap:5px}.ph-dots i{width:22px;height:22px;border-radius:50%;background:#1a2340}
.ph-card{border-radius:14px;padding:10px 12px;display:grid;gap:3px}
.ph-card.blue{background:linear-gradient(135deg,#1d4ed8,#4f7dff);box-shadow:0 8px 20px #1d5cff44}
.ph-card.dark{background:#141b2e;border:1px solid #1f2a45}
.ph-card b{font-size:12.5px;font-weight:800}.ph-card small{color:#c7d2fe;font-size:10px}.ph-card.dark small{color:#8d98b3}.ph-card em{font-style:normal;font-size:10px;color:#dbe4ff}
.ph-card.hero-card{grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.ph-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#ffffff26;font-size:18px}
.ph-pill{align-self:start;font-size:9px;font-weight:800;padding:3px 8px;border-radius:999px;background:#34d399;color:#04301f;white-space:nowrap}
.ph-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gold{color:#fbbf24;font-weight:800}
.ph-stars{display:flex;gap:3px;margin:2px 0}.ph-stars i{width:14px;height:14px;background:#fbbf24;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:star .9s ease-out both}
.ph-stars i:nth-child(2){animation-delay:.1s}.ph-stars i:nth-child(3){animation-delay:.2s}.ph-stars i:nth-child(4){animation-delay:.3s}.ph-stars i:nth-child(5){animation-delay:.4s}
.ph-stars i.half{background:linear-gradient(90deg,#fbbf24 50%,#3b4660 50%)}html[dir=rtl] .ph-stars i.half{background:linear-gradient(-90deg,#fbbf24 50%,#3b4660 50%)}
@keyframes star{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.ph-card.row{grid-template-columns:auto 1fr;align-items:center;gap:10px}
.ph-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#12a36f;color:#fff;font-weight:900;font-family:var(--font-en);box-shadow:0 0 0 0 #12a36f66;animation:live 1.8s infinite}
.ph-sec{font-weight:800;font-size:11.5px;padding:4px 2px 0;border-inline-start:3px solid #4f7dff;padding-inline-start:8px}
.ph-order{display:flex;align-items:center;gap:8px;margin-top:4px;padding:8px 10px;border-radius:10px;background:#0b1020}.ph-order span{font-size:9px;padding:2px 6px;border-radius:6px;background:#ffffff1a;font-family:var(--font-en)}.ph-order b{flex:1;font-size:11px}.ph-order em{font-style:normal;font-family:var(--font-en);color:#93c5fd;font-weight:800}
.ph-nav-bar{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px 6px 10px;background:#0b1020;border-radius:18px 18px 0 0}
.ph-nav-bar span{text-align:center;font-size:9.5px;color:#8d98b3;padding:7px 2px;border-radius:10px}.ph-nav-bar span.on{background:#1d5cff;color:#fff;font-weight:800}
.ph-map{position:relative;flex:1;border-radius:14px;overflow:hidden;background:#e9edf3;min-height:120px}
.ph-map svg{width:100%;height:100%;display:block}.ph-map .st path{stroke:#d5dbe6;stroke-width:8;stroke-linecap:round}.ph-map .rt{fill:none;stroke:#2563eb;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:8 6;animation:dash 1.6s linear infinite}.ph-map .dot circle{fill:#2563eb;stroke:#fff;stroke-width:2.5}.ph-map .pn{fill:#e11d48}
.ph-bubble{position:absolute;bottom:8px;inset-inline:8px;padding:7px 9px;border-radius:10px;background:#0b1020e6;color:#fff;font-size:9.5px;font-weight:700}
.ph-chips{display:flex;gap:4px;justify-content:center}.ph-chips span{font-size:9.5px;padding:4px 8px;border-radius:999px;background:#141b2e;color:#8d98b3}.ph-chips span.on{background:#1d5cff;color:#fff;font-weight:800}
.ph-money{font-size:20px;font-family:var(--font-en);font-weight:900}.ph-money span{font-size:11px;font-family:var(--font-ar)}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ph-grid div{position:relative;padding:8px 10px 10px;border-radius:12px;background:#141b2e;border:1px solid #1f2a45;display:grid;gap:1px;overflow:hidden}
.ph-grid b{font-size:14px;font-family:var(--font-en);font-weight:900}.ph-grid small{color:#8d98b3;font-size:9.5px}
.ph-grid i{position:absolute;bottom:0;inset-inline-start:0;height:3px;width:var(--w);background:currentColor;opacity:.9;transform-origin:0 50%;animation:grow 1.4s cubic-bezier(.2,.7,.2,1) both}
html[dir=rtl] .ph-grid i{transform-origin:100% 50%}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.c1{color:#60a5fa}.c2{color:#34d399}.c3{color:#2dd4bf}.c4{color:#f87171}.c5{color:#a78bfa}
.phone .ph{margin:0}
.phone-media .ph-mini{width:86%;display:grid;gap:8px;padding:12px;border-radius:24px;background:#0b0f1c;border:1px solid #1f2a45;box-shadow:0 20px 40px #0008;font-size:11px;color:#f4f7ff;text-align:start;transform:translateY(24px)}
html[lang=en] .phone-media .ph-mini{font-family:var(--font-en)}

/* ===== حركة ===== */
.progress{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;background:linear-gradient(90deg,#1d5cff,#a78bfa);z-index:60;transition:width .1s linear}
[data-tilt]{transform-style:preserve-3d;will-change:transform}
.tilting{transition:none!important}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),#ffffff2e,transparent 60%);opacity:0;transition:opacity .3s}
[data-tilt]:hover .glare{opacity:1}
.pillar,.mini,.role{position:relative}
.glow{animation:drift 14s ease-in-out infinite alternate}.glow-b{animation-duration:18s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}
.title.shine{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 42%,color-mix(in srgb,var(--ink) 45%,var(--accent)) 50%,var(--ink) 58%,var(--ink) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{from{background-position:200% 0}to{background-position:-200% 0}}
.stats b[data-count]{font-variant-numeric:tabular-nums}
/* ===== الموبايل: تخطيط وحركة مختلفان — كل شاشة هاتف كاملة ومتمركزة وتدخل بدوران ثلاثي الأبعاد، وشريط "بث حي" يمر أسفل المشهد ===== */
.scene-feed{display:none}
@media(max-width:800px){
  .glow{animation:none;opacity:.5}
  .hero-scene .scene-card{aspect-ratio:1000/760;border-radius:22px}
  .scene{transform:scale(1.45);transform-origin:50% 42%}
  .scene-card-ui{display:none}
  .scene-stats{display:flex;bottom:12px;inset-inline-start:12px;gap:6px}.scene-stats div{min-width:74px;padding:8px 8px}.scene-stats b{font-size:18px}.scene-stats span{font-size:10px}
  .scene-feed{display:block;overflow:hidden;margin-top:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .ticker{display:flex;gap:10px;width:max-content;animation:ticker 22s linear infinite}
  html[dir=rtl] .ticker{animation-name:tickerRtl}
  .ticker span{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow);white-space:nowrap}
  .ticker i{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--soft);font-style:normal;font-size:15px}
  .ticker i.live{background:#34d399;animation:live 1.6s infinite}
  .ticker b{font-size:12.5px}.ticker em{font-style:normal;font-size:11.5px;color:var(--muted)}
  @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes tickerRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
  .phones{display:grid;grid-template-columns:1fr;justify-items:center;gap:30px;margin:40px 0 24px;perspective:1200px}
  .phone,.phone.big{width:min(300px,84vw);padding:8px;border-radius:32px}
  .phone .ph{border-radius:26px}
  .phone.tilt-l,.phone.tilt-r{transform:none}
  .phone.m-out{opacity:0;transform:rotateY(32deg) translateY(30px) scale(.94)}
  .phone.m-out:nth-child(even){transform:rotateY(-32deg) translateY(30px) scale(.94)}
  .phone.m-in{opacity:1;transform:none;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .7s}
  .pillar,.mini,.role{transition:none}
  .reveal{transform:translateY(14px)}
}
@media(prefers-reduced-motion:reduce){.ph-stars i,.ph-grid i,.ph-num,.ph-map .rt,.glow,.title.shine{animation:none}}
.ph-stack{display:grid;gap:1px;min-width:0}