:root{color-scheme:dark;--bg:#101315;--panel:#171d20;--line:#2d373a;--ink:#f4f5ee;--muted:#adb9b8;--lime:#d7fc79;--radius:24px;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.75 "Noto Sans Arabic",Tahoma,Arial,sans-serif}
a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible,video:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
p,h1,h2,h3{margin:0}h1,h2,h3{line-height:1.35;text-wrap:balance}h1{font-size:clamp(2.5rem,5.6vw,5rem);letter-spacing:-.06em}h1 em{color:var(--lime);font-style:normal}h2{font-size:clamp(1.85rem,4vw,3.45rem);margin-bottom:1.35rem}h3{font-size:1.25rem}
.wrap{width:min(1180px,calc(100% - 72px));margin-inline:auto}.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:.75rem;white-space:nowrap}.brand b{font:800 1rem/1 Arial,sans-serif;letter-spacing:.06em}.mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--lime);color:#172011;font-weight:bold}
nav{display:flex;gap:clamp(.75rem,3vw,2.5rem);color:var(--muted);font-size:.9rem}nav a:hover,footer a:hover{color:var(--lime)}
.skip{position:absolute;top:0;inset-inline-start:1rem;transform:translateY(-120%);background:var(--lime);color:#111;padding:.5rem 1rem;z-index:5}.skip:focus{transform:none}
.hero{min-height:620px;display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:24px;padding-block:56px}
.eyebrow{display:flex;align-items:center;gap:.6rem;color:var(--lime);font-weight:700;font-size:.9rem;margin-bottom:14px}.eyebrow span:not([data-i18n]){width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 16px var(--lime)}
.lead{color:var(--muted);max-width:36ch;font-size:1.18rem;margin-block:1.4rem 1.65rem}.muted,.cards p,.steps p{color:var(--muted)}.note{font-size:.82rem;margin-top:.8rem}
.actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:.65rem}.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border:1px solid var(--line);border-radius:13px;padding:.65rem 1rem;font-weight:700;transition:transform .2s,background .2s,border-color .2s}.button:hover{transform:translateY(-2px);border-color:var(--lime)}.primary{background:var(--lime);color:#172011;border-color:var(--lime)}.primary:hover{background:#e7ffa6}.small{min-height:42px;font-size:.85rem}.unavailable{flex-direction:column;gap:0;color:var(--muted);line-height:1.25}.unavailable:hover{transform:none;border-color:var(--line)}.unavailable small{font-size:.72rem;margin-top:.3rem;font-weight:400}
.visual{isolation:isolate;position:relative;display:grid;place-items:center;min-height:465px;border:1px solid var(--line);border-radius:32px;overflow:hidden;background:radial-gradient(ellipse at 55% 40%,#263b2b,#131a1b 70%)}
.orb,.orbit{position:absolute;z-index:-1;border-radius:50%;width:79%;aspect-ratio:1;border:1px solid #a8e46b36;transform:rotate(-20deg) scaleY(.78)}.orbit{width:100%;border-style:dashed}.orb{background:radial-gradient(ellipse,#77984244,transparent 68%)}
.phone{width:min(280px,76%);padding:17px;border:5px solid #414d43;border-radius:34px;background:#101716;box-shadow:0 24px 50px #0008;transform:rotate(-6deg);animation:arrive .7s ease both}
@keyframes arrive{from{opacity:.2;transform:translateY(16px) rotate(-3deg)}}
.phone-top{display:flex;justify-content:space-between;align-items:center;font:700 .78rem/1.5 Arial,sans-serif}.sample{color:var(--muted);font-size:.65rem}.phone-title{margin-block:20px 12px}.phone-title span,.metrics span,.record small,.float small{display:block;color:var(--muted);font-size:.72rem}.phone-title strong{font-size:1.55rem}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.metrics div{padding:8px 10px;border-radius:10px;background:#232e24}.metrics b{color:var(--lime);font:800 1.35rem/1.4 Arial,sans-serif}
.record{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:.82rem}.avatar{width:30px;height:30px;display:grid;place-items:center;background:#2c3a2b;border-radius:9px}.alt{background:#3b3223}.status{margin-inline-start:auto;color:var(--lime);font-size:.72rem}.ended{color:#d7bf8d}.float{display:flex;align-items:center;gap:.65rem;position:absolute;bottom:11%;left:5%;border:1px solid #465749;background:#19241ef2;border-radius:14px;padding:.55rem .7rem;font-size:.8rem;box-shadow:0 8px 25px #0006}.float .mark{width:29px;height:29px;border-radius:8px}
.section{padding-block:56px;border-top:1px solid var(--line);scroll-margin-top:15px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.cards article,.download{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,3vw,32px)}.cards p,.steps p{margin-top:.5rem}.icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#283423;color:var(--lime);font-size:1.5rem;margin-bottom:1.1rem}
.workflow{display:grid;grid-template-columns:1fr 1.25fr;gap:24px}.steps{list-style:none;margin:0;padding:0;counter-reset:step}.steps li{counter-increment:step;display:flex;align-items:start;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}.steps li:first-child{padding-top:0}.steps li::before{content:counter(step,decimal-leading-zero);font:700 1rem/1 Arial,sans-serif;color:var(--lime);padding:.65rem;border-radius:10px;background:#283423}
.video-frame{margin-top:1rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#0d1413}video{display:block;width:100%;aspect-ratio:16/9}.video-error{padding:1rem}.video-error a{text-decoration:underline}details{margin-top:1rem;color:var(--muted)}summary{cursor:pointer;color:var(--ink)}details p{margin-top:.7rem}
.download{background:radial-gradient(ellipse at 0 0,#2b3828,var(--panel) 65%)}.download .actions{margin-top:1.25rem}footer.bar{border-top:1px solid var(--line);border-bottom:0}footer>a:last-child{color:var(--muted);font-size:.88rem}
@media(max-width:780px){.wrap{width:calc(100% - 38px)}.hero,.workflow{grid-template-columns:1fr}.hero{gap:32px;padding-block:44px}.visual{min-height:420px}.section{padding-block:42px}.cards{grid-template-columns:1fr}.bar{flex-wrap:wrap}.bar nav{order:3;width:100%;justify-content:space-between}}
@media(max-width:370px){.wrap{width:calc(100% - 26px)}.visual{min-height:390px}.float{left:3%;bottom:5%}.bar{gap:10px}.brand b{font-size:.8rem}.small{padding-inline:.6rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.platform-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: clamp(14px, 2.1vw, 22px);
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
}
.platform-card h3 { text-align: start; }
.platform-card p { color: var(--muted); }
.platform-card .button { text-align: center; }
@media (max-width: 760px) {
  .platform-grid { grid-template-columns: 1fr; }
}

.header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.language-picker {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.language-picker button {
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 38px;
  padding: 0 7px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: 700 .73rem/1 Arial, sans-serif;
  white-space: nowrap;
}
.language-picker button span { font: 1rem/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.language-picker button:hover { color: var(--ink); }
.language-picker button[aria-pressed="true"] {
  border-color: #53633a;
  background: #283423;
  color: var(--lime);
}
.language-picker button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (max-width: 540px) {
  header.bar { align-items: flex-start; }
  .header-actions { justify-content: flex-start; }
  .header-actions .small { font-size: .78rem; }
}

.platform-card.is-recommended {
  border-color: #9bb855;
  background: #232e24;
  grid-template-rows: auto auto 1fr auto;
}
.platform-card h3 { direction: inherit; }
.install-badge {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 8px;
  color: var(--lime);
  background: #34432a;
  font-size: .78rem;
  font-weight: 700;
}
.install-fallback { margin-top: 18px; color: var(--muted); }
.install-fallback a { color: var(--lime); text-decoration: underline; }