/* =====================================================================
   GEE — Global Engineering Entrepreneurship
   Design language: "الطيف" — منظومة واحدة، ثمانية ألوان تشعّ من مركزٍ ذهبي.
   Display: Tajawal (رسمي)  · Body: IBM Plex Sans Arabic · Data: IBM Plex Mono
   ===================================================================== */

:root{
  --ink:      #141019;   /* خلفية حبرية بنفسجية غامقة */
  --ink-1:    #1a1424;
  --ink-2:    #221a2f;
  --ink-3:    #2c2340;
  --line:     rgba(244,239,233,.12);
  --line-2:   rgba(244,239,233,.06);
  --cream:    #F4EFE9;   /* نص فاتح */
  --cream-2:  #cfc6d6;   /* نص ثانوي */
  --cream-3:  #948aa3;   /* نص خافت */
  --maroon:   #7a3030;   /* لون نص هوية GEE */
  --gold:     #E7B24C;   /* المركز الذهبي للمنظومة */
  --gold-dim: #b98a2f;

  /* الطيف — ألوان الأقسام الثمانية مأخوذة من الشعارات */
  --c-technology:  #2E7CD6;
  --c-materials:   #6C88AC;
  --c-ideas:       #12B5A4;
  --c-contracting: #5BB233;
  --c-hr:          #E23AAE;
  --c-training:    #8A44F0;
  --c-realestate:  #B24545;
  --c-engineering: #EF3B3B;

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 9px;
  --shadow: 0 24px 60px -24px rgba(0,0,0,.65);
  --maxw: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:"IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  font-weight:400; line-height:1.7; letter-spacing:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* أرضية إشعاعية خفيفة تحاكي انفجار الشعار */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 50% -8%, rgba(231,178,76,.10), transparent 60%),
    radial-gradient(900px 600px at 88% 12%, rgba(46,124,214,.08), transparent 55%),
    radial-gradient(900px 700px at 6% 88%, rgba(226,58,174,.07), transparent 55%);
}
main,header,footer{position:relative; z-index:1}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:"Tajawal", system-ui, sans-serif; font-weight:700; margin:0; line-height:1.3; letter-spacing:0}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,40px)}

/* ---- علامة نصية / سطر الطيف (العنصر المميّز المتكرر) ---- */
.spectrum-rule{
  height:3px; border:0; margin:0; border-radius:3px;
  background:linear-gradient(90deg,
    var(--c-technology), var(--c-materials), var(--c-ideas), var(--c-contracting),
    var(--c-hr), var(--c-training), var(--c-realestate), var(--c-engineering));
}
.eyebrow{
  font-family:"IBM Plex Mono", monospace; font-size:.74rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); display:inline-block}

/* ---- محاذاة النصوص اللاتينية (الإنجليزية) من اليسار لليمين كما ينبغي ---- */
.ltr, .chip, .cat-head .en, .svc small, .company-hero .chip, .footer-bottom{direction:ltr; unicode-bidi:isolate}
.cat-head .en, .svc small{text-align:start}

