/* FONT=a خطوط مستضافة داخل الموقع، مولّدة بـ src/fonts.py من Google Fonts (رخصة OFL) */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/alexandria-arabic-fb351b4f.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/alexandria-latin-d09128cc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/alexandria-arabic-fb351b4f.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/alexandria-latin-d09128cc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/alexandria-arabic-fb351b4f.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/alexandria-latin-d09128cc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-arabic-e5580826.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-latin-5d052903.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-arabic-215a0591.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-latin-9b307238.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-arabic-035d74b2.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-latin-0e940890.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* موقع مجمع عيادات طيبة لطب الأسنان
   الفكرة: جدار خشبي مضلّع ومرايا دائرية مضيئة، مأخوذة من ديكور الفرعين. الضوء يتبع الزائر، والفرع يغيّر مزاج الموقع. */
:root{
  /* طيبة 1: خشب داكن وضوء دافئ */
  --bg:#1b110a; --wall:#2a180d; --slat:#3a2313; --ink:#f5ead9; --muted:#cdb89c;
  --light:#f2b45c; --panel:#24150c; --line:rgba(242,180,92,.22);
  --on-light:#22140b; --glow:rgba(242,180,92,.34); --badge:#fbf8f1; --scrim:rgba(10,6,3,.72);
  /* الخط: الزوج (a) هو الافتراضي. --hs يضبط حجم العناوين حسب عرض كل خط */
  --display:"Alexandria","Segoe UI",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --hs:.9; --dw:600;
  --lx:30%; --ly:45%; --p:0;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-font="b"]{--display:"Zain","Segoe UI",Tahoma,sans-serif; --body:"Zain","Segoe UI",Tahoma,sans-serif; --hs:1.14; --dw:800}
:root[data-font="b"] body{font-size:17.5px}
:root[data-font="c"]{--display:"Tajawal","Segoe UI",Tahoma,sans-serif; --body:"Tajawal","Segoe UI",Tahoma,sans-serif; --hs:1; --dw:700}
:root[data-font="d"]{--display:"El Messiri","Segoe UI",Tahoma,sans-serif; --body:"Almarai","Segoe UI",Tahoma,sans-serif; --hs:1.02; --dw:700}
:root[data-branch="2"]{
  /* طيبة 2: مساحة فاتحة ومشرقة */
  --bg:#f3ece0; --wall:#efe6d6; --slat:#e3d6c0; --ink:#2a1a10; --muted:#6d5a48;
  --light:#82500d; --panel:#faf5ec; --line:rgba(70,44,22,.18); /* 4.7:1 على الخشب الفاتح */
  --on-light:#fff8ec; --glow:rgba(255,226,170,.95); --badge:#fffdf8; --scrim:rgba(40,26,14,.55);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; font-weight:400; line-height:1.85;
  transition:background-color .5s,color .5s; padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)); overflow-x:hidden}
