/* «عشرة» application · arbab.tech brand (night + lime, same as the reel and @arbab.tech). Mobile first. */
:root{
  --night:#000413; --night-2:#0a0f22; --line:#232a44; --cloud:#F9F6F5; --muted:#a3a9bd;
  --lime:#D4FF27; --lime-d:#9bc400; --bad:#ff8a7a; --radius:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night);color:var(--cloud);font:16px/1.6 'Tajawal',system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:radial-gradient(110% 50% at 50% 0%,rgba(212,255,39,.09) 0%,rgba(0,4,19,0) 60%),var(--night)}
html[dir="ltr"] body{font-family:'Inter','Tajawal',system-ui,sans-serif}
a{color:inherit}
main{max-width:640px;margin:0 auto;padding:0 16px 40px}
[hidden]{display:none!important}

.top{display:flex;align-items:center;justify-content:space-between;max-width:640px;margin:0 auto;padding:14px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{border-radius:50%}
.wordmark{font:800 20px 'Archivo',sans-serif;letter-spacing:-.01em}
.wordmark em{font-style:normal;color:var(--lime)}
.lang{background:transparent;border:1px solid var(--line);color:var(--cloud);font:600 13px 'Inter',sans-serif;padding:6px 12px;border-radius:var(--radius);cursor:pointer}
.lang:hover,.lang:focus-visible{border-color:var(--lime);outline:none}

.hero{text-align:center;padding:22px 0 8px}
.kicker{display:inline-block;background:rgba(212,255,39,.1);border:1px solid var(--lime);color:var(--lime);font:800 13px 'Tajawal';padding:5px 12px;border-radius:999px}
.hero h1{margin-top:16px;font:900 clamp(30px,8vw,44px)/1.2 'Tajawal';text-wrap:balance}
.lede{margin:12px auto 0;max-width:520px;color:var(--muted);font-size:17px}
.builds{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 0;text-align:start}
.builds li{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--night-2)}
.builds b{display:block;font:800 16px 'Tajawal';color:var(--lime)}
.builds span{display:block;color:var(--muted);font-size:14px;line-height:1.4}
.rules{margin-top:14px;color:var(--muted);font-size:14px}

.apply{margin-top:22px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(10,15,34,.7);padding:16px}
.progress{height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.progress span{display:block;height:100%;width:25%;background:var(--lime);transition:width .3s}
.stepnum{margin-top:8px;color:var(--muted);font-size:13px}
.step{border:0;display:grid;gap:16px;margin-top:6px}
.step legend{font:900 24px 'Tajawal';margin-bottom:10px}
.f{display:grid;gap:6px;font-weight:700}
.f small,.tick small{font-weight:500;color:var(--muted)}
.hint{color:var(--muted);font-size:14px;font-weight:500}
input[type=text],input[type=tel],input[type=email],textarea{display:block;width:100%;padding:12px;border-radius:var(--radius);border:1px solid var(--line);background:var(--night);color:var(--cloud);font:17px/1.5 'Tajawal','Inter',sans-serif;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:var(--lime)}
.f.bad input,.f.bad textarea,.f.bad .chips,.f.bad .cards{outline:2px solid var(--bad);outline-offset:2px;border-radius:var(--radius)}
::placeholder{color:#5d6480}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--night);color:var(--cloud);font:700 15px 'Tajawal','Inter';padding:8px 14px;border-radius:999px;cursor:pointer;min-height:42px}
.chip:hover{border-color:var(--lime)}
.chip:focus-visible,.card:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.chip[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--night)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card{border:1px solid var(--line);background:var(--night);color:var(--cloud);text-align:start;padding:12px;border-radius:var(--radius);cursor:pointer;font:inherit}
.card b{display:block;font:800 16px 'Tajawal','Inter'}
.card span{display:block;color:var(--muted);font-size:13px;line-height:1.4;font-weight:500}
.card[aria-pressed="true"]{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime);background:rgba(212,255,39,.08)}
.card[aria-pressed="true"] b{color:var(--lime)}

.faq{margin-top:22px}
.faq h2{font:900 18px 'Tajawal','Inter';margin-bottom:8px}
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:var(--night-2);margin-top:6px}
.faq summary{cursor:pointer;padding:10px 12px;font-weight:700;list-style-position:inside}
.faq summary:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.faq details[open] summary{color:var(--lime)}
.faq p{padding:0 12px 12px;color:var(--muted);font-size:15px}
.none{display:flex;gap:8px;align-items:center;font-weight:500;color:var(--muted);font-size:14px;cursor:pointer;width:max-content}
.none input{width:18px;height:18px;accent-color:var(--lime)}
input:disabled{opacity:.45}
.tick--opt{font-weight:500;color:var(--muted)}
.upload{display:grid;gap:2px;justify-items:center;text-align:center;padding:16px 12px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--night);cursor:pointer}
.upload:hover,.upload:focus-within{border-color:var(--lime)}
.upload__t{font:800 16px 'Tajawal','Inter';color:var(--lime);word-break:break-all}
.upload__s{color:var(--muted);font-weight:500}
.upload.has{border-style:solid;border-color:var(--lime)}
.f.bad .upload{border-color:var(--bad)}
.tick{display:flex;gap:10px;align-items:flex-start;font-weight:600;cursor:pointer;line-height:1.5}
.tick input{flex:0 0 auto;width:22px;height:22px;margin-top:2px;accent-color:var(--lime)}
.tick.bad span{color:var(--bad)}
.fine{color:var(--muted);font-size:13px}
.err{margin-top:14px;color:var(--bad);font-weight:700}

.nav{display:flex;gap:10px;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:800 17px 'Tajawal','Inter';padding:12px 22px;border-radius:var(--radius);min-height:48px;border:0;cursor:pointer}
.btn--lime{background:var(--lime);color:var(--night);flex:1}
.btn--lime:hover{filter:brightness(1.06)}
.btn--lime[disabled]{opacity:.6;cursor:wait}
.btn--line{background:transparent;color:var(--cloud);border:1px solid var(--line)}
.btn--line:hover{border-color:var(--lime)}

.done{margin-top:22px;text-align:center;border:1px solid var(--lime);border-radius:var(--radius);padding:28px 18px;background:rgba(212,255,39,.05)}
.done__mark{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--lime);color:var(--night);font:800 26px 'Archivo',sans-serif}
.done h2{margin-top:14px;font:900 26px 'Tajawal'}
.done p{margin:10px 0 18px;color:var(--muted)}

.foot{max-width:640px;margin:0 auto;padding:20px 16px 36px;color:var(--muted);font-size:13px;text-align:center}
.foot__b{margin-top:6px;font-family:'Inter',sans-serif}
@media (min-width:560px){.apply{padding:22px}}