:root{
  --كحلي:#141414;
  --فيروزي:#1f3fd4;
  --فيروزي-فاتح:#e2e7fb;
  --كريمي:#f7f3ea;
  --كريمي-غامق:#d5cbb6;
  --أبيض:#fbf8f2;
  --نص:#1a1a1a;
  --نص-خفيف:#6b6353;
  --حد:#d5cbb6;
}
body{background:#efe9dc;color:#1a1a1a}
.قسم.كريمي{background:#f7f3ea}
.فوتر{background:#f7f3ea}

/* ————— هيرو الخيار ————— */

.هيرو-إيلوكا{position:relative;min-height:100svh;display:grid;
  grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(20px,4vw,60px);
  padding:118px var(--حافة) 60px;overflow:hidden}
.هيرو-إيلوكا .ورق{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(#d7cdb8 1px,transparent 1px),linear-gradient(90deg,#d7cdb8 1px,transparent 1px);
  background-size:26px 26px;opacity:.55;
  mask-image:radial-gradient(120% 90% at 60% 40%,#000 30%,transparent 100%)}
.متن-إيلوكا{position:relative;z-index:2}
.متن-إيلوكا h1{font-size:clamp(46px,7.4vw,104px);line-height:.98;color:#141414;letter-spacing:-.03em}
.متن-إيلوكا .مسطور{position:relative;color:#1f3fd4;white-space:nowrap}
.متن-إيلوكا .مسطور::after{content:'';position:absolute;inset-inline:-2px;inset-block-end:.06em;height:5px;
  background:#1f3fd4;opacity:.28;border-radius:3px}
.متن-إيلوكا .شرح{margin-top:22px;max-width:42ch;font-size:clamp(15.5px,1.6vw,18.5px);color:#4b4438}
.متن-إيلوكا .أزرار{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}
.خط-يد{display:inline-block;font-size:13px;line-height:1.5;color:#1f3fd4;
  transform:rotate(-3.2deg);margin-bottom:20px;position:relative;padding-inline-start:34px}
.خط-يد::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;
  width:26px;height:1.5px;background:#1f3fd4;opacity:.7}
.مخطط-إيلوكا{position:relative;z-index:2}
#رسم-المخطط{width:100%;height:auto;display:block}
#رسم-المخطط g[stroke] path,#رسم-المخطط g[stroke] rect{
  stroke-dasharray:var(--ط,900);stroke-dashoffset:var(--ط,900);
  animation:رسم 2.6s var(--انتقال) forwards}
@keyframes رسم{to{stroke-dashoffset:0}}
.وسم-مخطط{position:absolute;font-size:12px;color:#1f3fd4;background:#fbf8f2;
  padding:4px 11px;border:1px solid #c9d0f0;border-radius:99px;white-space:nowrap}
.وسم-مخطط.أ{inset-block-start:44%;inset-inline-end:6%;transform:rotate(-2deg)}
.وسم-مخطط.ب{inset-block-end:12%;inset-inline-start:8%;transform:rotate(1.6deg)}
.أرقام-إيلوكا{position:absolute;z-index:2;inset-block-end:34px;inset-inline-start:var(--حافة);
  display:flex;gap:clamp(20px,3vw,44px);padding-top:20px;border-top:2px solid #141414}
.أرقام-إيلوكا b{display:block;font-family:'ساعي عناوين',sans-serif;font-size:clamp(24px,3vw,34px);
  color:#141414;line-height:1;font-variant-numeric:tabular-nums}
.أرقام-إيلوكا span{font-size:12.5px;color:#6b6353}
@media (max-width:900px){
  .هيرو-إيلوكا{grid-template-columns:1fr;padding-top:100px}
  .مخطط-إيلوكا{max-width:420px}
  .أرقام-إيلوكا{position:static;margin-top:30px}
}

/* شارة الخيار — للتنقّل بين الثمانية أثناء المقارنة */
.شارة-خيار{
  position:fixed;z-index:90;inset-block-end:18px;inset-inline-end:18px;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:99px;
  background:rgba(20,26,44,.9);color:#fff;backdrop-filter:blur(10px);
  font-family:'ساعي عناوين',sans-serif;font-size:13px;
  box-shadow:0 6px 24px rgba(10,20,40,.3);transition:transform .3s var(--انتقال)
}
.شارة-خيار span{opacity:.6;font-size:11.5px;padding-inline-start:10px;
  border-inline-start:1px solid rgba(255,255,255,.25)}
.شارة-خيار:hover{transform:translateY(-3px)}
@media print{.شارة-خيار{display:none}}