img,video{max-width:100%; display:block}
button{font:inherit; color:inherit; cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--light); outline-offset:3px; border-radius:4px}
h1,h2,h3{font-family:var(--display); font-weight:var(--dw); line-height:1.3; margin:0; text-wrap:balance}
h2{font-size:calc(clamp(1.7rem,4.2vw,2.7rem)*var(--hs))}
h3{font-size:calc(clamp(1.3rem,2.6vw,1.6rem)*var(--hs))}
p{margin:0}
.wrap{width:min(1120px,100% - 2.5rem); margin-inline:auto}
.ltr{direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.note{font-size:.88rem; color:var(--muted)}
.lede{color:var(--muted); max-width:38rem; margin-top:.6rem}

/* إظهار محتوى الفرع المختار فقط */
:root:not([data-branch="2"]) [data-only="2"]{display:none!important}
:root[data-branch="2"] [data-only="1"]{display:none!important}

.slats{background:
  radial-gradient(520px circle at var(--lx) var(--ly), var(--glow), transparent 62%),
  repeating-linear-gradient(90deg, var(--slat) 0 9px, var(--wall) 9px 13px);
  transition:background-color .5s}

/* تخطَّ إلى المحتوى: يظهر عند التنقل بلوحة المفاتيح فقط */
.skip{position:fixed; z-index:60; top:-4rem; inset-inline-start:1rem; background:var(--light); color:var(--on-light); padding:.6rem 1.1rem; border-radius:999px; text-decoration:none; font-weight:500; transition:top .2s}
.skip:focus{top:calc(.6rem + env(safe-area-inset-top,0px))}

/* الرأس */
.top{position:fixed; inset:0 0 auto 0; z-index:30; display:flex; align-items:center; gap:.9rem;
  padding:calc(.55rem + env(safe-area-inset-top,0px)) clamp(1rem,4vw,2.5rem) .55rem;
  background:color-mix(in srgb,var(--bg) 84%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none}
.brand .mark{width:48px; height:48px; background:var(--badge); border-radius:50%; padding:7px; display:grid; place-items:center; flex:none}
.brand .mark svg{width:100%; height:100%}
.brand b{font-family:var(--display); font-size:calc(1.2rem*var(--hs)); font-weight:var(--dw); line-height:1}
.top nav{display:flex; gap:1.5rem; margin-inline-start:auto; font-size:.95rem}
.top nav a{text-decoration:none; opacity:.86; padding:.3rem 0; border-bottom:2px solid transparent}
.top nav a:hover{opacity:1; color:var(--light)}
.top nav a[aria-current="page"]{opacity:1; border-bottom-color:var(--light)}
/* العروض: رابط بارز بلون التمييز ونقطة مضيئة */
.top nav a.hot{opacity:1; color:var(--light); font-weight:500; display:inline-flex; align-items:center; gap:.45rem}
.top nav a.hot::before{content:""; width:.42rem; height:.42rem; border-radius:50%; background:var(--light); box-shadow:0 0 0 3px var(--glow); animation:beacon 2.4s ease-in-out infinite}
@keyframes beacon{50%{box-shadow:0 0 0 6px transparent}}
/* شريط العروض في الرئيسية (يظهر حين لا يوجد عرض فعّال) */
.offers-strip{padding:1rem 0; border-bottom:1px solid var(--line)}
.offers-strip a{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; text-decoration:none; padding:.9rem 1.2rem; border:1px solid var(--light); border-radius:18px; background:var(--panel); box-shadow:0 0 34px 0 var(--glow)}
.offers-strip b{font-family:var(--display); font-weight:var(--dw); font-size:calc(1.15rem*var(--hs)); color:var(--light); display:inline-flex; align-items:center; gap:.5rem}
.offers-strip b::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--light); box-shadow:0 0 0 3px var(--glow); animation:beacon 2.4s ease-in-out infinite}
.offers-strip span{color:var(--muted); font-size:.95rem; flex:1 1 16rem}
.offers-strip em{font-style:normal; font-size:.9rem; font-weight:500; background:var(--light); color:var(--on-light); padding:.45rem 1rem; border-radius:999px; white-space:nowrap}
.offers-strip a:hover{box-shadow:0 0 50px 4px var(--glow)}
.branch{display:flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--panel); flex:none}
.branch button{border:0; background:none; padding:.35rem .95rem; border-radius:999px; font-size:.9rem; font-weight:400; transition:background-color .3s,color .3s}
.branch button[aria-pressed="true"]{background:var(--light); color:var(--on-light); font-weight:500}
/* زر اللغة */
.lang{display:grid; place-items:center; flex:none; min-width:42px; height:42px; padding:0 .8rem; border:1px solid var(--line); background:var(--panel); border-radius:999px; text-decoration:none; font-size:.88rem; font-weight:500; line-height:1}
.lang:hover{border-color:var(--light)}
.menu-btn{display:none; border:1px solid var(--line); background:var(--panel); border-radius:999px; width:42px; height:42px; padding:0; place-items:center; flex:none}
.menu-btn span{display:block; width:18px; height:2px; background:var(--ink); box-shadow:0 6px 0 var(--ink), 0 -6px 0 var(--ink)}
@media(max-width:860px){
  .top nav{position:fixed; inset:calc(64px + env(safe-area-inset-top,0px)) 0 auto 0; flex-direction:column; gap:0; margin:0; background:var(--bg); border-bottom:1px solid var(--line); padding:.4rem clamp(1rem,4vw,2.5rem) 1rem; font-size:1.15rem; display:none}
  .top nav.open{display:flex}
  .top nav a{padding:.85rem 0; border-bottom:1px solid var(--line)}
  .branch{margin-inline-start:auto}
  .menu-btn{display:grid}
  .brand b{display:none}
}

