/* ==========================================================================
   High Health — عيادة الدكتور هنري شيبان
   الهوية مبنية حرفياً على الشعار: ورقتان خضراوان + لولب حلزوني تركوازي وذهبي
   ========================================================================== */

:root{
  /* --- ألوان الشعار --- */
  --green:      #9DBA3C;
  --green-d:    #7C9A24;
  --green-l:    #BCD65F;
  --teal:       #17AFC0;
  --teal-d:     #0C8A9B;
  --teal-l:     #52CCDC;
  --amber:      #F6BE2E;
  --amber-d:    #DDA411;

  /* --- محايدات مشتقة من التركواز --- */
  --ink:        #10303A;
  --ink-2:      #3B5B63;
  --ink-3:      #7C959C;
  --deep:       #072830;
  --deep-2:     #0E3A46;
  --mist:       #F5FAF2;
  --mist-2:     #E9F3E5;
  --white:      #FFFFFF;

  --line:       rgba(16,48,58,.10);
  --line-2:     rgba(16,48,58,.18);
  --line-dark:  rgba(255,255,255,.14);

  --shadow-s: 0 2px 8px rgba(16,48,58,.05);
  --shadow-m: 0 10px 30px rgba(16,48,58,.08);
  --shadow-l: 0 24px 60px rgba(16,48,58,.14);
  --glow-green: 0 8px 28px rgba(157,186,60,.38);
  --glow-teal:  0 8px 28px rgba(23,175,192,.35);

  --shell: min(1240px, 90vw);
  --gap: clamp(1rem, 2vw, 1.75rem);
  --r-s: 14px;
  --r-m: 22px;
  --r-l: 30px;
  --r-pill: 999px;

  --f-display: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --f-util: "Montserrat", "IBM Plex Sans Arabic", system-ui, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--mist); color:var(--ink);
  font-family:var(--f-body); font-size:clamp(15px,.5vw + 13.8px,16.5px);
  line-height:1.85; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit}
::selection{background:var(--green); color:#fff}

.shell{width:var(--shell); margin-inline:auto}
.shell-narrow{width:min(820px,90vw); margin-inline:auto}

/* ========== الطباعة ========== */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; line-height:1.28; margin:0; letter-spacing:-.015em}
h1{font-size:clamp(2.2rem,1.2rem + 3.6vw,4.5rem); font-weight:800; line-height:1.14}
h2{font-size:clamp(1.7rem,1rem + 2.2vw,3rem)}
h3{font-size:clamp(1.1rem,.9rem + .6vw,1.45rem)}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1rem,.9rem + .4vw,1.2rem); color:var(--ink-2); line-height:1.9}
.mark-green{color:var(--green-d)}
.mark-teal{color:var(--teal)}
.mark-amber{color:var(--amber-d)}

/* شريط تعريف القسم — نقطة لولبية بدل الأرقام */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-util); font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--teal-d);
  background:rgba(23,175,192,.09); border:1px solid rgba(23,175,192,.2);
  padding:.4rem .9rem .4rem .75rem; border-radius:var(--r-pill); margin-bottom:1.1rem;
}
.eyebrow::before{
  content:""; width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--green); box-shadow:0 0 0 3px rgba(157,186,60,.25);
}
.on-dark .eyebrow{color:var(--teal-l); background:rgba(82,204,220,.1); border-color:rgba(82,204,220,.25)}
.on-dark .eyebrow::before{background:var(--green-l); box-shadow:0 0 0 3px rgba(188,214,95,.18)}

/* ========== الشريط العلوي ========== */
.topbar{
  background:var(--deep); color:rgba(255,255,255,.72);
  font-family:var(--f-util); font-size:.76rem; font-weight:500;
}
.topbar .shell{display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:40px; flex-wrap:wrap}
.topbar a{text-decoration:none; transition:color .2s}
.topbar a:hover{color:var(--green-l)}
.topbar .dot{opacity:.35; margin-inline:.55rem}
.topbar b{color:var(--green-l); font-weight:600}

/* ========== الرأس ========== */
.site-header{
  position:sticky; top:0; z-index:80; background:transparent;
  padding-top:.9rem; transition:padding .35s var(--ease);
}
.site-header::before{ /* خلفية زجاجية تظهر بعد التمرير فقط */
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid var(--line); transition:opacity .35s var(--ease);
}
.site-header.stuck{padding-top:0}
.site-header.stuck::before{opacity:1}
.site-header .shell{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:76px; transition:min-height .3s var(--ease)}
.site-header.stuck .shell{min-height:66px}
.brand{display:flex; align-items:center; text-decoration:none}
.brand img{height:50px; width:auto; transition:height .3s var(--ease)}
.site-header.stuck .brand img{height:42px}

