/* مناسب لي — design v10: alive. Drifting mesh, cycling job title, an application network that lights up Saudi cities,
   a slow marquee, tilt on cards, a cursor-lit dropzone. Everything degrades to a static final state under reduced motion.
   Nothing under 12px; body 16px+; every text ≥ 4.5:1; SVG icons only. */

:root {
  --bg: #ffffff;
  --bg-alt: #f4f4f0;
  --paper: #ffffff;
  --green: #0b4938;          /* forest green: primary links and buttons */
  --green-2: #12634c;
  --green-bg: #f3f8cf;
  --green-line: #cfe07a;
  --lime: #D7F04A;           /* brand lime: primary CTA and highlights */
  --deep: #082f26;
  --deep-2: #0c3b2e;
  --deep-line: rgba(255,255,255,.12);
  --deep-card: rgba(255,255,255,.05);
  --on-deep: #f5f5f2;
  --on-deep-muted: #b9b9b2;  /* ≥ 7:1 on deep */
  --ink: #161616;
  --muted: #66665f;          /* 5.3:1 on white */
  --line: #e4e4de;
  --line-2: #cfcfc6;
  --amber-bg: #fbf3e0; --amber-ink: #6f5320;
  --ring: #0b4938;
  --r: 6px; --r-lg: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.10);
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px;
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-10: 80px;
  --ease: 160ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif; font-size: var(--fs-16); line-height: 1.7; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a, button, label[for], summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--lime); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; font-weight: 700; line-height: 1.35; }
ul, ol { padding: 0; list-style: none; }
.i { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i.sm { width: 16px; height: 16px; } .i.lg { width: 26px; height: 26px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; background: var(--deep); color: #fff; padding: 12px 18px; border-radius: var(--r); z-index: 100; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.wrap.narrow { width: min(760px, calc(100% - 48px)); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: var(--fs-14); font-weight: 600; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 10px; border-radius: var(--r); font-size: var(--fs-14); font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.tag.green { background: var(--green-bg); color: var(--green); border-color: var(--green-line); }
.tag.dark { background: rgba(215,240,74,.10); color: var(--lime); border-color: rgba(215,240,74,.25); }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- header (static, white) ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.topbar .bar { width: min(1160px, calc(100% - 48px)); margin-inline: auto; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 21px; line-height: 1; font-weight: 700; white-space: nowrap; }
.brand img { height: 38px; width: 38px; object-fit: contain; }
.brand b { color: var(--green); }
.nav { display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 500; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r); transition: color var(--ease), background-color var(--ease); }
.nav a:hover { color: var(--green); background: var(--bg-alt); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; }
/* Header labels never break onto two lines; space is made by hiding the tag, then collapsing the menu (owner, 2026-10-17). */
.nav a, .nav-login, .topbar .button, .topbar .lang-switch { white-space: nowrap; }
/* The menu repeats the top actions (sign in / my account, upload) for the collapsed menu; on desktop they sit beside it, so hide the copies. */
.nav > a[href="/Account/Login"], .nav > a[href="/User/Dashboard"], .nav > .button { display: none; }

/* ---------- buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 20px; border-radius: var(--r); border: 1px solid var(--green); background: var(--green); color: #fff; font: inherit; font-weight: 600; font-size: 15px; white-space: nowrap; transition: background-color var(--ease), border-color var(--ease), color var(--ease); }
.button:hover { background: var(--green-2); border-color: var(--green-2); }
.button.small { min-height: 40px; padding: 6px 14px; font-size: var(--fs-14); }
.button.big { min-height: 54px; padding: 12px 26px; font-size: var(--fs-16); }
.button.lime { background: var(--lime); border-color: var(--lime); color: #121212; }
.button.ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.button.ghost:hover { background: var(--bg-alt); }
.button.white { background: #fff; color: var(--deep); border-color: #fff; }
.button.white:hover { background: #e6efe9; border-color: #e6efe9; }
.button[disabled] { background: #e3e8e5; border-color: #e3e8e5; color: #7b877f; cursor: not-allowed; }
.button.busy { position: relative; color: transparent; }
.button.busy::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(0,0,0,.15); border-top-color: #121212; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--green); }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- hero: alive. drifting mesh, cycling job title, application network ---------- */
.hero { position: relative; isolation: isolate; background: var(--deep); color: var(--on-deep); overflow: hidden; }
.mesh { position: absolute; inset: -20%; z-index: -2; filter: blur(70px); opacity: .9; pointer-events: none; }
.mesh i { position: absolute; border-radius: 50%; will-change: transform; }
.mesh i:nth-child(1) { width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; right: -10%; top: -20%; background: radial-gradient(circle, rgba(215,240,74,.20), transparent 62%); animation: drift1 26s ease-in-out infinite alternate; }
.mesh i:nth-child(2) { width: 46vw; height: 46vw; max-width: 700px; max-height: 700px; left: -8%; bottom: -25%; background: radial-gradient(circle, rgba(255,181,71,.12), transparent 62%); animation: drift2 32s ease-in-out infinite alternate; }
.mesh i:nth-child(3) { width: 36vw; height: 36vw; max-width: 520px; max-height: 520px; left: 30%; top: 10%; background: radial-gradient(circle, rgba(255,255,255,.06), transparent 62%); animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-12%, 14%) scale(1.15); } }
@keyframes drift2 { to { transform: translate(16%, -12%) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-18%, 18%) scale(.9); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.4px); background-size: 28px 28px; opacity: .35; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 100%); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-6); padding-block: var(--s-8) var(--s-8); min-height: 680px; }
/* Sized so each of the three designed lines stays on one line in the half-width column (owner, 2026-10-17: 60px split them into five). */
.hero h1 { font-size: clamp(34px, 3.5vw, 50px); line-height: 1.28; font-weight: 700; margin: var(--s-3) 0 var(--s-2); letter-spacing: -.4px; text-wrap: balance; }
/* English lines are longer: the first two flow together (balanced), the cycling job title keeps its own line. */
html[lang="en"] .hero h1 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -.6px; }
html[lang="en"] .hero h1 br:first-of-type { display: none; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero h1 .rot { display: inline-grid; vertical-align: bottom; position: relative; color: var(--lime); }
.hero h1 .rot > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.hero h1 .rot > span.on { opacity: 1; transform: none; }
.hero h1 .rot > span.off { opacity: 0; transform: translateY(-14px); }
.hero .lead { color: var(--on-deep-muted); font-size: var(--fs-18); line-height: 1.85; max-width: 560px; }
.hero .lead strong { color: var(--on-deep); font-weight: 600; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.hero .fine { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--s-2); color: var(--on-deep-muted); font-size: var(--fs-14); font-weight: 500; }
.hero .fine span { display: inline-flex; align-items: center; gap: 6px; }
.hero .fine .i { color: var(--lime); }
.counter { display: inline-flex; align-items: baseline; gap: 10px; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--deep-line); }
.counter b { font-size: clamp(34px, 3.4vw, 46px); line-height: 1; font-variant-numeric: tabular-nums; }
.counter span { color: var(--on-deep-muted); }
/* The number and its label stay on one line (owner, 2026-10-17); phones get a smaller number and label instead of a second line. */
.counter { flex-wrap: nowrap; max-width: 100%; }
.counter b, .counter > span:last-child { white-space: nowrap; }
.counter > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .counter { gap: 8px; } .counter b { font-size: 28px; } .counter > span:last-child { font-size: 13px; } }
@media (max-width: 360px) { .counter b { font-size: 24px; } .counter > span:last-child { font-size: 12px; } }
.counter .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); align-self: center; box-shadow: 0 0 0 0 rgba(215,240,74,.5); animation: ping 2s ease-out infinite; }
@keyframes ping { 100% { box-shadow: 0 0 0 10px rgba(215,240,74,0); } }