/* أزرار */
.cta{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--light); color:var(--on-light); text-decoration:none;
  padding:.8rem 1.5rem; border-radius:999px; font-weight:500; border:1px solid var(--light); line-height:1.4; text-align:center}
.cta.ghost{background:none; color:var(--ink); border-color:var(--line)}
.cta.ghost:hover{border-color:var(--light)}
.cta.sm{padding:.55rem 1.1rem; font-size:.93rem}
.row{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}

/* افتتاحية الرئيسية: مرآة مضيئة فيها لقطة من الفرع، تتسع مع التمرير.
   عند فتح الصفحة "تنوّر" المرآة: --on يفتح الدائرة و--g يرمش الضوء مثل إنارة تشتغل */
@property --on{syntax:'<number>'; inherits:true; initial-value:1}
@property --g{syntax:'<number>'; inherits:true; initial-value:1}
.hero{height:190svh; position:relative}
.stage{position:sticky; top:0; height:100svh; overflow:hidden; --cx:27%; --cy:54%; --r0:min(31vh,21vw);
  animation:lights-on 1.7s cubic-bezier(.2,.7,.2,1) .35s backwards, flicker 1.3s linear .1s backwards}
@keyframes lights-on{from{--on:0}to{--on:1}}
@keyframes flicker{0%{--g:0}16%{--g:.75}22%{--g:.12}31%{--g:.95}37%{--g:.35}55%,100%{--g:1}}
.stage .slats{position:absolute; inset:0}
.lens{position:absolute; inset:0; clip-path:circle(calc(var(--r0) * var(--on) + var(--p) * 150vmax) at var(--cx) var(--cy))}
.lens>*{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lens img{animation:drift 24s ease-in-out infinite alternate}
/* جولة طيبة 1 (16:9): إطار المقطع هو المربع المحيط بالمرآة مقصوصًا بحدود الشاشة.
   فيظهر المشهد كاملًا داخل المرآة الصغيرة، ويكبر معها حتى يملأ الشاشة بلا فراغات */
.lens video[data-only="1"]{--rr:calc(var(--r0) * var(--on) + var(--p) * 150vmax);
  inset:max(0px, calc(var(--cy) - var(--rr))) auto auto max(0px, calc(var(--cx) - var(--rr)));
  width:calc(min(100%, var(--cx) + var(--rr)) - max(0px, var(--cx) - var(--rr)));
  height:calc(min(100%, var(--cy) + var(--rr)) - max(0px, var(--cy) - var(--rr))); translate:none; object-position:50% 50%}
@keyframes drift{from{scale:1.02}to{scale:1.1}}
.halo{position:absolute; left:var(--cx); top:var(--cy); width:calc(var(--r0)*2); height:calc(var(--r0)*2); translate:-50% -50%;
  border-radius:50%; box-shadow:0 0 0 2px color-mix(in srgb,var(--light) 70%,transparent), 0 0 70px 14px var(--glow), 0 0 160px 40px var(--glow);
  opacity:calc((1 - var(--p)*5) * var(--g)); scale:calc(.55 + .45 * var(--on)); pointer-events:none}
.copy{position:absolute; inset-inline-start:clamp(1.25rem,7vw,6rem); top:50%; translate:0 -46%; width:min(34rem,46vw); opacity:calc(1 - var(--p)*3.2)}
.copy h1 span,.copy p,.copy .row{animation:rise 1s cubic-bezier(.2,.7,.2,1) backwards}
/* العنوان يظهر من أول لحظة (بدون شفافية) حتى لا يتأخر أكبر عنصر في الصفحة في قياس سرعة Google */
.copy h1{animation:rise-in .9s cubic-bezier(.2,.7,.2,1) .15s backwards}
.copy h1 span{animation-delay:.45s}.copy p{animation-delay:.65s}.copy .row{animation-delay:.85s}
@keyframes rise{from{opacity:0; translate:0 24px; filter:blur(8px)}}
@keyframes rise-in{from{translate:0 18px; filter:blur(6px)}}
.copy h1{font-size:calc(clamp(2.2rem,4.7vw,3.9rem)*var(--hs)); line-height:1.2}
.copy h1 span{display:block; font-weight:500; color:var(--light); font-size:.66em; margin-top:.15em}
.copy p{font-size:1.06rem; color:var(--muted); max-width:28rem; margin:1.2rem 0 1.6rem}
.cap{position:absolute; inset-inline:0; padding-inline:1.25rem; bottom:calc(96px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:.92rem;
  color:#fff; text-shadow:0 1px 12px #000, 0 0 3px #000; opacity:calc((var(--p) - .45)*3); pointer-events:none}
.hint{position:absolute; bottom:calc(96px + env(safe-area-inset-bottom,0px)); inset-inline-start:clamp(1.25rem,7vw,6rem); font-size:.86rem; color:var(--muted); opacity:calc(1 - var(--p)*8)}
@media(max-width:820px){
  .stage{--cx:50%; --cy:27%; --r0:min(34vw,19vh)}
  .copy h1{font-size:calc(clamp(1.9rem,9vw,2.7rem)*var(--hs))}
  .copy{inset-inline:1.25rem; width:auto; top:auto; bottom:calc(112px + env(safe-area-inset-bottom,0px)); translate:none; text-align:center}
  .copy p{margin-inline:auto}
  .copy .row{justify-content:center}
  .hint{display:none}
  .lens [data-only="1"]{object-position:36% 50%; translate:0 calc((1 - var(--p)) * -4svh)}
  .lens [data-only="2"]{object-position:90% 50%; translate:0 calc((1 - var(--p)) * -16svh)}
  .lens img{animation:none}}

/* النسخة الإنجليزية: المرآة على الجهة المقابلة للنص على الشاشات العريضة */
@media(min-width:821px){:root[dir="ltr"] .stage{--cx:73%}}

/* رأس الصفحات الداخلية */
.phead{padding:calc(110px + env(safe-area-inset-top,0px)) 0 clamp(2.5rem,6vw,4rem)}
.phead .wrap{display:grid; grid-template-columns:1fr auto; gap:clamp(1.5rem,5vw,4rem); align-items:center}
.phead h1{font-size:calc(clamp(2.1rem,5vw,3.6rem)*var(--hs)); line-height:1.2}
.phead .sub{font-family:var(--display); font-weight:500; font-size:calc(clamp(1.1rem,2.2vw,1.4rem)*var(--hs)); color:var(--light); margin-top:.4rem; line-height:1.5}
.crumb{font-size:.88rem; color:var(--muted); margin-bottom:.9rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--light)}
.mirror{width:clamp(150px,24vw,270px); aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--panel);
  box-shadow:0 0 0 2px var(--light), 0 0 70px 10px var(--glow)}
.mirror img{width:100%; height:100%; object-fit:cover}
.mirror.portrait img{object-position:50% 10%}
@media(max-width:640px){.phead .wrap{grid-template-columns:1fr}.phead .mirror{order:-1; width:min(58vw,230px)}}

section{padding:clamp(3.5rem,9vw,7rem) 0}
section.tight{padding:clamp(2.2rem,5vw,3.5rem) 0}

/* وش يهمك اليوم؟ */
.needs{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem}
.needs button{border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:.7rem 1.3rem; font-size:1.02rem; font-weight:400; transition:background-color .25s,color .25s,border-color .25s}
.needs button[aria-pressed="true"]{background:var(--light); color:var(--on-light); border-color:var(--light); font-weight:500}
.answer{margin-top:2rem; border-inline-start:3px solid var(--light); padding:.4rem 1.4rem .6rem; display:grid; gap:1.3rem}
.answer ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.9rem 2rem}
.answer li a{font-family:var(--display); font-size:calc(1.15rem*var(--hs)); font-weight:var(--dw); text-decoration:none; line-height:1.4}
.answer li a:hover{color:var(--light)}
.answer li small{display:block; color:var(--muted); font-size:.88rem; line-height:1.6}
.mini{display:flex; flex-wrap:wrap; gap:1rem 1.6rem}
.mini a{display:flex; align-items:center; gap:.7rem; text-decoration:none; min-width:0}
.mini img{width:54px; height:54px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--line); flex:none; background:var(--panel)}
.mini b{font-weight:500; display:block; line-height:1.4}
.mini small{color:var(--muted); display:block; line-height:1.4}

