/* =========================================================
   الصفحة الأولى — أقسامها بترتيب لوحة التصميم.
   تُحمَّل بعد theme-site.css وتستعمل رموزها، وتعرّف ما يخصّها وحدها.
   والصور في public/images/home صورٌ حقيقية بدقّةٍ عالية (Unsplash، برخصتها
   المجانية)، وصورُ الأشخاص مولَّدةٌ لعُمانيّين بالزيّ التقليدي — وسجلُّ
   مصادرها في .claude/log.txt. والختمُ ‎?v=‎ في روابطها يتبدّل حين تُستبدل.
   ========================================================= */

:root {
    --hero-glow: rgba(255, 255, 255, .55);
    --veil: rgba(255, 255, 255, .78);
    /* شريطُ الأرقام: كحليٌّ إلى أزرق الثقة الأعمق، وتسمياتٌ وأيقوناتٌ فاتحة عليه */
    --stats-deep: #061837;
    --stats-mid: #0A2E70;
    --stats-hi: #0A4AC4;
    --stats-label: #D5E3F7;
    --stats-icon: #9CC8FF;
    --step-line: #CBD5E3;
    --check: #00A63E;           /* علامةُ «مشمول»: أخضرٌ أعمق — ٣٫٢٢:١ */
    --quote-mark: #CFE0FF;
    --arrow-bg: #E4F9EB;
    --accent-mark: rgba(0, 209, 73, .26);   /* خطُّ التحديد الأخضر تحت السطر المُبرَز */
    --head-h: 86px;             /* ارتفاع بطاقة الترويسة مع حاشيتها — تُسحب الصورة تحتها */
    /* بطاقةُ كرة الرحلة: كحليُّ التذييل بوهجٍ من أزرق الثقة، وأخضرُ النموّ للمدينة النشطة */
    --route-top: #0A44A8;
    --route-mid: var(--navy);
    --route-deep: var(--navy-2);
    --route-ink: #EEF3FB;
    --route-gold: #00D149;
    --route-text: #C5D3EA;      /* نصُّ البطاقة — ٥٫٥:١ على أفتح موضعٍ فيها */
    --route-dim: #A9BAD6;
    --globe-hi: #0E2F6B;
    --globe-mid: #082050;
    --globe-lo: #041330;
}

/* ===================== البطل ===================== */
.hero {
    position: relative; isolation: isolate; overflow-x: clip;
    background: #fff url("../images/home/hero.jpg?v=20261011h") center 30% / cover no-repeat;
    margin-block-start: calc(-1 * var(--head-h));
    padding-block: calc(var(--head-h) + 32px) 92px;
}
/*
   وفي الاتجاه من اليسار تنعكس الصورة: البطاقةُ تنتقل إلى اليسار، فلو بقيت الصورة
   كما هي لغطّت البطاقةُ الفريقَ وبقي يمينُ الصفحة ضبابًا فارغًا.
*/
[dir="ltr"] .hero { background-image: none; }
[dir="ltr"] .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: url("../images/home/hero.jpg?v=20261011h") center 30% / cover no-repeat;
    transform: scaleX(-1);
}
/* والسطرُ الإنجليزيّ أطول: الصورةُ تمتدّ عُشرًا وراء الحافّة فيبتعد الفريقُ عن العنوان */
@media (min-width: 1024px) { [dir="ltr"] .hero::after { inset-inline-end: -10%; } }
@media (max-width: 1023px) { [dir="ltr"] .hero::after { background-position: 16% center; } }
/*
   الشاشاتُ العريضة جدًّا: الصورةُ تتّسع بعرضها فيقصّ «الغطاءُ» رؤوسَ الفريق — فالبطلُ
   يطول معها قليلًا (٣٦٪ من العرض، وحدُّه ٩٨٠) ويتوسّط محتواه.
*/
@media (min-width: 2000px) {
    .hero { min-height: min(36vw, 980px); display: flex; flex-direction: column; justify-content: center; }
}

