/* صفحة التعريف — بريميوم هادئة: هيرو بجهاز حي، دورة متحركة، أربع شاشات، ثلاثة وعود */
.landing-body{overflow-x:hidden}
.landing{max-inline-size:1180px;margin-inline:auto;padding:14px 18px 40px;display:grid;gap:64px}
.l-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.l-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:20px}
.l-nav{display:flex;gap:8px;flex-wrap:wrap}
.btn--lg{min-block-size:52px;padding:0 24px;font-size:17px;border-radius:14px}
.grad{background:linear-gradient(90deg,var(--teal),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}

.hero{display:grid;gap:36px;align-items:center;grid-template-columns:1fr;padding-block-start:12px}
@media (min-width:960px){.hero{grid-template-columns:1.1fr .9fr}}
.hero__eyebrow{color:var(--teal);font-weight:600;letter-spacing:0;margin-block-end:8px}
.hero__title{font-size:clamp(34px,5.4vw,60px);line-height:1.4;font-weight:700;margin-block-end:14px}
.hero__sub{font-size:clamp(17px,1.6vw,20px);line-height:1.8;color:var(--muted);max-inline-size:560px;margin-block-end:22px}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.hero__facts{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-inline-size:560px}
.hero__facts li{display:grid;gap:2px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface)}
.hero__facts b{font-size:28px;line-height:1.2;color:var(--gold)}
.hero__facts span{font-size:12.5px;color:var(--muted);line-height:1.5}
@media (max-width:480px){.hero__facts{grid-template-columns:1fr 1fr}.hero__facts li:last-child{grid-column:1/-1}}

.hero__art{position:relative;display:grid;place-items:center;min-block-size:420px}
.hero__art::before{content:"";position:absolute;inset:10% 15%;border-radius:50%;background:radial-gradient(circle,rgba(0,212,184,.22),transparent 65%);filter:blur(10px)}
.phone{position:relative;inline-size:min(320px,86%);aspect-ratio:9/17;border-radius:36px;background:var(--bg-1);border:1px solid var(--border-strong);box-shadow:var(--shadow),inset 0 0 0 6px #000;overflow:hidden;transform:rotate(-4deg);animation:float 7s ease-in-out infinite}
[dir="ltr"] .phone{transform:rotate(4deg)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.phone__bar{display:flex;align-items:center;gap:8px;padding:22px 16px 10px;font-weight:700;font-size:14px;border-block-end:1px solid var(--border)}
.phone__bar .dot{margin-inline-start:auto;inline-size:9px;block-size:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(46,189,133,.25)}
.phone__body{padding:12px;display:grid;gap:8px;align-content:start}
.mini{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);font-size:13px;opacity:0;translate:0 8px;animation:rise .5s var(--ease) forwards}
.mini .bar{inline-size:4px;align-self:stretch;border-radius:4px}
.mini b{display:block;font-size:13px}
.mini span{color:var(--muted);font-size:12px}
.mini .st{margin-inline-start:auto;font-size:11px;font-weight:700}
@keyframes rise{to{opacity:1;translate:0 0}}
.orbit{position:absolute;inset:0;pointer-events:none}
.orbit__chip{position:absolute;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:700;background:var(--bg-1);border:1px solid var(--border-strong);box-shadow:var(--shadow);animation:drift 9s ease-in-out infinite}
.orbit__chip[data-status="ready"]{inset-block-start:8%;inset-inline-end:4%;color:var(--st-ready)}
.orbit__chip[data-status="cleaning"]{inset-block-end:14%;inset-inline-start:2%;color:var(--st-cleaning);animation-delay:-3s}
.orbit__chip[data-status="occupied"]{inset-block-start:46%;inset-inline-end:-2%;color:var(--st-occupied);animation-delay:-6s}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -14px}}