/* الأطباء: مرايا دائرية */
.docs{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:2.2rem 1.2rem; margin-top:2.4rem}
.doc{text-decoration:none; text-align:center; display:block; min-width:0}
.doc .ring{display:block; width:min(136px,100%); aspect-ratio:1; margin:0 auto .9rem; border-radius:50%; padding:4px; background:var(--panel); box-shadow:0 0 0 1px var(--line); transition:box-shadow .3s}
.doc:hover .ring,.doc:focus-visible .ring{box-shadow:0 0 0 2px var(--light), 0 0 34px 4px var(--glow)}
.doc img{width:100%; height:100%; border-radius:50%; object-fit:cover; background:#e9e4dc}
.doc b{display:block; font-family:var(--display); font-size:calc(1.08rem*var(--hs)); font-weight:var(--dw); line-height:1.4}
.doc small{display:block; color:var(--muted); font-size:.84rem; line-height:1.55; margin-top:.25rem}
@media(max-width:520px){.docs{grid-template-columns:repeat(2,1fr)}}
.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem}
.chips button{border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:.5rem 1.15rem}
.chips button[aria-pressed="true"]{background:var(--light); color:var(--on-light); border-color:var(--light); font-weight:500}

/* الخدمات */
.svc{list-style:none; margin:2.2rem 0 0; padding:0; border-top:1px solid var(--line)}
.svc li{border-bottom:1px solid var(--line)}
.svc a{text-decoration:none; padding:1.15rem .2rem; display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem; align-items:baseline}
.svc b{font-family:var(--display); font-size:calc(clamp(1.25rem,2.6vw,1.6rem)*var(--hs)); font-weight:var(--dw); transition:color .25s; line-height:1.4}
.svc span{color:var(--muted); font-size:.95rem; grid-column:1}
.svc em{font-style:normal; font-size:.86rem; color:var(--light); grid-row:1; grid-column:2; white-space:nowrap}
.svc a:hover b{color:var(--light)}
@media(max-width:520px){.svc a{grid-template-columns:1fr}.svc em{grid-row:auto; grid-column:1}}
/* على الشاشات العريضة: الخدمات في عمودين بدل قائمة طويلة بفراغ كبير */
@media(min-width:1000px){.svc{display:grid; grid-template-columns:1fr 1fr; column-gap:3.5rem}}