/*
   الصورة: بهوُ مستشفًى فخم في الصين — طبيبٌ يقف بثقةٍ ويده على كتف مريضٍ عُمانيٍّ
   بالدشداشة والكمّة، وحولهما ممرّضاتٌ صينيّات بابتسامةٍ عريضة واهتمام. مولَّدةٌ
   بـChatGPT (حساب المستخدم) ليقع الفريقُ في الثلث الأيسر — العمودِ الخالي من
   الصفحة العربية — والبهوُ المضيء خلف العنوان والنموذج؛ وفي الاتجاه من اليسار
   يعكسه الانعكاسُ أعلاه فيقع الفريقُ يمينًا. والإطارُ كاملٌ بلا قصّ، مكبَّرٌ إلى ٣٨٤٠
   بـ Photoshop (Preserve Details 2.0) ليبقى حادًّا على الشاشات العريضة، وموضعُه
   الرأسيّ ٣٠٪ لتبقى الوجوه في الشريط الظاهر مهما اتّسعت الشاشة (حتى ٣٨٤٠).

   والضبابُ الأبيض خلف النصّ وحده: بيضاويٌّ ضيّقٌ على عمود العنوان، فيُقرأ
   العنوانُ والشارات بلا تشويش ويبقى الفريقُ بألوانه كاملة.
*/
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(31% 66% at 47% 50%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .74) 48%, rgba(255, 255, 255, .2) 82%, transparent 100%),
        linear-gradient(180deg, transparent 58%, rgba(255, 255, 255, .5) 100%);
}
[dir="ltr"] .hero::before {
    background:
        radial-gradient(31% 66% at 53% 50%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .74) 48%, rgba(255, 255, 255, .2) 82%, transparent 100%),
        linear-gradient(180deg, transparent 58%, rgba(255, 255, 255, .5) 100%);
}
.hero-grid {
    display: grid; gap: 28px; align-items: center;
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "form";
}
@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: minmax(380px, 34%) minmax(0, 41%) 1fr;
        grid-template-areas: "form copy .";
        gap: 30px;
    }
    .hero h1 span { white-space: nowrap; }
}
.hero-copy { grid-area: copy; }
.start-card { grid-area: form; }

.hero h1 { margin: 0 0 16px; font-weight: 800; line-height: 1.38; font-size: clamp(32px, 3.75vw, 56px); color: var(--navy); }
/*
   الإنجليزيّةُ أطولُ سطرًا من العربية بالمقاس نفسه: «with confidence and ease»
   كان يفيض من عموده إلى برج السور في الصورة. فمقاسُها أصغر قليلًا لتبقى في عمودها.
*/
html[lang="en"] .hero h1 { font-size: clamp(30px, 3.05vw, 46px); }
.hero h1 span { display: block; }
/*
   السطرُ المُبرَز بأزرق الثقة (٥٫٢٣:١ على البياض)، وتحته خطُّ تحديدٍ أخضرُ ليّن
   في ثلثه الأسفل — النموّ تحت الثقة. وينقسم مع السطر إن انقسم.
*/
.hero h1 .accent { color: var(--gold); }
.hero h1 .accent mark {
    color: inherit; background: linear-gradient(transparent 70%, var(--accent-mark) 70%, var(--accent-mark) 92%, transparent 92%);
    padding-inline: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero-lede { margin: 0 0 24px; font-size: clamp(16px, 1.25vw, 18.5px); font-weight: 600; color: var(--text); line-height: 1.9; max-width: 450px; }
.hero-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.hero-badges li { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--navy); }
/* الشارةُ أيقونةٌ زرقاء في قرصٍ أبيض: تُقرأ فوق الصورة كما تُقرأ فوق الضباب */
.hero-badges svg {
    width: 36px; height: 36px; padding: 7px; flex: none; border-radius: 50%;
    color: var(--gold); background: #fff; box-shadow: 0 6px 16px rgba(11, 29, 61, .10), 0 0 0 1px rgba(0, 95, 250, .10);
}

