/* =========================================================
   شركة الياسمين الأولى لتقنية المعلومات
   style.css  —  single complete stylesheet
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --green-900:#0d2b23;
  --green-800:#123a2f;
  --green-700:#1a5040;
  --green-600:#226b55;
  --green-500:#2e8a6d;
  --green-300:#8ec7b2;
  --green-100:#dff0e9;

  --cream:#f6f3ec;
  --cream-2:#efe9dd;
  --ink:#0f1c18;
  --ink-soft:#4a5a55;
  --ink-mute:#7d8d88;

  --line:rgba(18,58,47,.12);
  --line-strong:rgba(18,58,47,.22);

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:26px;

  --shadow-sm:0 2px 10px rgba(13,43,35,.06);
  --shadow:0 14px 40px -18px rgba(13,43,35,.28);
  --shadow-lg:0 30px 70px -30px rgba(13,43,35,.45);

  --ease:cubic-bezier(.22,.68,0,1);
  --dur:.55s;

  --wrap:1180px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'IBM Plex Sans Arabic','Segoe UI',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.85;
  font-size:16.5px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,li,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--green-700);color:#fff}

:focus-visible{
  outline:2px solid var(--green-600);
  outline-offset:3px;
  border-radius:6px;
}

.wrap{width:min(var(--wrap),92vw);margin-inline:auto}

/* ---------- 3. Reveal system ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none}

.reveal-mask .line{display:block;overflow:hidden}
.reveal-mask .line > span{
  display:block;
  transform:translateY(105%);
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal-mask.is-visible .line > span{transform:none}
.reveal-mask .line:nth-child(2) > span{transition-delay:.1s}

/* ---------- 4. Shared type ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-600);
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  width:26px;height:1.5px;
  background:var(--green-500);
  display:block;
}

.section-title{
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.02em;
  color:var(--green-900);
}

.section-lead{
  max-width:56ch;
  margin-top:1.1rem;
  color:var(--ink-soft);
  font-size:1.03rem;
}

.section{padding:clamp(4.5rem,10vw,8rem) 0}

.section-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head .section-title{margin-bottom:.2rem}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.95rem 2rem;
  border-radius:100px;
  font-weight:600;
  font-size:.97rem;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .35s,border-color .3s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--green-800);
  color:#fff;
  box-shadow:0 12px 30px -14px rgba(13,43,35,.7);
}
.btn-primary:hover{
  background:var(--green-700);
  transform:translateY(-3px);
  box-shadow:0 20px 40px -16px rgba(13,43,35,.75);
}
.btn-ghost{
  border:1.5px solid var(--line-strong);
  color:var(--green-800);
  background:transparent;
}
.btn-ghost:hover{
  border-color:var(--green-700);
  background:rgba(34,107,85,.07);
  transform:translateY(-3px);
}
.btn-block{width:100%}

/* =========================================================
   6. HEADER
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  padding:.9rem 0;
  background:rgba(246,243,236,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,box-shadow .35s,padding .35s;
}
.site-header.is-scrolled{
  background:rgba(246,243,236,.94);
  border-bottom-color:var(--line);
  box-shadow:0 8px 26px -22px rgba(13,43,35,.6);
  padding:.6rem 0;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.brand{display:flex;align-items:center;gap:.75rem}
.brand-mark{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:13px;
  background:linear-gradient(145deg,var(--green-700),var(--green-900));
  color:#fff;
  font-size:1.3rem;
  font-weight:700;
  box-shadow:0 10px 22px -12px rgba(13,43,35,.9);
  flex:none;
}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text strong{font-size:1.02rem;font-weight:700;color:var(--green-900)}
.brand-text small{font-size:.74rem;color:var(--ink-mute);letter-spacing:.04em}

.nav{display:flex;align-items:center;gap:2rem}
.nav a{
  font-size:.94rem;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
  transition:color .3s;
}
.nav a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  inset-inline-start:0;
  bottom:-6px;
  width:100%;height:1.5px;
  background:var(--green-600);
  transform:scaleX(0);
  transform-origin:inline-start;
  transition:transform .4s var(--ease);
}
.nav a:not(.nav-cta):hover{color:var(--green-800)}
.nav a:not(.nav-cta):hover::after{transform:scaleX(1)}

.nav-cta{
  padding:.55rem 1.25rem;
  border-radius:100px;
  border:1.5px solid var(--line-strong);
  font-weight:600;
  color:var(--green-800);
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.nav-cta:hover{
  background:var(--green-800);
  border-color:var(--green-800);
  color:#fff;
  transform:translateY(-2px);
}

/* =========================================================
   7. HERO
   ========================================================= */
