:root { --brand:#0b2545; --brand2:#13315c; --accent:#0e7c66; --ink:#17202a; --dim:#5f6b7a; --paper:#fff; --soft:#f4f6fa; --line:#e3e7ee; --ok:#0e7c66; --bad:#b42318; --warn:#b54708; }
* { box-sizing:border-box; }
html, body { margin:0; }
body { font:16px/1.65 Inter, "Segoe UI", Roboto, Arial, sans-serif; color:var(--ink); background:var(--soft); -webkit-font-smoothing:antialiased; }
html[lang=ar] body { font-family:Cairo, "Segoe UI", Tahoma, Arial, sans-serif; }
a { color:var(--brand); }
.in { max-width:1040px; margin:0 auto; padding:0 20px; }
.hidden { display:none !important; }
.dim { color:var(--dim); }

.top { background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.top .in { display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
.top .brandbox { display:flex; align-items:center; gap:10px; }
.by { display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--dim); font-size:12px; font-weight:600; margin-inline-start:10px; padding-inline-start:12px; border-inline-start:1px solid var(--line); }
.by img { height:34px; width:auto; display:block; }
.foot .fl { height:22px; width:auto; vertical-align:middle; margin-inline-end:6px; }
.top .logo { font-weight:800; font-size:22px; text-decoration:none; color:var(--brand); letter-spacing:-.2px; }
.top nav { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.top nav a { text-decoration:none; padding:8px 12px; border-radius:8px; color:var(--ink); font-weight:600; font-size:15px; }
.top nav a.on, .top nav a:hover { background:var(--soft); }
.top nav a.langbtn { border:1.5px solid var(--line); margin-inline-start:8px; }

.hero { background:linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%); color:#fff; padding:72px 0 64px; }
.hero h1 { font-size:46px; line-height:1.15; margin:0 0 16px; font-weight:800; letter-spacing:-.5px; max-width:760px; }
.hero p { font-size:19px; line-height:1.7; margin:0 0 28px; max-width:720px; opacity:.94; }
.hero .btn { margin:0; }
@media (max-width:640px) { .hero { padding:48px 0 40px; } .hero h1 { font-size:32px; } .hero p { font-size:17px; } }

.sec { padding:56px 0 8px; }
.sec h2 { font-size:30px; margin:0 0 24px; font-weight:800; letter-spacing:-.3px; }
.steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.step { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:22px 22px 20px; }
.step .n { display:inline-flex; width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; align-items:center; justify-content:center; margin-bottom:12px; }
.step b { display:block; font-size:17px; margin-bottom:6px; }
.step span { color:var(--dim); font-size:15px; }
@media (max-width:960px) { .steps { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .steps { grid-template-columns:1fr; } }

.card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:32px; margin:24px 0; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.card.narrow { max-width:760px; margin-inline:auto; }
.card h2 { margin:0 0 6px; font-size:26px; font-weight:800; }
.card h3 { margin:28px 0 4px; font-size:18px; font-weight:800; }
.card > p.lead { margin:0 0 18px; color:var(--dim); }
@media (max-width:640px) { .card { padding:22px 18px; } }

label { display:block; font-weight:600; margin:16px 0 6px; font-size:15px; }
label small { font-weight:500; color:var(--dim); }
label .req { color:var(--bad); }
input, select, textarea { width:100%; font:inherit; padding:12px 14px; border:1px solid #cfd6e0; border-radius:10px; background:#fff; color:var(--ink); }
textarea { min-height:120px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
input[type=email], input[type=url], input[type=tel] { direction:ltr; }
html[dir=rtl] input[type=email], html[dir=rtl] input[type=tel] { text-align:right; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 18px; }
@media (max-width:640px) { .row, .row3 { grid-template-columns:1fr; } }

.btn { display:inline-flex; align-items:center; justify-content:center; font:inherit; font-weight:700; font-size:16px; height:48px; padding:0 24px; border-radius:10px; border:1.5px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; margin-top:20px; white-space:nowrap; transition:filter .15s; }
.btn:hover { filter:brightness(1.08); }
.btn:disabled { opacity:.6; cursor:default; }
.btn.alt { background:var(--brand); border-color:var(--brand); }
.btn.ghost { background:transparent; color:var(--brand); border-color:var(--brand); }
.btn.small { height:40px; padding:0 16px; font-size:14px; margin-top:12px; }
.btn.light { background:#fff; border-color:#fff; color:var(--brand); }
.btn.wide { width:100%; }
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.fine { color:var(--dim); font-size:14px; margin:12px 0 0; }

.seg { display:flex; gap:8px; margin-top:6px; }
.seg label { flex:1; margin:0; border:1.5px solid #cfd6e0; border-radius:10px; padding:11px 14px; text-align:center; cursor:pointer; font-weight:600; }
.seg label.on { border-color:var(--brand); background:var(--brand); color:#fff; }
.seg input { display:none; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chips label { margin:0; border:1.5px solid #cfd6e0; border-radius:999px; padding:6px 14px; cursor:pointer; font-weight:500; font-size:14px; background:#fff; }
.chips label.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.chips input { display:none; }

.crit { border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:10px 0; background:#fbfcfe; }
.crit .crit-h { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.crit .crit-h b { font-size:15px; }
.crit .crit-h select { width:auto; min-width:150px; padding:8px 12px; }
.crit input, .crit select, .crit .chips { margin-top:10px; }
.crit .crit-h select { margin-top:0; }
.crit .dim { font-size:14px; margin-top:8px; display:block; }

.done { text-align:center; padding:44px 24px; }
.done .ok { display:inline-flex; width:64px; height:64px; border-radius:50%; background:#e6f4f1; color:var(--ok); align-items:center; justify-content:center; font-size:32px; font-weight:800; margin-bottom:12px; }
.done h2 { font-size:30px; }
.done p { font-size:17px; max-width:560px; margin:8px auto; }
.linkbox { display:flex; gap:8px; max-width:620px; margin:14px auto 0; }
.linkbox input { direction:ltr; font-size:14px; }
.linkbox .btn { margin:0; height:46px; }

.timeline { list-style:none; padding:0; margin:20px 0 0; }
.timeline li { position:relative; padding:0 0 22px 0; padding-inline-start:40px; color:var(--dim); }
.timeline li::before { content:""; position:absolute; inset-inline-start:11px; top:26px; bottom:-2px; width:2px; background:var(--line); }
.timeline li:last-child::before { display:none; }
.timeline li .dot { position:absolute; inset-inline-start:0; top:2px; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); background:#fff; }
.timeline li.past { color:var(--ink); }
.timeline li.past .dot { background:var(--ok); border-color:var(--ok); }
.timeline li.now { color:var(--brand); font-weight:800; }
.timeline li.now .dot { border-color:var(--brand); background:var(--brand); box-shadow:0 0 0 5px #dfe6f2; }
.note { background:#fff8e6; border:1px solid #f5d98b; border-radius:10px; padding:12px 14px; margin-top:16px; }

.foot { border-top:1px solid var(--line); margin-top:56px; padding:26px 0; color:var(--dim); font-size:14px; background:var(--paper); }
.foot .in { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

#toast { position:fixed; bottom:24px; inset-inline-start:50%; transform:translateX(-50%) translateY(20px); background:var(--brand); color:#fff; padding:12px 18px; border-radius:10px; opacity:0; transition:.2s; z-index:9; max-width:90vw; }
html[dir=rtl] #toast { transform:translateX(50%) translateY(20px); }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
html[dir=rtl] #toast.show { transform:translateX(50%) translateY(0); }
#toast.bad { background:var(--bad); }

table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:start; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--dim); font-weight:600; }
td select, td input { padding:7px 10px; font-size:14px; }
.status { display:inline-block; padding:2px 10px; border-radius:999px; font-weight:700; font-size:13px; background:var(--soft); }

.objs { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.obj { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:22px; border-inline-start:4px solid var(--accent); }
.obj .q { color:var(--dim); font-style:italic; font-size:16px; margin-bottom:8px; }
html[lang=ar] .obj .q { font-style:normal; }
.obj .a { font-weight:700; font-size:17px; line-height:1.5; }
@media (max-width:700px) { .objs { grid-template-columns:1fr; } }
.who { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--soft); border-radius:10px; padding:10px 14px; margin:-6px 0 18px; font-size:14px; color:var(--dim); }
.who b { color:var(--ink); }
.who .actions a { font-weight:600; font-size:14px; }
.req { border-top:1px solid var(--line); padding:18px 0 6px; }
.req h3 { margin:0 0 2px; }
.timeline.small { display:flex; flex-wrap:wrap; gap:6px 18px; margin:12px 0 4px; }
.timeline.small li { padding:0; padding-inline-start:26px; font-size:14px; }
.timeline.small li::before { display:none; }
.timeline.small li .dot { width:18px; height:18px; top:2px; }
.timeline.small li.now .dot { box-shadow:0 0 0 3px #dfe6f2; }