/* application network */
.net-wrap { position: relative; aspect-ratio: 1 / .92; max-width: 600px; margin-inline: auto; width: 100%; }
.net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net .edge { stroke: rgba(255,255,255,.14); stroke-width: 1.5; fill: none; }
.net .pulse { stroke: var(--lime); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 26 400; stroke-dashoffset: 426; opacity: 0; }
.net .pulse.go { opacity: 1; animation: travel 1.2s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes travel { from { stroke-dashoffset: 426; } to { stroke-dashoffset: 0; } }
.net .node { fill: #0f2c21; stroke: rgba(255,255,255,.35); stroke-width: 1.5; transition: fill .3s ease, stroke .3s ease; }
.net .ring { fill: none; stroke: var(--lime); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.net g.on .node { fill: var(--lime); stroke: var(--lime); }
.net g.on .ring { animation: ripple 1.2s ease-out forwards; }
@keyframes ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.net .label { fill: #dfe9e3; font-size: 13px; font-weight: 600; font-family: inherit; }
.net g.on .label { fill: #fff; }
.net .core { fill: #fff; }
.net .core-ring { fill: none; stroke: rgba(215,240,74,.5); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .4; } }
.net .core-label { fill: #071a13; font-size: 12px; font-weight: 700; font-family: inherit; }
.chip { position: absolute; transform: translate(-50%, 0) scale(.85); opacity: 0; background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; box-shadow: 0 16px 40px rgba(0,0,0,.35); display: flex; align-items: center; gap: 8px; white-space: nowrap; pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.2,.3,1); }
.chip.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.chip .ok { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.chip small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.chip.amber .ok { background: #d9a441; color: #1f1a0c; }
.net-foot { position: absolute; bottom: -6px; inset-inline: 0; display: flex; justify-content: center; gap: 18px; font-size: var(--fs-14); color: var(--on-deep-muted); }
.net-foot b { color: #fff; font-variant-numeric: tabular-nums; }

/* marquee band */
.marquee { background: var(--deep-2); color: #cfe0d5; border-top: 1px solid var(--deep-line); border-bottom: 1px solid var(--deep-line); overflow: hidden; padding: 12px 0; font-size: var(--fs-14); font-weight: 600; }
.marquee .track { display: flex; gap: 40px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.marquee .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
@keyframes slide { to { transform: translateX(50%); } }

/* upload band */
.upload-band { background: linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%); border-bottom: 1px solid var(--line); }
.upload-heading { padding-top: var(--s-8); text-align: center; }
.upload-heading h2 { color: var(--deep); font-size: clamp(30px, 4vw, 44px); }
.upload-heading h2 span { display: inline-block; padding: 8px 24px 12px; background: var(--lime); border-radius: var(--r-lg); }
.upload-heading p { margin-top: var(--s-2); color: var(--green); font-size: var(--fs-18); }
.upload-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s-6); align-items: center; padding-block: var(--s-4) var(--s-8); }
.upload-copy h3 { font-size: clamp(28px, 3.2vw, 40px); margin: 6px 0 var(--s-2); }
.upload-band .try { border: 2px solid var(--green-line); }
.upload-copy p { color: var(--muted); font-size: var(--fs-18); max-width: 480px; }
.upload-copy ul { display: grid; gap: 10px; margin-top: var(--s-3); }
.upload-copy li { display: flex; align-items: center; gap: 10px; }
.upload-copy li .i { color: var(--green); }
.try { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: var(--s-4); box-shadow: var(--shadow); display: grid; gap: var(--s-2); transform-style: preserve-3d; }
.try h3 { font-size: var(--fs-20); }
.drop { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 260px; border: 2px dashed var(--line-2); border-radius: 12px; background: var(--bg-alt); padding: var(--s-4) var(--s-3); text-align: center; overflow: hidden; transition: border-color var(--ease), background-color var(--ease), transform var(--ease); }
.drop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(18,18,18,.12), transparent 40%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.drop:hover::after, .drop.over::after { opacity: 1; }
.drop:hover, .drop:focus-within { border-color: var(--green); }
.drop.over { border-style: solid; border-color: var(--green); background: var(--green-bg); transform: scale(1.01); }
.drop .ico { width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--green); display: grid; place-items: center; margin-bottom: 6px; transition: transform var(--ease); }
.drop:hover .ico, .drop.over .ico { transform: translateY(-4px); }
.drop .ico .i { width: 30px; height: 30px; }
.drop strong { font-size: var(--fs-18); font-weight: 600; }
.drop strong u { color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.drop small { color: var(--muted); font-size: var(--fs-14); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.drop .chosen { display: none; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; text-align: start; }
.drop .chosen .tick { width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: 0 0 auto; animation: pop .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.drop .chosen small { display: block; color: var(--muted); font-weight: 500; }
.drop.has-file { border-style: solid; border-color: var(--green-line); background: var(--green-bg); }
.drop.has-file .hint, .drop.has-file .ico { display: none; }
.drop.has-file .chosen { display: flex; }
.progress { display: none; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--green); transition: width 1.2s ease; }
.try.busy .progress { display: block; }
.try .helper { color: var(--muted); font-size: var(--fs-14); min-height: 22px; text-align: center; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px var(--s-2); color: var(--muted); font-size: var(--fs-14); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust .i { color: var(--green); }
.button.pulse { animation: glow 1.6s ease-in-out 2; }
@keyframes glow { 50% { box-shadow: 0 0 0 12px rgba(18,18,18,0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(18,18,18,.45); } }

/* tilt on cards */
.tilt { transition: transform .25s ease, box-shadow .25s ease; transform-style: preserve-3d; will-change: transform; }
.tilt:hover { box-shadow: 0 24px 50px rgba(23,35,29,.12); }

/* ---------- sections ---------- */
.section { padding-block: var(--s-10); }
.section.alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.title { max-width: 680px; margin: 0 auto var(--s-5); text-align: center; }
.title h2 { font-size: clamp(26px, 3vw, 36px); margin: 6px 0; }
.title p { color: var(--muted); font-size: var(--fs-18); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.steps li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); display: grid; gap: 10px; align-content: start; position: relative; }
.steps .n { position: absolute; top: var(--s-3); inset-inline-end: var(--s-3); color: var(--line-2); font-size: var(--fs-28); font-weight: 700; line-height: 1; }
.steps .ico { width: 48px; height: 48px; border-radius: var(--r); background: var(--green-bg); color: var(--green); display: grid; place-items: center; }
.steps h3 { font-size: var(--fs-20); }
.steps p { color: var(--muted); }
.steps .time { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: var(--fs-14); font-weight: 600; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.card h3 { font-size: var(--fs-24); }
.card > p { color: var(--muted); }
.visual { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-2); display: grid; gap: 10px; }
.cv { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.cv .doc { width: 34px; height: 42px; border-radius: 3px; border: 2px solid var(--line-2); position: relative; background: #fff; flex: 0 0 auto; }
.cv .doc::before, .cv .doc::after { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--line-2); }
.cv .doc::before { top: 8px; } .cv .doc::after { top: 17px; width: 55%; }
.cv .doc.on { border-color: var(--green); } .cv .doc.on::before, .cv .doc.on::after { background: var(--green); }
.cv .who { flex: 1; min-width: 0; }
.cv .who b { display: block; font-weight: 600; } .cv .who small { color: var(--muted); }
.meter { position: relative; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; flex: 1 1 40px; min-width: 0; }
.meter i { position: absolute; inset: 0; width: var(--w, 0%); background: var(--green); transition: width 1s ease; }
.meter.low i { background: var(--line-2); }
.match { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--green); background: var(--green-bg); border-radius: var(--r); padding: 4px 8px; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-14); }
.match.low { color: var(--muted); background: var(--bg-alt); border: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: inherit; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: var(--r); background: #fff; border: 1px solid var(--line-2); font-size: var(--fs-14); font-weight: 500; color: var(--ink); transition: background-color var(--ease), border-color var(--ease), color var(--ease); }
.chips button:hover { border-color: var(--green); }
.chips button[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }
.pick-result { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.pick-result b { font-size: var(--fs-24); color: var(--green); font-variant-numeric: tabular-nums; }
.visual .note { color: var(--muted); font-size: var(--fs-12); }

.faq { display: grid; gap: 8px; max-width: 760px; margin-inline: auto; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 14px var(--s-3); font-weight: 600; font-size: var(--fs-18); min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--green); transition: transform var(--ease); flex: 0 0 auto; }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq details p { padding: 0 var(--s-3) 18px; color: var(--muted); }

.cta { background: var(--deep); color: #fff; border-radius: var(--r-lg); text-align: center; padding: var(--s-8) var(--s-3); position: relative; overflow: hidden; isolation: isolate; }
.cta::after { content: ""; position: absolute; z-index: -1; width: 600px; height: 600px; left: -240px; bottom: -400px; border-radius: 50%; background: radial-gradient(circle, rgba(215,240,74,.18), transparent 60%); }
.cta h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: var(--s-2); }
.cta h2 em { font-style: normal; color: var(--lime); }
.cta p { color: var(--on-deep-muted); font-size: var(--fs-18); margin-bottom: var(--s-3); }
.cta small { display: block; color: var(--on-deep-muted); margin-top: var(--s-2); }

/* ---------- footer (full width, one colour) ---------- */
.footer { background: var(--deep); color: #dfe7e2; margin-top: var(--s-10); }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-5); padding: var(--s-8) 0 var(--s-5); }
.footer .brand { color: #fff; }
.footer .brand b { color: var(--lime); }
.footer .about { color: var(--on-deep-muted); margin-top: var(--s-2); max-width: 320px; }
.footer h4 { margin: 0 0 var(--s-2); font-size: var(--fs-16); color: #fff; }
.footer .links { display: grid; gap: 2px; }
.footer .links a { display: inline-flex; align-items: center; min-height: 40px; color: #c9d6cf; transition: color var(--ease); }
.footer .links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.social { display: flex; gap: 10px; margin-top: var(--s-2); }
.social a { width: 42px; height: 42px; border-radius: var(--r); border: 1px solid var(--deep-line); display: grid; place-items: center; color: #fff; transition: background-color var(--ease); }
.social a:hover { background: rgba(255,255,255,.08); }
.verify { display: grid; gap: 12px; }
.verify .badge { display: flex; align-items: center; gap: 14px; background: var(--deep-card); border: 1px solid var(--deep-line); border-radius: var(--r-lg); padding: 12px 14px; min-height: 68px; }
.verify .badge img { height: 38px; width: auto; max-width: 150px; }
.verify .badge b { display: block; font-size: var(--fs-14); color: #fff; }
.verify .badge small { color: var(--on-deep-muted); font-size: var(--fs-12); }
.verify .business-registration { flex-direction: column; align-items: flex-start; }
.verify .registration-details { display: grid; gap: 6px; min-width: 0; }
.verify .registration-number { color: #fff; font-size: var(--fs-16); font-weight: 700; font-variant-numeric: tabular-nums; justify-self: start; }
.footer .legal { border-top: 1px solid var(--deep-line); padding: var(--s-3) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px var(--s-3); color: var(--on-deep-muted); font-size: var(--fs-14); }
.footer .legal a:hover { color: #fff; }

/* inner pages */
.page { padding: var(--s-8) 0; }
.page.wrap.narrow {
  width: min(880px, calc(100% - 48px));
  margin-block: var(--s-6) var(--s-8);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line-2);
  border-top: 4px solid var(--lime);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: 0 8px 32px rgba(0,0,0,.04);
  overflow-wrap: anywhere;
}
.page h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--s-2); }
.page h2 { font-size: var(--fs-24); margin: var(--s-4) 0 var(--s-1); }
.page p, .page li { color: var(--muted); line-height: 1.9; }
.page p + p { margin-top: var(--s-2); }
.page ul { list-style: disc; padding-inline-start: 22px; display: grid; gap: 6px; }
.page ul.public-jobs { list-style: none; padding: 0; gap: 0; margin: var(--s-3) 0; }
.public-jobs li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.public-jobs a { color: var(--ink); }
.page nav.meta { display: flex; gap: 16px; justify-content: center; }
.page .meta { color: var(--muted); font-size: var(--fs-14); font-weight: 600; }
@media (max-width: 760px) {
  .page.wrap.narrow { width: calc(100% - 32px); margin-block: var(--s-3) var(--s-5); padding: 24px 20px; }
}

/* gentle reveal */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].in { opacity: 1; transform: none; }

/* shrink guards */
.hero-grid > *, .duo > *, .steps > *, .try > *, .card > *, .visual > *, .facts .wrap > * { min-width: 0; }
.cv .who { min-width: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1240px) { .top-actions .tag { display: none; } }
@media (max-width: 1050px) {
  .nav { font-size: var(--fs-14); } .nav a { padding: 0 8px; }
  .hero-grid { gap: var(--s-5); }
  .hero h1 { font-size: 40px; }
  .facts .wrap { grid-template-columns: 1fr 1fr; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; padding-block: var(--s-6); min-height: 0; }
  .steps, .duo { grid-template-columns: 1fr; }
}
/* Collapsed menu below 960px: the full English header needs about 1,000px, so tablets and small laptops get the menu button too. */
@media (max-width: 960px) {
  .topbar .bar { flex-wrap: wrap; min-height: 62px; row-gap: 0; }
  .top-actions .button, .top-actions .nav-login { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-weight: 600; font-size: var(--fs-14); }
  .nav-toggle .i-close { display: none; }
  .nav-toggle[aria-expanded="true"] .i-close { display: block; }
  .nav-toggle[aria-expanded="true"] .i-menu { display: none; }
  .nav { display: none; order: 3; flex-direction: column; align-items: stretch; width: 100%; padding: var(--s-1) 0 var(--s-2); border-top: 1px solid var(--line); font-size: var(--fs-16); }
  .nav[data-open="true"] { display: flex; }
  .nav a { min-height: 48px; padding: 0 12px; }
  .nav > a[href="/Account/Login"], .nav > a[href="/User/Dashboard"], .nav > .button { display: inline-flex; }
  .nav .button { margin-top: var(--s-1); align-self: flex-start; }
}
@media (max-width: 760px) {
  .wrap, .wrap.narrow, .topbar .bar { width: calc(100% - 32px); }
  .brand { font-size: 20px; } .brand img { width: 34px; height: 34px; }
  .hero h1 { font-size: 34px; }
  .hero .lead { font-size: var(--fs-16); }
  .live { padding: var(--s-2); }
  .button { white-space: normal; text-align: center; }
  .try { padding: var(--s-3); }
  .drop { min-height: 200px; }
  .facts .wrap { grid-template-columns: 1fr; gap: var(--s-2); }
  .section { padding-block: var(--s-6); }
  .card { padding: var(--s-3); }
  .meter { flex-basis: 30px; }
  .cta { padding: var(--s-6) 18px; }
  .footer .cols { grid-template-columns: 1fr; gap: var(--s-4); padding-top: var(--s-6); }
  .footer .legal { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* number spans inside big figures keep the figure's size */
.live-num b > span, .facts b > span { font-size: inherit; color: inherit; }

/* ---------- v10 responsive additions ---------- */
@media (max-width: 1050px) { .hero-grid { gap: var(--s-5); } .upload-grid { gap: var(--s-5); } }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; padding-block: var(--s-6); min-height: 0; } .net-wrap { max-width: 520px; } .chip { font-size: 12px; padding: 6px 10px; } .upload-grid { grid-template-columns: 1fr; padding-block: var(--s-6); } .hero .actions .button { width: 100%; } }
@media (max-width: 760px) { .hero h1 { font-size: 32px; } .hero h1 .rot > span { white-space: normal; } .net-wrap { aspect-ratio: 1 / 1; } .chip small { display: none; } .net-foot { font-size: var(--fs-12); gap: 12px; } .marquee { font-size: var(--fs-12); } .try { padding: var(--s-3); } .drop { min-height: 200px; } }
@media (prefers-reduced-motion: reduce) { .mesh i { animation: none !important; } .marquee .track { animation: none !important; } }

/* ---------- v11: network redesign, chips with match, ad→resume tailoring visual, marquee label ---------- */
.net .orbit { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1; stroke-dasharray: 4 8; }
.net .edge { stroke: rgba(255,255,255,.16); stroke-width: 1.5; }
.net .pulse { stroke: var(--lime); stroke-width: 3; stroke-dasharray: 34 600; stroke-dashoffset: 634; filter: url(#glow); }
@keyframes travel { from { stroke-dashoffset: 634; } to { stroke-dashoffset: 0; } }
.net .halo { fill: rgba(215,240,74,.10); stroke: none; }
.net .node { fill: #2c2c2c; stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.net g.on .node { fill: var(--lime); stroke: #fff; filter: url(#glow); }
.net .label { fill: #e6efe9; font-size: 13px; font-weight: 600; }
.net .core-ring { stroke: rgba(215,240,74,.35); stroke-width: 1.5; stroke-dasharray: 6 6; animation: spin-slow 40s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.net .core { fill: #fff; filter: drop-shadow(0 16px 30px rgba(0,0,0,.45)); }
.net .core-avatar { fill: var(--green-bg); stroke: var(--green-line); }
.net .core-title { fill: #17231d; font-size: 12.5px; font-weight: 700; font-family: inherit; }
.net .core-sub { fill: #5a6661; font-size: 10px; font-weight: 500; font-family: inherit; }
.net .core-line { fill: #dfe6e2; }
.net .core-badge { fill: var(--green); font-size: 10px; font-weight: 700; font-family: inherit; }
.chip { border-radius: 10px; padding: 8px 10px 8px 12px; gap: 10px; }
.chip > span:nth-child(2) { display: block; line-height: 1.25; }
.chip em { font-style: normal; font-weight: 700; color: var(--green); background: var(--green-bg); border-radius: 6px; padding: 3px 7px; font-size: 12px; font-variant-numeric: tabular-nums; }
.chip.amber em { color: var(--amber-ink); background: var(--amber-bg); }
.marquee .lead-label { color: #fff; font-weight: 700; }

/* ad → resume */
.tailor { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: var(--s-3); align-items: stretch; }
.tailor article { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: var(--s-3); display: grid; gap: 12px; align-content: start; }
.tailor .ad-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tailor .ad-head small { color: var(--muted); font-size: var(--fs-14); }
.tailor h3 { font-size: var(--fs-24); }
.tailor .ad-sub { color: var(--muted); font-size: var(--fs-14); margin-top: -4px; }
.kw { display: grid; gap: 8px; }
.kw li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-alt); font-weight: 500; transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.kw li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: 0 0 auto; transition: background-color .3s ease, box-shadow .3s ease; }
.kw li.lit { background: var(--green-bg); border-color: var(--green-line); color: var(--green); transform: translateX(-4px); }
.kw li.lit::before { background: var(--green); box-shadow: 0 0 0 4px rgba(18,18,18,.15); }
.bridge { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: center; min-width: 140px; }
.bridge-line { width: 2px; height: 100%; min-height: 40px; background: repeating-linear-gradient(to bottom, var(--line-2) 0 6px, transparent 6px 12px); }
.bridge-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--deep); color: #fff; font-size: var(--fs-14); font-weight: 600; text-align: center; white-space: normal; max-width: 180px; }
.bridge-badge .i { color: var(--lime); }
.cvx { border-color: var(--green-line) !important; box-shadow: 0 16px 40px rgba(18,18,18,.08); }
.cv-lines { display: grid; gap: 10px; }
.cv-lines p { color: var(--ink); line-height: 1.9; font-size: 15px; }
mark { background: transparent; color: inherit; border-radius: 4px; padding: 1px 4px; box-shadow: inset 0 -2px 0 var(--line-2); transition: background-color .3s ease, box-shadow .3s ease, color .3s ease; }
mark.lit { background: var(--green-bg); color: var(--green); font-weight: 700; box-shadow: inset 0 -2px 0 var(--green); }
.tailor .note { color: var(--muted); font-size: var(--fs-12); }
@media (max-width: 860px) {
  .tailor { grid-template-columns: 1fr; }
  .bridge { grid-template-rows: none; grid-template-columns: 1fr auto 1fr; min-width: 0; }
  .bridge-line { width: 100%; height: 2px; min-height: 0; background: repeating-linear-gradient(to right, var(--line-2) 0 6px, transparent 6px 12px); }
}
.net .core-badge-bg { fill: var(--green-bg); }
.net .core-title { font-size: 13px; }
.net .core-sub { font-size: 10.5px; }

/* ---------- v12: seamless marquee, comparison section ---------- */
.marquee { position: relative; padding: 0; }
.marquee .lead-label { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 24px 0 18px; background: var(--deep-2); color: #fff; font-weight: 700; z-index: 2; box-shadow: 8px 0 24px var(--deep-2); }
.marquee .track { display: flex; width: max-content; padding: 12px 0; animation: slide 60s linear infinite; }
.marquee:hover .track { animation-play-state: running; }
.marquee .set { display: flex; gap: 40px; padding-inline-end: 40px; }
.marquee .set span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
@keyframes slide { to { transform: translateX(50%); } }

.compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.compare > div { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; min-height: 64px; }
.compare > div:nth-last-child(-n+2) { border-bottom: 0; }
.compare .h { background: var(--bg-alt); font-weight: 700; color: var(--ink); min-height: 56px; }
.compare .h.us { background: var(--deep); color: #fff; }
.compare .h.us .i { color: var(--lime); }
.compare .old { color: var(--muted); border-inline-end: 1px solid var(--line); }
.compare .old .i { color: #c9536b; }
.compare .us { background: var(--green-bg); color: var(--green); font-weight: 700; }
.compare .us .i { color: var(--green); }
.compare-note { text-align: center; color: var(--muted); font-size: var(--fs-14); margin-top: 12px; }
@media (max-width: 760px) {
  .compare > div { min-height: 56px; padding: 12px; gap: 8px; font-size: var(--fs-14); line-height: 1.5; }
  .compare .h { justify-content: center; text-align: center; }
  .compare > div .i { flex: 0 0 auto; width: 18px; height: 18px; }
}

/* ---------- v13: charcoal + lime identity, wordmark with the «لي» stamp ---------- */
.brand { font-family: 'Almarai', 'IBM Plex Sans Arabic', Tahoma, sans-serif; font-weight: 800; font-size: 24px; gap: 8px; }
.brand .stamp { display: inline-grid; place-items: center; background: var(--lime); color: #121212; border-radius: 8px; padding: 1px 9px 5px; line-height: 1; transform: rotate(-4deg); transition: transform var(--ease); }
.brand:hover .stamp { transform: rotate(0deg); }
.footer .brand { color: #fff; }
.button.lime { color: #121212; }
.button.lime:hover { background: #c9e33c; border-color: #c9e33c; }
.button.white { color: #121212; }
.chip .ok { background: var(--green); color: var(--lime); }
.chip.amber .ok { background: var(--amber-bg); color: var(--amber-ink); }
.net .node { fill: var(--green); stroke: rgba(255,255,255,.5); }
.net .core-badge-bg { fill: var(--lime); }
.net .core-badge { fill: #121212; }
.hero .lead strong { color: var(--lime); }
.compare .h.us { background: var(--lime); color: #121212; }
.compare .h.us .i { color: #121212; }
.compare .us { background: #f8fbdd; color: #121212; }
.compare .old .i { color: #9f302b; width: 24px; height: 24px; stroke-width: 2.5; }
.cvx { border-color: var(--green-line) !important; box-shadow: 0 16px 40px rgba(18,18,18,.08); }
.bridge-badge { background: var(--green); color: #fff; } .bridge-badge .i { color: var(--lime); }
.marquee { color: #d6e5dc; } .marquee .lead-label { background: var(--deep-2); box-shadow: 8px 0 24px var(--deep-2); }
.marquee .dot { background: var(--lime); }
.cta .button.lime { color: #121212; }
.tag.dark { background: rgba(215,240,74,.12); color: var(--lime); border-color: rgba(215,240,74,.28); }
.live-dot, .counter .live-dot { background: var(--lime); }
.upload-band { background: linear-gradient(180deg, #f0f6e9 0%, #f7f9f2 100%); border-top: 1px solid var(--green-line); }
.drop:hover, .drop:focus-within { border-color: var(--green); background: #fbfdec; }
.drop.over { border-color: var(--green); background: var(--green-bg); }
.drop.has-file { border-color: var(--green-line); background: var(--green-bg); }
.drop .chosen .tick { background: var(--green); color: var(--lime); }
.progress i { background: var(--green); }
.button.pulse { animation: glow 1.6s ease-in-out 2; }
@keyframes glow { 50% { box-shadow: 0 0 0 12px rgba(215,240,74,0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(215,240,74,.65); } }
.eyebrow { color: #4a4a44; }
.tag.green { background: var(--green-bg); color: #121212; border-color: var(--green-line); }
.verify .badge { background: rgba(255,255,255,.06); }

/* ---------- v14: employers band + clearer network on every screen ---------- */
.employers { background: #fff; border-bottom: 1px solid var(--line); padding: var(--s-6) 0; }
.employers > .wrap { max-width: 1280px; width: calc(100% - 48px); }
.employers .head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.employers h2 { font-size: var(--fs-20); }
.employers .head small { color: var(--muted); font-size: var(--fs-14); }
.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.logo-grid div { height: 84px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 14px 18px; transition: border-color var(--ease), transform var(--ease); }
.logo-grid div:hover { border-color: var(--line-2); transform: translateY(-2px); }
.logo-grid img { max-height: 36px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .8; transition: filter var(--ease), opacity var(--ease); }
.logo-grid div:hover img { filter: none; opacity: 1; }
@media (max-width: 1050px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .logo-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .logo-grid div { height: 60px; padding: 10px 12px; } .logo-grid img { max-height: 28px; } }

/* network: larger, clearer */
.net-wrap { max-width: 640px; }
.net .label { font-size: 16px; font-weight: 700; }
.net .node { stroke-width: 2; }
.net .core-title { font-size: 15px; }
.net .core-sub { font-size: 11.5px; }
.chip { font-size: 14px; padding: 10px 12px 10px 14px; border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.chip small { font-size: 13px; }
.chip .ok { width: 26px; height: 26px; }
.chip em { font-size: 13px; }
.net-foot { font-size: var(--fs-16); gap: 22px; }
@media (max-width: 860px) {
  .net-wrap { max-width: 560px; aspect-ratio: auto; display: grid; gap: 10px; }
  .net { position: relative; height: auto; aspect-ratio: 600 / 552; }
  .net-wrap .chip { position: static; transform: none; display: none; width: 100%; max-width: 420px; margin: 0 auto; white-space: normal; opacity: 1; }
  .net-wrap .chip.on { display: flex; }
  .net-wrap .chip-slot { min-height: 62px; display: grid; gap: 8px; }
  .net-foot { position: static; justify-content: center; }
}
@media (max-width: 760px) {
  .net .label { font-size: 20px; }
  .net .node { r: 12; }
  .net .halo { r: 24; }
  .net .core-title { font-size: 17px; }
  .net .core-sub { font-size: 13px; }
  .net .city.hide-sm { display: none; }
  .net .edges .hide-sm { display: none; }
  .net-wrap .chip { font-size: 15px; }
  .net-wrap .chip small { font-size: 13px; }
}
.logo-grid .more { display: grid; place-items: center; gap: 0; background: var(--green); color: #fff; border-color: var(--green); text-align: center; line-height: 1.2; }
.logo-grid .more b { font-size: var(--fs-20); color: var(--lime); font-variant-numeric: tabular-nums; }
.logo-grid .more span { font-size: var(--fs-12); color: #cfcfc6; }
.logo-grid img[src*="almarai"], .logo-grid img[src*="acwa"], .logo-grid img[src*="mobily"], .logo-grid img[src*="riyadhair"] { max-height: 52px; }
@media (max-width: 760px) {
  .net-wrap .chip small { display: block; }
  .logo-grid img[src*="almarai"], .logo-grid img[src*="acwa"], .logo-grid img[src*="mobily"], .logo-grid img[src*="riyadhair"] { max-height: 40px; }
  .logo-grid .more b { font-size: var(--fs-18); } .logo-grid .more span { font-size: 11px; white-space: nowrap; }
}
@media (max-width: 760px) { .net { aspect-ratio: 600 / 456; } }
@media (max-width: 760px) { .compare .old .i, .compare .us .i { width: 18px; height: 18px; } }
/* Mobile: one chip at a time in a fixed slot under the network, so the hero height never changes. */
@media (max-width: 860px) {
  .net-wrap { display: block; padding-bottom: 112px; }
  .net-wrap .chip { position: absolute; display: flex; left: 50% !important; top: auto !important; bottom: 38px; width: max-content; max-width: calc(100% - 16px); white-space: nowrap; opacity: 0; transform: translate(-50%, 22px) scale(.96); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
  .net-wrap .chip.on { opacity: 1; transform: translate(-50%, 0) scale(1); z-index: 2; }
  .net-wrap .chip.out { opacity: 0; transform: translate(-50%, -22px) scale(.96); transition-duration: .3s, .4s; }
  .net-wrap .chip > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
  .net-wrap .chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .net-foot { position: absolute; bottom: 0; inset-inline: 0; }
}

/* ---------- reviews: 5-star cards in a slow marquee ---------- */
.reviews { background: var(--bg-alt); border-block: 1px solid var(--line); overflow: hidden; }
.rating-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: -16px 0 28px; color: var(--muted); }
.rating-line b { font-size: var(--fs-20); color: var(--ink); }
.stars { display: inline-flex; gap: 2px; }
.stars .i { fill: #f2b01e; stroke: #f2b01e; width: 18px; height: 18px; }
.stars .i.sm { width: 15px; height: 15px; }
.rv-marquee { overflow: hidden; padding: 6px 0 4px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rv-track { display: flex; width: max-content; animation: rvslide 70s linear infinite; }
.rv-marquee:hover .rv-track, .rv-marquee:focus-within .rv-track { animation-play-state: paused; }
.rv-set { display: flex; gap: 16px; padding-inline-end: 16px; }
@keyframes rvslide { to { transform: translateX(50%); } }
.rv { width: 340px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: grid; gap: 12px; transition: transform var(--ease), box-shadow var(--ease); }
.rv:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv p { color: var(--ink); line-height: 1.8; font-size: 15px; }
.rv footer { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.rv-av { width: 38px; height: 38px; border-radius: 50%; background: var(--green); color: var(--lime); display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.rv footer b { display: block; font-size: var(--fs-14); }
.rv footer small { color: var(--muted); font-size: var(--fs-12); }
@media (max-width: 760px) { .rv { width: 280px; padding: 16px; } .rv-track { animation-duration: 55s; } }
@media (prefers-reduced-motion: reduce) { .rv-track { animation: none; } .rv-marquee { mask-image: none; overflow-x: auto; } }

/* Hero parallax: follow the pointer with a short ease, and glide back (no snap) when it leaves toward the header. */
.hero [data-layer] { transition: transform .16s ease-out; will-change: transform; }
.hero.settle [data-layer] { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .hero [data-layer], .hero.settle [data-layer] { transition: none; } }

/* Header login link (D30): quiet text link next to the upload button; the mobile menu carries it instead. */
.nav-login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r); font-size: var(--fs-14); font-weight: 600; color: var(--ink); transition: color var(--ease), background-color var(--ease); }
.nav-login:hover { color: var(--green); background: var(--bg-alt); }
@media (max-width: 760px) { .top-actions .nav-login { display: none; } }

/* ================= Live card in the hero (owner, 2026-10-05) =================
   Upload at the top of the page; analysis and the personal result run inside the card. White card on the dark hero, charcoal ink,
   lime only for the main action and the "live" signals. Motion is quick and constant but never moves the controls under the finger. */
.lc { position: relative; z-index: 2; width: 100%; max-width: 520px; margin-inline: auto; background: var(--paper); color: var(--ink); border-radius: 22px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.45), 0 0 120px rgba(215,240,74,.10); }
.lc::before { content: ""; position: absolute; inset: -1px; border-radius: 23px; padding: 1px; background: linear-gradient(140deg, rgba(215,240,74,.9), rgba(215,240,74,0) 40%, rgba(215,240,74,0) 60%, rgba(215,240,74,.6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: lc-border 6s linear infinite; background-size: 300% 300%; }
@keyframes lc-border { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.lc > * { min-width: 0; }
.lc[hidden], .lc [hidden] { display: none !important; }
.lc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lc-pill { display: inline-flex; align-items: center; gap: 6px; background: #f3f8cf; color: #3b4a07; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 5px 12px; }
.lc-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #3b4a07; border: 1px solid #dfe9b0; border-radius: 999px; padding: 3px 10px; background: #fff; white-space: nowrap; }
.lc-live i { width: 8px; height: 8px; border-radius: 50%; background: #7fb800; box-shadow: 0 0 0 0 rgba(127,184,0,.6); animation: lc-ping 1.6s ease-out infinite; }
@keyframes lc-ping { 0% { box-shadow: 0 0 0 0 rgba(127,184,0,.55); } 100% { box-shadow: 0 0 0 9px rgba(127,184,0,0); } }
.lc-title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.35; color: var(--ink); text-wrap: balance; }

/* Upload */
.lc-form { display: grid; gap: 10px; }
.lc .drop { position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 14px; border: 2px dashed #cfd6a8; border-radius: 16px; background: linear-gradient(180deg, #fbfdf2, #fff); cursor: pointer; text-align: center; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; overflow: hidden; }
.lc .drop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(215,240,74,.35) 50%, transparent 70%); transform: translateX(-120%); animation: lc-sheen 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes lc-sheen { 0%, 55% { transform: translateX(120%); } 100% { transform: translateX(-120%); } }
.lc .drop:hover, .lc .drop.over { border-color: #121212; background: #f7fbe3; }
.lc .drop .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #121212; color: var(--lime); }
.lc .drop strong { font-size: 16px; }
.lc .drop strong u { text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.lc .drop small { color: var(--muted); }
.lc .drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lc .helper { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.lc .progress { height: 4px; border-radius: 4px; background: #eef0e6; overflow: hidden; }
.lc .progress i { display: block; height: 100%; width: 0; background: #121212; transition: width .3s ease; }

/* Market index: quick constant motion */
.lc-index { border: 1px solid #e3ead0; border-radius: 16px; padding: 12px 14px 10px; background: radial-gradient(120% 120% at 100% 0%, #f7fbe3 0%, #fff 55%); display: grid; gap: 4px; overflow: hidden; }
.lc-index-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.lc-up { color: #3b7a00; font-weight: 700; white-space: nowrap; }
.lc-up b { font-variant-numeric: tabular-nums; }
.lc-index-mid { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lc-num { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.5px; transition: color .3s ease; }
.lc-num.tick { color: #3b7a00; }
.lc-index-mid span { font-size: 13px; color: var(--muted); font-weight: 600; }
.lc-spark { width: 100%; height: 56px; display: block; overflow: visible; }
.lc-line { fill: none; stroke: #121212; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; transition: d .6s ease; }
.lc-area { fill: rgba(215,240,74,.35); stroke: none; transition: d .6s ease; }
.lc-dot { fill: #121212; stroke: var(--lime); stroke-width: 3; transition: cy .6s ease; }
.lc-tick { height: 30px; overflow: hidden; border-top: 1px dashed #e3ead0; margin-top: 2px; }
.lc-tick ul { list-style: none; margin: 0; padding: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.lc-tick li { height: 30px; display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.lc-tick li i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #7fb800; }
.lc-tick li b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lc-tick li span { color: var(--muted); flex: 0 0 auto; }
.lc-tick li span::after { content: " · الآن"; }

/* Analysis */
.lc-scan { display: grid; gap: 12px; animation: lc-in .35s ease both; }
@keyframes lc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-steps li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--muted); transition: color .25s ease; }
.lc-steps li b { font-variant-numeric: tabular-nums; color: #121212; }
.lc-steps .st { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #dfe3d2; flex: 0 0 auto; position: relative; }
.lc-steps li.now { color: #121212; }
.lc-steps li.now .st { border-color: #121212; border-top-color: var(--lime); animation: lc-spin .8s linear infinite; }
.lc-steps li.done { color: #121212; }
.lc-steps li.done .st { border-color: #121212; background: #121212; }
.lc-steps li.done .st::after { content: ""; position: absolute; inset: 5px 4px 6px 5px; border: solid var(--lime); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
@keyframes lc-spin { to { transform: rotate(360deg); } }
.lc-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.lc-logos span { aspect-ratio: 1.6; border: 1px solid #eceee4; border-radius: 10px; display: grid; place-items: center; padding: 6px; background: #fff; filter: grayscale(1); opacity: .45; transition: filter .3s ease, opacity .3s ease, border-color .3s ease, transform .3s ease; }
.lc-logos span.hit { filter: none; opacity: 1; border-color: #121212; transform: translateY(-2px); }
.lc-logos img { max-width: 100%; max-height: 26px; object-fit: contain; }
.lc-bar { height: 8px; border-radius: 8px; background: #eef0e6; overflow: hidden; }
.lc-bar i { display: block; height: 100%; width: 3%; border-radius: 8px; background: linear-gradient(90deg, #121212, #4c5d00 60%, var(--lime)); transition: width .8s ease; }
.lc-fine { margin: 0; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
.lc-fine b { color: #121212; font-variant-numeric: tabular-nums; }
.lc-center { justify-content: center; font-weight: 600; }

/* Result */
.lc-result { display: grid; gap: 10px; animation: lc-in .4s ease both; }
.lc-hello { margin: 0; font-weight: 700; font-size: 15px; }
.lc-hello small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; }
.lc-big { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #f3f8cf, #fbfdf2); border: 1px solid #dfe9b0; border-radius: 16px; padding: 14px 16px; }
.lc-big b { font-size: clamp(40px, 5vw, 54px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.lc-big > span:nth-child(2) { display: grid; flex: 1 1 auto; min-width: 0; }
.lc-big strong { font-size: 16px; }
.lc-big small { color: #3b4a07; font-weight: 600; font-size: 13px; }
.lc-near { margin: 4px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.lc-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-jobs li { display: flex; align-items: center; gap: 10px; border: 1px solid #eceee4; border-radius: 12px; padding: 10px 12px; animation: lc-in .35s ease both; }
.lc-jobs li:nth-child(2) { animation-delay: .08s; } .lc-jobs li:nth-child(3) { animation-delay: .16s; }
.lc-jobs .jx { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: #121212; color: var(--lime); display: grid; place-items: center; font-weight: 800; }
.lc-jobs .jt { display: grid; min-width: 0; }
.lc-jobs .jt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-jobs .jt span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-jobs li.blur { filter: blur(4px); opacity: .7; user-select: none; }
.lc-lock { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed #c9d58a; border-radius: 12px; padding: 11px 12px; color: #3b4a07; font-weight: 700; text-decoration: none; background: #fbfdf2; text-align: center; }
.lc-lock:hover { border-style: solid; }
.lc-cta { width: 100%; }
.lc-fail { display: grid; gap: 10px; text-align: center; }
.lc-fail p { margin: 0; font-weight: 600; }
.lc-trust { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; color: var(--muted); font-size: 12px; }
.lc-trust span { display: inline-flex; align-items: center; gap: 5px; }
.lc-saved { display: grid; gap: 12px; }
.lc[data-state="scan"] .lc-index, .lc[data-state="result"] .lc-index, .lc[data-state="fail"] .lc-index { display: none; }
.lc[data-state="scan"] .lc-title, .lc[data-state="result"] .lc-title { font-size: 20px; }

/* Phones: the card comes right after the headline, before everything else */
@media (max-width: 860px) {
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: 28px 40px; gap: 18px; }
  .hero-copy { display: contents; }
  .hero-copy > .tag { order: 1; align-self: flex-start; }
  .hero-copy > h1 { order: 2; margin: 0; }
  .lc { order: 3; max-width: none; padding: 16px; border-radius: 18px; }
  .hero-copy > .lead { order: 4; margin: 0; }
  .hero-copy > .actions { display: none; }
  .hero-copy > .fine { order: 5; }
  .hero-copy > .counter { order: 6; }
  .lc-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .lc::before, .lc .drop::after, .lc-live i, .lc-steps li.now .st { animation: none; }
  .lc-scan, .lc-result, .lc-jobs li { animation: none; }
}
.lc .drop { min-height: 0; padding: 22px 14px; }
@media (max-width: 860px) { .lc .drop { padding: 16px 12px; } }
/* Live card, round 2 (owner, 2026-10-05): logos and the percentage stay inside the card; what the analysis understood, in the person's facts */
.lc { overflow: hidden; }
.lc-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; }
.lc-logos span { min-width: 0; aspect-ratio: auto; height: 40px; }
.lc-logos img { width: 100%; height: 100%; max-height: 24px; }
.lc-fine { align-items: center; flex-wrap: nowrap; }
.lc-fine span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-fine b { flex: 0 0 auto; direction: ltr; }
.lc-know { display: grid; gap: 8px; border: 1px solid #eceee4; border-radius: 14px; padding: 12px 14px; background: #fcfdf8; }
.lc-know-h { margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .2px; }
.lc-know ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-know li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.lc-know li > .i { flex: 0 0 auto; margin-top: 3px; color: #121212; }
.lc-know li span { display: grid; min-width: 0; }
.lc-know li em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; }
.lc-know li bdi { font-size: 14px; font-weight: 600; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-chips:empty { display: none; }
.lc-chips span { font-size: 12px; font-weight: 700; border: 1px solid #e3e6d6; background: #fff; border-radius: 999px; padding: 3px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-chips .ats { background: #121212; color: var(--lime); border-color: #121212; }
.lc-hello bdi { unicode-bidi: isolate; }
@media (max-width: 860px) { .lc-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lc-again { justify-self: center; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 4px 8px; }
.lc-again:hover { color: #121212; }

/* English (ltr): the track starts at the left edge, so it travels left; +50% would open a gap and jump (owner, 2026-10-16). */
[dir="ltr"] .marquee .track { animation-name: slide-ltr; }
[dir="ltr"] .rv-track { animation-name: rvslide-ltr; }
@keyframes slide-ltr { to { transform: translateX(-50%); } }
@keyframes rvslide-ltr { to { transform: translateX(-50%); } }

/* Members who ask their system for less motion get still strips and no slide-ins (ui-ux-pro-max checklist, owner 2026-10-16). */
@media (prefers-reduced-motion: reduce) {
  .marquee .track, .rv-track { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* «70 سيرة مختلفة، لا 600 نسخة» and the real before/after (D116, competitor study 2026-10-18). */
.volume { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); max-width: 920px; margin-inline: auto; }
.vol { border: 1px solid var(--line); border-radius: 12px; padding: var(--s-4); background: #fff; display: grid; gap: 14px; align-content: start; }
.vol.us { border-color: var(--green-line); background: #f8fbdd; box-shadow: 0 16px 40px rgba(18,18,18,.08); }
.vol-tag { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r); font-size: var(--fs-14); font-weight: 700; background: var(--bg-alt); color: var(--muted); }
.vol.us .vol-tag { background: var(--lime); color: #121212; }
.vol-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vol-num b { font-size: clamp(44px, 6vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.vol.old .vol-num b { color: var(--muted); }
.vol-num span { color: var(--muted); font-weight: 600; }
.vol-sum { font-size: var(--fs-18); font-weight: 700; }
.vol ul { display: grid; gap: 10px; }
.vol li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.vol li .i { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; }
.vol.old li { color: var(--muted); } .vol.old li .i { color: #9f302b; }
.vol.us li .i { color: var(--green); }
/* identical copies vs. sheets that each carry their own highlight */
.sheets { position: relative; height: 72px; }
.sheets i { --hl: transparent; --y: 0px; position: absolute; top: 0; width: 52px; height: 68px; border: 1px solid var(--line-2); border-radius: 6px; background-color: #fff; background-repeat: no-repeat;
  background-image: linear-gradient(var(--hl) 0 0), linear-gradient(var(--line-2) 0 0), linear-gradient(var(--line-2) 0 0), linear-gradient(var(--line-2) 0 0), linear-gradient(var(--line-2) 0 0);
  background-size: 34px 6px, 30px 3px, 24px 3px, 30px 3px, 18px 3px;
  background-position: 8px var(--y), 10px 14px, 10px 26px, 10px 38px, 10px 50px; }
.sheets i:nth-child(1) { inset-inline-start: 0; } .sheets i:nth-child(2) { inset-inline-start: 14px; } .sheets i:nth-child(3) { inset-inline-start: 28px; } .sheets i:nth-child(4) { inset-inline-start: 42px; } .sheets i:nth-child(5) { inset-inline-start: 56px; }
.sheets.diff i { --hl: var(--lime); position: static; display: inline-block; margin-inline-end: 8px; border-color: var(--green-line); }
.sheets.diff i:nth-child(1) { --y: 12px; } .sheets.diff i:nth-child(2) { --y: 36px; } .sheets.diff i:nth-child(3) { --y: 24px; } .sheets.diff i:nth-child(4) { --y: 48px; } .sheets.diff i:nth-child(5) { --y: 12px; }
#why .tailor .ad { align-self: start; }
.ba { display: grid; gap: 12px; }
.ba-row { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; transition: border-color .3s ease, background-color .3s ease; }
.ba-row.lit { border-color: var(--green-line); background: #fbfdee; }
.ba p { display: grid; gap: 2px; margin: 0; }
.ba p > span { font-size: var(--fs-12); font-weight: 700; color: var(--muted); }
.ba q { quotes: none; font-size: 14px; line-height: 1.7; text-align: left; }
.ba-before q { color: var(--muted); }
.ba-after > span { color: var(--green); }
.ba-after q { color: var(--ink); }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.proof > div { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: center; }
.proof b { font-size: var(--fs-20); color: var(--green); font-variant-numeric: tabular-nums; }
.proof span { color: var(--muted); font-size: var(--fs-14); line-height: 1.5; }
@media (max-width: 760px) {
  .volume, .proof { grid-template-columns: 1fr; }
  .vol { padding: var(--s-3); }
  .sheets.diff i { margin-inline-end: 4px; }
}