/* بطاقة «ابدأ رحلتك العلاجية الآن» */
.start-card {
    background: #fff; border-radius: 16px; padding: 22px 24px 14px;
    box-shadow: 0 24px 60px rgba(11, 29, 61, .16);
}
/* نداءُ الزرّ: نبضةٌ ذهبية واحدة حول البطاقة — «هنا تبدأ» */
.start-card.is-called { animation: start-call 1100ms var(--ease-out) 1; }
@keyframes start-call {
    0% { box-shadow: 0 0 0 0 rgba(0, 209, 73, .55), 0 24px 60px rgba(11, 29, 61, .16); }
    100% { box-shadow: 0 0 0 18px rgba(0, 209, 73, 0), 0 24px 60px rgba(11, 29, 61, .16); }
}
@media (prefers-reduced-motion: reduce) {
    .start-card.is-called { animation: none; outline: 2px solid var(--gold); outline-offset: 4px; }
}
.start-card h2 { margin: 0 0 4px; font-size: clamp(20px, 1.7vw, 25px); font-weight: 800; line-height: 1.4; color: var(--navy); }
.start-card > p { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.start-field {
    position: relative; display: flex; align-items: center; gap: 10px;
    min-height: 48px; margin-block-end: 10px; padding-inline: 14px;
    border: 1px solid var(--line-2); border-radius: var(--f-radius); background: #fff;
    box-shadow: var(--f-shadow);
    transition: border-color .2s, box-shadow .2s;
}
@media (hover: hover) and (pointer: fine) { .start-field:hover { border-color: var(--c-field); } }
.start-field:focus-within { border-color: var(--c-accent); box-shadow: var(--c-ring), var(--f-shadow); }
.start-field > svg { width: 22px; height: 22px; flex: none; color: var(--navy); }
.start-field select, .start-field input {
    flex: 1; min-width: 0; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 0;
    background: transparent; background-image: none; box-shadow: none; outline: none;
    font: inherit; font-size: 14.5px; color: var(--text); appearance: none; cursor: pointer;
}
.start-field select:focus, .start-field input:focus { box-shadow: none; }
.start-field input { cursor: text; }
.start-field input::placeholder { color: var(--muted); opacity: 1; }
/* القائمة الفارغة تُقرأ لصيقةً لا قيمة */
.start-field select:invalid, .start-field select.is-empty { color: var(--muted); }
.start-field .chev { width: 13px; height: 13px; flex: none; color: var(--navy); opacity: .8; pointer-events: none; }
.start-field .cur { font-weight: 700; font-size: 14px; color: var(--navy); flex: none; }
.start-field input[type="number"]::-webkit-outer-spin-button,
.start-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.start-field input[type="number"] { -moz-appearance: textfield; }
/* ١٦ بكسل على الهاتف: أصغرُ منه فيكبّر iOS الصفحة عند لمس الحقل */
@media (max-width: 640px) { .start-field select, .start-field input { font-size: 16px; } }
.start-card .btn-gold { width: 100%; min-height: 50px; font-size: 16px; margin-block-start: 4px; }
.start-note { text-align: center; font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }

/* ===================== شريط الأرقام =====================
   لوحٌ كحليٌّ يتدرّج إلى أزرق الثقة، يتداخل مع أسفل البطل فيربط الصورة بما
   تحتها. الأرقامُ كبيرةٌ بيضاء وعلامةُ «+» قبلها خضراء، والأيقوناتُ بأزرق
   العلاج في أقراصٍ زجاجيّة، والوعدُ الأوّل (سرعة الاستجابة) مُبرَزٌ بالأخضر
   ونقطةٍ حيّة. والكحليُّ في جهة البداية تحت الوعد المُبرَز، والأزرقُ في النهاية؛
   والتسميات #D5E3F7: ٥٫١:١ على أفتح موضعٍ في اللوح.
   وعلى الشاشة العريضة الخانةُ عمودٌ واحد (أيقونة، رقم، تسمية)، وعلى الضيّقة صفّ.
*/
.stats-wrap { position: relative; z-index: 3; margin-block-start: -76px; }
.stats {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
    padding: 10px; border-radius: 22px; color: #fff;
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(76, 155, 255, .30), transparent 62%),
        radial-gradient(50% 110% at 0% 100%, rgba(0, 209, 73, .12), transparent 62%),
        linear-gradient(255deg, var(--stats-deep) 0%, var(--stats-mid) 55%, var(--stats-hi) 100%);
    box-shadow: 0 30px 70px rgba(6, 24, 55, .30), inset 0 1px 0 rgba(255, 255, 255, .10);
}
[dir="ltr"] .stats {
    background:
        radial-gradient(60% 120% at 0% 0%, rgba(76, 155, 255, .30), transparent 62%),
        radial-gradient(50% 110% at 100% 100%, rgba(0, 209, 73, .12), transparent 62%),
        linear-gradient(105deg, var(--stats-deep) 0%, var(--stats-mid) 55%, var(--stats-hi) 100%);
}
/* نسيجٌ نقطيٌّ خافت: لمسةُ دقّةٍ طبيّة تخفت نحو الأطراف */
.stats::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.5px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent);
    mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
    .stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 22px 10px; }
}

