/* ==========================================================================
   TEDxKSU — نظام التصميم المشترك
   الهوية مأخوذة من «التــوجه الإبــداعي 02.pdf»:
   أحمر #FF0024 · أسود #010101 · نقوش السدو (مثلثات متقاطعة تُكوّن X)
   ========================================================================== */

@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-Regular.ba73b8c18f3e.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-Medium.daa38886b4cc.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-SemiBold.719a0ad23789.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-Bold.db14cbdd87f0.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

/* --- 1. الرموز (Design tokens) ------------------------------------------ */
:root{
  /* الأسود العميق من الدليل، مرفوع درجات للأسطح ومائل قليلاً نحو الأحمر */
  --ink:      #0A0809;
  --surface:  rgba(21, 15, 17, .78);   /* شبه شفاف ليتنفّس الوهج الأحمر خلف الألواح */
  --raised:   #1E1618;
  --line:     #33272A;
  --line-2:   #47383C;

  --white:    #F6F2F3;
  --muted:    #A79DA0;
  --faint:    #6E6467;

  --red:      #FF0024;   /* اللون الأساسي المعتمد */
  --red-deep: #C4001B;
  --red-tint: rgba(255, 0, 36, .13);

  --ok:       #57C58F;
  --ok-tint:  rgba(87, 197, 143, .12);

  --step: 8px;
  --measure: 62ch;
  --shell: 1120px;
}

