/* لأجلهم · نظام الواجهات 3.0 — ورق وخيط. ألوان مسطّحة، بلا تدرّجات. */
:root {
  --ink: #171717; --red: #D4152A; --green: #00823B; --cream: #FFF9F1; --sand: #F2E5D4; --gold: #E8B04A; --blue: #78BBD7; --white: #fff;
  --fd: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --fb: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fm: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, Consolas, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --rf: 12px; --rc: 20px; --sh: 0 8px 0 rgba(23, 23, 23, .12);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --m: 20px; --tabs: 64px;
}
@media (min-width: 1024px) { :root { --m: 80px; --tabs: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; min-height: 0; opacity: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.6 var(--fb); padding-bottom: var(--tabs); font-variant-numeric: lining-nums; letter-spacing: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, .num, .stats b { font-family: var(--fd); font-weight: 800; }
h1 { font-size: clamp(30px, 8.4vw, 68px); line-height: 1.15; text-wrap: balance; }
h1 span { display: block; }
@media (min-width: 900px) { h1 { font-size: clamp(44px, 4.6vw, 68px); } }
/* في العربية: مسافة Plex Mono أعرض من حروف Plex Sans Arabic، فنضيّقها */
html[lang="ar"] :is(.meta, .kick, .soon, .seats, .bar, .ribbon, .by, figcaption, .count span, .logo-w small, .logos small) { word-spacing: -.28em; }
html[lang="en"] h1, html[lang="tr"] h1, html[lang="fr"] h1 { letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 4.2vw, 42px); line-height: 1.2; }
h3 { font-size: 24px; font-weight: 700; line-height: 1.3; }
small { font-size: .875em; }
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--m); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.meta, .kick, .soon, .seats, time { font-family: var(--fm); font-weight: 500; font-size: .875rem; line-height: 1.4; }
.kick { color: var(--green); margin-bottom: var(--s2); }
.lead { font-size: 1.2rem; max-width: 46ch; margin-top: var(--s4); }
.soon { display: inline-block; background: var(--sand); border-radius: 99px; padding: 2px 10px; white-space: nowrap; color: var(--ink); }
.ic { flex: none; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.tone-ink :focus-visible, .tone-green :focus-visible, .ft :focus-visible { outline-color: var(--cream); }
.skip { position: absolute; inset-inline-start: var(--s4); top: -80px; z-index: 100; background: var(--ink); color: var(--cream); padding: var(--s3) var(--s5); border-radius: 99px; }
.skip:focus { top: var(--s4); }

/* الأزرار */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border-radius: 99px; border: 2px solid var(--ink); font: 600 1rem/1.2 var(--fb); text-decoration: none; cursor: pointer; background: transparent; color: var(--ink); transition: transform .18s var(--ease), background-color .18s, color .18s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.96); }
.btn-red { background: var(--red); border-color: var(--red); color: var(--white); }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-line:hover { background: var(--ink); color: var(--cream); }
.btn.is-off { border-style: dashed; opacity: .75; cursor: default; transform: none; }
.btn.is-off small { font-family: var(--fm); font-weight: 500; }
.tone-ink .btn-line, .tone-green .btn-line { border-color: var(--cream); color: var(--cream); }
.tone-ink .btn-line:hover, .tone-green .btn-line:hover { background: var(--cream); color: var(--ink); }
.tone-ink .btn-ink, .tone-green .btn-ink { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.lnk { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.lnk::after { content: "→"; margin-inline-start: var(--s2); }
[dir="rtl"] .lnk::after { content: "←"; }

/* الشرائط العليا */
.ribbon { background: var(--gold); text-align: center; padding: var(--s1) var(--m); font-family: var(--fm); font-size: .8rem; }
.bar { background: var(--ink); color: var(--cream); text-align: center; padding: var(--s2) var(--m); font-family: var(--fm); font-size: .875rem; }
.bar .soon { background: var(--cream); }

/* الرأس */
.hd { position: sticky; top: 0; z-index: 40; background: var(--cream); border-bottom: 2px solid var(--sand); }
.util { display: none; justify-content: space-between; align-items: center; font-size: .875rem; }
.util > ul, .langs { display: flex; gap: var(--s1); flex-wrap: wrap; }
.util a, .langs a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s3); text-decoration: none; border-radius: 99px; }
.util a:hover, .langs a:hover { text-decoration: underline; text-underline-offset: 6px; }
.langs a[aria-current] { font-weight: 600; background: var(--sand); }
.nav { display: flex; align-items: center; gap: var(--s4); min-height: 72px; }
.nav nav { display: none; flex: 1; }
.nav > .btn { display: none; }
.logo { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; margin-inline-end: auto; }
.kite.logo { width: 34px; }
.logo img { width: 180px; height: auto; padding-block: var(--s2); } /* الحد الأدنى للشعار الأفقي 180px */
.ft-logo { width: 200px; height: auto; }
.logo-w { display: grid; line-height: 1.05; }
.logo-w b { font: 800 30px/1 var(--fd); }
.logo-w small { font: 500 .7rem/1.4 var(--fm); }
.menu { display: flex; gap: var(--s1); }
.menu > li { position: relative; }
.menu a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s4); border-radius: 99px; text-decoration: none; font-weight: 500; }
.menu a:hover, .menu a[aria-current] { background: var(--sand); }
.sub { position: absolute; inset-inline-start: 0; top: 100%; min-width: 240px; background: var(--white); border-radius: var(--rc); box-shadow: var(--sh); padding: var(--s2); border: 2px solid var(--sand); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.menu-btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s4); border-radius: 99px; border: 2px solid var(--ink); background: transparent; font: 600 1rem var(--fb); color: var(--ink); cursor: pointer; }
@media (min-width: 1024px) {
  .util { display: flex; }
  .nav nav, .nav > .btn { display: flex; }
  .nav .menu-btn { display: none; }
  .logo { margin-inline-end: var(--s5); }
}

