/* ============================================================
   بُناة · JO AI Builders — design system
   90% neutral / 10% Jordan red. Square corners. Thin lines.
   Arabic display carries the voice; English mono carries the metadata.
   ============================================================ */

:root{
  --bg:#FCFCFB;
  --ink:#121110;
  --muted:#6D6A64;
  --line:#E9E7E2;
  --accent:#C8102E;
  --dark-bg:#121110;
  --dark-ink:#FCFCFB;
  --dark-muted:#A6A199;
  --dark-line:#2E2C28;
  --max:1120px;
  --narrow:760px;
  --sans:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --display:"Alexandria","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%}

h1,h2,h3,.logo,.quote{font-family:var(--display)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--narrow);margin:0 auto;padding:0 24px}

/* ---------- Mono metadata layer ---------- */
.mono{
  font-family:var(--mono);
  direction:ltr;
  unicode-bidi:isolate;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:500;
}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);direction:ltr;unicode-bidi:isolate;
  font-size:.7rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);
  padding:5px 11px;border-radius:2px;
  line-height:1.5;white-space:nowrap;
}
.tag-accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.tag .pulse{
  width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.meta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- Technical grid texture ---------- */
.gridbg{
  position:relative;
  background-image:
    linear-gradient(to left,rgba(18,17,16,.03) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(18,17,16,.02) 1px,transparent 1px);
  background-size:88px 88px;
}
.crossed::before,.crossed::after{
  font-family:var(--mono);content:"+";position:absolute;
  color:rgba(18,17,16,.28);font-size:1rem;line-height:1;pointer-events:none;
}
.crossed::before{top:20px;inset-inline-start:22px}
.crossed::after{bottom:20px;inset-inline-end:22px}

/* ---------- Nav ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(252,252,251,.9);
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{font-size:1.45rem;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:14px}
.logo span{color:var(--accent)}
.logo .logo-img{height:30px;width:auto;display:block}
.logo .loc{font-family:var(--mono);direction:ltr;font-size:.66rem;font-weight:500;letter-spacing:.12em;color:var(--muted)}
.nav-links{display:flex;gap:28px;font-size:.92rem;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.back{font-size:.92rem;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px}
.back:hover{color:var(--accent);border-color:var(--accent)}
.nav-toggle{
  display:none;width:40px;height:40px;flex:none;
  align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:2px;
  background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:1.05rem;line-height:1;padding:0;
}
.nav-toggle:hover{border-color:var(--ink)}
.nav-toggle::before{content:"☰"}
header.nav-open .nav-toggle::before{content:"×"}

/* ---------- Buttons: square, industrial ---------- */
.btn{
  display:inline-block;border:1px solid var(--ink);cursor:pointer;
  background:var(--ink);color:var(--bg);
  padding:12px 28px;border-radius:2px;
  font-size:.95rem;font-weight:600;font-family:inherit;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:active{transform:translateY(1px)}
.btn-nav{padding:9px 20px;font-size:.88rem}
.btn-big{padding:16px 40px;font-size:1.05rem}
.btn-light{background:var(--dark-ink);border-color:var(--dark-ink);color:var(--dark-bg)}
.btn-light:hover{background:#C8102E;border-color:#C8102E;color:#fff}
.ghost{font-size:.98rem;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:2px}
.ghost:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- Sections ---------- */
section{padding:104px 0;border-bottom:1px solid var(--line)}
.label{
  display:flex;align-items:center;gap:12px;
  font-size:.85rem;font-weight:600;color:var(--accent);
  margin-bottom:22px;letter-spacing:.02em;
}
.label::after{content:"";width:44px;height:1px;background:var(--accent);opacity:.4}
.label .en{font-family:var(--mono);direction:ltr;font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h2{
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  font-weight:700;line-height:1.45;max-width:760px;
  margin-bottom:22px;
}
.lead{max-width:720px;font-size:1.08rem;color:var(--muted)}
.lead strong{color:var(--ink);font-weight:600}
.quote{
  font-size:clamp(1.5rem,3.4vw,2.3rem);
  font-weight:600;line-height:1.6;
  max-width:820px;margin:64px 0 0;
}
.quote span{color:var(--accent)}

/* ---------- Dark sections ---------- */
.dark{background:var(--dark-bg);color:var(--dark-ink);border-bottom:none;--accent:#F2545E;--line:var(--dark-line);--muted:var(--dark-muted)}
.dark .lead{color:var(--dark-muted)}
.dark .tag{border-color:var(--dark-line);color:var(--dark-muted)}
.dark .tag-accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--dark-line))}

/* ---------- Cards / facts grid ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.fact{background:var(--bg);padding:34px 28px}
.fact b{display:block;font-size:1.06rem;font-weight:700;margin-bottom:10px}
.fact p{font-size:.95rem;color:var(--muted);line-height:1.85}

/* ---------- ✓ / × lists ---------- */
.checklist,.xlist{list-style:none}
.checklist li,.xlist li{
  display:flex;gap:18px;align-items:baseline;
  padding:19px 0;border-top:1px solid var(--line);
  font-size:1rem;line-height:1.8;
}
.checklist .m,.xlist .m{
  font-family:var(--mono);font-weight:500;font-size:1rem;
  min-width:28px;text-align:center;flex:none;
}
.checklist .m{color:var(--accent)}
.xlist .m{color:var(--muted);opacity:.6}
.xlist li{color:var(--muted)}

/* ---------- Score bars ---------- */
.score{list-style:none;margin-top:56px;max-width:860px}
.score li{padding:22px 0;border-top:1px solid var(--line)}
.score .row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:12px}
.score .crit-label{font-size:1.02rem;font-weight:500}
.score .w{
  font-family:var(--mono);direction:ltr;font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;
}
.score .bar{height:10px;background:var(--line);border-radius:1px;overflow:hidden}
.score .fill{
  height:100%;background:var(--accent);border-radius:1px;
  transform-origin:100% 50%;
}
.rv.in .score .fill{animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Event format cards ---------- */
.nights{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.night{background:var(--bg);padding:44px 38px;transition:background .25s ease}
.night .night-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.night .night-name{
  font-family:var(--mono);direction:ltr;unicode-bidi:isolate;
  font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:500;letter-spacing:.04em;
}
.night .flow{
  font-family:var(--mono);direction:ltr;unicode-bidi:isolate;display:inline-block;
  font-size:.72rem;font-weight:500;letter-spacing:.14em;color:var(--accent);
  margin-bottom:18px;
}
.night p{color:var(--muted);font-size:1rem}
.night ul{list-style:none;margin-top:22px}
.night ul li{padding:11px 0;border-top:1px solid var(--line);font-size:.95rem}

/* ---------- Founding 40 ---------- */
.big-num{
  font-family:var(--mono);direction:ltr;unicode-bidi:isolate;display:block;
  font-size:clamp(7rem,20vw,13rem);font-weight:400;line-height:.95;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-align:right;
}
.big-num-sub{
  font-family:var(--mono);direction:ltr;unicode-bidi:isolate;display:block;
  font-size:clamp(.85rem,1.6vw,1.05rem);font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--accent);margin-top:6px;text-align:right;
  margin-inline-end:-.32em;
}
.seats{list-style:none;margin-top:44px;max-width:560px}
.seats li{
  display:flex;align-items:baseline;gap:22px;
  padding:16px 0;border-top:1px solid var(--line);
}
.seats .u{font-family:var(--mono);direction:ltr;font-weight:500;font-size:.8rem;letter-spacing:.1em;min-width:64px;color:var(--ink)}
.seats .n{font-family:var(--mono);direction:ltr;font-weight:500;font-size:1.7rem;color:var(--accent);min-width:48px;font-variant-numeric:tabular-nums}
.seats p{font-size:.95rem;color:var(--muted)}
.badge{
  border:1px solid var(--ink);border-radius:2px;background:var(--bg);
  padding:44px 36px 36px;text-align:center;max-width:290px;
  position:relative;
}
.badge::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent)}
.badge .b-logo{font-family:var(--display);font-size:2.1rem;font-weight:700}
.badge .b-logo span{color:var(--accent)}
.badge hr{border:none;border-top:1px solid var(--line);margin:22px 0}
.badge .b-line{font-family:var(--mono);direction:ltr;font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.badge .b-line.hot{color:var(--ink);font-size:.85rem;letter-spacing:.26em}

/* ---------- Event archive entries ---------- */
.event{padding:88px 0;border-bottom:1px solid var(--line)}
.event:last-of-type{border-bottom:none}
.event .event-meta{margin-bottom:30px}
.event h2{margin-bottom:16px}
.event .recap{max-width:720px;font-size:1.05rem;color:var(--muted)}
.event .recap strong{color:var(--ink);font-weight:600}
.event-stats{
  display:flex;flex-wrap:wrap;gap:28px;margin-top:34px;
  padding-top:22px;border-top:1px solid var(--line);max-width:720px;
}
.event-stats .stat b{
  font-family:var(--mono);direction:ltr;unicode-bidi:isolate;display:block;
  font-size:1.6rem;font-weight:500;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.event-stats .stat span{font-size:.85rem;color:var(--muted)}
.event-photos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px;
}
.event-photos img{
  width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:2px;
}
.event-photos .wide{grid-column:span 2}
.photo-note{margin-top:12px;font-size:.85rem;color:var(--muted)}
.video-wrap{
  position:relative;aspect-ratio:16/9;margin-top:44px;
  border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--dark-bg);
}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.event-upcoming{
  border:1px solid var(--line);border-radius:2px;padding:52px 44px;
  margin-top:64px;position:relative;background:var(--bg);
}
.event-upcoming::before{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:var(--accent)}
.event-upcoming h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}

