/* ==========================================================================
   JAD — design system
   Values come from the brand guidelines, not from taste. Where a rule exists
   there (the 60/30/10 balance, gold never as a fill, the falcon monochrome),
   it is encoded here so it cannot drift.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
/* Expo Arabic is the sole brand face and carries both scripts. Self-hosted
   because a fallback would silently break the brand on most devices. */
@font-face {
  font-family: 'Expo Arabic';
  src: url('../fonts/expo-light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Expo Arabic';
  src: url('../fonts/expo-book.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Expo Arabic';
  src: url('../fonts/expo-semibold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* Foundation — dominates (60%) */
  --onyx:        #0E0E0E;
  --onyx-panel:  #171412;
  --ivory:       #F5F1E8;
  --ivory-2:     #EDE6D8;

  /* Signature — signs (30%) */
  --burg:        #6E1F2B;
  --burg-deep:   #54141F;

  /* Jewel — studs (10%). Hairlines, seals, accents. Never a large fill. */
  --gold:        #C6A15B;
  --gold-soft:   #DCC08A;

  /* Neutrals */
  --sand:        #D9CFC0;
  --stone:       #8C8371;
  --charcoal:    #2A2724;

  --line:        rgba(198,161,91,.30);
  --line-soft:   rgba(0,0,0,.10);

  /* Text on dark grounds — an opacity ladder, not new greys */
  --on-dark:        rgba(245,241,232,.86);
  --on-dark-muted:  rgba(245,241,232,.62);
  --on-dark-faint:  rgba(245,241,232,.42);

  --maxw: 1200px;
  --ease: cubic-bezier(.2,.6,.2,1);

  --ff: 'Expo Arabic', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--ff);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.85;
  background: var(--ivory);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--burg); color: var(--ivory); }

/* Latin runs inside RTL text must be isolated or the bidi algorithm
   reorders them — phone numbers are the usual casualty. */
.en, .num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- layout */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(22px, 5vw, 64px); }
.sec  { padding-block: clamp(64px, 9vw, 140px); position: relative; overflow: hidden; }

.sec--dark   { background: var(--onyx);       color: var(--on-dark); }
.sec--panel  { background: var(--onyx-panel); color: var(--on-dark); }
.sec--ivory2 { background: var(--ivory-2); }
.sec--burg   { background: var(--burg);       color: var(--ivory); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.grid  { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------ typography */
h1, h2, h3 { line-height: 1.18; letter-spacing: -.01em; margin: 0; text-wrap: balance; }

/* Headings are Light — the guidelines are explicit that weight 300 carries
   the luxury. Weight 600 is reserved for the one accented word. */
.display {
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.display b, h2.title b { font-weight: 600; }

h2.title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 300;
  margin-block: .35em .5em;
}
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; margin-bottom: .5em; }

.lead { font-size: clamp(1.12rem, 1.7vw, 1.4rem); font-weight: 300; line-height: 1.7; max-width: 44ch; }
p { max-width: 64ch; margin-block: 0 1em; }

.eyebrow {
  font-size: .74rem; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 22px; display: flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--gold); opacity: .8; }

.snum { font-size: clamp(3rem, 8vw, 5.6rem); font-weight: 300; line-height: .9; color: var(--gold); opacity: .9; }
.cap  { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.sec--dark .cap, .sec--panel .cap { color: var(--on-dark-faint); }
.muted { color: var(--stone); }
.sec--dark .muted, .sec--panel .muted { color: var(--on-dark-muted); }

/* ------------------------------------------------------- graphic elements */
/* The gold hairline: a thread that separates and signs. */
.hair { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: 0; margin: 0; }
.hair--v { width: 1px; height: 64px; background: linear-gradient(var(--gold), transparent); }

.pill {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--gold);
  padding: 5px 12px; border-radius: 40px; display: inline-block;
}

.card {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: clamp(22px, 3vw, 34px);
}
.sec--dark .card, .sec--panel .card {
  background: rgba(255,255,255,.035);
  border-color: rgba(198,161,91,.18);
}

/* The seal: falcon inside a gold circle. Mark is ~57% of the circle. */
.seal {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid; place-items: center;
}
.seal img { width: 34px; }