/* القائمة المفتوحة */
.drawer { position: fixed; inset: 0; z-index: 60; background: var(--cream); overflow-y: auto; padding-block: var(--s4) var(--s8); }
.drawer[hidden] { display: none; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.drawer-g { display: grid; gap: var(--s5); margin-top: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.dg h2 { font-size: 24px; border-bottom: 3px solid var(--ink); padding-bottom: var(--s2); }
.dg a { display: flex; align-items: center; min-height: 48px; text-decoration: none; font-weight: 500; }
.no-scroll { overflow: hidden; }

/* الأقسام */
.sec { padding-block: var(--s8); position: relative; }
.sec-tight { padding-block: var(--s6); }
.tone-sand { background: var(--sand); }
.tone-ink { background: var(--ink); color: var(--cream); }
.tone-green { background: var(--green); color: var(--white); }
.tone-ink .kick, .tone-green .kick { color: var(--gold); }
.tone-green .kick { color: var(--white); }
.sh { display: flex; gap: var(--s5); align-items: flex-end; justify-content: space-between; margin-bottom: var(--s6); }
.sh-fig { order: 2; flex: none; width: 96px; }
.sec > .wrap > * + * { margin-top: var(--s5); }
.sec > .wrap > .sh + * { margin-top: 0; }
.prose { max-width: 62ch; font-size: 1.1rem; }
/* النسيج: شبكة الكوفية المجرّدة في الأركان بشفافية 8% */
.tex::after { content: ""; position: absolute; inset-inline-end: 0; top: 0; width: min(280px, 40vw); height: 200px; pointer-events: none; opacity: .08; background-image: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 18px), repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 18px); }
.hero, .ft { position: relative; }
.sec > .wrap, .hero > .wrap, .ft > .wrap { position: relative; z-index: 1; }

/* البطل */
.hero { padding-block: var(--s7) var(--s8); overflow: hidden; }
.hero-g { display: grid; gap: var(--s6); align-items: center; }
.hero .meta { margin-top: var(--s4); }
.count { margin-top: var(--s3); min-height: 40px; }
.count span { display: inline-flex; align-items: baseline; gap: var(--s2); font-family: var(--fm); background: var(--ink); color: var(--cream); border-radius: 99px; padding: var(--s1) var(--s4); }
.count b { font: 800 1.5rem/1.2 var(--fd); color: var(--gold); }
.hero-a { justify-self: center; width: min(100%, 520px); }
.hero-a .fig { width: min(60%, 240px); margin-inline: auto; }
.kite.lg { width: 140px; margin-inline: auto; }
@media (max-width: 899px) { .hero:not(.hero-home) .hero-a { display: none; } .hero:not(.hero-home) { padding-block: var(--s6) var(--s7); } }
.kite.sm { width: 44px; }
.kite.xs { width: 11px; }
@media (min-width: 900px) {
  .hero-g { grid-template-columns: 7fr 5fr; gap: var(--s5); }
  .hero-home .hero-g { grid-template-columns: 6fr 6fr; }
}