.hero{
  position:relative;
  padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(4rem,9vw,7rem);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset-inline-end:-18vw;
  top:-22vw;
  width:60vw;height:60vw;
  max-width:820px;max-height:820px;
  background:radial-gradient(circle at center,rgba(46,138,109,.16),transparent 66%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset-inline-start:-14vw;
  bottom:-26vw;
  width:48vw;height:48vw;
  max-width:640px;max-height:640px;
  background:radial-gradient(circle at center,rgba(18,58,47,.09),transparent 68%);
  pointer-events:none;
}

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(2rem,5vw,4.5rem);
}

.hero-title{
  font-size:clamp(2.3rem,6.2vw,4.4rem);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.03em;
  color:var(--green-900);
  margin-bottom:1.4rem;
}
.hero-title .accent{
  font-style:normal;
  color:var(--green-600);
  position:relative;
}
.hero-title .accent::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:.08em;
  height:.28em;
  background:var(--green-100);
  border-radius:4px;
  z-index:-1;
}

.hero-lead{
  max-width:52ch;
  color:var(--ink-soft);
  font-size:1.06rem;
  line-height:2;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:2.2rem;
}

/* --- SVG network visual --- */
.hero-visual{display:grid;place-items:center}
.net{width:100%;max-width:460px;height:auto;overflow:visible}

.net-halo{
  fill:none;
  stroke:rgba(34,107,85,.16);
  stroke-width:1;
  stroke-dasharray:5 9;
  transform-origin:200px 200px;
  animation:spin 46s linear infinite;
}
.net-halo.d2{
  stroke:rgba(34,107,85,.22);
  stroke-dasharray:3 7;
  animation-duration:30s;
  animation-direction:reverse;
}
@keyframes spin{to{transform:rotate(360deg)}}

.net-spokes line{
  stroke:rgba(34,107,85,.28);
  stroke-width:1.2;
  stroke-linecap:round;
}

.net-ring{
  fill:none;
  stroke:rgba(34,107,85,.32);
  stroke-width:1.4;
  stroke-linejoin:round;
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  animation:draw 2.6s var(--ease) .25s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

.net-pulse{
  fill:none;
  stroke:var(--green-500);
  stroke-width:1.6;
  transform-origin:200px 200px;
  opacity:0;
  animation:pulse 3.6s ease-out infinite;
}
.net-pulse.d2{animation-delay:1.8s}
@keyframes pulse{
  0%{transform:scale(.55);opacity:.75}
  70%{opacity:.12}
  100%{transform:scale(2.1);opacity:0}
}

.net-nodes circle{
  fill:var(--cream);
  stroke:var(--green-600);
  stroke-width:2;
  transform-origin:center;
  animation:nodeIn .6s var(--ease) backwards;
}
.net-nodes circle:nth-child(1){animation-delay:.55s}
.net-nodes circle:nth-child(2){animation-delay:.7s}
.net-nodes circle:nth-child(3){animation-delay:.85s}
.net-nodes circle:nth-child(4){animation-delay:1s}
.net-nodes circle:nth-child(5){animation-delay:1.15s}
.net-nodes circle:nth-child(6){animation-delay:1.3s}
.net-nodes circle:nth-child(7){animation-delay:1.45s}
@keyframes nodeIn{from{opacity:0;r:0}to{opacity:1}}

.net-core{
  fill:var(--green-700);
  transform-origin:200px 200px;
  animation:core 3.6s ease-in-out infinite;
}
@keyframes core{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.35);opacity:.82}
}

/* =========================================================
   8. ACTIVITIES
   ========================================================= */
.activities{
  background:
    linear-gradient(180deg,transparent, rgba(223,240,233,.42) 40%, transparent);
}

.group + .group{margin-top:clamp(4rem,8vw,6.5rem)}

/* -------- Group header -------- */
.group-head{
  display:flex;
  align-items:flex-start;
  gap:1.1rem;
  margin-bottom:1.8rem;
}
.group-tag{
  flex:none;
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:14px;
  background:var(--green-800);
  color:#fff;
  font-size:1.15rem;
  font-weight:700;
  box-shadow:0 12px 26px -14px rgba(13,43,35,.85);
}
.group-head-text{flex:1}
.group-title{
  font-size:clamp(1.25rem,2.6vw,1.65rem);
  font-weight:700;
  color:var(--green-900);
  line-height:1.4;
  letter-spacing:-.01em;
}
.group-desc{
  margin-top:.25rem;
  color:var(--ink-mute);
  font-size:.94rem;
  line-height:1.8;
}

