*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
html[dir=rtl] body{font-family:var(--font-arabic)}
a{color:var(--text-brand)}
h1,h2,h3{font-family:var(--font-display);font-weight:500;color:var(--text-brand);margin:0;letter-spacing:-.01em;line-height:1.12}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{font-family:var(--font-arabic);font-weight:600;letter-spacing:0}
h1{font-size:clamp(40px,6vw,68px)} h2{font-size:clamp(28px,3.6vw,40px)} h3{font-size:22px}
html[dir=rtl] h1{font-size:clamp(34px,4.8vw,54px);line-height:1.35} html[dir=rtl] h2{font-size:clamp(26px,3vw,34px);line-height:1.4}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-sage);font-weight:600}
html[dir=rtl] .kicker{letter-spacing:0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);font:inherit;font-weight:500;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-dark)} .btn.primary:hover{background:var(--bg-sidebar-active)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--text-on-dark)}
/* nav */
.nav{position:sticky;top:0;z-index:5;background:rgba(250,249,246,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav img.lockup{height:34px;width:auto} .nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:500}
.nav ul a{color:var(--text-primary);text-decoration:none} .nav .lang{display:flex;gap:6px;font-size:13px}
.nav .lang a{padding:5px 11px;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--text-muted)} .nav .lang a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:860px){.nav ul{display:none}}
/* hero */
.hero{background:var(--bg-sidebar);color:var(--text-on-dark);padding:96px 0 88px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.hero h1{color:#fff}.hero p.lead{font-size:20px;color:var(--text-on-dark-muted);max-width:560px;margin:24px 0 36px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .device{display:flex;align-items:flex-end;gap:14px;height:260px;justify-content:center}
.hero .device i{display:block;width:72px;border-radius:14px 14px 0 0}
.hero .device i:nth-child(1){height:32%;background:var(--neutral-sand);opacity:.55}.hero .device i:nth-child(2){height:52%;background:var(--neutral-sand);opacity:.75}.hero .device i:nth-child(3){height:72%;background:var(--green-sage)}.hero .device i:nth-child(4){height:100%;background:#fff;opacity:.92}
.hero .device-l{display:flex;gap:14px;justify-content:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-on-dark-muted);margin-top:12px}
.hero .device-l span{width:72px;text-align:center} html[dir=rtl] .hero .device-l{letter-spacing:0}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero .device{height:180px}}
/* sections */
section{padding:88px 0} section.alt{background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec-head{max-width:720px;margin-bottom:40px} .sec-head p{color:var(--text-muted);font-size:18px;margin:14px 0 0}
.grid{display:grid;gap:24px} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px}
section.alt .card{background:var(--bg-page)}
.card h3{margin-bottom:10px} .card p{margin:0;color:var(--text-muted)}
.num{font-family:var(--font-display);font-size:48px;line-height:1;color:var(--text-brand)} html[dir=rtl] .num{font-family:var(--font-arabic);font-size:34px;font-weight:600;line-height:1.3}
.stat small{display:block;color:var(--text-muted);margin-top:8px;font-size:13px}
.stat .src{font-size:11px;color:var(--placeholder);margin-top:6px}
/* ladder */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ladder div{padding:22px 18px;border-radius:var(--radius-md);background:var(--bg-muted);border:1px solid var(--border)}
.ladder div:nth-child(2){background:var(--bg-accent-soft)} .ladder div:nth-child(3){background:var(--green-sage);color:#fff} .ladder div:nth-child(4){background:var(--accent);color:#fff}
.ladder b{display:block;font-size:18px;margin-bottom:6px} .ladder span{font-size:14px;opacity:.85}
.grades{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.grades span{border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:13.5px;background:var(--bg-surface)} .grades span b{color:var(--text-brand)}
@media (max-width:900px){.ladder{grid-template-columns:1fr 1fr}}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-surface)}
.steps div{padding:28px 24px;border-inline-end:1px solid var(--border)} .steps div:last-child{border:0}
.steps .n{font-family:var(--font-display);font-size:34px;color:var(--accent-sage);line-height:1} html[dir=rtl] .steps .n{font-family:var(--font-arabic)}
.steps b{display:block;font-size:18px;margin:10px 0 6px;color:var(--text-brand)} .steps p{margin:0;color:var(--text-muted);font-size:14.5px}
@media (max-width:900px){.steps{grid-template-columns:1fr}.steps div{border-inline-end:0;border-bottom:1px solid var(--border)}}
.list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.list li{display:flex;gap:12px;align-items:flex-start} .list li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent-sage);flex:0 0 auto;margin-top:9px}
.rule{background:var(--bg-sidebar);color:var(--text-on-dark);border-radius:var(--radius-lg);padding:40px}
.rule h3{color:#fff;font-size:26px} .rule p{color:var(--text-on-dark-muted);margin:12px 0 0;font-size:17px}
.note{border-inline-start:4px solid var(--accent-sage);background:var(--bg-surface);border-radius:var(--radius-md);padding:16px 20px;color:var(--text-muted);font-size:14.5px}
/* cta */
.cta{background:var(--bg-sidebar);color:#fff;padding:88px 0}
.cta h2{color:#fff}.cta p{color:var(--text-on-dark-muted);font-size:18px;max-width:600px}
footer{padding:36px 0;font-size:13px;color:var(--text-muted)} footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer img.lockup{height:26px;width:auto}

.nav .lang a.signin{margin-inline-start:8px;background:var(--text-primary);border-color:var(--text-primary);color:#fff}