/* ===== ASSAS | عساس — Design system ===== */
/* خط الهوية: ضع ملفات R-Mohammed في /assets/fonts/ بالأسماء أدناه وسيُفعَّل تلقائياً */
@font-face{font-family:"R-Mohammed";src:url("/assets/fonts/R-Mohammed-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"R-Mohammed";src:url("/assets/fonts/R-Mohammed-Black.woff") format("woff");font-weight:900;font-display:swap}
@font-face{font-family:"R-Mohammed";src:url("/assets/fonts/R-Mohammed-BlackExtra.woff") format("woff");font-weight:950;font-display:swap}

:root{
  --black:#000;--red:#D0101E;--red-d:#A50C17;--cream:#F2EBDD;--ink:#0B0B0B;
  --g1:#141414;--g2:#1E1E1E;--g3:#2B2B2B;--mute:#8A8478;--line:rgba(242,235,221,.12);
  --f:"R-Mohammed","IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
  --r:18px;--wrap:1200px;--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);font-weight:700;background:var(--black);color:var(--cream);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[lang=en] body,html[lang=en]{line-height:1.6}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.center{text-align:center}
.red{color:var(--red)}
.muted{color:var(--mute)}
.skip{position:absolute;inset-inline-start:8px;top:8px;transform:translateY(-200%);background:var(--red);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}

/* Logo */
.logo{display:inline-flex;flex-direction:column;line-height:1;gap:4px}
.logo-ar{font-weight:950;font-size:34px}
.logo-en{font-family:"Inter",var(--f);font-weight:900;font-size:15px;letter-spacing:.14em}
.logo i{color:var(--red);font-style:normal}
.logo.sm .logo-ar{font-size:26px}.logo.sm .logo-en{font-size:11px}
.descriptor{font-family:"Inter",var(--f);font-size:11px;letter-spacing:.16em;color:var(--mute);margin:14px 0}
.descriptor span{color:var(--red)}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:28px;height:76px}
.nav{display:flex;gap:26px;margin-inline-start:auto}
.nav a{font-size:15px;color:#cfc8ba;position:relative;padding:6px 0;transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--cream)}
.nav a[aria-current]::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--red);border-radius:2px}
.hdr-act{display:flex;align-items:center;gap:12px}
.lang{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-family:"Inter",var(--f);font-size:14px;transition:.2s}
.lang:hover{border-color:var(--red);color:var(--red)}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer}
.burger span{width:18px;height:2px;background:var(--cream);transition:.3s var(--ease)}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font:inherit;font-size:16px;cursor:pointer;border:1px solid transparent;transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.btn svg{width:20px;height:20px}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px -10px rgba(208,16,30,.7)}
.btn-red:hover{background:var(--red-d)}
.btn-ghost{border-color:rgba(242,235,221,.3);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream)}
.btn-ghost-d{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-sm{padding:10px 18px;font-size:14px}
.row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.row.center{justify-content:center}
.link{color:var(--red);font-size:15px;margin-top:auto;padding-top:18px}

/* Type */
.display{font-weight:950;font-size:clamp(42px,7vw,92px);line-height:1.12}
.display.sm{font-size:clamp(34px,5vw,64px)}
html[lang=en] .display{letter-spacing:-.025em;line-height:1.04}
.h2{font-weight:900;font-size:clamp(28px,3.6vw,46px);line-height:1.25;margin-bottom:36px}
html[lang=en] .h2{letter-spacing:-.015em}
.lead{font-size:clamp(17px,1.6vw,21px);color:#cfc8ba;max-width:640px;margin-top:22px}
.center .lead{margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--red);font-size:14px;margin-bottom:22px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(208,16,30,.18);animation:pulse 2s infinite}
html[lang=en] .eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:12px}