/* --- الحبّة العائمة: تصميم خاص وقوي للتنقّل --- */
.nav{
  position:relative; display:flex; align-items:center; gap:.1rem;
  background:rgba(255,255,255,.7); border:1px solid rgba(16,48,58,.09);
  border-radius:var(--r-pill); padding:.3rem; box-shadow:0 4px 18px rgba(16,48,58,.06);
  backdrop-filter:blur(14px) saturate(1.4);
}
.nav-indicator{
  position:absolute; top:.3rem; bottom:.3rem; inset-inline-start:0; z-index:0;
  width:0; border-radius:var(--r-pill); opacity:0; pointer-events:none;
  background:linear-gradient(135deg, var(--green), var(--teal));
  box-shadow:0 4px 14px rgba(23,175,192,.3);
  transform:translateX(0);
  transition:transform .4s var(--ease), width .4s var(--ease), opacity .25s var(--ease);
}
html[dir="rtl"] .nav-indicator{inset-inline-start:auto; inset-inline-end:0}
.nav a{
  position:relative; z-index:1; text-decoration:none; padding:.62rem 1rem; border-radius:var(--r-pill);
  font-size:.92rem; font-weight:500; color:var(--ink-2); white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a[aria-current="page"]{font-weight:700}
.nav a.on-indicator{color:#fff}
.nav .btn{position:relative; z-index:1; margin-inline-start:.4rem}

.nav-toggle{
  display:none; position:relative; background:var(--white); border:1px solid var(--line-2);
  border-radius:14px; padding:.6rem .8rem; cursor:pointer; box-shadow:0 2px 8px rgba(16,48,58,.06);
}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; margin:4px 0; transition:.3s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ========== الأزرار ========== */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  padding:.9rem 1.6rem; border-radius:var(--r-pill); font-weight:600; font-size:.95rem;
  border:1.5px solid transparent; cursor:pointer; overflow:hidden; white-space:nowrap;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .22s, color .22s, border-color .22s;
}
.btn svg{width:18px; height:18px; flex:none}
.btn::before{
  content:""; position:absolute; inset:0; transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent); width:60%;
}
.btn:hover::before{animation:shine .8s var(--ease)}
@keyframes shine{to{transform:translateX(280%) skewX(-18deg)}}
.btn-primary{background:var(--green); color:#fff; box-shadow:var(--glow-green)}
.btn-primary:hover{background:var(--green-d); transform:translateY(-3px); box-shadow:0 14px 34px rgba(124,154,36,.42)}
.btn-teal{background:var(--teal); color:#fff; box-shadow:var(--glow-teal)}
.btn-teal:hover{background:var(--teal-d); transform:translateY(-3px); box-shadow:0 14px 34px rgba(12,138,155,.42)}
.btn-wa{background:#1FA855; color:#fff; box-shadow:0 8px 28px rgba(31,168,85,.35)}
.btn-wa:hover{background:#178a44; transform:translateY(-3px); box-shadow:0 14px 34px rgba(31,168,85,.42)}
.btn-ghost{border-color:var(--line-2); color:var(--ink); background:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:var(--green); color:var(--green-d); background:var(--white); transform:translateY(-3px)}
.on-dark .btn-ghost{border-color:var(--line-dark); color:#fff; background:rgba(255,255,255,.06)}
.on-dark .btn-ghost:hover{border-color:var(--green-l); color:var(--green-l); background:rgba(255,255,255,.12)}
.btn-lg{padding:1.05rem 2rem; font-size:1rem}

/* ========== الأقسام ========== */
.section{padding:clamp(3.5rem,6vw,7rem) 0; position:relative}
.section-dark{background:var(--deep); color:rgba(255,255,255,.78)}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}
.section-dark .lede{color:rgba(255,255,255,.72)}
.section-tint{background:var(--mist-2)}
.section-white{background:var(--white)}

/* نمط لولبي خفيف في الأقسام الداكنة */
.section-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(23,175,192,.16), transparent 70%),
    radial-gradient(700px 380px at 5% 110%, rgba(157,186,60,.14), transparent 70%);
}
.section-dark > *{position:relative; z-index:1}

.head{max-width:62ch; margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.head.center{margin-inline:auto; text-align:center}

/* ========== البطل ========== */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(150deg,#0A323C 0%, #072830 45%, #0B3A34 100%);
  padding:clamp(2.5rem,4vw,4.5rem) 0 clamp(0rem,2vw,2rem);
  min-height:min(88vh,860px); display:flex; align-items:center;
}
.hero-bg{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.hero-bg .blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.4;
}
.hero-bg .blob-1{width:520px; height:520px; background:rgba(157,186,60,.5); top:-12%; inset-inline-start:-8%}
.hero-bg .blob-2{width:460px; height:460px; background:rgba(23,175,192,.45); bottom:-18%; inset-inline-end:6%}
.hero-bg .blob-3{width:300px; height:300px; background:rgba(246,190,46,.28); top:38%; inset-inline-end:38%}
@media (prefers-reduced-motion:no-preference){
  .hero-bg .blob{animation:drift 16s var(--ease-io) infinite alternate}
  .hero-bg .blob-2{animation-duration:20s; animation-delay:-4s}
  .hero-bg .blob-3{animation-duration:24s; animation-delay:-8s}
  @keyframes drift{to{transform:translate3d(4%,-6%,0) scale(1.12)}}
}
.hero-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}
.hero h1{margin-bottom:1.2rem}
.hero h1 .line{display:block; overflow:hidden}
.hero h1 .line > span{display:block}
.hero .lede{color:rgba(255,255,255,.76); max-width:44ch}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.2rem}
.hero-stats{
  display:flex; gap:clamp(1.2rem,3vw,2.8rem); flex-wrap:wrap; margin-top:2.8rem;
  padding-top:1.8rem; border-top:1px solid var(--line-dark);
}
.hero-stats div{min-width:96px}
.hero-stats b{
  display:block; font-family:var(--f-display); font-size:clamp(1.5rem,2.2vw,2.1rem);
  font-weight:800; color:#fff; line-height:1.2;
}
.hero-stats span{font-family:var(--f-util); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5)}