.stat2 {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
    animation: stat-in 700ms var(--ease-out) both;
}
.stat2:nth-child(2) { animation-delay: 60ms; }
.stat2:nth-child(3) { animation-delay: 120ms; }
.stat2:nth-child(4) { animation-delay: 180ms; }
.stat2:nth-child(5) { animation-delay: 240ms; }
.stat2:nth-child(6) { animation-delay: 300ms; }
@keyframes stat-in { from { opacity: 0; transform: translateY(12px); } }
/* خمسُ خاناتٍ في عمودين: الأخيرةُ تأخذ الصفّ كلّه */
@media (max-width: 759px) { .stat2:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
    .stat2 { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 6px 12px; border-radius: 0; }
    .stat2 + .stat2::before {
        content: ""; position: absolute; inset-inline-start: 0; inset-block: 8% 8%; width: 1px;
        background: linear-gradient(transparent, rgba(255, 255, 255, .22), transparent);
    }
}

.stat-ic {
    width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 15px;
    color: var(--stats-icon); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.stat-ic svg { width: 26px; height: 26px; }
.stat-tx { min-width: 0; display: flex; flex-direction: column; }
.stat2 strong {
    display: block; font-size: clamp(24px, 2.15vw, 34px); font-weight: 800; color: #fff; line-height: 1.2;
    font-variant-numeric: lining-nums tabular-nums;
    direction: ltr; unicode-bidi: isolate; text-align: start; letter-spacing: -.01em;
}
.stat2 strong .plus { color: var(--gold-light); margin-inline-end: .04em; }
.stat2 strong.word { direction: inherit; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; white-space: nowrap; letter-spacing: 0; }
.stat2 small { display: inline-flex; align-items: center; gap: 7px; margin-block-start: 3px; font-size: 13.5px; font-weight: 600; color: var(--stats-label); }
@media (min-width: 1100px) {
    .stat2 strong, .stat2 strong.word { text-align: center; }
    .stat2 small { justify-content: center; }
}

/* الوعدُ الأوّل: قرصٌ أخضر وخلفيّةٌ خضراءُ خافتة ونقطةٌ تنبض — «نحن هنا الآن» */
.stat2.is-lead { background: rgba(0, 209, 73, .10); box-shadow: inset 0 0 0 1px rgba(0, 209, 73, .30); }
.stat2.is-lead .stat-ic { color: var(--gold-light); background: rgba(0, 209, 73, .14); border-color: rgba(0, 209, 73, .38); }
@media (min-width: 1100px) { .stat2.is-lead { border-radius: 16px; margin-inline-end: 6px; padding-block: 12px; } }
.live { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-light); }
.live::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold-light);
    animation: live-ping 2.2s var(--ease-out) infinite;
}
@keyframes live-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

/* ===================== التخصّصات ===================== */
.specs-band { padding-block: 30px 30px; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .spec-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .spec-grid { grid-template-columns: repeat(8, 1fr); } }
.spec {
    background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow);
    padding: 18px 8px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.spec:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow-lg); }