/* -------- Accordion -------- */
.activities-list{
  border-top:1px solid var(--line);
}

.act{
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background .4s var(--ease);
}
.act::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:0;bottom:0;
  width:3px;
  background:var(--green-600);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .5s var(--ease);
}
.act.is-open::before{transform:scaleY(1)}
.act.is-open{background:rgba(255,255,255,.5)}

.act-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:clamp(1rem,3vw,2rem);
  padding:clamp(1.3rem,3vw,1.9rem) clamp(.6rem,2vw,1.4rem);
  text-align:start;
  transition:padding-inline-start .4s var(--ease);
}
.act.is-open .act-head{padding-inline-start:clamp(1rem,3vw,2.2rem)}

.act-num{
  flex:none;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--green-500);
  font-variant-numeric:tabular-nums;
  min-width:2.2rem;
  transition:color .3s;
}
.act.is-open .act-num{color:var(--green-700)}

.act-title{
  flex:1;
  font-size:clamp(1.05rem,2.4vw,1.45rem);
  font-weight:600;
  color:var(--green-900);
  line-height:1.5;
  letter-spacing:-.01em;
  transition:color .3s;
}
.act-head:hover .act-title{color:var(--green-600)}

/* + / − icon */
.act-icon{
  flex:none;
  width:34px;height:34px;
  border-radius:50%;
  border:1.5px solid var(--line-strong);
  position:relative;
  transition:background .35s,border-color .35s,transform .5s var(--ease);
}
.act-icon::before,
.act-icon::after{
  content:"";
  position:absolute;
  inset-inline-start:50%;
  top:50%;
  width:12px;height:1.8px;
  background:var(--green-700);
  border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease),background .3s,opacity .3s;
}
.act-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.act.is-open .act-icon{
  background:var(--green-800);
  border-color:var(--green-800);
  transform:rotate(180deg);
}
.act.is-open .act-icon::before{background:#fff}
.act.is-open .act-icon::after{background:#fff;transform:translate(-50%,-50%) rotate(0)}

/* body */
.act-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease);
}
.act.is-open .act-body{grid-template-rows:1fr}

.act-inner{overflow:hidden}

.act-content{
  padding:0 clamp(.6rem,2vw,1.4rem) clamp(1.5rem,3vw,2.2rem);
  padding-inline-start:calc(clamp(.6rem,2vw,1.4rem) + 2.2rem + clamp(1rem,3vw,2rem));
  max-width:82ch;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease) .08s,transform .5s var(--ease) .08s;
}
.act.is-open .act-content{opacity:1;transform:none}

.act-text{
  color:var(--ink-soft);
  font-size:1rem;
  line-height:2;
}

/* =========================================================
   9. AUDIENCES
   ========================================================= */
.audiences{
  background:linear-gradient(180deg,transparent,rgba(223,240,233,.42) 45%,transparent);
}

.audience-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:0;
  border-top:1px solid var(--line);
  border-inline-start:1px solid var(--line);
}
.aud{
  position:relative;
  padding:clamp(1.6rem,3vw,2.2rem);
  border-bottom:1px solid var(--line);
  border-inline-end:1px solid var(--line);
  transition:background .45s var(--ease);
  overflow:hidden;
}
.aud::after{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:0;
  width:100%;
  height:2px;
  background:var(--green-500);
  transform:scaleX(0);
  transform-origin:inline-start;
  transition:transform .55s var(--ease);
}
.aud:hover{background:rgba(255,255,255,.72)}
.aud:hover::after{transform:scaleX(1)}

.aud-num{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--green-300);
  margin-bottom:.7rem;
  transition:color .3s;
}
.aud:hover .aud-num{color:var(--green-600)}

.aud h3{
  font-size:1.08rem;
  font-weight:600;
  color:var(--green-900);
  margin:0 0 .5rem;
  line-height:1.5;
}
.aud p{
  color:var(--ink-soft);
  font-size:.945rem;
  line-height:1.9;
}

/* =========================================================
   10. PROCESS
   ========================================================= */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(225px,1fr));
  gap:clamp(1.8rem,3.5vw,2.8rem);
}
.step{
  position:relative;
  padding-top:1.9rem;
  border-top:2px solid var(--line);
}
.step::before{
  content:"";
  position:absolute;
  top:-2px;
  inset-inline-start:0;
  width:58px;
  height:2px;
  background:var(--green-600);
  transform:scaleX(0);
  transform-origin:inline-start;
  transition:transform .8s var(--ease) .15s;
}
.step.is-visible::before{transform:scaleX(1)}