/* --- تركيبة الدكتور + القزحية --- */
.hero-figure{position:relative; aspect-ratio:1/1.08; width:100%; max-width:560px; margin-inline:auto}
.hero-iris{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.hero-doc{
  position:absolute; bottom:0; inset-inline-start:50%; transform:translateX(-50%);
  width:104%; max-width:none; height:auto; z-index:3;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.5));
  -webkit-mask-image:linear-gradient(to top, transparent 0%, #000 9%);
  mask-image:linear-gradient(to top, transparent 0%, #000 9%);
}
html[dir="rtl"] .hero-doc{transform:translateX(50%)}
.iris-ring{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1}
.iris-ring-accent{fill:none; stroke:rgba(157,186,60,.85); stroke-width:2}
.iris-ring-teal{fill:none; stroke:rgba(82,204,220,.75); stroke-width:2; stroke-dasharray:4 10; stroke-linecap:round}
.iris-tick{stroke:rgba(188,214,95,.42); stroke-width:1.2; stroke-linecap:round}
.iris-node{fill:var(--amber); filter:drop-shadow(0 0 6px rgba(246,190,46,.9))}
.iris-core{fill:url(#irisGrad)}
.iris-halo{fill:url(#haloGrad)}

/* بطاقة القزحية الطافية */
.hero-chip{
  position:absolute; z-index:4; bottom:14%; inset-inline-end:0;
  display:flex; align-items:center; gap:.75rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px) saturate(1.4);
  padding:.6rem .95rem .6rem .6rem; border-radius:var(--r-pill);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.hero-chip img{
  width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 0 0 2px var(--green), 0 0 0 5px rgba(157,186,60,.25);
}
.hero-chip b{display:block; font-family:var(--f-display); font-size:.86rem; color:#fff; line-height:1.35}
.hero-chip small{font-family:var(--f-util); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6)}
@media (prefers-reduced-motion:no-preference){
  .hero-chip{opacity:0; animation:rise .9s var(--ease) 1.1s forwards}
  .hero-chip img{animation:irisPulse 3.4s var(--ease-io) 2s infinite}
  @keyframes irisPulse{0%,100%{box-shadow:0 0 0 2px var(--green), 0 0 0 5px rgba(157,186,60,.25)} 50%{box-shadow:0 0 0 2px var(--green), 0 0 0 11px rgba(157,186,60,0)}}
}
@media (prefers-reduced-motion:no-preference){
  .spin-slow{transform-origin:50% 50%; animation:spin 60s linear infinite}
  .spin-rev{transform-origin:50% 50%; animation:spin 42s linear infinite reverse}
  @keyframes spin{to{transform:rotate(360deg)}}
  .pulse{animation:pulseR 4s var(--ease-io) infinite}
  @keyframes pulseR{0%,100%{opacity:.5} 50%{opacity:1}}
  .hero-doc{animation:floatY 7s var(--ease-io) infinite alternate}
  @keyframes floatY{to{transform:translateX(-50%) translateY(-14px)}}
  html[dir="rtl"] .hero-doc{animation-name:floatYRtl}
  @keyframes floatYRtl{to{transform:translateX(50%) translateY(-14px)}}
}

/* دخول متدرّج للبطل */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0; transform:translateY(28px); animation:rise .9s var(--ease) forwards; animation-delay:var(--d,0s)}
  @keyframes rise{to{opacity:1; transform:none}}
  .hero-doc{opacity:0; animation:docIn 1.1s var(--ease) .35s forwards, floatY 7s var(--ease-io) 1.6s infinite alternate}
  @keyframes docIn{from{opacity:0; transform:translateX(-50%) translateY(40px) scale(.96)} to{opacity:1; transform:translateX(-50%)}}
  html[dir="rtl"] .hero-doc{animation-name:docInRtl, floatYRtl}
  @keyframes docInRtl{from{opacity:0; transform:translateX(50%) translateY(40px) scale(.96)} to{opacity:1; transform:translateX(50%)}}
}

/* ========== شريط متحرّك ========== */
.ticker{
  background:var(--green); color:#fff; overflow:hidden; padding:.85rem 0;
  font-family:var(--f-display); font-weight:600; font-size:clamp(.9rem,1.1vw,1.05rem);
}
.ticker-track{display:flex; gap:0; width:max-content}
.ticker-track span{padding-inline:1.6rem; display:inline-flex; align-items:center; gap:1.6rem; white-space:nowrap}
.ticker-track span::after{content:"◆"; font-size:.55em; opacity:.65}
@media (prefers-reduced-motion:no-preference){
  .ticker-track{animation:marquee 38s linear infinite}
  @keyframes marquee{to{transform:translateX(50%)}}
  html[dir="rtl"] .ticker-track{animation-name:marqueeRtl}
  @keyframes marqueeRtl{to{transform:translateX(-50%)}}
}

/* ========== الشبكات ========== */
.grid{display:grid; gap:var(--gap)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ========== بطاقة خدمة ========== */
.svc{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-m); padding:2.1rem 1.8rem; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.svc::before{
  content:""; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg,var(--green),var(--teal),var(--amber));
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .45s var(--ease);
}
.svc:hover{transform:translateY(-8px); box-shadow:var(--shadow-l); border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc-mark{
  width:58px; height:58px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(157,186,60,.16),rgba(23,175,192,.14));
  color:var(--green-d); margin-bottom:1.3rem; transition:transform .4s var(--ease);
}
.svc:hover .svc-mark{transform:rotate(-6deg) scale(1.06)}
.svc-mark svg{width:26px; height:26px}
.svc h3{margin-bottom:.55rem}
.svc p{color:var(--ink-2); font-size:.95rem; margin:0}
.svc-step{
  position:absolute; top:1.4rem; inset-inline-start:1.6rem;
  font-family:var(--f-util); font-size:2.6rem; font-weight:800; line-height:1;
  color:rgba(16,48,58,.05);
}

/* ========== بطاقات المنتجات — الصورة الحقيقية هي الواجهة ========== */
.prod{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-m); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.prod:hover{transform:translateY(-8px); box-shadow:var(--shadow-l); border-color:transparent}

.prod-photo{
  position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden;
  border:0; padding:0; margin:0; cursor:zoom-in; background:#07211F; isolation:isolate;
}
.prod-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.prod:hover .prod-photo img{transform:scale(1.08)}
.prod-shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(200deg, rgba(7,33,31,0) 45%, rgba(7,33,31,.72) 100%);
}
.prod-tag{
  position:absolute; top:.85rem; inset-inline-start:.85rem; z-index:2;
  font-family:var(--f-util); font-size:.64rem; font-weight:700; letter-spacing:.05em;
  color:#fff; padding:.32rem .75rem; border-radius:var(--r-pill);
  backdrop-filter:blur(6px); box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.prod-tag.a-green{background:rgba(124,154,36,.82)}
.prod-tag.a-teal{background:rgba(12,138,155,.82)}
.prod-tag.a-amber{background:rgba(179,134,17,.82)}
.prod-badge{
  position:absolute; top:.7rem; inset-inline-end:.7rem; z-index:2;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); color:#fff;
  border:1px solid rgba(255,255,255,.28); transition:transform .5s var(--ease);
}
.prod-badge svg{width:18px; height:18px}
.prod:hover .prod-badge{transform:rotate(-8deg) scale(1.08)}
.prod-count{
  position:absolute; bottom:.75rem; inset-inline-start:.85rem; z-index:2;
  font-family:var(--f-util); font-size:.68rem; font-weight:600; color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.35); padding:.18rem .55rem; border-radius:var(--r-pill);
}
.prod-zoom{
  position:absolute; z-index:2; bottom:.75rem; inset-inline-end:.75rem;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--teal-d);
  opacity:0; transform:translateY(6px) scale(.9); transition:.3s var(--ease);
}
.prod-zoom svg{width:16px; height:16px}
.prod:hover .prod-zoom{opacity:1; transform:none}