/* الأرقام */
.stats { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stats li { border-top: 4px solid var(--ink); padding-top: var(--s3); display: grid; }
.stats b { font-size: clamp(44px, 6vw, 68px); line-height: 1; font-variant-numeric: tabular-nums; }
.stats li:nth-child(3n+1) b { color: var(--red); }
.stats li:nth-child(3n+2) b { color: var(--green); }

/* الشبكة والبطاقات */
.grid { display: grid; gap: var(--s5); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.g5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.card { background: var(--white); color: var(--ink); border-radius: var(--rc); box-shadow: var(--sh); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.tone-ink .card, .tone-green .card { box-shadow: 0 8px 0 rgba(255, 249, 241, .22); }
.card .lnk { margin-top: auto; }
.card .meta { color: var(--green); }
.card img { border-radius: var(--rf); }
.num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 22px; line-height: 1; flex: none; font-variant-numeric: tabular-nums; }
.grid .card:nth-child(3n+2) .num { background: var(--blue); }
.grid .card:nth-child(3n) .num { background: var(--sand); }

.stepsl { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); counter-reset: s; }
.stepsl li { display: flex; gap: var(--s3); align-items: flex-start; border-top: 3px solid currentColor; padding-top: var(--s3); }
.ticks { display: grid; gap: var(--s3); max-width: 70ch; }
.ticks li { padding-inline-start: var(--s6); position: relative; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: 14px; height: 14px; background: var(--green); clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); }
.tone-ink .ticks li::before, .tone-green .ticks li::before { background: var(--gold); }
.ticks.no li::before { background: var(--ink); clip-path: none; height: 3px; top: .8em; }
.duo-yes { border-top: 8px solid var(--green); }
.duo-no { border-top: 8px solid var(--ink); background: var(--sand); box-shadow: none; }
.quote { border-inline-start: 8px solid var(--red); padding-inline-start: var(--s5); max-width: 30ch; }
.quote p { font: 700 clamp(26px, 3.4vw, 38px)/1.3 var(--fd); }
.note { display: flex; gap: var(--s3); align-items: flex-start; background: var(--sand); color: var(--ink); border-radius: var(--rc); padding: var(--s4) var(--s5); max-width: 70ch; }
.tone-sand .note { background: var(--cream); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips li { border: 2px solid currentColor; border-radius: 99px; padding: var(--s2) var(--s4); font-weight: 600; }
.chips li:nth-child(5n+1) { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* البرنامج */
.tl { display: grid; gap: var(--s4); max-width: 860px; position: relative; }
.tl::before { content: ""; position: absolute; inset-inline-start: 21px; top: 22px; bottom: 22px; width: 3px; background: var(--ink); }
.tl li { display: flex; gap: var(--s4); align-items: flex-start; position: relative; }
.tl li > div { background: var(--white); border-radius: var(--rc); box-shadow: var(--sh); padding: var(--s4) var(--s5); flex: 1; }
.tl .meta { color: var(--green); }

/* الجداول */
.tbl { overflow-x: auto; border-radius: var(--rc); box-shadow: var(--sh); background: var(--white); }
table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: .95rem; }
caption { text-align: start; padding: var(--s4) var(--s5); font: 700 1.25rem var(--fd); }
th, td { padding: var(--s3) var(--s4); text-align: start; vertical-align: top; border-top: 2px solid var(--sand); }
thead th { background: var(--ink); color: var(--cream); font-weight: 600; border: 0; }
tbody th { font-weight: 600; background: var(--cream); position: sticky; inset-inline-start: 0; }
td { font-variant-numeric: tabular-nums; }

/* الأسئلة */
.faq { max-width: 820px; display: grid; gap: var(--s3); }
.faq details { background: var(--white); border-radius: var(--rc); box-shadow: var(--sh); }
.faq summary { cursor: pointer; padding: var(--s4) var(--s5); font-weight: 600; min-height: 48px; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 800 28px/1 var(--fd); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 var(--s5) var(--s5); }

/* الشعارات: بطاقات بيضاء متساوية */
.logos { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.logos li { background: var(--white); color: var(--ink); border-radius: var(--rc); min-height: 132px; padding: var(--s5); display: grid; place-content: center; text-align: center; gap: var(--s1); box-shadow: var(--sh); }
.logos img { max-height: 72px; margin-inline: auto; }
.logos small { font-family: var(--fm); color: var(--green); }
/* شعارا الجهتين: يظهران كاملين داخل البطاقة البيضاء، بلا قصّ */
.orgs li { min-height: 240px; gap: var(--s2); justify-items: center; }
.orgs img { height: 132px; width: auto; max-width: 100%; max-height: none; object-fit: contain; margin-bottom: var(--s2); }
.ft .orgs li { min-height: 176px; }
.ft .orgs img { height: 92px; }
.card .ticks { gap: var(--s2); margin-top: var(--s2); }
.card .ticks li { padding-inline-start: var(--s5); }
.card .ticks li::before { width: 11px; height: 11px; }

/* المعرض: الإطار الورقي */
.arts { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.art { text-decoration: none; display: grid; gap: var(--s3); }
.frame { display: block; background: var(--white); padding: var(--s3); box-shadow: 8px 8px 0 rgba(23, 23, 23, .12); transform: rotate(-2deg); transition: transform .35s var(--ease); }
.art:nth-child(even) .frame { transform: rotate(3deg); }
.art:hover .frame { transform: rotate(0) translateY(-6px); }
.by, figcaption { font-family: var(--fm); font-size: .875rem; }
.artp { display: grid; gap: var(--s7); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.frame.big { transform: rotate(-2deg); max-width: 560px; }
.empty { background: var(--sand); border-radius: var(--rc); padding: var(--s7) var(--s5); display: grid; justify-items: center; text-align: center; gap: var(--s3); }
.tone-sand .empty { background: var(--cream); }
.empty .fig { width: 120px; }
.empty .btn { margin-top: var(--s3); }

/* النماذج */
.frm-box { background: var(--white); color: var(--ink); border-radius: var(--rc); box-shadow: var(--sh); padding: var(--s5); max-width: 640px; }
.frm { display: grid; gap: var(--s4); }
.fld { display: grid; gap: var(--s1); }
label, legend { font-weight: 600; }
legend { font: 700 24px var(--fd); margin-bottom: var(--s4); }
label small { font-weight: 400; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--white); border: 2px solid rgba(23, 23, 23, .45); border-radius: var(--rf); min-height: 48px; padding: var(--s2) var(--s4); width: 100%; text-align: start; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 3px solid var(--blue); outline-offset: 0; }
[aria-invalid="true"] { border-color: var(--red); }
.err, .frm-fail { color: #A50F20; font-weight: 500; font-size: .95rem; }
.err::before, .frm-fail::before { content: "!"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: var(--white); font: 700 13px var(--fm); margin-inline-end: var(--s2); }
.hint { font-size: .95rem; }
.frm-ok { display: grid; gap: var(--s3); justify-items: start; }
.frm-ok p { font: 700 26px/1.3 var(--fd); }
.frm-ok .kite { animation: rise .5s var(--ease) both; }
.frm.is-busy button[type="submit"]::after { content: ""; width: 14px; height: 21px; background: var(--gold); clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); animation: sway 1.2s ease-in-out infinite; transform-origin: 50% 100%; }
.wall { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.wall-list { display: grid; gap: var(--s4); }
.msg { background: var(--white); color: var(--ink); padding: var(--s4) var(--s5); box-shadow: 8px 8px 0 rgba(23, 23, 23, .12); transform: rotate(-2deg); }
.msg small { display: block; font-family: var(--fm); margin-top: var(--s2); }

/* الحجز: مؤشر التقدّم خيط وطائرة */
.book { max-width: 720px; display: grid; gap: var(--s5); }
.thread { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; font-size: .875rem; font-weight: 600; }
.thread::before { content: ""; position: absolute; inset-inline: 0; top: 13px; height: 3px; background: var(--ink); }
.thread li { display: grid; gap: var(--s2); justify-items: start; position: relative; opacity: .55; }
.thread li.on, .thread li.done { opacity: 1; }
.knot { width: 28px; height: 28px; border-radius: 50%; background: var(--cream); border: 3px solid var(--ink); display: grid; place-items: center; }
.knot .kite { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .35s var(--ease); }
.thread li.on .knot { background: var(--gold); }
.thread li.on .knot .kite { opacity: 1; transform: none; }
.thread li.done .knot { background: var(--ink); }
.book .frm { background: var(--white); border-radius: var(--rc); box-shadow: var(--sh); padding: var(--s5); }
.picks { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-bottom: var(--s4); }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; }
.pick span { display: grid; gap: var(--s1); border: 2px solid rgba(23, 23, 23, .45); border-radius: var(--rc); padding: var(--s4); min-height: 88px; font-weight: 400; }
.pick b { font: 700 22px var(--fd); }
.pick input:checked + span { border-color: var(--ink); background: var(--sand); box-shadow: var(--sh); }
.pick input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.cnt { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-block: var(--s2); border-top: 2px solid var(--sand); font-weight: 600; }
.cnt div { display: flex; align-items: center; gap: var(--s2); }
.cnt button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); font: 700 22px var(--fm); cursor: pointer; color: var(--ink); }
.cnt output { min-width: 36px; text-align: center; font: 800 26px var(--fd); }
.total { font: 800 28px var(--fd); margin-top: var(--s3); }
.seats { background: var(--gold); display: inline-block; border-radius: 99px; padding: var(--s1) var(--s4); margin-bottom: var(--s4); }
.sum, .bank { display: grid; gap: 0; }
.sum div, .bank div { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); border-top: 2px solid var(--sand); flex-wrap: wrap; }
.sum dt, .bank dt { font-weight: 600; }
.sum dd, .bank dd { font-family: var(--fm); }
.bank { background: var(--white); border-radius: var(--rc); box-shadow: var(--sh); padding: var(--s3) var(--s5); max-width: 720px; }
.copy { min-height: 48px; padding: 0 var(--s4); border-radius: 99px; border: 2px solid var(--ink); background: transparent; font: 600 .875rem var(--fb); cursor: pointer; color: var(--ink); }
.rel { display: grid; gap: var(--s3); }
.rel li { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; background: var(--white); border-radius: var(--rc); padding: var(--s3) var(--s5); box-shadow: var(--sh); }
.video { aspect-ratio: 16/9; border-radius: var(--rc); overflow: hidden; box-shadow: var(--sh); background: var(--ink); }
.video iframe { width: 100%; height: 100%; border: 0; }