/* ============================ TOPBAR ============================ */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px); background:rgba(20,16,25,.72);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; gap:22px; height:70px}
.brand{display:flex; align-items:center; gap:13px; font-family:"Tajawal"; font-weight:700; direction:ltr}
.brand img{width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.brand div{text-align:left; line-height:1.05}
.brand b{font-size:1.32rem; letter-spacing:.04em}
.brand span{font-size:.62rem; color:var(--cream-3); font-family:"IBM Plex Mono"; letter-spacing:.16em; display:block; margin-top:1px}
.nav{margin-inline-start:auto; display:flex; gap:6px; align-items:center}
.nav a{padding:9px 15px; border-radius:99px; font-size:.92rem; color:var(--cream-2); transition:.25s var(--ease)}
.nav a:hover{color:var(--cream); background:var(--ink-2)}
.nav .btn{margin-inline-start:8px}
.burger{display:none; margin-inline-start:auto; background:none; border:1px solid var(--line); color:var(--cream);
  width:44px; height:40px; border-radius:10px; font-size:1.1rem; cursor:pointer}
.lang-switch{border:1px solid var(--line); border-radius:99px; padding:7px 14px !important; font-family:"IBM Plex Mono";
  font-size:.82rem; letter-spacing:.05em; color:var(--gold) !important}
.lang-switch:hover{border-color:var(--gold); background:rgba(231,178,76,.1) !important}

/* ============================ BUTTONS ============================ */
.btn{
  --bg:var(--gold);
  display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  font-family:"IBM Plex Sans Arabic"; font-weight:600; font-size:.95rem;
  padding:12px 22px; border-radius:99px; border:1px solid transparent;
  background:var(--bg); color:#241a08; transition:.28s var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px var(--bg)}
.btn svg{width:1.1em; height:1.1em}
.btn-ghost{background:transparent; color:var(--cream); border-color:var(--line)}
.btn-ghost:hover{background:var(--ink-2); box-shadow:none; border-color:var(--cream-3)}
.btn-lg{padding:15px 30px; font-size:1.02rem}

/* ============================ HERO ============================ */
.hero{padding:clamp(40px,7vw,86px) 0 40px}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.hero-copy h1{
  font-size:clamp(2.5rem,6vw,4.6rem); font-weight:700; letter-spacing:-.01em; margin:18px 0 0;
}
.hero-copy h1 .grad{
  background:linear-gradient(105deg,var(--c-technology),var(--c-ideas),var(--gold),var(--c-hr),var(--c-engineering));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy p.lead{font-size:clamp(1.05rem,2vw,1.28rem); color:var(--cream-2); max-width:44ch; margin:22px 0 30px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-stats{display:flex; gap:30px; margin-top:40px; padding-top:26px; border-top:1px solid var(--line)}
.hero-stats div b{font-family:"Tajawal"; font-size:1.9rem; display:block; line-height:1}
.hero-stats div span{font-size:.82rem; color:var(--cream-3)}

/* ---- الانفجار الشعاعي: العنصر التوقيعي ---- */
.constellation{
  position:relative; width:min(500px,90vw); aspect-ratio:1; margin-inline:auto;
}
.constellation .core{
  position:absolute; inset:0; margin:auto; width:150px; height:150px; border-radius:50%;
  display:grid; place-content:center; text-align:center; z-index:5;
  background:radial-gradient(circle at 50% 35%, #2a2138, #171021);
  border:1px solid rgba(231,178,76,.4);
  box-shadow:0 0 0 8px rgba(231,178,76,.06), 0 20px 50px -18px #000, inset 0 0 30px rgba(231,178,76,.08);
}
.constellation .core img{width:88px; height:88px; object-fit:contain; margin-inline:auto}
.constellation .core b{font-family:"Tajawal"; font-size:1.4rem; margin-top:2px; letter-spacing:.06em; direction:ltr}
.constellation .core span{font-size:.56rem; letter-spacing:.22em; color:var(--gold); font-family:"IBM Plex Mono"; direction:ltr}
/* حلقة مدارية */
.constellation .orbit{
  position:absolute; inset:14%; border:1px dashed var(--line); border-radius:50%;
  animation:spin 90s linear infinite;
}
.constellation .orbit.two{inset:2%; border-color:var(--line-2); animation-duration:140s; animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

.node{
  position:absolute; top:50%; left:50%; width:96px; height:96px; margin:-48px;
  border-radius:20px; display:grid; place-items:center; cursor:pointer; z-index:4;
  background:var(--ink-2); border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .35s, border-color .35s, background .35s;
  --c:var(--gold);
  opacity:0; /* يظهر بالحركة عند التحميل */
}
.node img{width:52px; height:52px; object-fit:contain; transition:transform .4s var(--ease)}
.node .ring{position:absolute; inset:-4px; border-radius:24px; border:1.5px solid var(--c); opacity:0; transition:.35s}
.node .tip{
  position:absolute; top:-34px; white-space:nowrap; font-size:.78rem; font-weight:600;
  background:var(--c); color:#fff; padding:3px 10px; border-radius:99px; opacity:0;
  transform:translateY(6px); transition:.3s; pointer-events:none; box-shadow:0 6px 16px -6px var(--c);
}
.node:hover, .node:focus-visible{
  background:color-mix(in srgb, var(--c) 18%, var(--ink-2));
  border-color:var(--c); box-shadow:0 0 34px -6px var(--c); z-index:6;
}
.node:hover img, .node:focus-visible img{transform:scale(1.12)}
.node:hover .ring{opacity:1; inset:-7px}
.node:hover .tip, .node:focus-visible .tip{opacity:1; transform:translateY(0)}
.node.pop{animation:pop .7s var(--ease) both}
/* نستخدم خاصية scale المستقلة كي لا تُستبدل قيمة transform:translate الخاصة بالموضع */
@keyframes pop{0%{opacity:0; scale:.3} 60%{opacity:1} 100%{opacity:1; scale:1}}

/* ============================ SECTION SHELL ============================ */
section.block{padding:clamp(56px,9vw,110px) 0; position:relative}
.section-head{max-width:640px; margin-bottom:44px}
.section-head h2{font-size:clamp(1.8rem,4vw,2.9rem); margin:14px 0 12px}
.section-head p{color:var(--cream-2); font-size:1.06rem; margin:0}

/* ============================ PROGRAMS (3 برامج) ============================ */
.programs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.program-card{
  position:relative; overflow:hidden; padding:32px 28px 28px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1)); border:1px solid var(--line);
  transition:.35s var(--ease); display:flex; flex-direction:column; min-height:290px;
}
.program-card::before{
  content:""; position:absolute; top:0; inset-inline:0; height:4px;
  background:linear-gradient(90deg,var(--gold),var(--c-hr),var(--c-technology));
}
.program-card:hover{transform:translateY(-6px); border-color:var(--cream-3); box-shadow:var(--shadow)}
.program-media{margin:-32px -28px 0; height:162px; overflow:hidden; position:relative;
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.program-media img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease)}
.program-card:hover .program-media img{transform:scale(1.06)}
.program-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,25,.05) 0%, rgba(26,20,36,.5) 68%, var(--ink-1) 100%)}
.program-ico{
  position:relative; z-index:2; width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  margin:-48px 0 18px; background:linear-gradient(160deg,var(--ink-3),var(--ink-1)); color:var(--gold);
  border:1px solid rgba(231,178,76,.35); box-shadow:0 10px 24px -12px #000;
}
.program-ico svg{width:28px; height:28px}
.program-card .kicker{font-family:"IBM Plex Mono"; font-size:.72rem; letter-spacing:.14em; color:var(--cream-3); text-transform:uppercase}
.program-card h3{font-size:1.55rem; margin:6px 0 12px}
.program-card p{color:var(--cream-2); font-size:.98rem; margin:0 0 22px; flex:1}
.program-card .go{
  display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--gold);
  align-self:flex-start; transition:gap .25s
}
.program-card:hover .go{gap:1em}