.prod-body{padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1}
.prod-en{
  font-family:var(--f-util); font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.4rem;
}
.prod h3{margin-bottom:.55rem}
.prod > .prod-body > p{font-size:.93rem; color:var(--ink-2); margin-bottom:1.3rem}

/* --- طريقة الاستخدام --- */
.usage{
  margin-top:auto; border-top:1px dashed var(--line-2); padding-top:1.1rem;
}
.usage-title{
  font-family:var(--f-util); font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-d); margin-bottom:.85rem;
  display:flex; align-items:center; gap:.45rem;
}
.usage-title::after{content:""; flex:1; height:1px; background:var(--line)}
.usage-row{display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.7rem; font-size:.88rem}
.usage-row:last-child{margin-bottom:0}
.usage-ic{
  width:32px; height:32px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:rgba(157,186,60,.14); color:var(--green-d);
}
.usage-row.teal .usage-ic{background:rgba(23,175,192,.13); color:var(--teal-d)}
.usage-ic svg{width:17px; height:17px}
.usage-row small{display:block; font-family:var(--f-util); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); line-height:1.6}
.usage-row b{font-weight:600; color:var(--ink); line-height:1.6}

/* ========== الفروع ========== */
.branch{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-m);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.branch:hover{transform:translateY(-6px); box-shadow:var(--shadow-l)}
.section-dark .branch{background:rgba(255,255,255,.05); border-color:var(--line-dark); color:rgba(255,255,255,.8)}
.branch-map{aspect-ratio:16/9; background:var(--mist-2); position:relative}
.branch-map iframe{width:100%; height:100%; border:0; display:block}
.branch-body{padding:1.7rem 1.7rem 1.9rem}
.branch h3{margin-bottom:.9rem; display:flex; align-items:center; gap:.6rem}
.branch h3::before{
  content:""; width:10px; height:10px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px rgba(157,186,60,.2); flex:none;
}
.branch dl{margin:0 0 1.4rem; display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; font-size:.92rem}
.branch dt{color:var(--ink-3); font-family:var(--f-util); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding-top:.28rem}
.section-dark .branch dt{color:rgba(255,255,255,.45)}
.branch dd{margin:0; color:var(--ink-2); overflow-wrap:anywhere}
.section-dark .branch dd{color:rgba(255,255,255,.85)}
.branch dd a{text-decoration:none; border-bottom:1px solid var(--line-2); transition:border-color .2s}
.branch dd a:hover{border-color:var(--green)}
.branch-actions{display:flex; gap:.6rem; flex-wrap:wrap}