/* --- 2. إعادة الضبط ----------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

/* قوائم التعريف تأتي بهوامش افتراضية تُحدث فراغاً بين الأقسام */
dl, dd{ margin: 0; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body{
  margin: 0;
  direction: rtl;
  /* وهج أحمر متعدد الطبقات فوق الأسود — الأحمر حاضر في الخلفية لا في النص */
  background-color: var(--ink);
  background-image:
    radial-gradient(78% 52% at 84% -6%,  rgba(255, 0, 36, .30), transparent 62%),
    radial-gradient(62% 46% at -4% 38%,  rgba(255, 0, 36, .16), transparent 60%),
    radial-gradient(95% 45% at 50% 106%, rgba(255, 0, 36, .18), transparent 64%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--white);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* الخلفية الثابتة ثقيلة على الأجهزة الصغيرة */
@media (max-width: 640px){
  body{ background-attachment: scroll; }
}

/* حبيبات ورقية خفيفة فوق الصفحة كاملة — تكسر لمعة الشاشة وتعطي إحساس المطبوع */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* شاشة دخول قصيرة مستوحاة من خطوط السدو */
.site-intro{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;overflow:hidden;background:#030303;animation:introExit .24s ease .76s forwards}
.site-intro__logo{position:relative;z-index:2;direction:ltr;font:600 clamp(28px,6vw,54px)/1 "IBM Plex Sans Arabic",sans-serif;letter-spacing:.05em;color:#fff;animation:introLogo .42s ease both}
.site-intro__logo .x{color:var(--red)}.site-intro__logo small{color:#8f8789;font-size:.62em;font-weight:600;margin-left:8px}
.site-intro__lines,.site-intro__lines::before,.site-intro__lines::after{position:absolute;content:"";width:145%;height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent);transform:rotate(-18deg);animation:introLine .46s ease both}
.site-intro__lines::before{top:-90px;left:-8%;transform:none}.site-intro__lines::after{top:90px;left:8%;transform:none}
@keyframes introLogo{from{opacity:0;transform:scale(.93);letter-spacing:.18em}to{opacity:1;transform:none;letter-spacing:.05em}}
@keyframes introLine{from{opacity:0;transform:translateX(-25%) rotate(-18deg)}to{opacity:.75;transform:translateX(0) rotate(-18deg)}}
@keyframes introExit{to{opacity:0;visibility:hidden;pointer-events:none}}

/* حركة ظهور هادئة للأقسام، مع احترام إعداد تقليل الحركة */
.js-motion .motion-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.7,.2,1)}
.js-motion .motion-reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.site-intro{display:none}.js-motion .motion-reveal{opacity:1;transform:none;transition:none}}

img{ max-width: 100%; display: block; }
a{ color: inherit; }

/* --- دخول متدرّج عند التحميل (ينتهي من نفسه، ولا يعتمد على التمرير) --- */
@keyframes riseIn{
  from{ opacity: 0; transform: translateY(16px); }
  to  { opacity: 1; transform: none; }
}
.rise{ animation: riseIn .75s cubic-bezier(.22,.7,.2,1) both; }
.rise.d1{ animation-delay: .07s; }
.rise.d2{ animation-delay: .14s; }
.rise.d3{ animation-delay: .21s; }
.rise.d4{ animation-delay: .28s; }

::selection{ background: var(--red); color: #fff; }

:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* --- 3. الطباعة --------------------------------------------------------- */
.display,
h1, h2, h3, .h-kufi{
  font-family: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0;
}

h1{ font-size: clamp(34px, 6.4vw, 68px); }
h2{ font-size: clamp(24px, 3.4vw, 36px); }
h3{ font-size: 19px; }

p{ margin: 0 0 1em; max-width: var(--measure); }
p:last-child{ margin-bottom: 0; }

.lede{ font-size: clamp(17px, 2vw, 20px); color: var(--muted); }

.eyebrow{
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* خط شعري قصير يسبق كل عنوان فرعي */
.eyebrow::before{
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red));
  flex: 0 0 auto;
}

/* عنوان بتدرّج معدني خفيف — للعناوين الكبيرة فقط، مع تراجع آمن للون الصلب */
.sheen{ color: var(--white); }
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .sheen{
    background-image: linear-gradient(178deg, #FFFFFF 8%, #EFE3E5 44%, #B9A6AA 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

.mono{ font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.ltr{ direction: ltr; unicode-bidi: isolate; }

/* علامة في الكود على قيمة مبدئية لم تُعتمد بعد — بلا أثر بصري */
.tentative{ /* للبحث عنها فقط عند تحديث بيانات الفعالية */ }

/* --- 4. نقشة السدو ------------------------------------------------------ */
/* شريط المثلثات: الوحدة البصرية الأساسية في الدليل */
.sadu-band{
  height: 14px;
  background-image:
    linear-gradient(45deg,  var(--red) 25%, transparent 25%),
    linear-gradient(-45deg, var(--red) 25%, transparent 25%);
  background-size: 16px 14px;
}
.sadu-band.subtle{
  background-image:
    linear-gradient(45deg,  var(--line-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--line-2) 25%, transparent 25%);
}

/* --- شريط الشركاء ------------------------------------------------------ */
.partner-strip{
  padding: 26px 24px 30px;
  border-top: 1px solid var(--line);
  background: #090607;
  text-align: center;
}
.partner-strip__label{
  margin: 0 auto 22px;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: .12em;
}
.partner-strip__logos{
  width: min(100%, 900px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(18px, 4vw, 54px);
}
.partner-strip__logos img{
  width: 100%;
  height: 74px;
  object-fit: contain;
  opacity: .9;
}
.partner-strip__logos img:hover{ opacity: 1; }
.partner-strip a{ display: flex; align-items: center; justify-content: center; }
.partner-strip__rows{
  width: min(100%, 760px);
  margin: 0 auto;
  display: grid;
  gap: 8px;
}
.partner-strip__row{
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}
.partner-strip__row:last-child{ border-bottom: 0; }
.partner-strip__row > span{
  min-width: 88px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}
.partner-strip__row > a{ justify-self: center; width: min(250px, 100%); }
.partner-strip__row img{
  width: min(250px, 48vw);
  height: 58px;
  object-fit: contain;
  opacity: .9;
}
.partner-strip__row-logos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 5vw, 56px);
}
.partner-strip__row-logos img{ width: min(220px, 32vw); }

/* --- شريط المتحدثين المتحرك ------------------------------------------- */
.speaker-rail{
  position: relative;
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
  padding: 32px 0 24px;
  direction: ltr;
  user-select: none;
}
.speaker-rail::before,
.speaker-rail::after{
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 0;
  width: clamp(34px, 9vw, 160px);
  pointer-events: none;
}
.speaker-rail::before{ inset-inline-start: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.speaker-rail::after{ inset-inline-end: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.speaker-rail__track{
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  width: max-content;
  transition: transform .72s cubic-bezier(.22,.75,.24,1);
  will-change: transform;
}
.speaker-tile{
  position: relative;
  flex: 0 0 clamp(190px, 24vw, 300px);
  aspect-ratio: 1 / 1.16;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--raised);
  opacity: .38;
  transform: scale(.82);
  transition: transform .72s cubic-bezier(.22,.75,.24,1), opacity .72s ease, border-color .35s ease;
}
.speaker-tile.is-active{ opacity: 1; transform: scale(1.08); z-index: 1; border-color: rgba(255,0,36,.7); }
.speaker-tile.is-near{ opacity: .68; transform: scale(.91); }
.speaker-tile:hover{ border-color: rgba(255,0,36,.7); }
.speaker-tile > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
  transition: transform .5s ease, filter .5s ease;
}
.speaker-tile.is-active > img{ transform: scale(1.04); filter: saturate(1) contrast(1.06); }
.speaker-tile__pattern{
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url("../img/speakers/patterns.f1e507d16c42.png") center bottom / auto 34% repeat-x;
  opacity: .20;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .35s ease, transform .6s ease;
}
.speaker-tile.is-active .speaker-tile__pattern{ opacity: .46; transform: scale(1.06); }
.speaker-tile::after{
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(6,3,4,.84) 100%);
  pointer-events: none;
}
.speaker-tile__index,
.speaker-tile__caption{
  position: absolute;
  z-index: 3;
  color: var(--white);
}
.speaker-tile__index{
  top: 16px;
  inset-inline-start: 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.72);
}
.speaker-tile__caption{
  inset-inline: 18px;
  bottom: 16px;
  font-size: 16px;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce){
  .speaker-rail__track,
  .speaker-tile{ transition: none; }
}
.speaker-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  direction: ltr;
  margin-top: 6px;
}
.speaker-control{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--white);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  transition: border-color .2s ease, background .2s ease;
}
.speaker-control:hover{ border-color: var(--red); background: var(--red-tint); }
.speaker-dots{ display: flex; align-items: center; gap: 9px; }
.speaker-dot{
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--faint);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.speaker-dot.is-active{ transform: scale(1.35); border-color: var(--red); background: var(--red); }
.hero-field > .partner-strip{
  position: absolute;
  inset-inline: 0;
  top: clamp(18px, 3vw, 40px);
  z-index: 3;
  padding: 0 24px 16px;
  border: 0;
  background: transparent;
}
.hero-field > .partner-strip .partner-strip__label{ display: none; }
.hero-field > .partner-strip .partner-strip__logos{ gap: clamp(16px, 4vw, 48px); }
.hero-field > .partner-strip .partner-strip__logos img{ height: 48px; }
.hero-field > .partner-strip .partner-strip__logos a:first-child img{ transform: scale(1.55); }
@media (max-width: 640px){
  .partner-strip{ padding-inline: 18px; }
  .partner-strip__logos{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .partner-strip__logos img{ height: 64px; }
  .partner-strip__row{ min-height: 68px; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .partner-strip__row > span{ min-width: 0; font-size: 13px; text-align: right; }
  .partner-strip__row img{ width: min(190px, 54vw); height: 48px; }
  .partner-strip__row-logos{ gap: 10px; }
  .partner-strip__row-logos img{ width: min(150px, 38vw); }
  .speaker-rail{ padding: 22px 0 16px; }
  .speaker-tile{ flex-basis: min(62vw, 240px); }
  .speaker-controls{ margin-top: 2px; }
  .hero-field > .partner-strip{ padding: 0 18px 14px; }
  .hero-field > .partner-strip .partner-strip__logos{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .hero-field > .partner-strip .partner-strip__logos img{ height: 36px; }
  .hero-field > .partner-strip .partner-strip__logos a:first-child img{ transform: scale(1.4); }
}

/* شبكة الـ X الخافتة خلف الأقسام البطلة */
.x-field{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* الوهج الأحمر أعمق طبقة */
  background:
    radial-gradient(70% 100% at 82% 0%, rgba(255, 0, 36, .22), transparent 68%),
    radial-gradient(60% 90% at 8% 100%, rgba(255, 0, 36, .12), transparent 70%);
}
.x-field::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(45deg,  rgba(255,0,36,.26) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,0,36,.26) 25%, transparent 25%),
    linear-gradient(135deg, rgba(246,242,243,.045) 25%, transparent 25%),
    linear-gradient(-135deg,rgba(246,242,243,.045) 25%, transparent 25%);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(135% 105% at 80% 0%, #000 8%, transparent 78%);
          mask-image: radial-gradient(135% 105% at 80% 0%, #000 8%, transparent 78%);
}
/* تعتيم أسفل البطل: النقشة تذوب في الأسود قبل القسم التالي.
   يأتي بعد ::before في ترتيب الرسم، فيغطي النقشة ويبقى تحت المحتوى. */
.x-field::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 38%, rgba(10, 8, 9, .62) 74%, var(--ink) 100%);
}

/* --- 5. الهيكل ---------------------------------------------------------- */
.shell{
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}
.shell.narrow{ max-width: 720px; }

section{ padding: clamp(64px, 9vw, 128px) 0; }
.section-head{ margin-bottom: 40px; }
.section-head p{ color: var(--muted); }

/* خط فاصل يتلاشى عند الطرفين بدل الخط الصلب */
.rule{
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line-2) 50%, var(--line) 88%, transparent);
}