/* الجولة */
.place{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.4rem,5vw,4rem); align-items:center; margin-top:2.4rem}
.tourdisc{border-radius:50%; overflow:hidden; aspect-ratio:1; width:min(520px,100%); margin-inline:auto; box-shadow:0 0 0 2px var(--light), 0 0 90px 10px var(--glow); position:relative; background:var(--panel)}
.tourdisc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .6s}
.tourdisc img.off{opacity:0}
.stops{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.3rem 0}
.stops button{border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:.55rem 1.15rem}
.stops button[aria-pressed="true"]{background:var(--light); color:var(--on-light); border-color:var(--light); font-weight:500}
.place>div{min-width:0}
@media(max-width:760px){.place{grid-template-columns:1fr}}

/* بطاقات الفرعين */
.visit{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:1.2rem; margin-top:2.2rem}
.card{border:1px solid var(--line); border-radius:22px; padding:1.6rem; background:var(--panel); transition:box-shadow .4s,border-color .4s; min-width:0; display:grid; gap:1rem; align-content:start}
:root:not([data-branch="2"]) .card[data-card="1"], :root[data-branch="2"] .card[data-card="2"]{border-color:var(--light); box-shadow:0 0 50px 0 var(--glow)}
.card h3{font-size:calc(1.6rem*var(--hs))}
.card h3 a{text-decoration:none}
.hours{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.2rem; font-size:.96rem}
.hours dt{color:var(--muted)}
.hours dd{margin:0}
.open{display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:400}
.open::before{content:""; width:.6rem; height:.6rem; border-radius:50%; background:var(--muted)}
.open.yes::before{background:#3fbf6f; box-shadow:0 0 0 4px rgba(63,191,111,.22)}
.addr{color:var(--muted); font-size:.92rem; line-height:1.6}
.tel{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; font-size:1.25rem; font-weight:400}
.copybtn{border:1px solid var(--line); background:none; border-radius:999px; padding:.2rem .8rem; font-size:.82rem}

/* العروض */
.offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:1.2rem; margin-top:2.2rem}
.offer h3{font-size:calc(1.5rem*var(--hs))}
.offer .note a{color:var(--light); text-underline-offset:4px}
.offer .price{font-family:var(--display); font-weight:var(--dw); font-size:calc(clamp(1.7rem,3.4vw,2.2rem)*var(--hs)); color:var(--light); line-height:1.25}
.offer .price small{display:block; font-family:var(--body); font-weight:400; font-size:.84rem; color:var(--muted); margin-top:.2rem}
.offer .meta{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.2rem; font-size:.92rem}
.offer .meta dt{color:var(--muted)}
.offer .meta dd{margin:0}
.offer .meta dd.ltr{text-align:right}
:root[dir="ltr"] .offer .meta dd.ltr{text-align:left}
.offer{max-width:38rem}
@media(max-width:520px){.offer .meta{grid-template-columns:1fr; gap:0}.offer .meta dd{margin-bottom:.5rem}}
.offer .demo{justify-self:start; border:1px dashed var(--light); border-radius:999px; padding:.1rem .8rem; font-size:.8rem; color:var(--light)}
.offers-note{margin-top:1.2rem; max-width:44rem}

