:root{
--font-display:"Playfair Display",serif;--font-body:"Markazi Text",serif;--font-ui:"Tajawal",system-ui,sans-serif;--font-mono:"Spline Sans Mono",ui-monospace,monospace;
--bg:oklch(0.158 0.013 285);--bg-deep:oklch(0.125 0.012 285);--surface:oklch(0.205 0.015 285);--surface-2:oklch(0.255 0.017 285);
--border:oklch(0.34 0.016 285);--border-soft:oklch(0.26 0.015 285);
--text:oklch(0.955 0.006 85);--text-dim:oklch(0.80 0.012 280);--text-mute:oklch(0.66 0.013 282);
--primary:oklch(0.815 0.115 83);--primary-strong:oklch(0.87 0.12 85);--primary-ink:oklch(0.17 0.03 80);
--ok:oklch(0.70 0.105 168);--bad:oklch(0.68 0.14 18);--info:oklch(0.68 0.115 258);
--ph-base:oklch(0.22 0.015 285);--ph-line:oklch(0.30 0.018 285);
--shadow:0 1px 2px oklch(0 0 0/.4),0 24px 60px -28px oklch(0 0 0/.7);color-scheme:dark}
[data-theme="ivory"]{--bg:oklch(0.962 0.012 78);--bg-deep:oklch(0.93 0.015 76);--surface:oklch(0.993 0.006 80);--surface-2:oklch(0.945 0.013 76);--border:oklch(0.86 0.018 70);--border-soft:oklch(0.90 0.015 72);--text:oklch(0.255 0.02 52);--text-dim:oklch(0.42 0.022 55);--text-mute:oklch(0.545 0.022 60);--primary:oklch(0.545 0.105 68);--primary-strong:oklch(0.47 0.11 65);--primary-ink:oklch(0.985 0.01 80);--ok:oklch(0.47 0.09 168);--bad:oklch(0.50 0.13 28);--info:oklch(0.47 0.105 258);--ph-base:oklch(0.93 0.013 76);--ph-line:oklch(0.86 0.018 70);--shadow:0 1px 2px oklch(0.4 0.03 60/.10),0 24px 50px -30px oklch(0.4 0.04 60/.30);color-scheme:light}
html[dir="rtl"] body{font-family:var(--font-ui)}
html[dir="rtl"] .eyebrow::before{order:0}
.toggle{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px}
.toggle button{appearance:none;border:none;cursor:pointer;background:transparent;color:var(--text-dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding:7px 13px;border-radius:999px;transition:.2s;white-space:nowrap;min-height:34px}
.toggle button:hover{color:var(--text)}
.toggle button[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;line-height:1.08}
a{color:var(--primary);text-decoration:none}a:hover{color:var(--primary-strong)}
.mono{font-family:var(--font-mono)}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--primary);display:flex;align-items:center;gap:11px;margin:0 0 16px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--primary)}
/* nav */
.bar{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 85%,transparent);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--border-soft)}
.bar-inner{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;color:var(--text)}
.brand:hover{color:var(--text)}
.bn{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:.14em}
.bn .dot{color:var(--primary)}
.medallion{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;position:relative;border:1px solid var(--primary);color:var(--primary);font-family:var(--font-display);font-weight:600;font-size:17px;flex:none;background:radial-gradient(circle at 50% 35%,color-mix(in oklab,var(--primary) 14%,transparent),transparent 70%)}
.medallion::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid color-mix(in oklab,var(--primary) 40%,transparent)}
.medallion .star{position:absolute;width:6px;height:6px;background:var(--primary);transform:rotate(45deg);top:-3px;left:50%;margin-left:-3px}
.navlinks{display:flex;gap:22px;align-items:center}
.navlinks a{font-size:15px;color:var(--text-dim);font-family:var(--font-ui)}
.navlinks a:hover{color:var(--text)}
@media(max-width:1120px){.navlinks{display:none}}
/* buttons */
.btn{font-family:var(--font-ui);font-size:15px;font-weight:600;cursor:pointer;border-radius:10px;padding:12px 22px;border:1px solid transparent;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;text-decoration:none}
.btn-primary{background:var(--primary);color:var(--primary-ink)}
.btn-primary:hover{background:var(--primary-strong);color:var(--primary-ink)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn-ghost{background:transparent;color:var(--text-mute)}
.btn-ghost:hover{color:var(--text)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-sm{padding:8px 14px;font-size:13px;min-height:36px;border-radius:8px}
/* badges */
.badge{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);color:var(--text-dim)}
.badge-ok{border-color:color-mix(in oklab,var(--ok) 50%,transparent);color:var(--ok)}
.badge-primary{border-color:color-mix(in oklab,var(--primary) 50%,transparent);color:var(--primary)}
.badge-info{border-color:color-mix(in oklab,var(--info) 50%,transparent);color:var(--info)}
.badge-bad{border-color:color-mix(in oklab,var(--bad) 50%,transparent);color:var(--bad)}
/* forms */
label.f{display:block}
.f-lbl{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);margin-bottom:7px}
.f-lbl .req{color:var(--primary)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],input[type=number],select,textarea{width:100%;background:var(--bg-deep);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--font-ui);font-size:15px;min-height:46px}
textarea{min-height:104px;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--text-mute)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-mute) 50%),linear-gradient(135deg,var(--text-mute) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.f-hint{font-size:14px;color:var(--text-mute);margin-top:6px;line-height:1.45}
.f-err{font-size:14px;color:var(--bad);margin-top:6px;display:none}
label.f[data-invalid] input,label.f[data-invalid] select,label.f[data-invalid] textarea{border-color:var(--bad)}
label.f[data-invalid] .f-err{display:block}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.optionrow{display:flex;flex-wrap:wrap;gap:10px}
.opt{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:999px;padding:10px 16px;cursor:pointer;color:var(--text-dim);font-size:15px;transition:.18s;background:transparent;min-height:44px}
.opt:hover{border-color:var(--primary);color:var(--text)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt[data-on=true]{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 14%,transparent);color:var(--text)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-dim);line-height:1.5;cursor:pointer}
.check input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--primary)}
.card{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:26px}
.ph{background:repeating-linear-gradient(135deg,var(--ph-line) 0 1px,transparent 1px 9px),var(--ph-base);display:grid;place-items:center;position:relative;overflow:hidden}
.ph .ph-lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);background:color-mix(in oklab,var(--bg) 55%,transparent);padding:4px 8px;border-radius:5px;text-align:center}
/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:13px 18px;font-size:15px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;max-width:min(92vw,460px)}
.toast[data-show=true]{opacity:1;transform:translate(-50%,0)}
.toast[data-kind=ok]{border-color:color-mix(in oklab,var(--ok) 55%,transparent)}
.toast[data-kind=bad]{border-color:color-mix(in oklab,var(--bad) 55%,transparent)}
/* footer */
.foot{border-top:1px solid var(--border-soft);padding:44px 0;margin-top:auto}
.foot-in{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.foot-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-mute);line-height:1.9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}