/* ============================ COMPANIES GRID ============================ */
.companies-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.company-card{
  --c:var(--gold);
  position:relative; overflow:hidden; border-radius:var(--r-md); padding:26px 22px;
  background:var(--ink-1); border:1px solid var(--line); min-height:200px;
  display:flex; flex-direction:column; transition:.35s var(--ease);
}
.company-card::after{
  content:""; position:absolute; inset:0; opacity:0; transition:.35s;
  background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb,var(--c) 22%,transparent), transparent 65%);
}
.company-card:hover{transform:translateY(-6px); border-color:var(--c); box-shadow:0 22px 46px -22px color-mix(in srgb,var(--c) 60%, #000)}
.company-card:hover::after{opacity:1}
.company-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  opacity:.09; filter:saturate(.85); transition:opacity .4s, transform .6s var(--ease)}
.company-card:hover .company-media{opacity:.2; transform:scale(1.06)}
.company-logo{
  width:64px; height:64px; border-radius:14px; background:#fff; padding:9px; margin-bottom:16px;
  display:grid; place-items:center; box-shadow:0 8px 20px -10px rgba(0,0,0,.6); position:relative; z-index:1;
}
.company-logo img{width:100%; height:100%; object-fit:contain}
.company-card .idx{position:absolute; top:16px; inset-inline-end:18px; font-family:"IBM Plex Mono";
  font-size:.8rem; color:var(--cream-3); z-index:1}
.company-card h3{font-size:1.22rem; position:relative; z-index:1}
.company-card p{font-size:.86rem; color:var(--cream-2); margin:6px 0 0; position:relative; z-index:1; flex:1}
.company-card .enter{position:relative; z-index:1; margin-top:16px; font-size:.82rem; font-weight:600; color:var(--c);
  display:inline-flex; align-items:center; gap:.4em; opacity:.9}
.company-card .enter svg, .program-card .go svg{width:1.15em; height:1.15em; flex:none}
.company-card .bar{position:absolute; bottom:0; inset-inline-start:0; height:3px; width:100%; background:var(--c);
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); z-index:1}
.company-card:hover .bar{transform:scaleX(1)}