/* --- 6. الترويسة والتذييل ----------------------------------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 6, 10, .74);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.topbar .shell{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.wordmark{
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: .04em;
  text-decoration: none;
  direction: ltr;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.wordmark .x{ color: var(--red); }
.wordmark .unit{ color: var(--muted); font-size: inherit; font-weight: inherit; margin-inline-start: 4px; }
.brand-lockup{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.brand-tagline{ color:var(--muted); font-family:"IBM Plex Sans Arabic",sans-serif; font-size:11px; line-height:1.2; }

.topnav{ display: flex; align-items: center; gap: 26px; }
.topnav a{
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.topnav a:hover{ color: var(--white); border-bottom-color: var(--red); }
@media (max-width: 720px){
  .topnav a:not(.btn){ display: none; }
}

.sitefoot{
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,0,36,.13), transparent 70%);
  padding: 30px 0 36px;
  color: var(--faint);
  font-size: 13.5px;
}
.sitefoot .shell{ display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.sitefoot-contact{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.sitefoot-meta{ width:min(100%, 960px); display:flex; align-items:center; justify-content:space-between; gap:28px; padding-top:18px; border-top:1px solid var(--line); }
.sitefoot-meta .brand-lockup{ align-items:flex-start; text-align:right; }
.sitefoot p{ margin:0; max-width:52ch; color:var(--faint); text-align:left; }
.social-links, .contact-links{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.sitefoot a{ color:var(--muted); text-decoration:none; }
.sitefoot a:hover{ color:var(--white); }
.social-links a, .contact-links a{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--line-2); border-radius:50%; background:rgba(255,255,255,.035); transition:transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease; }
.social-links a:hover, .contact-links a:hover{ transform:translateY(-3px); color:var(--white); border-color:var(--red); background:rgba(255,0,36,.14); }
.footer-icon{ display:block; width:19px; height:19px; fill:currentColor; stroke:currentColor; stroke-width:0; }
.footer-icon rect, .footer-icon circle{ fill:none; stroke:currentColor; stroke-width:1.8; }
.footer-icon .icon-cutout{ fill:currentColor; stroke:none; }
@media (max-width: 620px){
  .sitefoot-meta{ flex-direction:column; gap:14px; }
  .sitefoot-meta .brand-lockup{ align-items:center; text-align:center; }
  .sitefoot p{ text-align:center; }
}

/* --- 7. الأزرار --------------------------------------------------------- */
.btn{
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid var(--red);
  background: var(--red);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: .012em;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;              /* حواف حادة — طابع ملصقات المؤتمرات */
  box-shadow: 0 10px 30px -12px rgba(255, 0, 36, .85);
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* لمعة تعبر الزر عند المرور */
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.26) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
.btn:hover::after{ transform: translateX(120%); }
.btn:hover{
  background: var(--red-deep);
  border-color: var(--red-deep);
  transform: translateY(-1px);
  box-shadow: 0 16px 38px -14px rgba(255, 0, 36, .95);
}
.btn:active{ transform: translateY(1px); }