/* ========== قائمة تواصل ========== */
.contact-list{display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.2rem; margin:1.5rem 0 0; font-size:.95rem}
.contact-list dt{color:var(--ink-3); font-family:var(--f-util); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding-top:.28rem}
.contact-list dd{margin:0; color:var(--ink-2); overflow-wrap:anywhere}
.contact-list dd a{text-decoration:none; border-bottom:1px solid var(--line-2)}

/* ========== كتلة صورة/نص ========== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4.5vw,4.5rem); align-items:center}
.split-media{position:relative}
.split-media img{width:100%; border-radius:var(--r-l); object-fit:cover; aspect-ratio:4/5; box-shadow:var(--shadow-l)}
.split-media.wide img{aspect-ratio:5/4}
.split-media::before{
  content:""; position:absolute; inset-inline-start:-14px; top:-14px; width:64%; height:64%;
  border:2px solid var(--green); border-radius:var(--r-l); z-index:-1;
}
.badge-float{
  position:absolute; inset-inline-end:-16px; bottom:-16px; background:var(--white);
  border-radius:var(--r-m); padding:1rem 1.3rem; box-shadow:var(--shadow-l);
  display:flex; align-items:center; gap:.8rem; max-width:76%;
}
.badge-float .ic{
  width:42px; height:42px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--green),var(--teal)); color:#fff;
}
.badge-float .ic svg{width:20px; height:20px}
.badge-float b{display:block; font-family:var(--f-display); font-size:.95rem; line-height:1.3}
.badge-float small{font-size:.76rem; color:var(--ink-3)}

/* ========== الأرشيف الوثائقي ========== */
/* ========== شريط تصفية الكتالوج ========== */
.catalog-bar{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  margin-bottom:1.8rem; padding-bottom:1.6rem; border-bottom:1px solid var(--line);
}
.cat-tabs{display:flex; flex-wrap:wrap; gap:.5rem}
.cat-tab{
  border:1px solid var(--line-2); background:var(--white); color:var(--ink-2);
  padding:.55rem 1.05rem; border-radius:var(--r-pill); font-size:.85rem; font-weight:600;
  cursor:pointer; transition:.22s var(--ease); display:inline-flex; align-items:center; gap:.4rem;
}
.cat-tab span{
  font-family:var(--f-util); font-size:.72rem; font-weight:700; color:var(--ink-3);
  background:var(--mist-2); border-radius:var(--r-pill); padding:.05rem .45rem;
}
.cat-tab:hover{border-color:var(--green); color:var(--green-d)}
.cat-tab.on{background:var(--ink); border-color:var(--ink); color:#fff}
.cat-tab.on span{background:rgba(255,255,255,.16); color:#fff}
.cat-search{position:relative; min-width:220px; flex:1; max-width:320px}
.cat-search input{
  width:100%; padding:.7rem 1rem .7rem 2.6rem; border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--mist); font:inherit; font-size:.9rem; color:var(--ink); transition:.2s var(--ease);
}
.cat-search input:focus{outline:none; border-color:var(--green); background:var(--white); box-shadow:0 0 0 4px rgba(157,186,60,.14)}
.cat-search svg{position:absolute; inset-inline-start:.9rem; top:50%; translate:0 -50%; width:17px; height:17px; color:var(--ink-3); pointer-events:none}
.cat-count{font-family:var(--f-util); font-size:.8rem; color:var(--ink-3); white-space:nowrap}
.cat-count b{color:var(--green-d); font-weight:700}
.prod[hidden]{display:none}

.arch-tabs{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2.2rem}
.arch-tab{
  border:1px solid var(--line-2); background:var(--white); color:var(--ink-2);
  padding:.55rem 1.15rem; border-radius:var(--r-pill); font-size:.88rem; font-weight:600;
  cursor:pointer; transition:.25s var(--ease);
}
.arch-tab:hover{border-color:var(--green); color:var(--green-d)}
.arch-tab.on{background:var(--ink); border-color:var(--ink); color:#fff}

.vid{
  position:relative; border-radius:var(--r-m); overflow:hidden; background:var(--deep-2);
  cursor:pointer; border:1px solid var(--line); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.vid:hover{transform:translateY(-6px); box-shadow:var(--shadow-l)}
.vid-thumb{aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--deep-2)}
.vid-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.vid:hover .vid-thumb img{transform:scale(1.07)}
.vid-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,40,48,0) 35%,rgba(7,40,48,.8));
}
.vid-play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; z-index:2;
  background:rgba(255,255,255,.94); color:var(--teal-d); display:grid; place-items:center;
  transition:transform .35s var(--ease), background .25s;
}
.vid:hover .vid-play{transform:scale(1.12); background:#fff}
.vid-play svg{width:24px; height:24px; margin-inline-start:3px}
.vid-meta{position:absolute; bottom:0; inset-inline:0; padding:1.1rem 1.3rem; z-index:2; color:#fff}
.vid-meta h3{font-size:1.02rem; color:#fff; margin-bottom:.2rem}
.vid-meta small{font-family:var(--f-util); font-size:.72rem; color:rgba(255,255,255,.65)}

.doc-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.3rem; align-items:center;
  padding:1.4rem 1.3rem; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--white); text-decoration:none; margin-bottom:.8rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.doc-item:hover{transform:translateX(-6px); box-shadow:var(--shadow-m); border-color:var(--green)}
html[dir="rtl"] .doc-item:hover{transform:translateX(6px)}
.doc-kind{
  font-family:var(--f-util); font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; background:var(--teal);
  padding:.3rem .7rem; border-radius:var(--r-pill); white-space:nowrap;
}
.doc-kind.k-press{background:var(--amber-d)}
.doc-kind.k-interview{background:var(--green-d)}
.doc-item h3{font-size:1.05rem; margin-bottom:.15rem}
.doc-item small{color:var(--ink-3); font-family:var(--f-util); font-size:.78rem}
.doc-go{color:var(--ink-3); font-size:1.2rem; transition:transform .3s var(--ease)}
.doc-item:hover .doc-go{transform:translateX(-4px); color:var(--green-d)}

/* ========== بطاقة قناة يوتيوب ========== */
.yt-card{
  position:relative; display:flex; align-items:center; gap:1.4rem; text-decoration:none;
  padding:1.6rem 1.9rem; border-radius:var(--r-l); overflow:hidden;
  background:linear-gradient(120deg,#FF0000 0%,#B40000 55%,#7A0000 100%);
  box-shadow:0 18px 44px rgba(180,0,0,.22); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.yt-card:hover{transform:translateY(-5px); box-shadow:0 24px 56px rgba(180,0,0,.3)}
.yt-card::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:.7; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(120deg,#000,transparent 65%);
  mask-image:linear-gradient(120deg,#000,transparent 65%);
}
.yt-play{
  position:relative; z-index:1; flex:none; width:64px; height:64px; border-radius:18px;
  background:rgba(255,255,255,.95); color:#B40000; display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(0,0,0,.25); transition:transform .4s var(--ease);
}
.yt-play svg{width:26px; height:26px; margin-inline-start:3px}
.yt-card:hover .yt-play{transform:scale(1.08) rotate(-6deg)}
.yt-body{position:relative; z-index:1; flex:1; min-width:0; color:#fff}
.yt-eyebrow{
  display:block; font-family:var(--f-util); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:.3rem;
}
.yt-body b{display:block; font-family:var(--f-display); font-size:clamp(1.2rem,2vw,1.6rem); color:#fff}
.yt-sub{display:block; font-size:.9rem; color:rgba(255,255,255,.82); margin-top:.3rem}
.yt-cta{position:relative; z-index:1; flex:none; background:#fff; color:#B40000; box-shadow:none}
.yt-cta:hover{background:rgba(255,255,255,.9)}

/* مشغّل الفيديو */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(4,20,25,.92); backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:4vw; opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.lightbox.on{opacity:1; pointer-events:auto}
.lightbox-inner{width:min(1000px,100%); aspect-ratio:16/9; border-radius:var(--r-m); overflow:hidden; box-shadow:var(--shadow-l)}
.lightbox-inner.is-image{aspect-ratio:auto; width:auto; max-width:min(900px,100%); background:none; box-shadow:none}
.lightbox iframe{width:100%; height:100%; border:0}
.lightbox-img{max-height:78vh; width:auto; border-radius:var(--r-m); box-shadow:var(--shadow-l)}
.lightbox-close{
  position:absolute; top:20px; inset-inline-end:20px; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer; font-size:1.4rem;
  display:grid; place-items:center; transition:background .2s; z-index:5;
}
.lightbox-close:hover{background:rgba(255,255,255,.26)}
.lightbox-nav{
  position:fixed; inset-inline:0; bottom:28px; z-index:5;
  display:flex; align-items:center; justify-content:center; gap:1.2rem;
}
.lightbox-prev, .lightbox-next{
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.6rem; line-height:1;
  display:grid; place-items:center; transition:background .2s, transform .2s;
}
.lightbox-prev:hover, .lightbox-next:hover{background:rgba(255,255,255,.26); transform:scale(1.08)}
.lightbox-counter{
  font-family:var(--f-util); font-size:.85rem; color:rgba(255,255,255,.75);
  min-width:60px; text-align:center;
}

/* ========== الحالات ========== */
.case{border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; background:var(--white); transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.case:hover{transform:translateY(-6px); box-shadow:var(--shadow-l)}
.case-pair{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line-2)}
.case-pair + .case-pair{margin-top:2px}
.case-figure{
  position:relative; display:block; margin:0; border:0; padding:0; cursor:zoom-in;
  background:var(--mist-2); aspect-ratio:1; overflow:hidden;
}
.case-figure img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.case-figure:hover img{transform:scale(1.06)}
.case-figure .prod-zoom{opacity:0; transform:translateY(6px) scale(.9)}
.case-figure:hover .prod-zoom{opacity:1; transform:none}
.case-tag{
  position:absolute; top:.8rem; inset-inline-start:.8rem; font-family:var(--f-util);
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(7,40,48,.86); color:#fff; padding:.28rem .65rem; border-radius:var(--r-pill);
}
.case-tag.after{background:var(--green)}
.case-body{padding:1.5rem 1.6rem 1.7rem}
.case-body p{font-size:.93rem; color:var(--ink-2); margin:0}

/* ========== حالة فراغ ========== */
.empty{
  border:1.5px dashed var(--line-2); border-radius:var(--r-m); padding:clamp(2.2rem,5vw,3.6rem);
  text-align:center; color:var(--ink-2); background:rgba(255,255,255,.6);
}
.empty-ic{
  width:64px; height:64px; border-radius:20px; margin:0 auto 1.2rem; display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(157,186,60,.16),rgba(23,175,192,.14)); color:var(--teal-d);
}
.empty-ic svg{width:28px; height:28px}
.empty h3{margin-bottom:.6rem}
.empty p{max-width:56ch; margin-inline:auto; font-size:.95rem}

/* ========== اقتباس ========== */
.quote{
  font-family:var(--f-display); font-weight:700; font-size:clamp(1.4rem,2.4vw,2.3rem);
  line-height:1.6; text-align:center; max-width:22ch; margin-inline:auto; color:#fff;
}
.quote-mark{
  display:block; width:56px; height:56px; margin:0 auto 1.6rem; border-radius:50%;
  background:linear-gradient(140deg,var(--green),var(--teal)); display:grid; place-items:center;
  color:#fff; font-size:1.8rem; font-family:var(--f-display); line-height:1;
}
.quote small{
  display:block; font-family:var(--f-util); font-size:.76rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:1.6rem;
}

/* ========== النموذج ========== */
.form{display:grid; gap:1.1rem}
.form-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-m)}
.field label{display:block; font-size:.84rem; font-weight:600; margin-bottom:.45rem; color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1.05rem; border:1px solid var(--line-2); border-radius:var(--r-s);
  background:var(--mist); font:inherit; font-size:.95rem; color:var(--ink); transition:.22s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green); background:var(--white); box-shadow:0 0 0 4px rgba(157,186,60,.16);
}
.field textarea{min-height:130px; resize:vertical}

/* ========== التذييل ========== */
.site-footer{background:var(--deep); color:rgba(255,255,255,.68); padding:clamp(3.2rem,5vw,5rem) 0 2rem; font-size:.92rem; position:relative; overflow:hidden}
.site-footer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(800px 300px at 90% 0%, rgba(23,175,192,.14), transparent 70%);
}
.site-footer > *{position:relative; z-index:1}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.6rem; border-bottom:1px solid var(--line-dark)}
.site-footer h4{font-family:var(--f-util); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--green-l); margin-bottom:1.2rem}
.site-footer a{text-decoration:none; color:rgba(255,255,255,.68); transition:color .2s, padding .2s}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.site-footer ul a:hover{padding-inline-start:.3rem}
.footer-brand img{height:66px; margin-bottom:1.2rem}
.footer-note{padding-top:1.8rem; display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; font-size:.79rem; color:rgba(255,255,255,.42); font-family:var(--f-util)}
.disclaimer{
  margin-top:1.8rem; padding:1.1rem 1.3rem; border-radius:var(--r-s);
  background:rgba(255,255,255,.05); border:1px solid var(--line-dark);
  font-size:.83rem; line-height:1.75; color:rgba(255,255,255,.6);
}
.disclaimer-light{
  margin-top:2.4rem; padding:1.1rem 1.3rem; border-radius:var(--r-s);
  background:rgba(23,175,192,.07); border:1px solid rgba(23,175,192,.2);
  font-size:.85rem; line-height:1.75; color:var(--ink-2);
}

/* ========== واتساب عائم ========== */
.wa-float{
  position:fixed; inset-inline-end:22px; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%; background:#1FA855; color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 32px rgba(31,168,85,.45);
  text-decoration:none; transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:28px; height:28px}
@media (prefers-reduced-motion:no-preference){
  .wa-float::after{
    content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #1FA855;
    animation:ping 2.6s var(--ease-io) infinite;
  }
  @keyframes ping{0%{transform:scale(1); opacity:.7} 70%,100%{transform:scale(1.7); opacity:0}}
}

/* ========== ظهور عند التمرير ========== */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:var(--d,0s)}
  .reveal.in{opacity:1; transform:none}
}

