/* ثبره القابضة — المكوّنات: البطل، الأعمدة، بطاقات الشركات، الخريطة، الخطوات، الأبواب. */

/* ══════════ البطل ══════════ */

.hero {
  padding-block: var(--sp-9) var(--sp-8);
  position: relative;
}

.hero__in {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

.hero__title {
  font-size: var(--fs-h1);
  margin-block: var(--sp-4) 0;
  max-width: 15ch;
  text-wrap: balance;
}

.hero__sub {
  margin-block-start: var(--sp-5);
  max-width: 54ch;
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
  line-height: var(--lh-relaxed);
}

/* الجملة التي يقتبسها الزائر. */
.pull {
  margin-block-start: var(--sp-6);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-primary);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--c-text-strong);
  line-height: var(--lh-snug);
  max-width: 34ch;
  text-wrap: balance;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}

.hero__mark {
  justify-self: center;
  inline-size: min(100%, 420px);
  aspect-ratio: 1;
}
.convergence { inline-size: 100%; block-size: 100%; overflow: visible; }

@media (min-width: 980px) {
  .hero { padding-block: var(--sp-10) var(--sp-9); }
  .hero__in { grid-template-columns: 1.15fr 1fr; gap: var(--sp-8); }
  .hero__title { font-size: var(--fs-display); }
}

/* ══════════ الأعمدة الثلاثة ══════════ */

.pillars {
  display: grid;
  gap: var(--sp-5);
  margin-block-start: var(--sp-7);
}
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  padding: var(--sp-6);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--c-glass), transparent 70%);
  position: relative;
  overflow: hidden;
  transition: border-color var(--mo-base) var(--mo-ease), transform var(--mo-base) var(--mo-ease);
}
.pillar:hover { border-color: var(--c-border-default); transform: translateY(-3px); }

.pillar__n {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: 0.14em;
  color: var(--c-primary);
  opacity: .8;
}
.pillar__title { font-size: var(--fs-h4); margin-block: var(--sp-3) var(--sp-3); }
.pillar__body { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* ══════════ بطاقات الشركات ══════════ */

.cards {
  display: grid;
  gap: var(--sp-5);
  margin-block-start: var(--sp-7);
}
@media (min-width: 780px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card > article {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-xl);
  background: var(--c-panel-1);
  position: relative;
  overflow: hidden;
  transition: border-color var(--mo-base) var(--mo-ease),
              transform var(--mo-base) var(--mo-ease),
              box-shadow var(--mo-base) var(--mo-ease);
}

/* ضوء يمشي مع المؤشر داخل البطاقة — «تمشي في المكان بضوئك». */
.card > article::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--card-accent) 16%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--mo-base) var(--mo-ease);
  pointer-events: none;
}
.card > article:hover::before { opacity: 1; }

.card > article:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--card-accent) 45%, transparent);
  box-shadow: var(--sh-lg);
}

.card--primary { --card-accent: var(--c-primary); }
.card--accent  { --card-accent: var(--c-accent); }

.card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  justify-content: space-between;
}

/* بئر الشعار: مربّع 60×60 للعلامات، وعريض 124×60 للشعارات النصّية (إيكونوكسا)
   كي تُقرأ بدل أن تنكمش إلى شريط. أبعاد صريحة لا تلقائية — الحساب التلقائي
   جعل الصورة تفيض 112px داخل بئر 60px فتُقصّ. */
.card__logo {
  inline-size: 60px;
  block-size: 60px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.card__logo--wide { inline-size: 124px; }

.card__logo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* شعارات مصمَّمة للخلفية الداكنة تُعرض كما هي. */
.card__logo--brand,
.card__logo--own {
  background: var(--c-panel-2);
  border: 1px solid var(--c-border-subtle);
  padding: var(--sp-2);
}
/* شعارات ملوّنة على أرضية بيضاء تحتاج «بئر ضوء» كي تُقرأ بأمانة. */
.card__logo--light {
  background: var(--c-well);
  padding: var(--sp-2);
}

.card__sector {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 28%, transparent);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  text-align: center;
}

.card__name    { font-size: var(--fs-h3); margin-block-start: var(--sp-5); }
.card__tagline { margin-block-start: var(--sp-2); color: var(--c-text-strong); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.card__body    { margin-block-start: var(--sp-4); color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--c-border-subtle);
}
.fact { flex: 1 1 auto; min-inline-size: 40%; }
.fact__label {
  font-size: var(--fs-2xs);
  color: var(--c-text-faint);
  letter-spacing: 0.06em;
}
.fact__value {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--c-text-strong);
  line-height: var(--lh-snug);
}
.fact__note {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  color: var(--c-text-faint);
}

.card__link {
  margin-block-start: auto;
  padding-block-start: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--card-accent);
  min-block-size: 44px;
}
.card__arrow {
  inline-size: 18px;
  block-size: 18px;
  transition: transform var(--mo-base) var(--mo-spring);
}
.lang-ar .card__arrow { transform: scaleX(-1); }
.card__link:hover .card__arrow { transform: translateX(4px); }
.lang-ar .card__link:hover .card__arrow { transform: scaleX(-1) translateX(4px); }

/* ══════════ خريطة المجموعة ══════════ */

.blocks {
  display: grid;
  gap: var(--sp-5);
  margin-block-start: var(--sp-7);
}
@media (min-width: 860px) { .blocks { grid-template-columns: repeat(3, 1fr); } }

.block {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border-subtle);
  background: linear-gradient(180deg, var(--c-panel-1), transparent);
  position: relative;
}
/* خيط رفيع يوصل الكتل إلى نقطة الالتقاء. */
.block::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--sp-6);
  block-size: 2px;
  background: linear-gradient(to inline-end, transparent, var(--c-primary), transparent);
  opacity: .5;
}

.block__title { font-size: var(--fs-h4); }
.block__line  { margin-block-start: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); }

.block__list { margin-block-start: var(--sp-5); display: grid; gap: var(--sp-2); }
.block__list a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 44px;
  color: var(--c-text-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
}
.block__list a:hover { color: var(--c-primary); }
.dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 14%, transparent);
}

/* ══════════ نموذج التشغيل ══════════ */

.steps {
  margin-block-start: var(--sp-7);
  display: grid;
  gap: var(--sp-5);
  counter-reset: step;
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }

.step {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-glass);
  border: 1px solid var(--c-border-subtle);
}
.step__n {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  color: transparent;
  -webkit-text-stroke: 1px var(--c-primary);
  flex-shrink: 0;
  line-height: 1;
  opacity: .85;
}
.step__title { font-size: var(--fs-h4); margin-block-end: var(--sp-2); }
.step__body p { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* ══════════ الأبواب (التواصل) ══════════ */

.doors {
  margin-block-start: var(--sp-6);
  display: grid;
  gap: var(--sp-2);
}
@media (min-width: 700px) { .doors { grid-template-columns: repeat(2, 1fr); } }

.door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-1);
  min-block-size: 64px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border-subtle);
  background: var(--c-panel-1);
  transition: border-color var(--mo-base) var(--mo-ease), background var(--mo-base) var(--mo-ease);
}
.door:hover { border-color: var(--c-primary); background: var(--c-panel-2); }
.door__name { color: var(--c-text-strong); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.door__host { color: var(--c-text-faint); font-size: var(--fs-xs); font-family: var(--font-mono); }

/* ══════════ 404 ══════════ */

.section--404 { padding-block: var(--sp-10); text-align: start; }
.section--404 .hero__cta { margin-block-start: var(--sp-6); }