.spec-ic { width: 66px; height: 66px; border-radius: 50%; background: var(--sky); display: grid; place-items: center; color: var(--navy); margin-block-end: 10px; transition: background .2s; }
.spec:hover .spec-ic { background: var(--gold-soft); }
.spec-ic svg { width: 34px; height: 34px; }
.spec b { font-size: 15px; font-weight: 800; color: var(--navy); line-height: 1.5; }
.spec small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ===================== الخدمات السريعة ===================== */
.svc { position: relative; overflow: hidden; background: var(--surface-raised); padding-block: 34px 34px; }
.svc-photo {
    position: absolute; inset-block: 0; inset-inline-end: 0; width: 46%;
    background: url("../images/home/services-doctor.jpg?v=20261011") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to right, #000 58%, transparent);
    mask-image: linear-gradient(to right, #000 58%, transparent);
}
[dir="ltr"] .svc-photo {
    -webkit-mask-image: linear-gradient(to left, #000 58%, transparent);
    mask-image: linear-gradient(to left, #000 58%, transparent);
    transform: scaleX(-1);
}
.svc-in { position: relative; z-index: 2; }
.svc-head { max-width: 640px; margin-block-end: 22px; }
.svc-head h2 { margin: 0 0 4px; font-size: clamp(22px, 1.9vw, 27px); font-weight: 800; color: var(--navy); }
.svc-head p { margin: 0; color: var(--muted); font-size: 16px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(6, 1fr); width: 76%; } }
.svc-card {
    background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow);
    padding: 20px 6px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: transform .2s, border-color .2s;
}
.svc-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.svc-card svg { width: 38px; height: 38px; color: var(--navy); margin-block-end: 10px; }
.svc-card b { font-size: 13.5px; font-weight: 800; color: var(--navy); line-height: 1.5; }
.svc-card small { font-size: 12px; color: var(--muted); }
@media (max-width: 1099px) { .svc-photo { position: relative; width: auto; height: 240px; inset: auto; margin-block: -64px 28px; -webkit-mask-image: linear-gradient(to top, transparent, #000 30%); mask-image: linear-gradient(to top, transparent, #000 30%); } [dir="ltr"] .svc-photo { -webkit-mask-image: linear-gradient(to top, transparent, #000 30%); mask-image: linear-gradient(to top, transparent, #000 30%); } }

/* ===================== كيف تعمل ===================== */
.how { padding-block: 22px 26px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
@media (min-width: 760px) { .how-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .how-steps { grid-template-columns: repeat(6, 1fr); } }
.how-step { text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; }
.how-num {
    width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff;
    display: grid; place-items: center; font-size: 13px; font-weight: 800; margin-block-end: 8px;
}
.how-ic {
    width: 66px; height: 66px; border-radius: 50%; background: #fff; border: 1px solid var(--line-soft);
    box-shadow: var(--shadow); display: grid; place-items: center; color: var(--navy); margin-block-end: 10px; position: relative; z-index: 2;
}
.how-ic svg { width: 30px; height: 30px; }
/* خطٌّ منقّط يصل الدوائر — في الصفّ الواحد وحده */
@media (min-width: 1100px) {
    .how-step + .how-step::before {
        content: ""; position: absolute; z-index: 1; inset-block-start: 75px;
        inset-inline-end: calc(50% + 43px); width: calc(100% - 70px);
        border-block-start: 2px dotted var(--step-line);
    }
}
.how-step b { font-size: 15px; font-weight: 800; color: var(--navy); margin-block-end: 2px; }
.how-step small { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ===================== الرحلات العلاجية ===================== */
.journeys { padding-block: 26px 28px; }
.journey-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px) { .journey-grid { grid-template-columns: repeat(3, 1fr); } }
.journey {
    background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow);
    padding: 10px 10px 18px; display: flex; flex-direction: column;
}
.journey.featured { background: var(--lime-tint); border-color: var(--lime-deep); }
.journey-photo { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 1; background: var(--band); }
.journey-photo img { width: 100%; height: 100%; object-fit: cover; }
/* الشارة في الركن الأيمن دائمًا: الصورة لا تنعكس مع اتجاه الصفحة، وموضعها من التصميم */
.journey-badge {
    position: absolute; inset-block-end: 12px; right: 14px; width: 52px; height: 52px; border-radius: 12px;
    background: #fff; display: grid; place-items: center; color: var(--gold-dark); box-shadow: 0 6px 16px rgba(11, 29, 61, .18);
}
.journey-badge svg { width: 28px; height: 28px; }
.journey h3 { margin: 10px 12px 6px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; color: var(--navy); line-height: 1.4; }
.journey ul { list-style: none; margin: 0 12px 12px; padding: 0; display: grid; gap: 5px; flex: 1; }
.journey li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text); }
.journey li svg { width: 19px; height: 19px; flex: none; color: var(--check); }
.journey .btn { margin-inline: 12px; min-height: 44px; font-size: 15px; }

/* ===================== لماذا ===================== */
.why2 { position: relative; overflow: hidden; background: #fff; padding-block: 26px 30px; }
.why2-photo {
    position: absolute; inset-block: 0; inset-inline-start: 0; width: 34%;
    -webkit-mask-image: linear-gradient(to left, #000 72%, transparent);
    mask-image: linear-gradient(to left, #000 72%, transparent);
}
[dir="ltr"] .why2-photo { -webkit-mask-image: linear-gradient(to right, #000 72%, transparent); mask-image: linear-gradient(to right, #000 72%, transparent); }
.why2-photo img { width: 100%; height: 100%; object-fit: cover; }
/* وتنعكس في الاتجاه من اليسار مع موضعها، فتبقى الشارةُ على الموضع نفسه من المبنى */
[dir="ltr"] .why2-photo img { transform: scaleX(-1); }
.why2-badge {
    position: absolute; inset-block-end: 26px; inset-inline-start: 14%; z-index: 2;
    display: flex; align-items: center; gap: 12px; padding: 12px 18px;
    background: var(--veil); backdrop-filter: blur(6px); border-radius: 14px; box-shadow: var(--shadow);
}
.why2-badge svg { width: 44px; height: 44px; color: var(--gold-dark); flex: none; }
.why2-badge b { display: block; font-size: 15px; font-weight: 800; color: var(--navy); }
.why2-badge small { display: block; font-size: 12.5px; color: var(--muted); }
.why2-in { position: relative; z-index: 2; }
@media (min-width: 1100px) { .why2-in { width: 66%; margin-inline-end: 0; margin-inline-start: auto; } }
.why2-grid { display: grid; grid-template-columns: 1fr; gap: 16px 22px; }
@media (min-width: 640px) { .why2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why2-grid { grid-template-columns: repeat(3, 1fr); } }
.why2-item { display: flex; align-items: center; gap: 16px; }
.why2-item > div { flex: 1; min-width: 0; }
.why2-item b { display: block; font-size: 15.5px; font-weight: 800; color: var(--navy); }
.why2-item small { display: block; font-size: 13px; color: var(--muted); }
.why2-ic {
    width: 66px; height: 66px; border-radius: 14px; flex: none; background: #fff;
    border: 1px solid var(--line-soft); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--gold);
}
.why2-ic svg { width: 30px; height: 30px; }
@media (max-width: 1099px) {
    .why2-photo { position: relative; width: auto; height: 260px; inset: auto; margin-block: -50px 26px; -webkit-mask-image: linear-gradient(to top, transparent, #000 30%); mask-image: linear-gradient(to top, transparent, #000 30%); }
    [dir="ltr"] .why2-photo { -webkit-mask-image: linear-gradient(to top, transparent, #000 30%); mask-image: linear-gradient(to top, transparent, #000 30%); }
}

/* ===================== المستشفيات الشريكة: شريطٌ يُمرَّر ===================== */
.hosp { padding-block: 24px 18px; }
.carousel { position: relative; }
.carousel-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 10px;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
@media (max-width: 1099px) { .carousel-track { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 559px) { .carousel-track { grid-auto-columns: 82%; } }
.carousel-btn {
    position: absolute; inset-block-start: 38%; z-index: 3; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--line-soft); background: #fff; color: var(--navy); box-shadow: var(--shadow);
    display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, opacity .2s;
}
.carousel-btn:hover { background: var(--navy); color: #fff; }
.carousel-btn[disabled] { opacity: .35; cursor: default; }
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn.prev { inset-inline-start: -23px; }
.carousel-btn.next { inset-inline-end: -23px; }
/* السهمان يشيران إلى جهة الحركة: «السابق» إلى جهة البداية في كل اتجاه */
.carousel-btn.prev svg { transform: rotate(-90deg); }
.carousel-btn.next svg { transform: rotate(90deg); }
[dir="ltr"] .carousel-btn.prev svg { transform: rotate(90deg); }
[dir="ltr"] .carousel-btn.next svg { transform: rotate(-90deg); }
@media (max-width: 759px) { .carousel-btn { display: none; } }
.hosp-card {
    scroll-snap-align: start; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow);
    padding: 6px 6px 12px; text-align: center; display: flex; flex-direction: column; gap: 2px;
    transition: transform .2s, border-color .2s;
}
.hosp-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.hosp-card img { width: 100%; height: auto; aspect-ratio: 2.85 / 1; object-fit: cover; border-radius: 10px; margin-block-end: 8px; }
.hosp-card b { font-size: 15px; font-weight: 800; color: var(--navy); line-height: 1.5; padding-inline: 8px; }
.hosp-card small { font-size: 13px; font-weight: 700; color: var(--gold-dark); }

/* ===================== المدن ===================== */
.cities2 { padding-block: 22px; }
.city-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 1000px) { .city-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 559px) { .city-grid { grid-template-columns: 1fr; } }
.city2 {
    background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
    display: flex; flex-direction: column; transition: transform .2s, border-color .2s;
}
.city2:hover { transform: translateY(-3px); border-color: var(--gold); }
.city2 img { width: 100%; height: auto; aspect-ratio: 2.66 / 1; object-fit: cover; }
.city2-foot { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.city2-foot > div { flex: 1; text-align: center; min-width: 0; }
.city2-foot b { display: block; font-size: 17px; font-weight: 800; color: var(--navy); }
.city2-foot small { display: block; font-size: 13px; color: var(--muted); }
.arrow-dot {
    width: 40px; height: 40px; border-radius: 50%; background: var(--arrow-bg); color: var(--lime-ink);
    display: grid; place-items: center; flex: none; order: 2; transition: background .2s, color .2s;
}
.arrow-dot svg { width: 18px; height: 18px; }
a:hover .arrow-dot { background: var(--lime); color: var(--navy-2); }

/* ===================== الباقات ===================== */
.pkgs { padding-block: 22px 24px; }
.pkg-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
@media (min-width: 900px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); } }
.pkg {
    position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow);
    padding: 20px 22px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pkg.featured { background: var(--lime-tint); border: 2px solid var(--lime-deep); }
@media (min-width: 900px) { .pkg.featured { transform: translateY(-6px); } }
.pkg-badge {
    position: absolute; inset-block-start: -15px; inset-inline-start: 50%; transform: translateX(50%);
    background: var(--navy-2); color: var(--lime); border-radius: 999px; padding: 4px 18px; font-size: 13px; font-weight: 700; white-space: nowrap;
}
[dir="ltr"] .pkg-badge { transform: translateX(-50%); }
.pkg h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--navy); }
.pkg p { margin: 0; font-size: 13.5px; color: var(--muted); }
.pkg-price { margin-block: 6px 10px; font-size: 27px; font-weight: 800; color: var(--navy); line-height: 1.2; direction: ltr; unicode-bidi: isolate; }
.pkg-price small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.pkg .btn { width: 100%; min-height: 46px; margin-block-start: auto; }

/* ===================== تجارب المرضى ===================== */
.stories { padding-block: 22px 24px; }
.story-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 900px) { .story-grid { grid-template-columns: repeat(3, 1fr); } }
.story {
    position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow);
    padding: 14px 18px 12px; display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: start;
}
.story-avatar {
    grid-row: span 2; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--navy-soft), var(--sky)); color: var(--navy);
    font-size: 28px; font-weight: 800; border: 3px solid #fff; box-shadow: var(--shadow);
}
.story-quote { position: absolute; inset-block-start: 14px; inset-inline-start: 74px; width: 22px; height: 22px; color: var(--quote-mark); }
.stars { color: var(--star); letter-spacing: 3px; font-size: 15px; line-height: 1; }
.story p { margin: 4px 0 0; font-size: 14px; line-height: 1.65; color: var(--text); }
.story footer { grid-column: 2; margin-block-start: 8px; }
.story footer b { display: block; font-size: 14.5px; font-weight: 800; color: var(--navy); }
.story footer small { display: block; font-size: 12.5px; color: var(--muted); }

/* ===================== العروض الشائعة ===================== */
.offers2 { padding-block: 22px 12px; }
.offer2-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 760px) { .offer2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .offer2-grid { grid-template-columns: repeat(6, 1fr); } }
.offer2 {
    background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
    display: flex; flex-direction: column; transition: transform .2s, border-color .2s;
}
.offer2:hover { transform: translateY(-3px); border-color: var(--gold); }
.offer2 img { width: 100%; height: auto; aspect-ratio: 2 / .95; object-fit: cover; }
.offer2-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; }
.offer2-foot b { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: var(--navy); line-height: 1.45; }
.offer2 .arrow-dot { width: 30px; height: 30px; }
.offer2 .arrow-dot svg { width: 15px; height: 15px; }