.btn.ghost{
  background: transparent;
  color: var(--white);
  border-color: var(--line-2);
  box-shadow: none;
}
.btn.ghost:hover{
  border-color: var(--red);
  background: rgba(255, 0, 36, .08);
  box-shadow: none;
}

.btn.small{ padding: 9px 16px; font-size: 14px; }
.btn.block{ width: 100%; }
.btn[disabled]{ opacity: .45; cursor: not-allowed; }

.btn .arrow{ font-family: "IBM Plex Mono", monospace; }

/* --- 8. البطاقات والشبكات ----------------------------------------------- */
.grid{ display: grid; gap: 20px; }
.grid.cols-3{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-2{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 26px 24px;
}
.card h3{ margin-bottom: 8px; }
.card p{ color: var(--muted); font-size: 15px; margin: 0; }

/* بطاقة المبدأ: رقم صغير + عنوان + شرح (من قسم «ليه هالتوجه بالذات؟») */
.principle{ position: relative; padding-top: 30px; }
.principle .idx{
  position: absolute;
  top: 22px;
  inset-inline-start: 24px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--red);
}

/* شريط تفاصيل الفعالية */
.factbar{
  scroll-margin-top: 84px;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255,0,36,.16), rgba(255,0,36,.04) 55%, rgba(255,0,36,.12));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.fact{
  position: relative;
  padding: 30px 28px;
}
/* فاصل شعري يتلاشى من الطرفين */
.fact + .fact::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 18%;
  height: 64%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}