/* Sections */
.sec{padding:110px 0}
.dark{background:var(--black)}
.cream{background:var(--cream);color:var(--ink)}
.cream .card{background:#fff}
.dark-t{color:#4a463f}
.phead{padding:110px 0 70px;border-bottom:1px solid var(--line);background:radial-gradient(800px 400px at 85% 0%,rgba(208,16,30,.18),transparent 60%),var(--black)}
html[dir=rtl] .phead{background:radial-gradient(800px 400px at 15% 0%,rgba(208,16,30,.18),transparent 60%),var(--black)}

/* Hero + radar */
.hero{position:relative;overflow:hidden;padding:90px 0 120px}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%);opacity:.5}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px}
.radar-box{display:grid;place-items:center}
.radar{position:relative;width:min(480px,86vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(208,16,30,.08),transparent 70%)}
.ring{position:absolute;border:1px solid rgba(242,235,221,.14);border-radius:50%;inset:0}
.r2{inset:17%}.r3{inset:34%}
.cross{position:absolute;inset:0;background:linear-gradient(transparent calc(50% - .5px),rgba(242,235,221,.12) 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),rgba(242,235,221,.12) 50%,transparent calc(50% + .5px))}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(208,16,30,.55),rgba(208,16,30,.12) 40deg,transparent 70deg);animation:spin 4.5s linear infinite;mask:radial-gradient(circle,#000 69%,transparent 70%)}
.core{position:absolute;inset:48.5%;background:var(--red);border-radius:50%;box-shadow:0 0 24px var(--red)}
.blip{position:absolute;display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap;background:rgba(0,0,0,.7);border:1px solid var(--line);padding:5px 12px 5px 10px;border-radius:999px;animation:blink 4.5s infinite}
.blip i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red)}
.b1{top:12%;left:58%;animation-delay:.4s}.b2{top:32%;left:78%;animation-delay:1.1s}.b3{top:66%;left:70%;animation-delay:1.8s}
.b4{top:80%;left:30%;animation-delay:2.6s}.b5{top:50%;left:6%;animation-delay:3.2s}.b6{top:20%;left:16%;animation-delay:3.9s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:.35}12%{opacity:1}40%{opacity:.6}}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(208,16,30,0)}}