/* ============================ COMPANY PAGE ============================ */
.company-hero{--c:var(--gold); padding:clamp(40px,7vw,70px) 0 30px; position:relative; overflow:hidden}
.company-hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.3}
.company-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(680px 340px at 82% -10%, color-mix(in srgb,var(--c) 42%,transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb,var(--c) 30%,rgba(20,16,25,.7)), var(--ink) 92%);
}
.company-hero .wrap{display:flex; gap:28px; align-items:center; flex-wrap:wrap}
.company-badge{width:112px; height:112px; border-radius:24px; background:#fff; padding:16px; flex:none;
  box-shadow:0 20px 50px -18px color-mix(in srgb,var(--c) 70%,#000)}
.company-hero h1{font-size:clamp(2rem,5vw,3.3rem)}
.company-hero .tag{color:var(--cream-2); font-size:1.15rem; margin:10px 0 0; max-width:52ch}
.company-hero .crumbs{font-family:"IBM Plex Mono"; font-size:.78rem; color:var(--cream-3); margin-bottom:14px}
.company-hero .crumbs a:hover{color:var(--gold)}
.company-hero .chip{display:inline-block; margin-top:16px; font-size:.82rem; font-weight:600; color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,transparent); padding:5px 14px; border-radius:99px;
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}

.cat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; padding:52px 0}
.cat{--c:var(--gold); background:var(--ink-1); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 24px; transition:.3s var(--ease)}
.cat:hover{border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.cat-head{display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.cat-num{width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center;
  font-family:"Tajawal"; font-weight:700; font-size:1.2rem; color:#fff;
  background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.cat-head h3{font-size:1.28rem}
.cat-head .en{display:block; font-family:"IBM Plex Mono"; font-size:.7rem; letter-spacing:.1em; color:var(--cream-3); text-transform:uppercase; margin-top:2px}
.svc-list{display:flex; flex-wrap:wrap; gap:9px}
.svc{
  font-size:.9rem; padding:8px 14px; border-radius:10px; background:var(--ink-2);
  border:1px solid var(--line); color:var(--cream); cursor:default; transition:.22s var(--ease);
  display:inline-flex; flex-direction:column; gap:1px;
}
.svc small{font-family:"IBM Plex Mono"; font-size:.62rem; color:var(--cream-3); letter-spacing:.02em}
.svc:hover{background:color-mix(in srgb,var(--c) 16%,var(--ink-2)); border-color:var(--c); transform:translateY(-2px)}

/* ---- شريط بقية الأقسام ---- */
.more-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.more-strip a{--c:var(--gold); display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--ink-1); border:1px solid var(--line); transition:.28s var(--ease)}
.more-strip a:hover{border-color:var(--c); transform:translateY(-3px); box-shadow:0 14px 30px -18px color-mix(in srgb,var(--c) 70%,#000)}
.more-strip img{width:38px; height:38px; object-fit:contain; background:#fff; border-radius:9px; padding:5px; flex:none}
.more-strip span{font-size:.9rem; font-weight:600; color:var(--cream)}

/* ============================ FORMS ============================ */
.form-wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.form-aside{position:sticky; top:100px}
.form-aside h2{font-size:clamp(1.8rem,4vw,2.7rem); margin:14px 0 14px}
.form-aside p{color:var(--cream-2)}
.form-aside ul{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px}
.form-aside li{display:flex; gap:12px; align-items:flex-start; color:var(--cream-2); font-size:.96rem}
.form-aside li svg{width:22px; height:22px; color:var(--gold); flex:none; margin-top:2px}

.form-shell{background:linear-gradient(180deg,var(--ink-2),var(--ink-1)); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem; color:var(--cream-2); font-weight:600}
.field label .req{color:var(--c-engineering)}
.field input, .field select, .field textarea{
  font-family:inherit; font-size:.96rem; color:var(--cream); background:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; transition:.22s var(--ease); width:100%;
}
.field textarea{min-height:104px; resize:vertical}
.field input::placeholder, .field textarea::placeholder{color:var(--cream-3)}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--gold); background:var(--ink-1); outline:none}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23948aa3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 16px center; padding-inline-start:14px}
.form-note{font-size:.82rem; color:var(--cream-3); margin-top:6px}
.form-msg{margin-top:16px; padding:14px 16px; border-radius:var(--r-sm); font-size:.92rem; display:none}
.form-msg.ok{display:block; background:rgba(91,178,51,.14); border:1px solid var(--c-contracting); color:#c9f0b6}
.form-msg.err{display:block; background:rgba(239,59,59,.12); border:1px solid var(--c-engineering); color:#ffc9c9}

/* ============================ FOOTER ============================ */
.footer{border-top:1px solid var(--line); background:var(--ink-1); padding:56px 0 30px; margin-top:20px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
.footer h4{font-size:1rem; margin-bottom:16px; color:var(--cream)}
.footer a{color:var(--cream-2); font-size:.92rem; display:block; padding:5px 0; transition:.2s}
.footer a:hover{color:var(--gold)}
.footer .muted{color:var(--cream-3); font-size:.9rem; max-width:34ch}
.footer-bottom{border-top:1px solid var(--line); margin-top:40px; padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--cream-3); font-size:.84rem; font-family:"IBM Plex Mono"}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr; gap:36px}
  .constellation{order:-1}
  .programs-grid{grid-template-columns:1fr}
  .companies-grid{grid-template-columns:repeat(2,1fr)}
  .more-strip{grid-template-columns:repeat(2,1fr)}
  .form-wrap{grid-template-columns:1fr}
  .form-aside{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .nav{position:fixed; inset:70px 0 auto 0; flex-direction:column; background:var(--ink-1);
    border-bottom:1px solid var(--line); padding:14px 20px; gap:4px; display:none}
  .nav.open{display:flex}
  .nav a{width:100%}
  .burger{display:block}
  .cat-grid{grid-template-columns:1fr}
  .companies-grid{grid-template-columns:1fr}
  .hero-stats{gap:18px}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .constellation .node{width:74px; height:74px; margin:-37px}
  .constellation .node img{width:40px; height:40px}
}

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