.how h2,.who h2,.cta-end h2{font-size:clamp(24px,3vw,36px);margin-block-end:6px}
.flow{display:grid;gap:16px;margin-block-start:18px;grid-template-columns:1fr}
@media (min-width:900px){.flow{grid-template-columns:.9fr 1.1fr;align-items:start}}
.flow__steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:s}
.flow__step{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:var(--surface);cursor:pointer;text-align:start;color:inherit;inline-size:100%;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.flow__step::before{counter-increment:s;content:counter(s);inline-size:34px;block-size:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--bg-3);flex:0 0 auto;direction:ltr}
.flow__step[aria-pressed="true"]{border-color:var(--teal);background:rgba(0,212,184,.08)}
.flow__step[aria-pressed="true"]::before{background:linear-gradient(135deg,var(--teal),var(--blue));color:#06110F}
.flow__step b{display:block}
.flow__step span{color:var(--muted);font-size:13.5px}
.flow__stage{min-block-size:320px;padding:22px;display:grid;gap:14px;align-content:start;position:sticky;inset-block-start:16px}
.stage__title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700}
.stage__title .icon{color:var(--teal);inline-size:26px;block-size:26px}
.stage__text{color:var(--muted);line-height:1.8}
.stage__demo{display:grid;gap:8px}
.progress{block-size:4px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.progress i{display:block;block-size:100%;background:linear-gradient(90deg,var(--teal),var(--blue));inline-size:0;transition:inline-size 6s linear}
.progress i.run{inline-size:100%}

.who__grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-block-start:18px}
.who__card{display:grid;gap:8px;padding:20px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(160deg,var(--bg-1),var(--bg-2));color:inherit;text-decoration:none;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.who__card:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.who__icon{display:inline-grid;place-items:center;inline-size:44px;block-size:44px;border-radius:12px;background:var(--surface-2);color:var(--teal)}
.who__card b{font-size:18px}
.who__card span:last-child{color:var(--muted);line-height:1.7}

.promise__grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.promise__grid>div{padding:20px;border-radius:18px;border:1px solid rgba(231,193,133,.35);background:rgba(231,193,133,.05);display:grid;gap:6px}
.promise__grid b{color:var(--gold);font-size:18px}
.promise__grid span{color:var(--muted);line-height:1.7}

.cta-end{text-align:center;display:grid;gap:10px;justify-items:center;padding:36px 16px;border-radius:24px;border:1px solid var(--border);background:radial-gradient(80% 100% at 50% 0%,rgba(0,212,184,.12),transparent 70%)}
.cta-end .hero__cta{justify-content:center}

/* شاشة البداية (PWA) */
.start{min-block-size:80dvh;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:24px}
.start__mark{filter:drop-shadow(0 12px 30px rgba(0,212,184,.25))}
.start__grid{display:grid;gap:12px;grid-template-columns:1fr 1fr;inline-size:min(520px,92vw)}
.start__card{display:grid;gap:6px;padding:22px 16px;border-radius:18px;border:1px solid var(--border-strong);background:linear-gradient(160deg,var(--bg-1),var(--bg-2));text-decoration:none;color:inherit;min-block-size:120px;align-content:center}
.start__card b{font-size:18px}
.start__card span{color:var(--muted);font-size:13px}
.start__card:active{transform:scale(.98)}
.start__about{margin-block-start:10px}
@media (max-width:420px){.start__grid{grid-template-columns:1fr}}

/* شريط التحديث */
.update-bar{position:fixed;inset-block-end:0;inset-inline:0;z-index:3000;display:flex;gap:12px;align-items:center;justify-content:center;padding:12px 16px;background:var(--bg-3);border-block-start:1px solid var(--border-strong)}
@media (prefers-reduced-motion: reduce){.phone,.orbit__chip{animation:none}}

/* مشاهد الدورة */
.mini--stage{opacity:1;translate:0 0;animation:rise .45s var(--ease) both}
.gcard{display:grid;gap:6px;padding:14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}
.gcard>span{color:var(--muted);font-size:13px}
.gcode{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;border:1px dashed var(--border-strong)}
.gcode b{font-size:22px;letter-spacing:.12em;color:var(--teal)}
.gbtn{justify-self:start;padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,var(--teal),var(--blue));color:#06110F;font-weight:700;font-size:13px}
.states{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 4px}
.states .arrow{color:var(--faint);direction:ltr}
.photos2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ph{aspect-ratio:4/3;border-radius:12px;position:relative;background:linear-gradient(160deg,var(--bg-3),var(--bg-1));border:1px solid var(--border)}
.ph::after{content:"";position:absolute;inset:auto 12px 12px auto;inline-size:26px;block-size:26px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(46,189,133,.25)}
.ph__tag{position:absolute;inset-block-start:10px;inset-inline-start:10px;padding:4px 10px;border-radius:999px;background:rgba(11,15,20,.7);font-size:12px;font-weight:700}
.ticks{display:flex;flex-wrap:wrap;gap:6px}
.tick{padding:5px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(46,189,133,.45);color:var(--ok)}
.tick::before{content:"✓ "}
.decision-mini{padding:12px 14px;border-radius:12px;border:1px solid rgba(232,92,92,.45);background:rgba(232,92,92,.08);display:grid;gap:4px}
.decision-mini b{color:var(--danger)}
.decision-mini span{color:var(--muted);font-size:13px}
.metrics3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.metrics3 .metric{padding:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:grid;gap:2px}
.metrics3 span{font-size:12px;color:var(--muted)} .metrics3 b{font-size:22px;line-height:1.2} .metrics3 small{font-size:11px;color:var(--faint)}
/* أورورا خلفية للهيرو */
.landing-body::before{background:radial-gradient(60% 50% at 80% 0%,rgba(0,212,184,.16),transparent 60%),radial-gradient(50% 40% at 10% 30%,rgba(27,143,232,.12),transparent 60%),radial-gradient(40% 40% at 60% 100%,rgba(131,56,236,.08),transparent 60%)}
@media (max-width:600px){.metrics3{grid-template-columns:1fr 1fr}.metrics3 .metric:last-child{grid-column:1/-1}}