/* ===================== الدعوة الختامية ===================== */
.cta2-wrap { padding-block: 12px 22px; }
.cta2 {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; text-align: center;
    padding: 26px 24px 26px; background: var(--band) url("../images/home/cta-wall.jpg?v=20261011") center / cover no-repeat;
    box-shadow: var(--shadow);
}
.cta2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(48% 80% at 50% 50%, var(--veil), transparent 78%); }
.cta2 h2 { margin: 0 0 4px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; color: var(--navy); line-height: 1.35; }
.cta2 p { margin: 0 0 18px; font-size: 15px; font-weight: 700; color: var(--text); }
.cta2-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta2-actions .btn { min-height: 54px; padding-inline: 30px; font-size: 15.5px; }
/* زرُّ واتساب الكحليّ في الدعوة: أيقونتُه خضراءُ لتُعرف قبل النصّ */
.cta2 .btn-navy svg { color: var(--wa); }

/* ===================== على الشاشات الضيّقة ===================== */
@media (max-width: 1023px) {
    /* المريضُ والطبيبُ في وسط الشاشة الضيّقة، والضبابُ أخفُّ في أعلاها لتُرى الصورة قبل النموذج */
    .hero { padding-block: 128px 96px; background-position: 16% center; }
    .hero::before, [dir="ltr"] .hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0, rgba(255, 255, 255, .7) 30%, var(--veil) 46%, #fff 88%); }
    .hero-lede { max-width: none; }
}
@media (max-width: 559px) {
    .hero { padding-block: 116px 90px; }
    .start-card { padding: 20px 16px 14px; }
    .band, .specs-band, .how, .journeys, .hosp, .cities2, .pkgs, .stories { padding-block: 42px; }
    .stats { padding: 8px; border-radius: 18px; }
    .stat2 { padding: 12px 10px; gap: 10px; }
    .stat-ic { width: 42px; height: 42px; border-radius: 13px; }
    .stat-ic svg { width: 22px; height: 22px; }
    .stat2 strong { font-size: 22px; }
    .stat2 strong.word { font-size: 16px; }
    .stat2 small { font-size: 12.5px; }
}