/* ---------- Principles (dark list) ---------- */
.principles{list-style:none;margin-top:60px;max-width:860px}
.principles li{
  padding:26px 0;border-top:1px solid var(--dark-line);
  font-size:clamp(1.15rem,2.4vw,1.55rem);font-weight:600;line-height:1.6;
  display:flex;gap:24px;align-items:baseline;
}
.principles .n{font-family:var(--mono);direction:ltr;font-weight:400;color:var(--accent);font-size:1.1rem;min-width:44px}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin-top:48px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 0;font-size:1.08rem;font-weight:600;
}
summary::-webkit-details-marker{display:none}
summary .mark{font-family:var(--mono);font-size:1.35rem;font-weight:400;color:var(--accent);transition:transform .25s ease;line-height:1}
details[open] summary .mark{transform:rotate(45deg)}
details .a{padding:0 0 26px;color:var(--muted);max-width:700px}

/* ---------- Forms ---------- */
form{margin-top:56px}
fieldset{border:none;margin-top:64px}
legend{
  float:right;width:100%;
  font-family:var(--display);font-size:1.35rem;font-weight:700;
  border-top:1px solid var(--ink);padding-top:18px;margin-bottom:6px;
}
legend .s-num{
  font-family:var(--mono);direction:ltr;unicode-bidi:isolate;
  font-weight:500;font-size:1.45rem;color:var(--accent);
  font-variant-numeric:tabular-nums;margin-left:14px;
}
.legend-sub{font-size:.92rem;color:var(--muted);margin-bottom:10px;clear:both}
.field{margin-top:30px}
label{display:block;font-weight:600;margin-bottom:10px;line-height:1.6}
.req{color:var(--accent)}
.hint{font-size:.85rem;color:var(--muted);margin-top:8px;line-height:1.7}
input,textarea,select{
  width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:2px;
  background:#fff;color:var(--ink);font:inherit;line-height:1.7;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
textarea{min-height:130px;resize:vertical}
.field-hot{border:1px solid var(--accent);border-radius:2px;padding:22px 20px;background:color-mix(in srgb,var(--accent) 3%,#fff)}
.field-hot .hot-tag{margin-bottom:12px}
.noask,.rulebox{margin-top:44px;padding:22px 26px;border:1px solid var(--line);border-radius:2px;font-size:.95rem;color:var(--muted)}
.noask strong,.rulebox strong{color:var(--ink)}
.checks{border:1px solid var(--line);border-radius:2px;background:#fff}
.checks label{
  display:flex;align-items:center;gap:14px;font-weight:400;margin:0;
  padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;
}
.checks label:last-child{border-bottom:none}
.checks input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.hidden{display:none}

/* ---------- Footer ---------- */
footer{background:var(--dark-bg);color:var(--dark-muted);border-top:1px solid var(--dark-line);padding:52px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot .logo{color:var(--dark-ink);font-size:1.2rem}
.foot p{font-size:.85rem}
.foot-links{display:flex;gap:22px;font-size:.9rem}
.foot-links a:hover{color:var(--dark-ink)}
.foot .sig{font-family:var(--mono);direction:ltr;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}

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

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .btn,summary .mark{transition:none}
  .tag .pulse{animation:none}
  .rv.in .score .fill{animation:none}
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;top:68px;inset-inline:0;
    flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:0 24px 10px;
  }
  header.nav-open .nav-links{display:flex}
  .nav-links a{padding:15px 0;border-top:1px solid var(--line);font-size:1rem}
  .logo .loc{display:none}
  .facts,.nights{grid-template-columns:1fr}
  section{padding:76px 0}
  .event{padding:64px 0}
  .event-photos{grid-template-columns:1fr 1fr;gap:10px}
  .event-photos .wide{grid-column:span 2}
  .event-upcoming{padding:40px 26px}
  .score .w{font-size:1.5rem}
  .badge{max-width:100%}
}