/* Cards */
.cards{display:grid;gap:20px}
.c3{grid-template-columns:repeat(3,1fr)}
.card{display:flex;flex-direction:column;background:var(--g1);border:1px solid var(--line);border-radius:var(--r);padding:32px;transition:transform .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(208,16,30,.6)}
.card h3{font-weight:900;font-size:22px;margin:10px 0}
.card p{color:#b8b1a4;font-size:16px}
.cream .card p{color:#5a554c}
.num{font-family:"Inter",var(--f);color:var(--red);font-size:14px}
.pkg h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.pkg-ar{font-size:30px;font-weight:950}
.pkg-en{font-family:"Inter",var(--f);font-size:13px;color:var(--red);letter-spacing:.12em;text-transform:uppercase}
.note{margin-top:40px;padding:20px 24px;border-inline-start:3px solid var(--red);background:var(--g1);border-radius:10px;color:#b8b1a4;font-size:15px}

/* Grades */
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.grades{display:grid;gap:12px}
.grade{display:flex;align-items:center;gap:20px;background:#fff;border-radius:14px;padding:18px 22px}
.grade b{font-family:"Inter",var(--f);font-weight:900;font-size:28px;width:54px;height:54px;display:grid;place-items:center;border-radius:12px;color:#fff;flex:none}
.g-A b{background:var(--red)}.g-B b{background:#7d0a12}.g-C b{background:#3a3a3a}.g-D b{background:#9a948a}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kpi{text-align:center;padding:48px 20px;border:1px solid var(--line);border-radius:var(--r);font-size:24px;font-weight:900;background:linear-gradient(180deg,var(--g1),transparent)}
.kpi span{display:block;color:var(--red);font-size:34px;margin-bottom:12px}

/* Closer */
.closer{padding:120px 0;border-top:1px solid var(--line);background:radial-gradient(600px 300px at 50% 100%,rgba(208,16,30,.25),transparent 70%),var(--black)}
.closer .btn{margin-top:34px}

/* Steps */
.steps{list-style:none;display:grid;gap:14px;counter-reset:s}
.steps li{display:flex;align-items:center;gap:24px;background:var(--g1);border:1px solid var(--line);border-radius:var(--r);padding:26px 30px}
.sn{font-family:"Inter",var(--f);font-weight:900;font-size:22px;width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--red);color:var(--red)}
.steps h3{font-weight:900;font-size:22px}
.steps p{color:#b8b1a4}
.gate{margin-inline-start:auto;font-size:12px;color:var(--mute);border:1px dashed var(--g3);padding:6px 12px;border-radius:999px;white-space:nowrap}
.pipe{list-style:none;display:flex;flex-wrap:wrap;gap:10px;counter-reset:p}
.pipe li{counter-increment:p;background:#fff;border-radius:999px;padding:12px 20px 12px 14px;display:flex;align-items:center;gap:10px}
.pipe li::before{content:counter(p);font-family:"Inter",var(--f);width:28px;height:28px;display:grid;place-items:center;background:var(--ink);color:var(--cream);border-radius:50%;font-size:13px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chips li{background:#fff;border-radius:999px;padding:12px 22px}

/* Readiness */
.ri{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.ri-row{display:grid;grid-template-columns:1fr 2fr 40px;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.ri-row label b{font-size:19px;font-weight:900}
.ri-row .w{font-family:"Inter",var(--f);font-size:12px;color:var(--red);border:1px solid rgba(208,16,30,.4);padding:1px 8px;border-radius:999px;margin-inline-start:6px}
.ri-row small{display:block;color:var(--mute);font-size:13px;line-height:1.5;margin-top:4px}
.ri-row output{font-family:"Inter",var(--f);font-size:20px;text-align:center}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(to right,var(--red) var(--p,50%),var(--g3) var(--p,50%))}
html[dir=rtl] input[type=range]{background:linear-gradient(to left,var(--red) var(--p,50%),var(--g3) var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--cream);border:4px solid var(--red);cursor:pointer}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--cream);border:4px solid var(--red);cursor:pointer}
.ri-res{position:sticky;top:100px;background:var(--g1);border:1px solid var(--line);border-radius:24px;padding:36px;text-align:center}
.ri-res .eyebrow{justify-content:center}
.gauge{position:relative;width:200px;margin:0 auto 10px}
.gauge svg{transform:rotate(-90deg)}
.g-bg{stroke:var(--g3);stroke-width:10}
.g-fg{stroke:var(--red);stroke-width:10;stroke-dasharray:326.7;stroke-dashoffset:163;transition:stroke-dashoffset .6s var(--ease)}
.gauge b{position:absolute;inset:0;display:grid;place-items:center;font-family:"Inter",var(--f);font-size:56px;font-weight:900}
.gauge span{position:absolute;bottom:52px;inset-inline:0;font-size:13px;color:var(--mute);font-family:"Inter",var(--f)}
.ri-res h3{font-size:24px;font-weight:900;margin:12px 0 6px}
.ri-res .btn{margin-top:24px}

/* Contact */
.contact{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:start}
.form{background:var(--cream);color:var(--ink);border-radius:24px;padding:40px;display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:grid;gap:8px;font-size:15px}
.form input,.form select,.form textarea{font:inherit;font-size:16px;padding:14px 16px;border-radius:12px;border:1.5px solid #d8cfbd;background:#fff;color:var(--ink);transition:border-color .2s;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--red)}
.form .chk{display:flex;align-items:center;gap:10px;font-size:14px}
.form .chk input{width:20px;height:20px;accent-color:var(--red)}
.form .row{margin-top:6px}
.form .hp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.fmsg{font-size:15px;min-height:1.5em}
.fmsg.ok{color:#0a7a3c}.fmsg.err{color:var(--red)}
.contact-side{border:1px solid var(--line);border-radius:24px;padding:40px}
.reach{list-style:none;display:grid;gap:12px;margin:20px 0}
.reach a{display:inline-flex;align-items:center;gap:10px;color:#cfc8ba}
.reach a:hover{color:var(--cream)}
.reach svg{width:20px;height:20px;color:var(--red)}

/* Footer */
.ftr{border-top:1px solid var(--line);padding-top:70px;background:var(--black)}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:50px}
.ftr h3{font-size:15px;color:var(--mute);margin-bottom:16px;font-weight:700}
.ftr ul{list-style:none;display:grid;gap:10px}
.ftr ul a{color:#cfc8ba}.ftr ul a:hover{color:var(--red)}
.ftr p.muted{max-width:420px;font-size:15px}
.soc{display:flex;gap:10px}
.soc a{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.2s}
.soc a:hover{border-color:var(--red);color:var(--red)}
.soc svg{width:18px;height:18px}
.ftr-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-block:24px;font-size:13px;color:#8a8478}

/* 404 */
.nf{min-height:100vh;display:grid;place-items:center}
.nf .display{font-family:"Inter",var(--f);color:var(--red);margin-top:30px}

/* Reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* Arabic: no letter-spacing ever */
[lang=ar],html[lang=ar] .display,html[lang=ar] .h2,html[lang=ar] .eyebrow,.logo-ar,.pkg-ar{letter-spacing:0!important}

/* Responsive */
@media (max-width:980px){
  .hero-grid,.split,.ri,.contact{grid-template-columns:1fr}
  .radar-box{order:-1}
  .c3{grid-template-columns:1fr 1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}.ftr-grid>div:first-child{grid-column:1/-1}
  .ri-res{position:static}
}
@media (max-width:860px){
  .burger{display:flex}.hide-m{display:none}
  .nav{position:fixed;inset:76px 0 auto;flex-direction:column;gap:0;background:var(--black);border-bottom:1px solid var(--line);padding:10px 24px 24px;transform:translateY(-120%);transition:transform .4s var(--ease);margin:0}
  .nav.open{transform:none}
  .nav a{padding:16px 0;font-size:18px;border-bottom:1px solid var(--line)}
  .nav a[aria-current]::after{display:none}
  .nav a[aria-current]{color:var(--red)}
}
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .sec{padding:72px 0}.hero{padding:40px 0 80px}
  .c3,.kpis,.f2,.ftr-grid{grid-template-columns:1fr}
  .steps li{flex-wrap:wrap;gap:16px;padding:22px}.gate{margin-inline-start:0}
  .ri-row{grid-template-columns:1fr 40px}.ri-row input{grid-column:1/-1;grid-row:2}
  .form,.contact-side{padding:26px}
  .blip{font-size:10px;padding:4px 9px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ===================== V2 — Radar experience ===================== */
.progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),#ff4757);transform:scaleX(var(--sp,0));transform-origin:left}
html[dir=rtl] .progress i{transform-origin:right}
.p-home .hdr{background:rgba(0,0,0,.35)}
.hx{position:relative;min-height:calc(100svh - 76px);display:grid;align-items:center;overflow:hidden;isolation:isolate}
#radar{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hx-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.85) 35%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.6) 100%)}
html[dir=rtl] .hx-veil{background:linear-gradient(270deg,#000 0%,rgba(0,0,0,.85) 35%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.6) 100%)}
.hx-in{padding-block:80px 140px;width:100%}
.hx-h{max-width:820px}
.live{font-family:"Inter",var(--f);font-size:10px;letter-spacing:.2em;background:var(--red);color:#fff;padding:3px 8px;border-radius:4px}
.eyebrow:has(.live)::before{display:none}
.arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateY(3px)}
.feed{position:absolute;bottom:40px;inset-inline-end:24px;width:300px;background:rgba(10,10,10,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:16px 18px;font-size:13px}
.feed-h{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:12px;margin-bottom:8px}
.feed-h i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2);animation:pulse 1.6s infinite}
#feed{list-style:none;display:grid;gap:6px;height:120px;overflow:hidden;mask-image:linear-gradient(#000 70%,transparent)}
#feed li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);animation:feedIn .5s var(--ease)}
#feed li b{font-family:"Inter",var(--f);font-size:11px;color:#fff;background:var(--red);border-radius:5px;padding:0 7px;line-height:20px}
#feed li b.gB{background:#7d0a12}#feed li b.gC{background:#3a3a3a}
@keyframes feedIn{from{opacity:0;transform:translateY(-10px)}}
.hx-scroll{position:absolute;bottom:28px;inset-inline-start:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
html[dir=rtl] .hx-scroll{transform:translateX(50%)}
.hx-scroll i{width:22px;height:36px;border:1.5px solid var(--mute);border-radius:12px;position:relative}
.hx-scroll i::after{content:"";position:absolute;top:6px;left:50%;width:3px;height:7px;margin-left:-1.5px;background:var(--red);border-radius:2px;animation:wheel 1.6s infinite}
@keyframes wheel{to{transform:translateY(12px);opacity:0}}

.marq{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;background:var(--g1)}
.marq-t{display:flex;gap:56px;width:max-content;animation:marq 38s linear infinite}
html[dir=rtl] .marq-t{animation-name:marqR}
.marq span{font-size:22px;font-weight:900;white-space:nowrap;display:flex;align-items:center;gap:56px;color:#d8d1c3}
.marq span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes marqR{to{transform:translateX(50%)}}

/* Scanner */
.scan-head{max-width:720px;margin-bottom:40px}
.scan-head .lead{margin-top:-18px}
.scan{position:relative;background:radial-gradient(700px 300px at 50% -20%,rgba(208,16,30,.18),transparent 70%),var(--g1);border:1px solid var(--line);border-radius:28px;padding:44px;min-height:420px;overflow:hidden}
.scan::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;opacity:.35;pointer-events:none;mask-image:radial-gradient(ellipse at top,#000,transparent 70%)}
.scan-dots{position:relative;list-style:none;display:flex;gap:10px;margin-bottom:30px}
.scan-dots li{font-family:"Inter",var(--f);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--g3);color:var(--mute);font-size:13px;transition:.3s}
.scan-dots li.on{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 0 18px rgba(208,16,30,.6)}
.scan-dots li.done{border-color:var(--red);color:var(--red)}
.pane{position:relative;display:none}
.pane.on{display:block;animation:paneIn .5s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(16px)}}
.pane h3{font-size:clamp(22px,2.6vw,32px);font-weight:900;margin-bottom:24px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opt{font:inherit;font-size:17px;text-align:start;color:var(--cream);background:rgba(0,0,0,.5);border:1px solid var(--g3);border-radius:16px;padding:22px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .25s,transform .25s var(--ease),background .25s}
.opt::after{content:"";position:absolute;inset:0;background:radial-gradient(200px 80px at var(--mx,50%) var(--my,50%),rgba(208,16,30,.35),transparent 70%);opacity:0;transition:opacity .25s}
.opt:hover{border-color:var(--red);transform:translateY(-3px)}
.opt:hover::after{opacity:1}
.opt.sel{background:var(--red);border-color:var(--red)}
.scanning{display:grid;justify-items:center;gap:20px;padding:30px 0;text-align:center}
.mini-radar{width:140px;height:140px;border-radius:50%;border:1px solid var(--g3);position:relative;background:repeating-radial-gradient(circle,transparent 0 22px,var(--line) 22px 23px)}
.mini-radar i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(208,16,30,.7),transparent 70deg);animation:spin 1.2s linear infinite}
#scanmsg{font-family:"Inter",var(--f);font-size:15px;color:#cfc8ba;min-height:1.6em}
.bar{width:min(360px,80%);height:4px;background:var(--g3);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--red);transition:width .35s linear}
.result{animation:paneIn .6s var(--ease)}
.res-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px;margin-top:6px}
.res-card{background:rgba(0,0,0,.55);border:1px solid var(--line);border-radius:18px;padding:24px}
.res-card small{display:block;color:var(--mute);font-size:13px;margin-bottom:10px}
.res-card.big{border-color:rgba(208,16,30,.6);background:linear-gradient(160deg,rgba(208,16,30,.25),rgba(0,0,0,.6))}
.res-card.big b{display:block;font-size:44px;font-weight:950;line-height:1.1;margin-bottom:8px}
.res-card p{color:#cfc8ba;font-size:15px}
.res-card ul{list-style:none;display:grid;gap:8px}
.res-card li{display:flex;align-items:center;gap:10px}
.res-card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}

/* Grades 4 */
.grades4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g4{background:var(--g1);border:1px solid var(--line);border-radius:20px;padding:30px 24px;display:grid;gap:18px;transition:transform .2s ease-out,border-color .3s;transform-style:preserve-3d}
.g4 b{font-family:"Inter",var(--f);font-weight:900;font-size:46px;width:72px;height:72px;display:grid;place-items:center;border-radius:16px;color:#fff}
.g4:hover{border-color:rgba(208,16,30,.6)}
.g4 span{font-size:18px}

/* Proof */
.proof{border-top:1px solid var(--line);padding:80px 0}
.center-e{display:flex;justify-content:center}
.proof-row{display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap;text-align:center}
.proof-row div{display:grid}
.proof-row b{font-size:clamp(34px,5vw,64px);font-weight:950;line-height:1.1}
.proof-row span{color:var(--mute);font-size:18px}
.proof-row .sep{font-style:normal;color:var(--red);font-size:30px;font-family:"Inter",var(--f)}
html[dir=rtl] .proof-row .sep{transform:scaleX(-1)}

@media (max-width:980px){.opts{grid-template-columns:1fr 1fr}.res-grid{grid-template-columns:1fr}.grades4{grid-template-columns:1fr 1fr}.feed{display:none}}
@media (max-width:640px){.scan{padding:24px;border-radius:20px}.opt{padding:16px;font-size:15px}.hx-in{padding-block:50px 120px}.hx-veil{background:rgba(0,0,0,.72)!important}.proof-row .sep{display:none}.proof-row{gap:24px}}
[hidden]{display:none!important}
.btn-ghost{background:transparent;font:inherit}
html[lang=en] .hx-h{font-size:clamp(40px,5.4vw,78px)}
html[lang=en] .logo{align-items:flex-start}
/* R-Mohammed has a compact x-height: scale Arabic text up slightly */
html[lang=ar] body{font-size:17.5px}
html[lang=ar] .nav a{font-size:16.5px}
html[lang=ar] .lead{font-size:clamp(19px,1.8vw,23px)}
html[lang=ar] .eyebrow,html[lang=ar] .feed,html[lang=ar] .hx-scroll{font-size:14.5px}
html[lang=ar] .btn{font-size:17px}
/* Official logo */
.hdr-logo{display:flex;align-items:center;gap:10px}
.emb{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#000;box-shadow:0 0 0 1px var(--line)}
.logo-full{display:inline-grid;justify-items:center;gap:2px}
.logo-full img{width:150px;height:150px;object-fit:contain}
.logo-full b{font-family:"Inter",var(--f);font-weight:900;font-size:18px;letter-spacing:.2em;margin-top:-14px}
.logo-full b i{color:var(--red);font-style:normal}
.ftr .logo-full{justify-items:start}
html[dir=rtl] .ftr .logo-full{justify-items:start}
.contact-side .logo-full,.nf .logo-full{justify-items:center}
.contact-side{text-align:center}
.contact-side .reach{justify-items:center}
/* Story */
.story{position:relative;min-height:88vh;display:grid;align-items:center;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.story-img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;object-position:60% 40%;z-index:-2;transform:translateY(var(--py,0));will-change:transform}
.story-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.92) 66%,#000 100%)}
.story-in{display:block}
.story-in>*{max-width:520px;margin-left:auto;margin-right:0}
.story-pts{list-style:none;display:grid;gap:12px;margin-top:30px}
.story-pts li{display:flex;align-items:center;gap:12px;font-size:19px}
.story-pts li::before{content:"";width:28px;height:2px;background:var(--red)}
@media (max-width:700px){.story{min-height:auto;padding:300px 0 70px}.story-img{height:60%;inset:0 0 auto}.story-veil{background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 30%,#000 58%)!important}.story-in>*{margin-inline:0}}
.story-in{width:100%}
.story-in .eyebrow{display:flex;width:fit-content}