/* عنوانُ «لماذا» في وسط الصفحة فوق الصورة والشبكة معًا، كما في التصميم */
.why2-head { position: relative; z-index: 2; }

/* ===================== كرةُ الرحلة =====================
   بطاقةٌ كحليّة بين رأس «المدن» وشبكتها: النصُّ وقائمةُ المدن في جهةٍ،
   والكرةُ في الأخرى. والقرصُ الكحليّ يُرسم بالـCSS أوّلًا فلا يظهر فراغٌ
   قبل أن يصل السكربت، ويختفي حين ترسم الكرةُ نفسها. */
.route {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 24px 44px;
  margin-block-end: 26px; padding: 34px 40px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, var(--route-top) 0%, var(--route-mid) 45%, var(--route-deep) 100%);
  box-shadow: 0 24px 60px rgba(4, 16, 40, .22);
}
[dir="ltr"] .route { background: radial-gradient(120% 140% at 0% 0%, var(--route-top) 0%, var(--route-mid) 45%, var(--route-deep) 100%); }
.route-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--gold-light); }
.route-kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
.route h3 { margin: 10px 0 8px; font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; line-height: 1.35; color: #fff; }
.route-copy > p { margin: 0; max-width: 48ch; font-size: 15px; line-height: 1.85; color: var(--route-text); }

.route-cities { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.route-cities a {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px; border-radius: 12px;
  color: var(--route-ink); background: rgba(255, 255, 255, .05); border: 1px solid rgba(150, 175, 215, .18);
  transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.route-cities a:hover, .route-cities a.is-active { background: rgba(0, 209, 73, .12); border-color: rgba(0, 209, 73, .55); }
.route-cities a:active { transform: scale(.98); }
.route-cities a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.route-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--route-ink); box-shadow: 0 0 0 3px rgba(238, 243, 251, .12); transition: background-color 200ms ease, box-shadow 200ms ease; }
.route-cities a.is-active .route-dot { background: var(--route-gold); box-shadow: 0 0 0 4px rgba(0, 209, 73, .22); }
.route-cities b { font-size: 14.5px; font-weight: 700; }
.route-cities small { margin-inline-start: auto; font-size: 12px; color: var(--route-dim); white-space: nowrap; }
.route-hint { margin: 12px 0 0 !important; font-size: 12.5px !important; color: var(--route-dim) !important; }
@media (hover: none) { .route-hint { display: none; } }

.route-globe { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin-inline: auto; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.route-globe.is-dragging { cursor: grabbing; }
.route-globe canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.route-globe::before {
  content: ""; position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--globe-hi), var(--globe-mid) 60%, var(--globe-lo));
  box-shadow: 0 0 0 1px rgba(150, 175, 215, .08), 0 0 70px rgba(0, 95, 250, .18);
}
.route-globe.is-ready::before { display: none; }
.globe-label {
  position: absolute; top: 0; left: 0; z-index: 2; translate: -50% calc(-100% - 14px);
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  color: #fff; background: rgba(4, 16, 40, .82); border: 1px solid rgba(0, 209, 73, .45);
  box-shadow: 0 6px 18px rgba(4, 16, 40, .25); pointer-events: none;
  transition: opacity 240ms ease;
}
.globe-label.is-origin { color: var(--route-gold); border-color: rgba(0, 209, 73, .9); }
.globe-label.is-hidden { opacity: 0; }

@media (max-width: 899px) {
  .route { grid-template-columns: 1fr; padding: 26px 22px; gap: 10px; }
  .route-globe { max-width: 360px; order: -1; margin-block: -10px -6px; }
}
@media (max-width: 420px) {
  .route-cities { grid-template-columns: 1fr 1fr; }
  .route-cities a { padding: 8px 10px; gap: 8px; }
  .route-cities small { font-size: 11px; }
}
@media (max-width: 480px) {
  .route-cities a { flex-wrap: wrap; row-gap: 0; align-content: center; }
  .route-cities small { flex-basis: 100%; margin-inline-start: 18px; }
}