/* صفحة الطبيب */
.profile{display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:clamp(1.5rem,5vw,4rem); align-items:start}
.arch{border-radius:999px 999px 26px 26px; overflow:hidden; aspect-ratio:4/5; background:var(--panel); box-shadow:0 0 0 2px var(--light), 0 0 80px 6px var(--glow)}
.arch img{width:100%; height:100%; object-fit:cover}
.profile h1{font-size:calc(clamp(2rem,4.6vw,3.2rem)*var(--hs)); line-height:1.25}
.profile .en{font-size:.95rem; color:var(--muted); margin-top:.35rem; text-align:right}
.profile .role{font-family:var(--display); font-weight:500; font-size:calc(clamp(1.1rem,2.3vw,1.4rem)*var(--hs)); color:var(--light); line-height:1.5; margin-top:.5rem}
.facts{list-style:none; margin:1.4rem 0; padding:0; border-top:1px solid var(--line)}
.facts li{padding:.7rem 0; border-bottom:1px solid var(--line)}
.tags{display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 1.4rem}
.tags a{border:1px solid var(--line); border-radius:999px; padding:.35rem 1rem; text-decoration:none; font-size:.93rem; background:var(--panel)}
.tags a:hover{border-color:var(--light)}
.profile>div{min-width:0}
@media(max-width:760px){.profile{grid-template-columns:1fr}.arch{width:min(300px,78vw); margin-inline:auto}}

