:root{
  --bg:#030303;
  --panel:#080706;
  --gold:#e5aa2d;
  --gold2:#ffd66a;
  --text:#fff;
  --muted:#c5c5c5;
  --line:#3a2b15;
  --shell:1536px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden}
body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font-family:Arial,"Noto Sans","Noto Sans TC","Noto Sans Arabic",sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
img{max-width:100%}

/* Header */
header{height:88px;background:#050505;border-bottom:1px solid #ffffff22;position:relative;z-index:30}
.head{
  width:min(100%,var(--shell));height:100%;margin:auto;
  padding-inline:clamp(24px,3.5vw,54px);
  display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr) auto auto;
  gap:clamp(12px,1.8vw,28px);align-items:center
}
.brand{display:flex;align-items:center;min-width:0}
.brand img{width:min(225px,100%);height:58px;object-fit:contain;object-position:left center}
nav{height:100%;display:flex;justify-content:center;align-items:center;gap:clamp(18px,2.7vw,42px);min-width:0}
nav a{height:100%;display:flex;align-items:center;border-bottom:2px solid transparent;font-size:15px;white-space:nowrap}
nav a:first-child,nav a:hover{color:#efbd45;border-bottom-color:#efbd45}
.lang{position:relative}
.lang>button{
  height:48px;min-width:112px;border:0;background:transparent;color:#fff;
  display:grid;grid-template-columns:22px minmax(46px,auto) 14px;gap:7px;
  align-items:center;justify-content:center;padding:0 8px;white-space:nowrap
}
.langGlobe,.langGlobe svg{display:block;width:21px;height:21px}
.langGlobe svg{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}
#langCode,.langArrow{display:block;white-space:nowrap;line-height:1}
#langCode{text-align:center}
.lang>div{
  display:none;position:absolute;right:0;top:52px;width:170px;padding:6px;
  background:#0c0a07;border:1px solid #9d711f;border-radius:10px;z-index:50
}
.lang>div.open{display:grid}
.lang>div button{padding:9px;border:0;background:none;color:#fff;text-align:left;cursor:pointer}
.topCta,.cta{background:linear-gradient(120deg,#ffe28e,#dda029);color:#090909;font-weight:700}
.topCta{padding:16px 24px;border-radius:13px;white-space:nowrap}

/* Hero */
.hero{
  width:min(100%,var(--shell));height:500px;margin:auto;position:relative;overflow:hidden;
  background:radial-gradient(circle at 70% 50%,#4d2e06,#080604 37%,#030303 70%)
}
.globe{position:absolute;right:0;top:0;width:61%;height:100%;background:url("assets/globe-clean.jpg") center/cover no-repeat}
.globe:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#030303 0,transparent 30%),linear-gradient(0deg,#030303 0,transparent 22%)}
#networkCanvas{position:absolute;right:0;top:0;width:61%;height:100%;z-index:1;pointer-events:none}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,#030303 0,#030303ee 30%,transparent 57%)}
.copy{position:relative;z-index:2;width:100%;height:100%;padding:54px clamp(24px,3.5vw,54px)}
.copy h1{margin:0;width:min(560px,48vw);font-size:clamp(40px,3.4vw,52px);line-height:1.02}
.copy h1 span,.copy h1 strong{display:block}
.copy h1 strong{font-size:clamp(56px,4.6vw,70px);line-height:.95;background:linear-gradient(#ffe994,#d89b27);-webkit-background-clip:text;color:transparent}
.copy p{width:min(500px,45vw);color:#c8c8c8;font-size:15px;line-height:1.48;margin:17px 0}
.cta{display:inline-block;padding:15px 31px;border-radius:28px}

/* Cards — one clean adaptive system for every language */
.cardsWrap{background:var(--bg);padding:0 0 24px}
.cards{
  width:min(100%,var(--shell));margin:auto;padding-inline:clamp(24px,3.5vw,54px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.3vw,20px);
  align-items:stretch
}
.cards article{
  min-width:0;min-height:285px;position:relative;padding:22px 28px 26px;
  border:1px solid #b67d1c;border-radius:12px;
  background:linear-gradient(145deg,#0d0c0a,#050505);
  display:grid;grid-template-rows:82px 1fr
}
.cards article:after{content:"";position:absolute;right:0;bottom:0;width:55%;height:2px;background:linear-gradient(90deg,transparent,#ffc64d)}
.cards article>i{position:absolute;right:22px;top:18px;color:#d4a343;font-style:normal;font-size:16px}
.ico.art{height:82px;display:flex;align-items:center;justify-content:flex-start}
.ico.art img{display:block;width:108px;height:80px;object-fit:contain;object-position:center;filter:none}
.cards article:nth-child(3) .ico.art img{width:118px}
.cardContent{
  min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 42px;
  gap:18px;align-items:start
}
.cardText{min-width:0}
.cards h2{
  margin:0 0 11px;font-size:clamp(18px,1.35vw,21px);line-height:1.16;
  overflow-wrap:anywhere;word-break:normal
}
.cards p{
  margin:0;color:var(--muted);font-size:clamp(13px,.92vw,14px);line-height:1.52;
  overflow-wrap:anywhere;word-break:normal
}
.cardArrow{
  width:40px;height:40px;margin-top:0;border:1px solid #dda62f;border-radius:50%;
  display:grid;place-items:center;color:#dda62f;font-weight:700;flex:none
}

/* Partners */
.partners{background:var(--bg);border-top:1px solid #21190e;border-bottom:1px solid #21190e}
.partnersInner{
  width:min(100%,var(--shell));min-height:100px;margin:auto;padding:18px clamp(24px,3.5vw,54px);
  display:grid;grid-template-columns:minmax(130px,180px) repeat(5,minmax(0,1fr));align-items:center
}
.partnersInner>span{font-size:18px;white-space:nowrap;padding-right:20px}
.partner.logoPartner{
  min-width:0;height:52px;padding:0 clamp(10px,1.4vw,22px);
  display:flex;align-items:center;justify-content:center;border-right:1px solid #51422b
}
.partner.logoPartner:last-child{border-right:0}
.partner.logoPartner img{display:block;width:auto;height:auto;max-width:100%;max-height:44px;object-fit:contain}

/* Footer */
footer{
  width:min(100%,var(--shell));margin:auto;padding:18px clamp(24px,3.5vw,54px);
  color:#777;display:flex;justify-content:space-between;gap:20px;font-size:13px
}
footer a{color:#b88a31}

/* Chat */
.chatFab{
  position:fixed;z-index:40;right:28px;bottom:28px;width:66px;height:66px;border-radius:50%;
  border:1px solid #ffe17b;background:radial-gradient(circle,#ffe9a5,#b97412);font-size:19px
}
.chatFab em{position:absolute;right:0;top:2px;width:13px;height:13px;border-radius:50%;background:#ff5b3a}
.chat{
  display:none;position:fixed;z-index:39;right:26px;bottom:108px;width:270px;padding:14px;
  border:2px solid #e7b53b;border-radius:17px;background:#0b0a08f7;box-shadow:0 20px 55px #000
}
.chat.open{display:block}
.chatTitle{display:flex;justify-content:space-between;color:#f2c24c;padding:5px 4px 10px}
.chatTitle button{border:0;background:none;color:#aaa;font-size:22px;cursor:pointer}
.chat a{
  min-height:58px;display:flex;align-items:center;gap:11px;padding:10px 13px;margin:8px 0;
  border:1px solid #4c4336;border-radius:11px;background:#15130f
}
.chat a b{margin-left:auto;color:#e9ad27}
.chatIcon{width:36px;height:36px;flex:0 0 36px;object-fit:contain;background:transparent}


/* v17 Arabic: preserve the original site geometry; only Arabic text is RTL. */
html[lang="ar"] body{direction:ltr;font-family:Arial,"Noto Sans Arabic",Tahoma,"Segoe UI",sans-serif}
html[lang="ar"] [data-i]{direction:rtl;unicode-bidi:plaintext}
html[lang="ar"] nav a,
html[lang="ar"] .topCta,
html[lang="ar"] .cta,
html[lang="ar"] .cards h2,
html[lang="ar"] .cards p,
html[lang="ar"] .partnersInner>span,
html[lang="ar"] .chatTitle,
html[lang="ar"] .chat a{text-align:right}
html[lang="ar"] .copy{direction:ltr;text-align:left}
html[lang="ar"] .copy h1,html[lang="ar"] .copy p{margin-left:0;margin-right:0}
html[lang="ar"] .copy h1 span,html[lang="ar"] .copy p{direction:rtl;unicode-bidi:plaintext;text-align:right}
html[lang="ar"] .copy h1 strong{direction:ltr;unicode-bidi:isolate;text-align:left}
html[lang="ar"] .copy .cta{direction:rtl;unicode-bidi:isolate}
html[lang="ar"] .cards,html[lang="ar"] .cards article{direction:ltr}
html[lang="ar"] .cardText{direction:rtl;text-align:right}
html[lang="ar"] .cardContent{grid-template-columns:minmax(0,1fr) 42px;direction:ltr}
html[lang="ar"] .cardArrow{grid-column:2;direction:ltr}
html[lang="ar"] .cards article>i{right:22px;left:auto;direction:ltr}
html[lang="ar"] .brand,html[lang="ar"] .lang,html[lang="ar"] .partnersInner,html[lang="ar"] footer{direction:ltr}
html[lang="ar"] #langCode{direction:ltr}
html[lang="ar"] .chat a{direction:rtl}
html[lang="ar"] .chat a b{margin-left:0;margin-right:auto;direction:ltr}

/* Laptop */
@media(max-width:1199px){
  header{height:auto;min-height:82px}
  .head{
    min-height:82px;grid-template-columns:minmax(170px,220px) minmax(0,1fr) auto auto;
    padding-inline:24px;gap:12px
  }
  .brand img{width:200px}
  nav{gap:18px}
  nav a{font-size:14px}
  .topCta{padding:14px 18px}
  .cards{padding-inline:24px}
  .cards article{padding:20px 22px 24px}
  .partnersInner{padding-inline:24px}
}

/* Tablet: cards become two columns, then one; nothing overlaps */
@media(max-width:980px){
  .head{grid-template-columns:1fr auto auto}
  nav{grid-column:1/-1;order:4;height:46px;justify-content:flex-start;overflow-x:auto}
  nav a{height:46px}
  .hero{height:520px}
  .globe,#networkCanvas{width:78%;opacity:.82}
  .shade{background:linear-gradient(90deg,#030303 0,#030303ee 42%,transparent 75%)}
  .copy h1{width:min(540px,72vw)}
  .copy p{width:min(500px,68vw)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .partnersInner{grid-template-columns:150px repeat(3,minmax(0,1fr));row-gap:14px}
  .partnersInner>span{grid-row:1/3}
}

/* Phone */
@media(max-width:680px){
  .head{grid-template-columns:minmax(145px,1fr) auto}
  .brand img{width:180px}
  .topCta{display:none}
  .lang{justify-self:end}
  nav{gap:22px}
  .hero{height:auto;min-height:560px}
  .globe,#networkCanvas{width:100%;opacity:.6}
  .shade{background:linear-gradient(90deg,#030303ee,#030303aa 68%,#03030344)}
  .copy{padding:50px 22px 60px}
  .copy h1{width:100%;font-size:36px}
  .copy h1 strong{font-size:52px}
  .copy p{width:100%;font-size:14px}
  .cards{grid-template-columns:1fr;padding-inline:16px}
  .cards article{min-height:0}
  .partnersInner{grid-template-columns:1fr 1fr;padding-inline:18px}
  .partnersInner>span{grid-column:1/-1;grid-row:auto;padding:0 0 8px}
  .partner.logoPartner{border-right:0;border-bottom:1px solid #342817}
  footer{padding-inline:20px;flex-direction:column}
  .chat{right:14px;bottom:94px;width:min(270px,calc(100vw - 28px))}
  .chatFab{right:16px;bottom:18px}
}


/* v18 Arabic contact-panel correction.
   Keep the component geometry identical to the other languages. */
html[lang="ar"] .chat{
  direction:ltr;
}
html[lang="ar"] .chatTitle{
  direction:ltr;
  text-align:left;
}
html[lang="ar"] .chatTitle [data-i]{
  direction:rtl;
  unicode-bidi:plaintext;
  text-align:left;
}
html[lang="ar"] .chatTitle button{
  direction:ltr;
  margin-left:auto;
}
html[lang="ar"] .chat a{
  direction:ltr;
  text-align:left;
}
html[lang="ar"] .chat a .chatIcon{
  order:0;
  direction:ltr;
}
html[lang="ar"] .chat a span,
html[lang="ar"] .chat a [data-i]{
  order:1;
}
html[lang="ar"] .chat a b{
  order:2;
  margin-left:auto;
  margin-right:0;
  direction:ltr;
}
html[lang="ar"] .chat a[href*="t.me"] [data-i],
html[lang="ar"] .chat a[href*="wa.me"] [data-i]{
  direction:ltr;
  unicode-bidi:isolate;
}