/* ============================================================
   European Medical Center (EMC) — Modern Medical Design System
   Bilingual (AR/RTL + EN/LTR) · Fresh blue/teal palette
   ============================================================ */

:root {
  /* ===== Official EMC brand palette — navy #2a3887 + red #eb2d3b ===== */
  /* variable names kept for compatibility; values re-themed to brand */
  --teal-50:  #eef1fb;
  --teal-100: #dde3f6;
  --teal-400: #4254e8;
  --teal-500: #2f3fce;
  --teal-600: #2a3887;
  --teal-700: #1e2a6b;

  --blue-50:  #eef1fb;
  --blue-100: #dde3f6;
  --blue-500: #3346e8;
  --blue-600: #2f3fce;
  --blue-700: #2a3887;
  --navy:     #1e2a6b;
  --navy-900: #16205a;

  --brand-navy: #2a3887;
  --brand-red:  #eb2d3b;
  --brand-red-dark: #c91f2c;
  --royal: #2f3fce;

  --primary: #2a3887;        /* brand navy */
  --primary-dark: #1e2a6b;
  --secondary: #2f3fce;      /* royal blue */
  --accent: #eb2d3b;         /* brand red */
  --cyan: #16b6c9;           /* fresh medical cyan (tertiary) */
  --cyan-deep: #0e8fa3;
  --grad-cyan: linear-gradient(135deg, #16b6c9, #38d6e6);

  --ink: #0f2430;
  --body: #41566a;
  --muted: #7488a0;
  --line: #e4ebf2;
  --bg: #f5f9fb;
  --bg-soft: #eef5f8;
  --surface: #ffffff;

  --grad-hero: linear-gradient(135deg, #1e2a6b 0%, #2a3887 42%, #2f3fce 100%);
  --grad-teal: linear-gradient(135deg, #2a3887, #2f3fce);
  --grad-blue: linear-gradient(135deg, #1e2a6b, #3346e8);
  --grad-red:  linear-gradient(135deg, #eb2d3b, #c91f2c);
  --grad-soft: linear-gradient(135deg, #eef1fb, #f4f2ff);

  --shadow-sm: 0 2px 8px rgba(30,42,107,.05), 0 1px 2px rgba(30,42,107,.04);
  --shadow:    0 12px 34px rgba(30,42,107,.08);
  --shadow-md: 0 22px 54px rgba(30,42,107,.12);
  --shadow-lg: 0 44px 90px rgba(30,42,107,.18);

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  /* glassmorphism */
  --glass-bg: rgba(255,255,255,.62);
  --glass-brd: rgba(255,255,255,.7);
  --glass-blur: blur(20px) saturate(170%);

  --maxw: 1200px;
  --header-h: 120px;

  --font-ar: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --font-en: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font: var(--font-ar);
}

html[lang="en"] { --font: var(--font-en); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4 { color: var(--ink); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
html[lang="en"] h1, html[lang="en"] h2 { letter-spacing: -0.035em; }
.glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-brd); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
section { position: relative; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

/* Language visibility */
html[lang="ar"] .en-only { display: none !important; }
html[lang="en"] .ar-only { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; font-weight: 700;
  font-family: inherit; font-size: 15px; cursor: pointer; border: 0;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--grad-teal); color: #fff; box-shadow: 0 10px 24px rgba(42,56,135,.34); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(42,56,135,.46); }
.btn-accent { background: var(--grad-red); color:#fff; box-shadow: 0 10px 24px rgba(235,45,59,.34); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(235,45,59,.46); }
.btn-light { background: #fff; color: var(--primary-dark); box-shadow: var(--shadow); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--primary-dark); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--teal-50); }
.btn-ghost { background: rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.26); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1px solid rgba(30,42,107,.07);
  transform: translateZ(0); /* own GPU layer → fewer scroll repaints */
}
/* drop expensive blur on smaller screens where scroll jank hurts most */
@media (max-width:760px){ .site-header{ background:rgba(255,255,255,.96); -webkit-backdrop-filter:none; backdrop-filter:none; } }
.topbar {
  background: var(--navy); color: #cfe6f0; font-size: 13px;
}
.topbar .container { display:flex; align-items:center; justify-content:space-between; height:38px; gap:14px; }
.topbar a { color:#cfe6f0; opacity:.9; display:inline-flex; align-items:center; gap:6px; }
.topbar a:hover { opacity:1; color:#fff; }
.topbar .tb-group { display:flex; align-items:center; gap:18px; }
.topbar svg { width:15px; height:15px; }
.topbar .tb-socials { display:flex; gap:10px; }

.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo {
  width: 46px; height: 46px; border-radius: 13px; background: var(--grad-teal);
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 19px;
  box-shadow: 0 8px 18px rgba(13,148,136,.35); flex: none;
}
.brand .logo svg { width: 26px; height: 26px; }
.brand .bt { font-weight: 900; color: var(--ink); font-size: 18px; line-height: 1.15; }
.brand .bs { font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing:.3px; }

.menu { display: flex; align-items: center; gap: 4px; }
.menu > li > a {
  display: inline-flex; align-items: center; gap: 5px; padding: 9px 11px;
  border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--ink);
  transition: background .15s, color .15s; white-space: nowrap;
}
@media (max-width:1180px){ .menu > li > a{ padding:9px 9px; font-size:13.5px; } .nav{ gap:10px; } }
.menu > li > a { position: relative; }
.menu > li > a:hover, .menu > li.active > a { color: var(--primary-dark); }
.menu > li > a::after { content:""; position:absolute; inset-inline:11px; bottom:5px; height:2.5px; border-radius:3px; background:var(--brand-red); transform:scaleX(0); transform-origin:center; transition:transform .24s cubic-bezier(.4,0,.2,1); }
.menu > li > a:hover::after, .menu > li.active > a::after { transform:scaleX(1); }
.menu .caret { width: 14px; height: 14px; opacity:.7; }

.has-mega { position: relative; }
.mega {
  position: absolute; top: calc(100% + 4px); inset-inline-start: 50%; transform: translateX(-50%) translateY(8px);
  width: min(640px, 92vw); background: #fff; border:1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .32s; z-index: 60;
}
/* invisible bridge so moving from the link to the panel never drops hover */
.mega::before { content:""; position:absolute; top:-16px; left:-8px; right:-8px; height:20px; }
html[dir="rtl"] .mega { transform: translateX(50%) translateY(8px); }
.has-mega:hover .mega, .has-mega.open .mega { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
html[dir="rtl"] .has-mega:hover .mega, html[dir="rtl"] .has-mega.open .mega { transform: translateX(50%) translateY(0); }
.mega a {
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px; font-weight:600;
  font-size:14px; color:var(--body); transition: background .15s;
}
.mega a:hover { background: var(--bg-soft); color: var(--primary-dark); }
.mega a .mi { width:34px; height:34px; border-radius:9px; background:var(--grad-soft); display:grid; place-items:center; flex:none; color:var(--primary); }
.mega a .mi svg { width:18px; height:18px; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-toggle {
  display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff; font-family:inherit; font-weight:800; font-size:13.5px;
  color:var(--ink); cursor:pointer; transition: border-color .15s, background .15s;
}
.lang-toggle:hover { border-color: var(--primary); background: var(--teal-50); }
.lang-toggle svg { width:16px; height:16px; color:var(--primary); }

.burger { display:none; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line);
  background:#fff; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger span { width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }

/* mobile drawer */
.drawer-backdrop { position:fixed; inset:0; background:rgba(8,42,67,.45); z-index:200; opacity:0; visibility:hidden; transition:.25s; }
.drawer-backdrop.open { opacity:1; visibility:visible; }
.drawer {
  position:fixed; top:0; inset-inline-end:0; height:100%; width:min(86vw,340px); background:#fff; z-index:210;
  transform: translateX(100%); transition: transform .3s ease; padding:20px; overflow-y:auto;
  box-shadow: var(--shadow-lg);
}
html[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.open { transform: translateX(0) !important; }
.drawer .dh { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.drawer .dclose { width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:20px;color:var(--ink); }
.drawer nav a { display:block; padding:13px 12px; border-radius:11px; font-weight:700; color:var(--ink); }
.drawer nav a:hover { background:var(--teal-50); }
.drawer details summary { padding:13px 12px; border-radius:11px; font-weight:700; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.drawer details summary::-webkit-details-marker { display:none; }
.drawer details .sub a { padding:10px 12px 10px 26px; font-weight:600; font-size:14px; color:var(--body); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--grad-hero); color: #fff; overflow: hidden; }
.hero-canvas { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.85; }
.hero .container { position: relative; }
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 2; }
.hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 12%, rgba(56,214,230,.22), transparent 40%),
    radial-gradient(circle at 18% 88%, rgba(235,45,59,.18), transparent 40%),
    radial-gradient(circle at 60% 50%, rgba(255,255,255,.10), transparent 55%);
  pointer-events:none;
}
.hero { min-height: clamp(560px, 82vh, 760px); display: flex; align-items: center; }
.hero .container { position: relative; z-index: 2; padding-block: 56px 80px; }
.hero-text { max-width: 600px; position: relative; z-index: 2; }

/* lifestyle photo (opposite the text, RTL-aware) */
.hero-photo { position:absolute; inset-block:0; inset-inline-end:0; width:60%; z-index:0;
  background:url('img/hero-or.jpg') center/cover no-repeat; }
.hero-photo::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to right, #1e2a6b 0%, rgba(30,42,107,.86) 22%, rgba(30,42,107,.45) 52%, rgba(30,42,107,.12) 100%); }
html[dir="rtl"] .hero-photo::after { background:linear-gradient(to left, #1e2a6b 0%, rgba(30,42,107,.86) 22%, rgba(30,42,107,.45) 52%, rgba(30,42,107,.12) 100%); }
.hero-canvas { -webkit-mask-image:linear-gradient(to right, #000 32%, transparent 72%); mask-image:linear-gradient(to right, #000 32%, transparent 72%); }
html[dir="rtl"] .hero-canvas { -webkit-mask-image:linear-gradient(to left, #000 32%, transparent 72%); mask-image:linear-gradient(to left, #000 32%, transparent 72%); }
@media (max-width:860px){
  .hero-photo{ width:100%; opacity:.5; }
  .hero-photo::after{ background:linear-gradient(180deg, rgba(30,42,107,.7), rgba(30,42,107,.92)); }
  .hero-canvas{ -webkit-mask-image:none; mask-image:none; }
}

/* ===== Light banner theme (bright photo, navy text) ===== */
.hero.hero-light{ background:#eef4fb; color:var(--ink); }
.hero-light .hero-canvas{ display:none; }
.hero-light .hero-photo{ inset:0; width:100%; background:#eef4fb; }
.hero-slide{ position:absolute; inset:0; z-index:1; background-position:center top; background-size:cover; background-repeat:no-repeat; opacity:0; transform:scale(1.04); transition:opacity 1.2s ease, transform 8s ease; }
.hero-slide.active{ opacity:1; transform:scale(1); }
.hero-light .hero-photo::after{ z-index:2; background:linear-gradient(to right, rgba(238,244,251,.9) 0%, rgba(238,244,251,.48) 30%, rgba(238,244,251,.06) 54%, transparent 100%); }
html[dir="rtl"] .hero-light .hero-photo::after{ background:linear-gradient(to right, rgba(238,244,251,.9) 0%, rgba(238,244,251,.48) 30%, rgba(238,244,251,.06) 54%, transparent 100%); }
.hero-dots{ position:absolute; bottom:38px; inset-inline-start:0; width:100%; z-index:5; display:flex; gap:9px; justify-content:center; }
.hero-dots button{ width:10px; height:10px; border-radius:50%; border:0; background:rgba(42,56,135,.28); cursor:pointer; padding:0; transition:.25s; }
.hero-dots button.on{ background:var(--brand-navy); width:28px; border-radius:5px; }
.hero-light .hero-text{ margin-right:auto; margin-left:0; max-width:600px;
  background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(236,242,251,.62));
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,.7); border-radius:28px; padding:34px 38px;
  box-shadow:0 28px 70px rgba(30,42,107,.16); }
.hero.hero-light h1, .hero.hero-light h1 > span{ color:var(--brand-navy) !important; }
.hero.hero-light h1 .hl{ color:var(--brand-red) !important; }
.hero.hero-light p.lead{ color:#22324d !important; font-weight:600; }
.hero.hero-light .hero-trust .ht b{ color:var(--brand-navy) !important; }
.hero.hero-light .hero-trust .ht span{ color:#3a4863 !important; font-weight:600; }
.hero.hero-light .ichom-badge span{ color:var(--brand-navy); }
/* pin text box to the far left so the full banner shows */
.hero-light .container{ max-width:100%; padding-inline:clamp(20px,5vw,72px); }
.hero-light .hero-text{ max-width:540px; }
@media (max-width:560px){ .hero-light .hero-text{ padding:24px; } }
.hero-light .ichom-badge{ background:#fff; border:1px solid var(--line); color:var(--brand-navy); box-shadow:var(--shadow-sm); }
.hero-light .ichom-badge .gl{ background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.18); }
.hero-light .hero-cta .btn-light{ background:var(--grad-teal); color:#fff; box-shadow:0 10px 24px rgba(42,56,135,.30); }
@media (max-width:860px){
  .hero-light .hero-photo::after{ background:linear-gradient(180deg, rgba(238,244,251,.78), rgba(238,244,251,.95)); }
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); font-weight:700; font-size:13.5px; backdrop-filter: blur(4px);
}
.hero-badge .dot { width:8px;height:8px;border-radius:50%; background:#ff7a82; box-shadow:0 0 0 4px rgba(235,45,59,.28); animation: pulseDot 2s infinite; }
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 3px rgba(235,45,59,.30);}50%{box-shadow:0 0 0 7px rgba(235,45,59,0);}}
.hero h1 { color:#fff; font-size: clamp(30px, 4.4vw, 50px); margin: 18px 0 16px; letter-spacing:-.5px; }
.hero h1 .hl { color:#ff9aa1; }
.hero p.lead { color: rgba(255,255,255,.92); font-size: 18px; max-width: 540px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top: 28px; }
.hero-trust { display:flex; gap:26px; margin-top: 34px; flex-wrap:wrap; }
.hero-trust .ht { }
.hero-trust .ht b { display:block; font-size:26px; color:#fff; font-weight:900; }
.hero-trust .ht span { font-size:13.5px; color: rgba(255,255,255,.85); }

/* Hero visual card */
.hero-visual { position: relative; }
.hero-card {
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.6); border-radius: var(--radius-xl); padding: 22px;
  box-shadow: var(--shadow-lg); color: var(--ink);
}
.hero-card h3 { font-size: 18px; margin-bottom: 4px; }
.hero-card .sub { font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }
.hcrow { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:var(--bg); margin-bottom:10px; }
.hcrow .ic { width:42px;height:42px;border-radius:12px; background:var(--grad-soft); display:grid; place-items:center; color:var(--primary); flex:none; }
.hcrow .ic svg{width:22px;height:22px;}
.hcrow .tx b{ display:block; font-size:14.5px; color:var(--ink); }
.hcrow .tx span{ font-size:12.5px; color:var(--muted); }
.hcrow .go { margin-inline-start:auto; color:var(--primary); }
.hero-float {
  position:absolute; inset-inline-start:-26px; bottom:-22px; background:#fff; border-radius:18px;
  padding:14px 18px; box-shadow: var(--shadow-md); display:flex; align-items:center; gap:12px; color:var(--ink);
}
.hero-float .av { display:flex; }
.hero-float .av span { width:32px;height:32px;border-radius:50%; border:2.5px solid #fff; margin-inline-start:-10px; background:var(--grad-blue); display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800; }
.hero-float .av span:first-child{ margin:0; }
.hero-float b{ font-size:15px; color:var(--ink); display:block; }
.hero-float small{ color:var(--muted); }

.hero-wave { display:block; width:100%; height:auto; margin-top:-2px; }

/* ---------- Section heading ---------- */
.sec { padding-block: 76px; }
.sec-head { text-align:center; max-width: 660px; margin: 0 auto 46px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:7px; color: var(--primary-dark); font-weight:800;
  font-size:13.5px; letter-spacing:.6px; text-transform:uppercase; background:var(--teal-50);
  padding:6px 14px; border-radius:999px;
}
.sec-head h2 { font-size: clamp(26px, 3.4vw, 38px); margin:16px 0 12px; letter-spacing:-.4px; }
.sec-head p { font-size: 16.5px; color: var(--body); }
.sec-head.start { text-align: start; margin-inline: 0; }

/* ---------- Specialty grid ---------- */
.grid { display:grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2,1fr); }
.g-3 { grid-template-columns: repeat(3,1fr); }
.g-4 { grid-template-columns: repeat(4,1fr); }

.spec-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 24px;
  transition: transform .25s, box-shadow .25s, border-color .25s; position:relative; overflow:hidden;
}
.spec-card::after{ content:""; position:absolute; inset-inline-start:0; top:0; height:4px; width:0; background:var(--grad-teal); transition:width .3s; }
.spec-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.spec-card:hover::after{ width:100%; }
.spec-ic { width:56px;height:56px;border-radius:16px; background:var(--grad-soft); display:grid; place-items:center; color:var(--primary); margin-bottom:16px; position:relative;
  transition: background .28s, color .28s, transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s; }
.spec-ic svg { width:28px;height:28px; transition: transform .28s; }
/* default colour variety: every 3rd icon carries a red tint */
.spec-card:nth-child(3n) .spec-ic{ background:linear-gradient(135deg,#fdeaec,#fbe0e3); color:var(--brand-red); }
.spec-card:hover .spec-ic { background:var(--grad-red); color:#fff; transform: translateY(-4px) scale(1.1) rotate(-5deg); box-shadow:0 14px 26px rgba(235,45,59,.34); }
.spec-card:hover .spec-ic svg{ transform: scale(1.05); }
.spec-card:nth-child(3n):hover .spec-ic{ background:var(--grad-teal); box-shadow:0 14px 26px rgba(42,56,135,.32); }
.spec-card::after{ background:var(--grad-red); }
.spec-card h3 { font-size:17px; margin-bottom:7px; }
.spec-card p { font-size:14px; color:var(--muted); margin-bottom:14px; }
.spec-card .lnk { display:inline-flex; align-items:center; gap:6px; color:var(--primary-dark); font-weight:700; font-size:14px; }
.spec-card .lnk svg{ width:16px;height:16px; transition: transform .2s; }
.spec-card:hover .lnk svg{ transform: translateX(4px); }
html[dir="rtl"] .spec-card:hover .lnk svg{ transform: translateX(-4px) scaleX(-1); }
html[dir="rtl"] .spec-card .lnk svg{ transform: scaleX(-1); }

/* ---------- Services strip ---------- */
.serv-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; gap:15px; align-items:flex-start; transition:.25s; }
.serv-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.serv-card .si { width:50px;height:50px;border-radius:13px; flex:none; display:grid;place-items:center; color:#fff; background:var(--grad-blue); }
.serv-card .si svg{ width:25px;height:25px; }
.serv-card:nth-child(odd) .si{ background:var(--grad-teal); }
.serv-card h4 { font-size:16px; margin-bottom:5px; }
.serv-card p { font-size:13.5px; color:var(--muted); }

/* ---------- Why / features ---------- */
.why { background: var(--grad-soft); }
.feat { background:#fff; border-radius:var(--radius-lg); padding:26px; box-shadow: var(--shadow-sm); border:1px solid var(--line); }
.feat .fi { width:54px;height:54px;border-radius:15px; background:var(--grad-teal); display:grid;place-items:center;color:#fff; margin-bottom:16px; }
.feat .fi svg{ width:27px;height:27px; }
.feat h3 { font-size:18px; margin-bottom:8px; }
.feat p { font-size:14.5px; color:var(--body); }

/* ---------- Doctors ---------- */
.doc-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; transition:.25s; }
.doc-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.doc-photo { height: 210px; background: linear-gradient(160deg,#eef4fb 0%,#d7e4f4 100%); position:relative; display:grid; place-items:center; overflow:hidden; }
.doc-photo .initials { font-size:46px; font-weight:900; color:var(--brand-navy); opacity:.5; }
.doc-body { padding:18px; }
.doc-body h3 { font-size:16.5px; margin-bottom:6px; }
.doc-spec { display:flex; align-items:center; gap:7px; color:var(--primary-dark); font-weight:700; font-size:13.5px; margin-bottom:8px; }
.doc-spec .ds-ic{ width:26px;height:26px;border-radius:8px;background:rgba(235,45,59,.10);display:grid;place-items:center;flex:none; }
.doc-spec .ds-ic svg{ width:15px;height:15px;color:var(--brand-red); }
/* hover overlay — pops up doctor details over the photo */
.doc-over{ position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; padding:16px;
  background:linear-gradient(to top, rgba(26,36,92,.95) 0%, rgba(26,36,92,.7) 42%, rgba(26,36,92,.05) 78%, transparent 100%);
  opacity:0; transition:opacity .32s ease; }
.doc-card:hover .doc-over, .doc-card:focus-within .doc-over{ opacity:1; }
.doc-over-in{ transform:translateY(12px); transition:transform .34s cubic-bezier(.34,1.4,.5,1); }
.doc-card:hover .doc-over-in, .doc-card:focus-within .doc-over-in{ transform:none; }
.doc-over-tag{ display:inline-flex; align-items:center; gap:6px; color:#9fb6ff; font-size:11px; font-weight:800; margin-bottom:6px; }
.doc-over-tag svg{ width:14px;height:14px; }
.doc-over-in p{ color:#fff; font-size:12.5px; line-height:1.65; font-weight:600; }
.doc-foot { display:flex; gap:8px; margin-top:14px; }
.doc-foot .btn { padding:9px 16px; font-size:13px; flex:1; justify-content:center; }

/* ---------- Stats band ---------- */
.stats { background: linear-gradient(135deg,#1b2660 0%,#2a3887 55%,#2f3fce 120%); color:#fff; position:relative; overflow:hidden; }
.stats::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 10%, rgba(56,214,230,.16), transparent 40%), radial-gradient(circle at 10% 90%, rgba(235,45,59,.12), transparent 42%); pointer-events:none; }
.stats .grid { gap: 22px; position:relative; z-index:2; }
.stat { text-align:center; padding: 30px 18px; border-radius:24px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.stat:hover { transform: translateY(-7px); background:rgba(255,255,255,.1); box-shadow:0 24px 48px rgba(0,0,0,.28); }
.stat b { font-size: clamp(34px,4.4vw,52px); font-weight:900; color:#fff; display:block; line-height:1; letter-spacing:-1px; }
.stat .lbl { color:#aeb9e8; font-weight:700; font-size:15px; margin-top:10px; display:block; }
.stat .ic { width:62px;height:62px;border-radius:18px; background:var(--grad-cyan); display:grid;place-items:center; margin:0 auto 16px; color:#06222b; box-shadow:0 12px 26px rgba(56,214,230,.32); transition:transform .25s; }
.stat:hover .ic{ transform:scale(1.08) rotate(-4deg); }
.stat:nth-child(2) .ic{ background:var(--grad-red); color:#fff; box-shadow:0 12px 26px rgba(235,45,59,.34); }
.stat:nth-child(3) .ic{ background:linear-gradient(135deg,#8a98ff,#4254e8); color:#fff; box-shadow:0 12px 26px rgba(66,84,232,.34); }
.stat:nth-child(4) .ic{ background:var(--grad-teal); color:#fff; box-shadow:0 12px 26px rgba(42,56,135,.34); }
.stat .ic svg{ width:30px;height:30px; }

/* ---------- Branches ---------- */
.branch-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:.25s; }
.branch-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-5px); }
.branch-top { height:175px; background:var(--grad-blue); position:relative; display:grid;place-items:center; color:#fff; overflow:hidden; }
.branch-top svg{ width:46px;height:46px; opacity:.9; }
.branch-top iframe.branch-map{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; filter:saturate(1.05); }
.branch-card:nth-child(2) .branch-top{ background:var(--grad-teal); }
.branch-card:nth-child(3) .branch-top{ background: var(--grad-red); }
.branch-body{ padding:20px; }
.branch-body h3{ font-size:18px; margin-bottom:10px; }
.branch-body .row{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--body); margin-bottom:8px; }
.branch-body .row svg{ width:17px;height:17px; color:var(--primary); flex:none; margin-top:3px; }

/* ---------- Testimonials ---------- */
.tst { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm); }
.tst .stars{ color:#f5b301; margin-bottom:12px; letter-spacing:2px; }
.tst p { font-size:15px; color:var(--body); font-style:italic; margin-bottom:18px; }
.tst .who{ display:flex; align-items:center; gap:12px; }
.tst .who .av{ width:46px;height:46px;border-radius:50%; background:var(--grad-blue); display:grid;place-items:center;color:#fff;font-weight:800; }
.tst .who b{ display:block; color:var(--ink); font-size:14.5px; }
.tst .who span{ font-size:12.5px; color:var(--muted); }

/* ---------- App promo ---------- */
.apppromo { background: var(--grad-hero); color:#fff; border-radius: var(--radius-xl); overflow:hidden; position:relative; }
.apppromo::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.14), transparent 45%); }
.apppromo .container{ display:grid; grid-template-columns: 1.1fr .9fr; gap:30px; align-items:center; padding-block: 56px; position:relative; z-index:2; }
.apppromo h2{ color:#fff; font-size: clamp(26px,3.3vw,36px); margin-bottom:14px; }
.apppromo p{ color:rgba(255,255,255,.9); font-size:16.5px; max-width:480px; margin-bottom:24px; }
.store-badges{ display:flex; gap:14px; flex-wrap:wrap; }
.store-badge{ display:flex; align-items:center; gap:11px; background:#0c1c2b; color:#fff; padding:11px 20px; border-radius:14px; transition:.2s; }
.store-badge:hover{ transform: translateY(-3px); }
.store-badge svg{ width:26px;height:26px; }
.store-badge small{ display:block; font-size:11px; opacity:.8; line-height:1; }
.store-badge b{ font-size:16px; line-height:1.3; }
.phone-wrap{ display:grid; place-items:center; }
.phone-mock{
  width:240px; height:480px; background:#0c2233; border-radius:38px; padding:12px; box-shadow: var(--shadow-lg);
  border:6px solid #0c2233; position:relative;
}
.phone-mock .screen{ width:100%; height:100%; background:#fff; border-radius:28px; overflow:hidden; position:relative; }
.phone-mock .notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:90px; height:20px; background:#0c2233; border-radius:0 0 14px 14px; z-index:3; }
/* app module enhancements */
.app-features{ display:grid; grid-template-columns:1fr 1fr; gap:13px 18px; margin:4px 0 20px; }
.app-features li{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:14.5px; }
.app-features .afi{ width:36px;height:36px;border-radius:11px; background:rgba(255,255,255,.16); display:grid;place-items:center; color:#fff; flex:none; }
.app-features .afi svg{ width:19px;height:19px; }
.app-rating{ display:flex; align-items:center; gap:9px; margin-bottom:18px; color:#fff; }
.app-rating .stars{ color:#ffc83d; letter-spacing:2px; font-size:15px; }
.app-rating b{ font-size:18px; font-weight:900; }
.app-rating small{ color:rgba(255,255,255,.82); font-size:13px; }
.phone-wrap{ position:relative; }
.phone-wrap::before{ content:""; position:absolute; inset:4% 14%; background:radial-gradient(circle, rgba(120,220,255,.45), transparent 66%); filter:blur(34px); z-index:0; }
.phone-mock{ position:relative; z-index:2; animation:phoneFloat 5.5s ease-in-out infinite; }
@keyframes phoneFloat{ 0%,100%{transform:translateY(-9px)} 50%{transform:translateY(9px)} }
@media (max-width:560px){ .app-features{ grid-template-columns:1fr; } }

/* ---------- CTA banner ---------- */
.cta-band { background: var(--grad-teal); color:#fff; border-radius:var(--radius-xl); padding: 46px; text-align:center; box-shadow: var(--shadow-md); }
.cta-band h2{ color:#fff; font-size: clamp(24px,3vw,34px); margin-bottom:12px; }
.cta-band p{ color:rgba(255,255,255,.92); max-width:560px; margin:0 auto 24px; font-size:16.5px; }
.cta-band .row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-900); color:#aecadb; padding-block: 56px 26px; }
.footer .cols{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap:32px; }
.footer h4{ color:#fff; font-size:16px; margin-bottom:16px; }
.footer a{ color:#aecadb; font-size:14px; }
.footer a:hover{ color:#fff; }
.footer .fcol ul li{ margin-bottom:10px; }
.footer .fbrand .logo{ width:46px;height:46px;border-radius:13px;background:var(--grad-teal);display:grid;place-items:center;color:#fff;margin-bottom:14px; }
.footer .fbrand .logo svg{ width:26px;height:26px; }
.footer .fbrand p{ font-size:14px; color:#9bbacb; max-width:280px; }
.footer .fsoc{ display:flex; gap:10px; margin-top:16px; }
.footer .fsoc a{ width:40px;height:40px;border-radius:11px; background:rgba(255,255,255,.08); display:grid;place-items:center; transition:.2s; }
.footer .fsoc a:hover{ background:var(--primary); color:#fff; }
.footer .fsoc svg{ width:19px;height:19px; }
.footer .contact-row{ display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:14px; }
.footer .contact-row svg{ width:18px;height:18px;color:var(--teal-400); flex:none; margin-top:2px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding-top:20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13.5px; color:#7f9fb2; }

/* ---------- Page hero (inner) ---------- */
.page-hero { background: var(--grad-hero); color:#fff; padding-block: 56px 64px; position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 10%, rgba(255,255,255,.14), transparent 40%); }
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; font-size: clamp(28px,4vw,44px); margin-bottom:12px; }
.page-hero p{ color:rgba(255,255,255,.9); font-size:17px; max-width:620px; }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:13.5px; color:rgba(255,255,255,.8); margin-bottom:16px; }
.crumbs a:hover{ color:#fff; }
.crumbs svg{ width:14px;height:14px; opacity:.7; }
html[dir="rtl"] .crumbs svg{ transform: scaleX(-1); }

/* ---------- Forms ---------- */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font-family:inherit;
  font-size:15px; color:var(--ink); background:#fbfdfe; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(13,148,136,.12); }
.field textarea{ resize:vertical; min-height:120px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.info-card{ background:var(--grad-soft); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; }
.info-card .ir{ display:flex; gap:13px; align-items:flex-start; margin-bottom:18px; }
.info-card .ir .ic{ width:46px;height:46px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--primary);flex:none;box-shadow:var(--shadow-sm); }
.info-card .ir .ic svg{ width:22px;height:22px; }
.info-card .ir b{ display:block; color:var(--ink); font-size:15px; }
.info-card .ir span{ font-size:14px; color:var(--body); }

/* prose */
.prose p{ margin-bottom:16px; font-size:16px; color:var(--body); }
.prose h2{ font-size:26px; margin:30px 0 14px; }
.prose h3{ font-size:20px; margin:24px 0 10px; }
.check-list li{ display:flex; gap:11px; align-items:flex-start; margin-bottom:13px; font-size:15.5px; color:var(--body); }
.check-list li svg{ width:22px;height:22px; color:var(--primary); flex:none; margin-top:2px; }

/* tabs (specialties) */
.chip-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:34px; }
.chip{ padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-family:inherit; font-weight:700; font-size:14px; color:var(--body); cursor:pointer; transition:.2s; }
.chip:hover{ border-color:var(--primary); color:var(--primary-dark); }
.chip.active{ background:var(--grad-teal); color:#fff; border-color:transparent; }

/* video gallery */
.vid-card{ position:relative; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); cursor:pointer; background:#0a1020; aspect-ratio:16/9; }
.vid-thumb{ position:absolute; inset:0; background-size:cover; background-position:center; display:grid; place-items:center; transition:transform .3s ease; }
.vid-card:hover .vid-thumb{ transform:scale(1.05); }
.vid-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,16,32,.1), rgba(10,16,32,.45)); }
.vid-play{ position:relative; z-index:2; width:64px;height:64px;border-radius:50%; background:var(--brand-red); color:#fff; display:grid;place-items:center; box-shadow:0 12px 32px rgba(235,45,59,.5); transition:transform .2s; }
.vid-play svg{ width:26px;height:26px; margin-inline-start:3px; }
.vid-card:hover .vid-play{ transform:scale(1.14); }
.vid-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5; }

/* whatsapp float */
.wa-float{ position:fixed; bottom:22px; inset-inline-end:22px; z-index:90; width:58px; height:58px; border-radius:50%; background:#25d366; display:grid; place-items:center; box-shadow:0 12px 28px rgba(37,211,102,.45); transition:transform .2s; }
.wa-float:hover{ transform: scale(1.08); }
.wa-float svg{ width:30px;height:30px; color:#fff; }

/* utilities */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
.text-center{ text-align:center; }
.mt-s{ margin-top:14px; } .mt-m{ margin-top:26px; } .mt-l{ margin-top:44px; }

/* ---------- EMC brand additions ---------- */
/* logo lockup with red "Medical" */
.brand .logo { background: var(--brand-navy); }
.brand .logo svg { color:#fff; }
.brand .bt .red { color: var(--brand-red); }

/* Official EMC logo image */
.brand-logo{ height:96px; width:auto; display:block; }
.drawer .brand-logo{ height:58px; }
.footer-logo{ height:92px; width:auto; filter: brightness(0) invert(1); opacity:.96; margin-bottom:14px; }
@media (max-width:560px){ .brand-logo{ height:60px; } }

/* ICHOM partner badge */
.ichom-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); font-weight:800; font-size:12.5px; }
.ichom-badge .gl{ width:8px;height:8px;border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.3); }
.ichom-inline{ display:inline-flex;align-items:center;gap:7px;color:var(--brand-navy);font-weight:800;font-size:13px;background:#eafbf0;padding:5px 12px;border-radius:999px; }
.ichom-inline .gl{ width:7px;height:7px;border-radius:50%;background:#16a34a; }

/* Tagline script */
.tagline{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tagline .ar{ font-size:clamp(22px,3vw,30px); font-weight:900; color:#fff; }
.tagline .sep{ width:2px; height:26px; background:rgba(255,255,255,.4); }
.tagline .en{ font-size:clamp(16px,2vw,20px); font-weight:700; color:#ff9aa1; font-style:italic; }

/* Values (Cure with Care) */
.value-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; transition:transform .25s, box-shadow .25s; position:relative; overflow:hidden; }
.value-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.value-card .vn{ position:absolute; top:14px; inset-inline-end:18px; font-size:42px; font-weight:900; color:var(--teal-50); line-height:1; }
.value-card .vi{ width:52px;height:52px;border-radius:14px;background:var(--grad-teal);display:grid;place-items:center;color:#fff;margin-bottom:14px;position:relative;z-index:2; }
.value-card:nth-child(3n+2) .vi{ background:var(--grad-red); }
.value-card .vi svg{ width:26px;height:26px; }
.value-card h3{ font-size:17px;margin-bottom:7px;position:relative;z-index:2; }
.value-card p{ font-size:14px;color:var(--body);position:relative;z-index:2; }

/* Partners / insurance strip */
.partners-wrap{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm); text-align:center; }
.partners-wrap img{ width:100%; max-width:760px; margin:0 auto; opacity:.92; }

/* real insurance logos grid */
.ins-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.ins-logo{ background:#fff; border:1px solid var(--line); border-radius:16px; height:96px; display:grid; place-items:center; padding:14px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.ins-logo:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.ins-logo img{ max-width:100%; max-height:62px; object-fit:contain; }
@media (max-width:1024px){ .ins-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:768px){ .ins-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .ins-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }

/* Counter pop */
.counter{ font-variant-numeric: tabular-nums; }

/* Specialty tabs (homepage interactive) */
.tabs-nav{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.tabbtn{ padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-family:inherit; font-weight:700; font-size:14px; color:var(--body); cursor:pointer; transition:.2s; }
.tabbtn:hover{ border-color:var(--primary); color:var(--primary-dark); }
.tabbtn.active{ background:var(--grad-teal); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(42,56,135,.28); }

/* hero card live pulse */
.hcrow{ cursor:pointer; }
.hcrow:hover{ background:var(--teal-50); }
.hcrow:hover .go{ transform: translateX(-4px); }
html[dir="ltr"] .hcrow:hover .go{ transform: translateX(4px); }
.go{ transition: transform .2s; }
html[dir="ltr"] .go svg{ transform: scaleX(-1); }

/* marquee for trust logos — frosted glass pill, no clipping */
.marquee{ overflow:hidden; padding:16px 0; border-radius:20px;
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 10px 30px rgba(42,56,135,.08), inset 0 1px 0 rgba(255,255,255,.8);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.marquee .track{ display:flex; gap:42px; width:max-content; align-items:center; line-height:1.7; animation: scrollx 30s linear infinite; }
.marquee:hover .track{ animation-play-state:paused; }
.marquee .track .m{ display:flex;align-items:center;gap:9px;color:var(--body);font-weight:800;font-size:15px;white-space:nowrap; padding:2px 0; transition:color .2s, transform .2s; cursor:default; }
.marquee .track .m:hover{ color:var(--primary); transform:translateY(-2px); }
.marquee .track .m svg{ width:22px;height:22px;color:var(--primary); transition:color .2s, transform .2s; }
.marquee .track .m:hover svg{ color:var(--brand-red); transform:scale(1.18); }
@keyframes scrollx{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
html[dir="rtl"] .marquee .track{ animation-direction: reverse; }

/* section divider tint */
.bg-tint{ background:var(--grad-soft); }

/* ===== Interactive header: shrink on scroll ===== */
.site-header{ transition: box-shadow .25s ease; }
.topbar{ transition: height .3s ease, opacity .25s ease; overflow:hidden; }
.nav{ transition: height .3s ease; }
.brand-logo{ transition: height .3s ease; }
.site-header.scrolled{ box-shadow: 0 8px 30px rgba(30,42,107,.12); }
.site-header.scrolled .topbar{ height:0; opacity:0; }
.site-header.scrolled .nav{ height:74px; }
.site-header.scrolled .brand-logo{ height:56px; }

/* ===== Back-to-top button ===== */
.to-top{ position:fixed; bottom:90px; inset-inline-end:22px; z-index:88; width:48px; height:48px; border-radius:50%;
  background:var(--brand-navy); color:#fff; border:0; cursor:pointer; display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(12px); transition:.28s ease; box-shadow:0 12px 26px rgba(30,42,107,.32); }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--brand-red); transform:translateY(-3px); }
.to-top svg{ width:22px; height:22px; }

/* ===== Scroll-progress bar ===== */
.scroll-prog{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:120; background:linear-gradient(90deg,var(--brand-navy),var(--royal),var(--brand-red)); transform:scaleX(0); transform-origin:left center; will-change:transform; }
html[dir="rtl"] .scroll-prog{ transform-origin:right center; }

/* hero scroll hint */
.hero-scroll{ position:absolute; bottom:96px; inset-inline-start:50%; transform:translateX(-50%); z-index:4; color:var(--brand-navy); opacity:.6; animation:heroBob 1.8s ease-in-out infinite; }
.hero-scroll svg{ width:26px; height:26px; }
@keyframes heroBob{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }
@media (max-width:860px){ .hero-scroll{ display:none; } }

/* ===== Body explorer (LIGHT, Apple-glass) ===== */
.bodymap{ position:relative; overflow:hidden; color:var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(47,63,206,.08), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(22,182,201,.10), transparent 46%),
    linear-gradient(170deg, #f7faff 0%, #eef3fb 55%, #e9eff8 100%);
}
.bodymap::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.6), transparent 60%); }
.bodymap .sec-head h2{ color:var(--ink); }
.bodymap .sec-head p{ color:var(--body); }
.bodymap .eyebrow{ background:rgba(42,56,135,.08); color:var(--primary); }
.bm-wrap{ display:grid; grid-template-columns: 0.82fr 1.18fr; gap:38px; align-items:center; position:relative; z-index:2; }

/* anatomy figure stage — real art inside a dark "scanner" tile (always visible) */
.bm-figure{ position:relative; width:100%; max-width:340px; margin:0 auto; aspect-ratio:900/1551; border-radius:30px; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 30%, #17244e 0%, #0c1531 56%, #070d20 100%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow: 0 26px 60px rgba(20,30,70,.35), inset 0 0 70px rgba(46,96,205,.20), inset 0 1px 0 rgba(255,255,255,.28);
  cursor:pointer; transform-style:preserve-3d; will-change:transform; transition: box-shadow .3s; }
.bm-figure:hover{ box-shadow: 0 34px 74px rgba(20,30,70,.45), inset 0 0 80px rgba(46,96,205,.3), inset 0 1px 0 rgba(255,255,255,.3); }
.bm-sil{ position:absolute; inset:0; width:100%; height:100%; z-index:1; padding:6% 13% 5%; opacity:.9; pointer-events:none; animation:holoFloat 7s ease-in-out infinite; }
.bm-sil path{ fill:rgba(120,180,255,.10); stroke:rgba(150,205,255,.28); stroke-width:1.2; }
.bm-figure .anat{ animation: holoFloat 7s ease-in-out infinite; }
@keyframes holoFloat{ 0%,100%{transform:translateY(-6px)} 50%{transform:translateY(7px)} }
.bm-figure .anat{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:4% 6% 3%; z-index:2;
  opacity:0; transition:opacity .55s ease; filter:drop-shadow(0 0 16px rgba(90,170,255,.22)); }
.bm-figure .anat.active{ opacity:1; }
.bm-figure .platform{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:64%; height:32px; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(80,180,255,.5), rgba(80,180,255,.12) 50%, transparent 72%); filter:blur(5px); border-radius:50%;
  animation: holoPlat 7s ease-in-out infinite; }
@keyframes holoPlat{ 0%,100%{opacity:.5; width:60%} 50%{opacity:.9; width:72%} }
.bm-figure .scan{ position:absolute; left:0; right:0; height:84px; top:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(120,215,255,.08) 45%, rgba(180,240,255,.30) 50%, rgba(120,215,255,.08) 55%, transparent);
  animation: holoScan 4.6s linear infinite; }
@keyframes holoScan{ 0%{top:-16%; opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:104%; opacity:0} }
.bm-figure .corner{ position:absolute; width:22px; height:22px; border:2px solid rgba(130,205,255,.5); z-index:5; pointer-events:none; }
.bm-figure .corner.tl{ top:12px; left:12px; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.bm-figure .corner.tr{ top:12px; right:12px; border-left:0; border-bottom:0; border-radius:0 6px 0 0; }
.bm-figure .corner.bl{ bottom:12px; left:12px; border-right:0; border-top:0; border-radius:0 0 0 6px; }
.bm-figure .corner.br{ bottom:12px; right:12px; border-left:0; border-top:0; border-radius:0 0 6px 0; }

/* glass info panel (LIGHT, Apple-style frosted) */
.bm-panel{ background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.85); border-radius:var(--radius-xl); padding:32px; box-shadow:0 26px 60px rgba(42,56,135,.16), inset 0 1px 0 rgba(255,255,255,.9); position:relative; z-index:2; color:var(--ink); }
.bm-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.bm-tab{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1px solid rgba(42,56,135,.14); background:rgba(255,255,255,.7); font-family:inherit; font-weight:700; font-size:12.5px; color:var(--body); cursor:pointer; transition:.2s; }
.bm-tab svg{ width:15px;height:15px; }
.bm-tab:hover{ border-color:var(--primary); color:var(--primary); background:#fff; transform:translateY(-2px); box-shadow:0 6px 16px rgba(42,56,135,.14); }
.bm-tab.active{ background:var(--grad-teal); color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(42,56,135,.32); }
.bm-detail{ display:flex; gap:18px; align-items:flex-start; }
.bm-detail .bi{ width:66px;height:66px;border-radius:20px;background:var(--grad-teal);display:grid;place-items:center;color:#fff;flex:none; box-shadow:0 14px 28px rgba(42,56,135,.32); }
.bm-detail .bi svg{ width:33px;height:33px; }
.bm-detail h3{ font-size:22px; margin-bottom:8px; color:var(--ink); }
.bm-detail p{ font-size:15px; color:var(--body); margin-bottom:18px; }
.bm-detail .acts{ display:flex; gap:10px; flex-wrap:wrap; }
/* matched specialist chip (links the body system to a real EMC doctor) */
.bm-doc{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:15px; padding:10px 12px; margin:2px 0 18px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s; text-decoration:none; }
.bm-doc:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:transparent; }
.bm-doc-av{ width:50px; height:50px; border-radius:13px; background:var(--grad-hero); position:relative; overflow:hidden; flex:none; display:grid; place-items:center; }
.bm-doc-av .ini{ color:#fff; font-weight:800; font-size:19px; }
.bm-doc-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.bm-doc-tx{ flex:1; min-width:0; }
.bm-doc-tx small{ color:var(--brand-red); font-size:10.5px; font-weight:800; display:block; letter-spacing:.2px; }
.bm-doc-tx b{ color:var(--ink); font-size:14.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bm-doc-tx .sp{ color:var(--primary); font-size:12px; font-weight:700; }
.bm-doc-go{ background:var(--grad-teal); color:#fff; font-weight:800; font-size:12.5px; padding:9px 16px; border-radius:11px; flex:none; }
.bm-doc:hover .bm-doc-go{ background:var(--grad-red); }
/* service ↔ specialists link (accordion) */
.acc-docs{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); }
.acc-docs .adh{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; color:var(--brand-red); margin-bottom:12px; }
.acc-docs .adh svg{ width:17px; height:17px; }
.acc-doc-row{ display:flex; flex-wrap:wrap; gap:10px; }
.acc-doc{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 14px 8px 8px; text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s; }
html[dir="rtl"] .acc-doc{ padding:8px 8px 8px 14px; }
.acc-doc:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:transparent; }
.acc-doc-av{ width:42px; height:42px; border-radius:11px; background:var(--grad-hero); position:relative; overflow:hidden; flex:none; display:grid; place-items:center; }
.acc-doc-av>span{ color:#fff; font-weight:800; font-size:16px; }
.acc-doc-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.acc-doc-tx b{ display:block; font-size:13px; color:var(--ink); line-height:1.3; }
.acc-doc-tx small{ font-size:11.5px; color:var(--primary); font-weight:700; }
.acc-doc-all{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--primary-dark); font-weight:700; font-size:13.5px; text-decoration:none; }
.acc-doc-all svg{ width:16px; height:16px; transition:transform .2s; }
.acc-doc-all:hover svg{ transform:translateX(4px); }
html[dir="rtl"] .acc-doc-all svg{ transform:scaleX(-1); }
html[dir="rtl"] .acc-doc-all:hover svg{ transform:translateX(-4px) scaleX(-1); }
.bm-hint{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); font-weight:600; margin-top:20px; }
.bm-hint .pd{ width:9px;height:9px;border-radius:50%;background:var(--brand-red); box-shadow:0 0 0 4px rgba(235,45,59,.18); }
.bm-fade{ animation:bmFade .35s ease; }
@keyframes bmFade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.spine-tag{ position:absolute; top:16px; inset-inline-start:14px; z-index:6; display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(42,56,135,.16); color:var(--primary); font-weight:800; font-size:12px; box-shadow:0 6px 16px rgba(42,56,135,.12); }
.spine-tag .d{ width:7px;height:7px;border-radius:50%; background:var(--brand-red); box-shadow:0 0 0 4px rgba(235,45,59,.18); }

/* richer feature icon variety */
.why .grid .feat:nth-child(2) .fi{ background:var(--grad-cyan); }
.why .grid .feat:nth-child(3) .fi{ background:var(--grad-red); }
.why .grid .feat:nth-child(4) .fi{ background:var(--grad-blue); }

/* card lift micro-interaction */
.spec-card, .serv-card, .doc-card, .branch-card, .value-card, .news-card{ will-change:transform; }

@media (max-width:860px){
  .bm-wrap{ grid-template-columns:1fr; }
  .bm-figure{ max-width:260px; }
}

/* Real doctor photos */
.doc-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.doc-photo .initials{ z-index:0; }
.doc-card{ cursor:pointer; }

/* Branch building photo */
.branch-top img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.branch-top .ov{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,42,107,.15), rgba(30,42,107,.55)); }
.branch-top svg{ position:relative; z-index:2; }

/* Profile modal */
.modal-bd{ position:fixed; inset:0; background:rgba(8,18,50,.55); backdrop-filter:blur(3px); z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:.25s; }
.modal-bd.open{ opacity:1; visibility:visible; }
.modal{ background:#fff; border-radius:var(--radius-xl); max-width:640px; width:100%; max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg); transform:translateY(16px); transition:transform .25s; }
.modal-bd.open .modal{ transform:none; }
.modal .mtop{ display:flex; gap:20px; padding:26px; align-items:center; border-bottom:1px solid var(--line); position:relative; }
.modal .mclose{ position:absolute; top:16px; inset-inline-end:16px; width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:18px;color:var(--ink); z-index:3; }
.modal .mphoto{ width:120px;height:120px;border-radius:20px; overflow:hidden; background:var(--grad-hero); flex:none; display:grid;place-items:center; color:#fff; font-weight:900; font-size:40px; position:relative; }
.modal .mphoto img{ position:absolute; inset:0; width:100%;height:100%; object-fit:cover; object-position:top center; }
.modal .mtop h3{ font-size:22px; margin-bottom:5px; }
.modal .mtop .sp{ color:var(--primary-dark); font-weight:700; font-size:15px; }
.modal .mbody{ padding:24px 26px; }
.modal .mbody .lab{ font-weight:800; color:var(--ink); font-size:13px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; color:var(--muted); }
.modal .mbody p{ font-size:15px; color:var(--body); line-height:1.8; white-space:pre-line; }
.modal .mfoot{ display:flex; gap:10px; padding:0 26px 26px; }
.modal .mfoot .btn{ flex:1; justify-content:center; }

/* News cards */
.news-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:.25s; display:flex; flex-direction:column; }
.news-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.news-card .nimg{ height:200px; background:var(--grad-soft); position:relative; overflow:hidden; }
.news-card .nimg img{ width:100%;height:100%; object-fit:cover; }
.news-card .nbadge{ position:absolute; top:12px; inset-inline-start:12px; background:var(--brand-red); color:#fff; font-size:11.5px; font-weight:800; padding:5px 12px; border-radius:999px; }
.news-card .nbody{ padding:20px; flex:1; display:flex; flex-direction:column; }
.news-card .ndate{ font-size:12.5px; color:var(--muted); font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.news-card .ndate svg{ width:15px;height:15px; }
.news-card h3{ font-size:17px; margin-bottom:14px; line-height:1.4; flex:1; }
.news-card .nlink{ display:inline-flex; align-items:center; gap:6px; color:var(--primary-dark); font-weight:700; font-size:14px; }
.news-card .nlink svg{ width:16px;height:16px; }
html[dir="rtl"] .news-card .nlink svg{ transform:scaleX(-1); }

/* Offer cards */
.offer-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:.25s; }
.offer-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.offer-top{ height:150px; background:var(--grad-hero); display:grid; place-items:center; color:#fff; position:relative; }
.offer-top .pct{ font-size:40px; font-weight:900; }
.offer-card:nth-child(2) .offer-top{ background:var(--grad-red); }
.offer-card:nth-child(3) .offer-top{ background:var(--grad-blue); }
.empty-state{ text-align:center; max-width:520px; margin:0 auto; padding:50px 20px; }
.empty-state .ei{ width:80px;height:80px;border-radius:24px;background:var(--grad-soft);display:grid;place-items:center;color:var(--primary);margin:0 auto 18px; }
.empty-state .ei svg{ width:40px;height:40px; }

/* Accreditation strip */
.accred{ display:flex; align-items:center; gap:16px; background:#eafbf0; border:1px solid #c9efd6; border-radius:var(--radius-lg); padding:18px 22px; }
.accred .ai{ width:50px;height:50px;border-radius:14px;background:#16a34a;color:#fff;display:grid;place-items:center;flex:none; }
.accred .ai svg{ width:26px;height:26px; }
.accred b{ color:var(--ink); font-size:16px; display:block; }
.accred span{ font-size:13.5px; color:var(--body); }

/* Accordion (service / specialty detail) */
.acc{ display:flex; flex-direction:column; gap:14px; max-width:920px; margin-inline:auto; }
.acc-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .2s; }
.acc-item.open{ box-shadow:var(--shadow-md); }
.acc-head{ display:flex; align-items:center; gap:14px; padding:20px 22px; cursor:pointer; user-select:none; }
.acc-head .ai{ width:50px;height:50px;border-radius:14px; background:var(--grad-soft); display:grid; place-items:center; color:var(--primary); flex:none; transition:.25s; }
.acc-item.open .acc-head .ai{ background:var(--grad-teal); color:#fff; }
.acc-head .ai svg{ width:25px;height:25px; }
.acc-head h3{ font-size:18px; flex:1; }
.acc-head .chev{ width:26px;height:26px; color:var(--muted); transition:transform .25s; flex:none; }
.acc-item.open .acc-head .chev{ transform:rotate(180deg); color:var(--primary); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.acc-body-inner{ padding:0 22px 22px; }
.acc-body-inner > .lead-sm{ color:var(--body); font-size:15px; margin-bottom:14px; }
.acc-tags{ display:flex; flex-wrap:wrap; gap:9px; }
.acc-tags span{ display:inline-flex; align-items:center; gap:7px; background:var(--teal-50); color:var(--primary-dark); font-weight:700; font-size:13px; padding:7px 13px; border-radius:999px; }
.acc-tags span svg{ width:14px;height:14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-visual{ max-width:460px; }
  .apppromo .container{ grid-template-columns:1fr; }
  .footer .cols{ grid-template-columns:1fr 1fr; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .menu, .nav-actions .lang-toggle .lt-text{ }
  .menu{ display:none; }
  .burger{ display:flex; }
  .g-3{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .topbar .tb-group.tb-hide{ display:none; }
}
@media (max-width: 560px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .footer .cols{ grid-template-columns:1fr; }
  .sec{ padding-block:54px; }
  .cta-band{ padding:32px 22px; }
  .hero-trust{ gap:18px; }
  .hero-float{ display:none; }
}