.step-num{
  display:block;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--green-500);
  margin-bottom:.65rem;
}
.step h3{
  font-size:1.12rem;
  font-weight:600;
  color:var(--green-900);
  margin:0 0 .55rem;
  letter-spacing:-.005em;
}
.step p{
  color:var(--ink-soft);
  font-size:.955rem;
  line-height:1.95;
}

/* =========================================================
   11. CONTACT
   ========================================================= */
.contact{
  background:var(--green-900);
  color:#e8f2ee;
  position:relative;
  overflow:hidden;
}
.contact::before{
  content:"";
  position:absolute;
  inset-inline-end:-15vw;
  top:-15vw;
  width:50vw;height:50vw;
  background:radial-gradient(circle at center,rgba(46,138,109,.35),transparent 65%);
  pointer-events:none;
}

.contact-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}

.contact .eyebrow{color:var(--green-300)}
.contact .eyebrow::before{background:var(--green-300)}
.contact .section-title{color:#fff}
.contact .section-lead{color:rgba(232,242,238,.72)}

.contact-list{
  margin-top:2.4rem;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}
.contact-list li{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding-inline-start:1.1rem;
  border-inline-start:2px solid rgba(142,199,178,.4);
}
.ci-label{
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green-300);
  font-weight:600;
}
.contact-list a{
  font-size:1.08rem;
  font-weight:500;
  color:#fff;
  transition:color .3s,letter-spacing .3s;
  word-break:break-word;
}
.contact-list a:hover{color:var(--green-300)}

/* --- form --- */
.contact-form{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(142,199,178,.2);
  border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3.5vw,2.6rem);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:grid;
  gap:1.15rem;
}

.field{display:flex;flex-direction:column;gap:.5rem}
.field label{
  font-size:.85rem;
  font-weight:600;
  color:rgba(232,242,238,.85);
  letter-spacing:.02em;
}

.field input,
.field select,
.field textarea{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(142,199,178,.22);
  border-radius:var(--radius-sm);
  padding:.85rem 1.05rem;
  color:#fff;
  font-size:.97rem;
  line-height:1.7;
  transition:border-color .3s,background .3s,box-shadow .3s;
  appearance:none;
}
.field textarea{resize:vertical;min-height:120px}

.field input::placeholder,
.field textarea::placeholder{color:rgba(232,242,238,.38)}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--green-300);
  background:rgba(255,255,255,.1);
  box-shadow:0 0 0 4px rgba(142,199,178,.14);
}

.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238ec7b2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 1rem center;
  padding-left:2.4rem;
}
.field select option{background:var(--green-900);color:#fff}

.contact-form .btn-primary{
  margin-top:.5rem;
  background:var(--green-500);
  box-shadow:0 14px 34px -16px rgba(46,138,109,.9);
}
.contact-form .btn-primary:hover{background:var(--green-300);color:var(--green-900)}

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer{
  background:var(--green-900);
  border-top:1px solid rgba(142,199,178,.16);
  padding:1.8rem 0;
  color:rgba(232,242,238,.6);
  font-size:.87rem;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  align-items:center;
  justify-content:space-between;
}
.site-footer a{color:rgba(232,242,238,.85);transition:color .3s}
.site-footer a:hover{color:var(--green-300)}

/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .hero-visual{order:-1;max-width:340px;margin-inline:auto}
  .hero-lead{max-width:100%}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  body{font-size:16px}
  .nav{gap:1.1rem}
  .nav a:not(.nav-cta){display:none}
  .nav-cta{padding:.5rem 1rem;font-size:.88rem}

  .brand-text small{display:none}

  .hero{padding-top:2.5rem}
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1;min-width:140px}

  .group-head{gap:.85rem}
  .group-tag{width:38px;height:38px;border-radius:12px;font-size:1rem}

  .act-head{gap:.9rem;padding-inline:.4rem}
  .act-title{font-size:1.02rem}
  .act-icon{width:30px;height:30px}
  .act-content{
    padding-inline-start:calc(.4rem + 2.2rem + .9rem);
    padding-inline-end:.4rem;
  }
  .act-text{font-size:.95rem}

  .audience-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:1.6rem}
}

@media (max-width:420px){
  .act-num{display:none}
  .act-content{padding-inline-start:.4rem}
}

/* ---------- 14. Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,
  .reveal-mask .line > span{opacity:1 !important;transform:none !important}
  .act-content{opacity:1 !important;transform:none !important}
  .step::before{transform:scaleX(1) !important}
  .aud::after{transform:none !important}
}