/* التذييل */
.ft { background: var(--ink); color: var(--cream); padding-block: var(--s8) var(--s6); }
.ft-g { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.ft-brand { display: grid; gap: var(--s3); align-content: start; grid-column: 1 / -1; }
.slogan { font: 800 26px/1.3 var(--fd); }
.fg h2 { font-size: 20px; color: var(--gold); margin-bottom: var(--s2); }
.fg a, .ft-end a, .trust a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fg a:hover, .ft-end a:hover, .trust a { text-decoration: underline; text-underline-offset: 6px; }
.ft-trust { margin-top: var(--s7); display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: center; }
.ft .logos li { box-shadow: none; min-height: 112px; }
.trust { display: grid; gap: var(--s2); }
.ft-end { margin-top: var(--s6); padding-top: var(--s5); border-top: 2px solid rgba(255, 249, 241, .25); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: space-between; font-size: .875rem; }
.ft-end ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.ft .langs a[aria-current] { background: var(--cream); color: var(--ink); }
.ft .soon { background: var(--cream); }
@media (min-width: 1024px) { .ft-brand { grid-column: auto; } .ft-g { grid-template-columns: 1.4fr repeat(5, 1fr); } }

/* الجوال: الشريط السفلي والزر الثابت */
.tabs { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; background: var(--cream); border-top: 2px solid var(--ink); }
.tabs ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.tabs a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 64px; text-decoration: none; font-size: .75rem; font-weight: 600; }
.tabs a[aria-current] { background: var(--sand); }
.sticky { position: fixed; inset-inline: var(--m); bottom: calc(var(--tabs) + var(--s3)); z-index: 45; display: flex; justify-content: center; pointer-events: none; transition: transform .35s var(--ease), opacity .2s; }
.sticky .btn { pointer-events: auto; box-shadow: var(--sh); width: min(100%, 360px); }
.sticky.is-hidden { transform: translateY(24px); opacity: 0; visibility: hidden; }
@media (min-width: 1024px) { .tabs, .sticky { display: none; } }
.root { min-height: 100vh; display: grid; place-content: center; gap: var(--s5); text-align: center; }
.root .langs { justify-content: center; gap: var(--s3); }

/* الحركة: كل شيء يصعد ويستقر كالورق */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.hero .rv:nth-child(2) { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .rv { transform: none; }
}
@media print { .hd, .tabs, .sticky, .ribbon, .bar, .drawer { display: none !important; } .js .rv { opacity: 1; transform: none; } body { padding: 0; } }