/* ========== إمكانية الوصول ========== */
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:6px}
.skip{position:absolute; inset-inline-start:-9999px; top:0; background:var(--green); color:#fff; padding:.8rem 1.3rem; z-index:300; border-radius:0 0 var(--r-s) 0}
.skip:focus{inset-inline-start:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ========== استجابة ========== */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:2rem}
}
@media (max-width:900px){
  .hero{min-height:auto; padding-bottom:0}
  .hero-grid{grid-template-columns:1fr; gap:2rem; text-align:center}
  .hero .lede{margin-inline:auto}
  .hero-cta,.hero-stats{justify-content:center}
  .hero-stats{border-top:1px solid var(--line-dark)}
  .hero-figure{max-width:420px}
  .split{grid-template-columns:1fr}
  .split-media::before{display:none}
  .g-3{grid-template-columns:repeat(2,1fr)}

  /* القائمة تغطي الشاشة كاملة بتصميمها المميّز — لا يظهر شيء من ورائها */
  .nav{
    position:fixed; inset:0; z-index:70; background:var(--mist);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:calc(env(safe-area-inset-top,0px) + 7.5rem) 7vw 3rem;
    gap:.15rem; display:none; overflow-y:auto; overscroll-behavior:contain;
    border-radius:0; box-shadow:none; backdrop-filter:none; border:0;
  }
  .nav::before{ /* توهّج علوي مميّز خلف القائمة */
    content:""; position:absolute; top:0; inset-inline:0; height:340px; z-index:-1;
    background:radial-gradient(560px 300px at 85% -8%, rgba(23,175,192,.16), transparent 70%),
               radial-gradient(460px 260px at 5% 0%, rgba(157,186,60,.14), transparent 70%);
  }
  .nav-indicator{display:none}
  .nav.open{display:flex}
  .nav a{
    padding:1.05rem .3rem; font-size:1.35rem; font-family:var(--f-display); font-weight:700;
    border-bottom:1px solid var(--line); color:var(--ink); display:flex; align-items:center;
    justify-content:space-between;
  }
  .nav a::after{content:"→"; font-family:var(--f-body); font-size:1.1rem; font-weight:400; color:var(--ink-3); transition:transform .3s var(--ease), color .3s var(--ease)}
  html[dir="rtl"] .nav a::after{content:"←"}
  .nav a:hover::after, .nav a[aria-current="page"]::after{color:var(--green-d); transform:translateX(-4px)}
  html[dir="rtl"] .nav a:hover::after, html[dir="rtl"] .nav a[aria-current="page"]::after{transform:translateX(4px)}
  .nav a[aria-current="page"]{color:var(--green-d)}
  .nav .btn{margin-top:1.4rem; justify-content:center; border-bottom:0; padding:1.1rem}
  .nav-toggle{display:block; position:relative; z-index:95}
  /* الشعار وزر القائمة يبقيان فوق طبقة القائمة */
  .brand{position:relative; z-index:95}
  body.nav-open{width:100%}
  /* الرأس يبقى فوق القائمة ليظهر الشعار وزر الإغلاق */
  .site-header{z-index:80}
  .site-header .shell{position:relative; z-index:90}
  .site-header.stuck::before{opacity:1}
}
@media (max-width:640px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .doc-item{grid-template-columns:1fr; gap:.6rem; align-items:flex-start}
  .doc-go{display:none}
  .badge-float{inset-inline-end:0; bottom:-14px; max-width:88%; padding:.8rem 1rem}
  .case-pair{grid-template-columns:1fr 1fr}
  .hero-stats{gap:1.4rem}
  .hero-figure{max-width:340px}
  .yt-card{flex-direction:column; text-align:center; padding:1.8rem 1.4rem}
  .yt-cta{width:100%; justify-content:center}
}