/* Watermark falcon — barely there by design (4.5%). */
.wm { position: absolute; pointer-events: none; opacity: .045; z-index: 0; }
.sec > .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  padding: 14px 30px; border-radius: 4px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary { background: var(--burg); color: var(--ivory); }
.btn--primary:hover { background: var(--burg-deep); }
/* Gold as an outline, never as a fill — the guidelines forbid gold areas. */
.btn--gold { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn--gold:hover { background: rgba(198,161,91,.10); }
.btn--ghost { background: transparent; color: var(--charcoal); border-color: var(--line-soft); }
.sec--dark .btn--ghost, .sec--panel .btn--ghost { color: var(--on-dark); border-color: rgba(245,241,232,.25); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* ------------------------------------------------------------------- nav */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  background: rgba(14,14,14,.82); backdrop-filter: blur(14px);
  border-block-end: 1px solid rgba(198,161,91,.16);
}
.nav__in {
  max-width: 1320px; margin-inline: auto; height: 72px;
  padding-inline: clamp(18px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* The lockup is wide and short, so height drives its size. 30px rendered it
   almost illegible on desktop; 46px reads as a brand mark without crowding
   the 72px bar. Width stays auto so the mark is never distorted. */
.nav__brand img { height: 46px; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a {
  color: rgba(245,241,232,.66); font-size: .85rem; text-decoration: none;
  padding: 8px 12px; border-radius: 6px; transition: color .25s, background .25s; white-space: nowrap;
}
.nav__links a:hover, .nav__links a[aria-current='page'] { color: var(--gold); background: rgba(198,161,91,.10); }
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__toggle { display: none; background: none; border: 0; color: var(--ivory); font-size: 1.5rem; cursor: pointer; padding: 6px; }
.lang-switch { color: var(--gold) !important; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--onyx); color: var(--on-dark-muted); padding-block: clamp(50px, 7vw, 90px) 30px; }
.foot a { color: var(--on-dark-muted); text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot__mark img { width: 160px; margin-bottom: 20px; }
.foot__bottom { border-block-start: 1px solid rgba(198,161,91,.14); margin-block-start: 40px; padding-block-start: 24px; font-size: .8rem; color: var(--on-dark-faint); }

/* --------------------------------------------------------------- motion */
/* Scoped to .js so the content is visible when JavaScript is unavailable,
   blocked, or simply slow. An unconditional opacity:0 would hide the page
   from anyone whose script never runs — and from most crawlers. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  body { font-size: 16px; line-height: 1.8; }
  .display { font-size: clamp(2rem, 9vw, 2.6rem); }
  h2.title { font-size: 1.68rem; }
  .lead { font-size: 1.08rem; }
  p { max-width: 100%; }
  .sec { padding-block: 54px; }
  .wrap { padding-inline: 20px; }
  .wm { display: none !important; }
  .nav__in { height: 58px; }
  .nav__links {
    position: fixed; inset-block-start: 58px; inset-inline: 0;
    background: rgba(14,14,14,.98); flex-direction: column; align-items: stretch;
    padding: 12px; gap: 2px; display: none;
    border-block-end: 1px solid var(--line);
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 14px; font-size: 1rem; }
  .nav__toggle { display: block; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .sec { padding-block: 46px; }
  .wrap { padding-inline: 16px; }
}

/* ==================== assistant widget ==================== */
.jad-chat-launch{
  position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:200;
  width:58px; height:58px; border-radius:50%; cursor:pointer;
  background:var(--onyx); border:1px solid var(--gold);
  display:grid; place-items:center;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.5);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.jad-chat-launch:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -10px rgba(0,0,0,.6); }
.jad-chat-launch:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* An author display rule beats the UA stylesheet rule for [hidden], so the
   panel below would never disappear and the close button looked broken.
   This must come first and stay explicit. */
.jad-chat[hidden]{ display:none !important; }
.jad-chat{
  position:fixed; inset-block-end:92px; inset-inline-end:22px; z-index:200;
  width:min(384px, calc(100vw - 32px)); height:min(560px, calc(100vh - 130px));
  background:var(--ivory); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.5);
}
.jad-chat__top{
  background:var(--onyx); color:var(--ivory); padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-block-end:1px solid var(--line);
}
.jad-chat__id{ display:flex; align-items:center; gap:10px; }
.jad-chat__id strong{ display:block; font-size:.95rem; font-weight:600; }
.jad-chat__id span{ display:block; font-size:.75rem; color:var(--gold); }
.jad-chat__x{
  background:none; border:0; color:var(--on-dark-muted);
  font-size:1.5rem; line-height:1; cursor:pointer; padding:0 4px;
}
.jad-chat__x:hover{ color:var(--gold); }

.jad-chat__log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.jad-msg{ display:flex; flex-direction:column; max-width:86%; }
.jad-msg--user{ align-self:flex-start; align-items:flex-start; }
.jad-msg--model{ align-self:flex-end; align-items:flex-end; }
.jad-msg__b{
  padding:10px 14px; border-radius:14px; font-size:.94rem; line-height:1.7;
  white-space:pre-wrap; word-break:break-word;
}
.jad-msg--user .jad-msg__b{ background:var(--burg); color:var(--ivory); border-end-start-radius:4px; }
.jad-msg--model .jad-msg__b{ background:var(--ivory-2); color:var(--charcoal); border:1px solid var(--line-soft); border-end-end-radius:4px; }
.jad-msg__tag{ font-size:.72rem; color:var(--gold); margin-block-start:4px; }

.jad-typing .jad-msg__b{ display:flex; gap:4px; padding:12px 14px; }
.jad-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--stone);
  animation:jadDot 1.3s infinite ease-in-out;
}
.jad-typing span:nth-child(2){ animation-delay:.18s; }
.jad-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes jadDot{ 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-4px);} }

.jad-chat__form{ display:flex; gap:8px; padding:12px; border-block-start:1px solid var(--line-soft); background:#fff; }
.jad-chat__in{
  flex:1; font-family:inherit; font-size:.95rem; color:var(--charcoal);
  border:1px solid var(--line-soft); border-radius:22px; padding:10px 16px; background:var(--ivory);
}
.jad-chat__in:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.jad-chat__go{
  flex:none; width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:var(--burg); color:var(--ivory); border:0; font-size:1rem;
}
.jad-chat__go:hover{ background:var(--burg-deep); }
.jad-chat__go:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.jad-chat[dir], html[dir="rtl"] .jad-chat__go{ transform:scaleX(-1); }

@media (max-width:520px){
  .jad-chat{ inset-block-end:0; inset-inline:0; width:100%; height:100dvh; border-radius:0; border:0; }
  .jad-chat-launch{ inset-block-end:16px; inset-inline-end:16px; width:52px; height:52px; }
}
@media (prefers-reduced-motion: reduce){ .jad-typing span{ animation:none; } }