.fact dt{
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.fact dd{
  margin: 0;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* --- 9. النماذج --------------------------------------------------------- */
.form{ display: grid; gap: 26px; }

.field{ display: grid; gap: 9px; }

.field > label,
.fieldset-label{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
}
.req{ color: var(--red); font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.opt{
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line-2);
  padding: 1px 7px;
}

.control{
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--line-2);
  color: var(--white);
  font: inherit;
  font-size: 15.5px;
  padding: 13px 15px;
  border-radius: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
.control::placeholder{ color: var(--faint); }
.control:hover{ border-color: #4A4043; }
.control:focus{
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-tint);
}

select.control{
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: left 20px top 22px, left 15px top 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 40px;   /* مساحة للسهم على يسار الحقل في الاتجاه من اليمين */
}
select.control option{ background: #150F11; color: var(--white); }

/* حقل الجوال بلاحقة الرمز الدولي */
.phone{
  display: flex;
  border: 1px solid var(--line-2);
  background: var(--raised);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.phone:focus-within{ border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.phone .cc{
  font-family: "IBM Plex Mono", monospace;
  font-size: 14.5px;
  color: var(--muted);
  padding: 13px 14px;
  border-inline-end: 1px solid var(--line-2);
  background: rgba(255,255,255,.02);
  white-space: nowrap;
}
.phone .control{ border: 0; background: transparent; direction: ltr; text-align: left; }
.phone .control:focus{ box-shadow: none; }

/* مجموعة اختيار مجزّأة — لمجال العمل */
.segmented{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-2);
}
.segmented input{ position: absolute; opacity: 0; pointer-events: none; }
.segmented label{
  text-align: center;
  padding: 13px 8px;
  font-size: 15px;
  cursor: pointer;
  border-inline-start: 1px solid var(--line-2);
  background: var(--raised);
  transition: background .15s ease, color .15s ease;
  user-select: none;
}
.segmented label:first-of-type{ border-inline-start: 0; }
.segmented label:hover{ background: #221D1E; }
.segmented input:checked + label{
  background: var(--red);
  color: #fff;
  font-weight: 600;
}
.segmented input:focus-visible + label{ outline: 2px solid var(--red); outline-offset: 2px; }

/* الحقل المشروط: يظهر عند اختيار مجال العمل */
.conditional[hidden]{ display: none !important; }
.conditional{ animation: reveal .22s ease-out; }
@keyframes reveal{
  from{ opacity: 0; transform: translateY(-4px); }
  to  { opacity: 1; transform: none; }
}

.hint{ font-size: 13px; color: var(--faint); margin: 0; }

.error-text{
  font-size: 13.5px;
  color: var(--red);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.error-text::before{ content: "▲"; font-size: 9px; }
.field.invalid .control,
.field.invalid .phone,
.field.invalid .segmented{ border-color: var(--red); }

/* موافقة الخصوصية */
.consent{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--muted);
}
.consent input{
  appearance: none;
  width: 20px; height: 20px;
  flex: 0 0 auto;
  margin-top: 3px;
  border: 1px solid var(--line-2);
  background: var(--raised);
  cursor: pointer;
}
.consent input:checked{
  background: var(--red);
  border-color: var(--red);
  background-image: linear-gradient(45deg, transparent 42%, #fff 42%, #fff 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 55%, #fff 55%, #fff 68%, transparent 68%);
}
.consent input:focus-visible{ outline: 2px solid var(--red); outline-offset: 2px; }
.consent a{ color: var(--white); }

/* شريط تنبيه أعلى النماذج */
.notice{
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--red);
  background: var(--surface);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--muted);
}
.notice b{ color: var(--white); font-weight: 600; }

/* --- 10. صفحة النموذج (تخطيط عمودين) ----------------------------------- */
.form-page{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
  padding-block: clamp(40px, 6vw, 72px);
}
@media (max-width: 900px){
  .form-page{ grid-template-columns: 1fr; gap: 36px; }
  .form-aside{ order: -1; }
}

.form-aside{
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 24px;
  position: sticky;
  top: 92px;
}
@media (max-width: 900px){ .form-aside{ position: static; } }
.form-aside h3{ font-size: 16px; margin-bottom: 14px; }
.form-aside dl{ margin: 0; display: grid; gap: 14px; }
.form-aside dt{
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.form-aside dd{ margin: 0; font-size: 15px; }

/* --- 11. انتظار إرسال التسجيل ----------------------------------------- */
.is-submitting{ overflow: hidden; }
.submission-loader[hidden]{ display: none !important; }
.submission-loader{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 3, 4, .78);
  backdrop-filter: blur(16px);
  animation: loaderFade .24s ease-out both;
}
.submission-loader__panel{
  width: min(100%, 430px);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 42px 32px 36px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 0, 36, .15), rgba(14, 10, 11, .98) 54%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255,0,36,.05);
}
.submission-loader__panel strong{
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(22px, 4vw, 29px);
}
.submission-loader__panel > span:last-child{ color: var(--muted); font-size: 14px; }
.submission-loader__mark{
  display: inline-flex;
  align-items: baseline;
  direction: ltr;
  margin-bottom: 14px;
  color: var(--white);
  font-family: "IBM Plex Mono", monospace;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(255,0,36,.22));
}
.submission-loader__mark b{ font: inherit; }
.submission-loader__mark em{
  color: var(--red);
  font: inherit;
  font-style: normal;
  animation: loaderAccent 1.15s ease-in-out infinite;
}
.submission-loader__mark small{
  margin-inline-start: 6px;
  color: var(--muted);
  font: 600 .62em/1 "IBM Plex Mono", monospace;
  letter-spacing: .04em;
}
@keyframes loaderFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes loaderAccent{
  0%, 100%{ opacity: .45; transform: translateY(0); }
  50%{ opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce){
  .submission-loader__mark em{ animation: none; }
}

/* --- 12. صفحات التأكيد والدخول ----------------------------------------- */
.confirm-wrap{
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: clamp(24px, 6vw, 72px);
  position: relative;
  overflow: hidden;
}
.confirm-wrap::before{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 14px;
  background-image:
    linear-gradient(45deg, var(--red) 25%, transparent 25%),
    linear-gradient(-45deg, var(--red) 25%, transparent 25%);
  background-size: 16px 14px;
}
.confirm-head{
  width: min(100%, 680px);
  padding: clamp(32px, 6vw, 64px);
  text-align: center;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255, 0, 36, .14), rgba(21, 15, 17, .94) 48%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42), 0 0 70px rgba(255,0,36,.08);
  position: relative;
  overflow: hidden;
}
.confirm-head::before{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.success-card__topline{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; color:var(--red); }
.success-card__eyebrow{ font:600 11px/1 "IBM Plex Mono", monospace; letter-spacing:.18em; text-transform:uppercase; }
.success-card__brand{ direction:ltr; color:var(--muted); font:600 12px/1 "IBM Plex Sans Arabic", sans-serif; letter-spacing:.08em; }
.success-card__brand span{ color:var(--red); }
.confirm-head h1{
  margin-bottom: 18px;
  font-size: clamp(30px, 5vw, 54px);
  overflow-wrap: anywhere;
}
.confirm-head h1 span{ color:var(--red); }
.confirm-head p{
  margin-inline: auto;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 18px);
}
.success-card__rule{ width:100%; height:1px; margin-top:30px; background:linear-gradient(90deg, transparent, var(--line-2), transparent); }
.confirm-head .btn{ margin-top: 28px; }
.check{
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  background: var(--red);
  border-radius: 50%;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  box-shadow: 0 12px 36px rgba(255, 0, 36, .28), 0 0 0 8px rgba(255,0,36,.08);
}
.confirm-wrap > .form{ width: min(100%, 460px) !important; }