/* نص الصفحات */
.prose{max-width:44rem; display:grid; gap:2rem}
.prose h2{font-size:calc(clamp(1.45rem,3.2vw,1.9rem)*var(--hs))}
.prose .lead{font-family:var(--display); font-size:calc(clamp(1.15rem,2.4vw,1.45rem)*var(--hs)); line-height:1.6}
.prose ul{margin:.5rem 0 0; padding-inline-start:1.2rem; display:grid; gap:.35rem}
.prose section{padding:0; display:grid; gap:.5rem}
.steps{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:1.2rem; counter-reset:s}
.steps li{counter-increment:s; border-top:2px solid var(--light); padding-top:.8rem}
.steps li::before{content:counter(s); font-family:var(--display); font-weight:var(--dw); font-size:calc(1.9rem*var(--hs)); color:var(--light); line-height:1.2; display:block}
.steps b{display:block; font-family:var(--display); font-size:calc(1.15rem*var(--hs)); font-weight:var(--dw)}

/* منسّق الرسالة */
.composer{display:grid; gap:1.2rem; border:1px solid var(--line); border-radius:22px; background:var(--panel); padding:1.6rem; margin-top:2rem; max-width:44rem}
.composer label{display:grid; gap:.4rem; font-weight:400}
.composer select{font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem; width:100%}
.preview{border-inline-start:3px solid var(--light); padding:.4rem 1rem; color:var(--muted); min-height:3.4rem; overflow-wrap:anywhere}

footer{border-top:1px solid var(--line); padding:2.6rem 0 2.2rem; font-size:.9rem; color:var(--muted)}
footer .wrap{display:grid; grid-template-columns:auto 1fr 1fr; gap:1.6rem 3rem; align-items:start}
footer .logo{width:150px; background:var(--badge); border-radius:18px; padding:14px 16px}
footer nav{display:grid; gap:0}
footer a{text-decoration:none}
footer nav a{padding:.55rem 0} /* مساحة لمس مريحة على الجوال */
/* أيقونات الحسابات */
.si{width:1.15em; height:1.15em; flex:none}
footer a.soc{display:flex; align-items:center; gap:.55rem}
.cta .si{margin-inline-start:-.15rem}
footer nav span{padding:.4rem 0}
footer nav b{font-weight:500; color:var(--ink)}
footer a:hover{color:var(--light)}
footer .legal{grid-column:1/-1; border-top:1px solid var(--line); padding-top:1.2rem; font-size:.84rem}
@media(max-width:700px){footer .wrap{grid-template-columns:1fr 1fr}footer .logo{grid-column:1/-1}}

/* شريط التواصل الثابت */
.bar{position:fixed; inset:auto 0 0 0; z-index:25; display:flex; gap:.6rem; align-items:center;
  padding:.65rem clamp(1rem,4vw,2.5rem) calc(.65rem + env(safe-area-inset-bottom,0px)); background:color-mix(in srgb,var(--bg) 90%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
.bar .status{margin-inline-end:auto; font-size:.9rem; display:grid; line-height:1.5; min-width:0}
.bar .status b{font-weight:500}
@media(max-width:560px){.bar .status{display:none}.bar .cta{flex:1}}

/* طيبة بالأرقام */
.stats{padding:clamp(2.2rem,5vw,3.4rem) 0; background:var(--panel); border-block:1px solid var(--line)}
.stats ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.stats li{display:grid; align-content:start; gap:.3rem; padding-inline-start:1.2rem; border-inline-start:1px solid var(--line); min-width:0}
.stats b{font-family:var(--display); font-weight:var(--dw); font-size:calc(clamp(2.1rem,4.6vw,3.3rem)*var(--hs)); line-height:1.1; color:var(--light); font-variant-numeric:tabular-nums; white-space:nowrap}
.stats li>span{color:var(--muted); font-size:.92rem; line-height:1.55}
.reviews{margin-top:1.8rem; font-size:.9rem; color:var(--muted)}
.reviews a{color:var(--light); margin-inline-start:.7rem; text-underline-offset:4px}
/* ثلاثة أرقام: أعمدة ثلاثة حتى على الجوال، بخط وصف أصغر */
@media(max-width:760px){.stats ul{gap:1rem .8rem}.stats li{padding-inline-start:.8rem}.stats li>span{font-size:.82rem; line-height:1.5}}

/* أسئلة متكررة: details بدون سكربت، وفتح ناعم في المتصفحات التي تدعمه */
:root{interpolate-size:allow-keywords}
.faq{margin-top:2rem; border-top:1px solid var(--line); max-width:52rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:1.15rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--display); font-weight:var(--dw); font-size:calc(clamp(1.08rem,2.2vw,1.3rem)*var(--hs)); line-height:1.5; transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; color:var(--light); font-size:1.6em; line-height:1; transition:rotate .35s}
.faq details[open] summary::after{rotate:45deg}
.faq summary:hover{color:var(--light)}
.faq details p{padding:0 0 1.3rem; color:var(--muted); max-width:44rem}
.faq details::details-content{block-size:0; overflow:hidden; transition:block-size .4s cubic-bezier(.2,.7,.2,1), content-visibility .4s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* رأس صفحات الخدمات: مرآة من الفرع ووجوه أطباء الخدمة */
.orb{display:grid; justify-items:center; gap:.5rem}
.orb .faces{display:flex; margin-top:-34px; position:relative; z-index:1; min-height:8px}
.orb .faces img{width:58px; height:58px; border-radius:50%; object-fit:cover; background:#e9e4dc; margin-inline-start:-14px;
  box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--light)}
.orb .faces img:first-child{margin-inline-start:0}
.orb .note{text-align:center}
@media(max-width:640px){.phead .orb{order:-1}.phead .orb .mirror{width:min(52vw,210px)}}

/* مرايا رؤوس الصفحات تنوّر عند الفتح */
.phead .mirror,.phead .arch{animation:glow-in 1.1s cubic-bezier(.2,.7,.2,1) .1s backwards}
@keyframes glow-in{from{opacity:.25; scale:.94; box-shadow:0 0 0 2px transparent, 0 0 0 0 transparent}}

/* ظهور الأقسام مع التمرير: المحتوى ظاهر دائمًا، والحركة تبدأ قبيل دخوله الشاشة بقليل */
.js-reveal .rv.in{animation:rv .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
@keyframes rv{from{opacity:0; translate:0 28px}}

/* التنقل بين الصفحات: انتقال ناعم والرأس والشريط ثابتان، في المتصفحات التي تدعمه */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
:root:not(.vt) .top{view-transition-name:top}
:root:not(.vt) .bar{view-transition-name:bar}
/* تبديل الفرع: المزاج الجديد ينتشر كدائرة ضوء من زر الفرع */
:root.vt::view-transition-old(root),:root.vt::view-transition-new(root){animation:none; mix-blend-mode:normal}
:root.vt::view-transition-new(root){animation:sweep .85s cubic-bezier(.65,0,.25,1)}
@keyframes sweep{from{clip-path:circle(0 at var(--vx,50%) var(--vy,0%))}to{clip-path:circle(150vmax at var(--vx,50%) var(--vy,0%))}}
.vt *{transition:none!important}

.toast{position:fixed; inset-inline:0; bottom:calc(86px + env(safe-area-inset-bottom,0px)); margin-inline:auto; width:max-content; max-width:90vw; z-index:40; background:var(--ink); color:var(--bg); padding:.5rem 1.1rem; border-radius:999px; font-size:.9rem; opacity:0; transition:opacity .3s; pointer-events:none}
.toast.show{opacity:1}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important; animation:none!important}@view-transition{navigation:none}}

/* زر تجربة الخطوط: يظهر في نسخة المعاينة فقط */
.fontlab{position:fixed; z-index:29; top:calc(74px + env(safe-area-inset-top,0px)); inset-inline-end:clamp(.6rem,3vw,2rem); border:1px dashed var(--light); background:var(--panel); color:var(--ink); border-radius:999px; padding:.25rem .9rem; font-size:.8rem; font-family:"Segoe UI",Tahoma,sans-serif; direction:rtl}