/* --- 13. سياسة الخصوصية ----------------------------------------------- */
.privacy-wrap{
  width: min(100%, 840px);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) 24px;
}
.privacy-card{
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255,0,36,.12), rgba(21,15,17,.94) 42%);
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
}
.privacy-card h1{ margin-bottom: 16px; font-size: clamp(32px, 6vw, 58px); }
.privacy-card .lede{ margin-bottom: 34px; }
.privacy-card p,
.privacy-card li{ color: var(--muted); font-size: clamp(15px, 2vw, 17px); line-height: 2; }
.privacy-card p{ max-width: 66ch; margin-bottom: 22px; }
.privacy-card ul{ max-width: 66ch; margin: 0 0 26px; padding-inline-start: 1.4em; }
.privacy-card li{ padding-inline-start: 8px; margin-bottom: 4px; }
.privacy-card li::marker{ color: var(--red); }

/* --- 14. تأكيد حضور كبار الشخصيات ------------------------------------ */
.vvip-wrap{
  width: min(100%, 720px);
  margin: 0 auto;
  padding: clamp(44px, 8vw, 88px) 20px 24px;
}
.vvip-card{
  border: 1px solid var(--red);
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(255,0,36,.15) inset, 0 30px 90px rgba(0,0,0,.48);
}
.vvip-head{
  padding: clamp(34px, 7vw, 58px) clamp(24px, 7vw, 56px) 30px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.vvip-kicker{
  display: inline-block;
  margin-bottom: 16px;
  color: var(--red);
  font-size: 12px;
  letter-spacing: .08em;
}
.vvip-head h1{ margin-bottom: 12px; font-size: clamp(30px, 6vw, 48px); }
.vvip-head p{ margin: 0 auto; color: var(--muted); }
.vvip-form{ padding: clamp(26px, 6vw, 52px); }
.vvip-form .field{ gap: 9px; }
.vvip-choice{ border: 0; padding: 0; margin: 4px 0 8px; }
.vvip-choice legend{ padding: 0; margin-bottom: 10px; font-weight: 600; }
.vvip-options{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vvip-option{ position: relative; cursor: pointer; }
.vvip-option input{ position: absolute; opacity: 0; pointer-events: none; }
.vvip-option span{
  min-height: 68px;
  display: grid;
  place-items: center;
  padding: 12px 10px;
  border: 1px solid var(--line-2);
  background: rgba(21,15,17,.65);
  color: var(--muted);
  text-align: center;
  font-size: 14px;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.vvip-option:hover span{ border-color: var(--red); color: var(--white); }
.vvip-option input:checked + span{ border-color: var(--red); background: var(--red-tint); color: var(--white); box-shadow: 0 0 0 1px var(--red) inset; }
.vvip-option input:focus-visible + span{ outline: 2px solid var(--red); outline-offset: 3px; }
.vvip-error{ margin: 22px 28px 0; }
.vvip-foot{ margin: 18px auto 0; color: var(--faint); text-align: center; font-size: 12px; }
.vvip-foot a{ color: var(--muted); }
@media (max-width: 560px){
  .vvip-options{ grid-template-columns: 1fr; }
  .vvip-option span{ min-height: 54px; }
}

/* --- 15. الطباعة على الورق --------------------------------------------- */
@media print{
  .topbar, .sitefoot, .btn, .notice{ display: none !important; }
  body{ background: #fff; color: #000; }
}