:root{
  --ink:#241A20; --ink2:#544149; --ink3:#8A757E;
  --paper:#FFFFFF; --tint:#FDF6F9; --tint2:#FBF0F5;
  --rule:#F0DCE5; --rule-strong:#DFBECD;
  --purple:#8E3A61; --purple-deep:#6B2647; --purple-soft:#FBEBF2;
  --green:#0F7A5A; --green-soft:#E6F4EF;
  --red:#D9628B; --red-deep:#B84A72; --red-soft:#FDF0F5;
  --maxw:1080px;
  --display:"Noto Kufi Arabic",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic","Noto Kufi Arabic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.85;
  -webkit-font-smoothing:antialiased; font-weight:400;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ---------- signature: the red rail ---------- */
.rail{position:fixed; top:0; right:0; width:5px; height:100vh; background:linear-gradient(180deg,var(--red) 0%,var(--red) 34%,var(--purple) 67%,var(--green) 100%); z-index:60}
.railprog{position:fixed; top:0; right:0; width:5px; background:var(--ink); z-index:61; height:0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:800; line-height:1.4; margin:0; letter-spacing:-.01em}
p{margin:0 0 14px}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink3); display:flex; align-items:center; gap:12px; margin-bottom:14px}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--rule)}
.lead{font-size:18px; color:var(--ink2); line-height:1.95}
.small{font-size:13.5px; color:var(--ink3); line-height:1.8}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- hero ---------- */
.hero{padding:64px 0 0; border-bottom:1px solid var(--rule)}
.docmeta{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink3); margin-bottom:38px}
.docmeta b{color:var(--ink); font-weight:600}
.brands{display:grid; grid-template-columns:1fr 56px 1fr; align-items:stretch; gap:0; margin-bottom:46px}
.chip{border:1px solid var(--rule); border-radius:3px; display:flex; align-items:center; justify-content:center; padding:30px 26px; min-height:150px}
.chip.dark{background:var(--paper); border-color:var(--rule)}
.chip img{max-width:100%; max-height:88px; height:auto; display:block}
.join{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px}
.join span{font-family:var(--mono); font-size:16px; color:var(--rule-strong)}
.join i{display:block; width:1px; flex:1; background:var(--rule)}
h1{font-size:clamp(28px,5vw,52px); line-height:1.28; margin-bottom:20px}
.hero{text-align:center}
.hero .eyebrow{justify-content:center}
.hero .eyebrow::after{display:none}
h1 em{font-style:normal; color:var(--purple)}
.hero .lead{max-width:66ch; margin-inline:auto}
.pulse{margin:44px 0 0; width:100%; height:74px; display:block}
.pulse path{fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* ---------- sections ---------- */
section{padding:74px 0; border-bottom:1px solid var(--rule)}
section.tinted{background:var(--tint)}
h2{font-size:clamp(22px,3vw,31px); margin-bottom:18px}
h3{font-size:18px; margin-bottom:8px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:34px}
.card{background:var(--paper); border:1px solid var(--rule); border-radius:3px; padding:26px}
.card .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--red); margin-bottom:12px}
.card p{font-size:14.5px; color:var(--ink2); margin:0}

/* specialties */
.tags{display:flex; flex-wrap:wrap; gap:9px; margin-top:26px}
.tag{border:1px solid var(--rule-strong); border-radius:100px; padding:7px 15px; font-size:14px; color:var(--ink2); background:var(--paper)}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:36px; border:1px solid var(--rule); border-radius:3px; overflow:hidden}
.stat{padding:24px 20px; border-left:1px solid var(--rule)}
.stat:first-child{border-left:0}
.stat b{display:block; font-family:var(--display); font-size:26px; font-weight:800; color:var(--purple); line-height:1.2}
.stat span{font-size:13px; color:var(--ink3)}

/* ---------- tables ---------- */
.tablewrap{margin-top:32px; border:1px solid var(--rule); border-radius:3px; overflow-x:auto; background:var(--paper)}
table{width:100%; border-collapse:collapse; font-size:15px; min-width:520px}
th,td{text-align:right; padding:15px 20px; border-bottom:1px solid var(--rule)}
thead th{background:var(--ink); color:#fff; font-family:var(--display); font-weight:700; font-size:13.5px; letter-spacing:.01em; border-bottom:0}
thead th.c2{background:var(--purple-deep)}
thead th.c3{background:var(--red)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--tint2)}
td.pct{font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
td.pct.a{color:var(--purple)} td.pct.b{color:var(--red)}
caption{caption-side:bottom; text-align:right; padding:14px 20px; font-size:12.5px; color:var(--ink3); border-top:1px solid var(--rule)}

/* ---------- packages ---------- */
.packs{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:36px}
.pack{border:1px solid var(--rule); border-radius:3px; background:var(--paper); padding:0; display:flex; flex-direction:column; overflow:hidden}
.pack.feature{border-color:var(--purple); box-shadow:0 0 0 1px var(--purple)}
.pack header{padding:22px 24px 18px; border-bottom:1px dashed var(--rule)}
.pack .pid{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--ink3); margin-bottom:9px; display:flex; justify-content:space-between; align-items:center}
.pack .pid .flag{background:var(--purple); color:#fff; border-radius:100px; padding:3px 11px; letter-spacing:.1em; font-size:9.5px}
.pack h3{font-size:19px; color:var(--ink)}
.pack .for{font-size:13px; color:var(--ink3); margin-top:5px}
.pack ul{list-style:none; margin:0; padding:20px 24px; flex:1}
.pack li{font-size:14.5px; color:var(--ink2); padding:6px 0 6px 0; display:flex; gap:11px; align-items:flex-start; line-height:1.7}
.pack li::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--green); margin-top:10px}
.price{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:18px 24px; background:var(--tint); border-top:1px solid var(--rule)}
.price .was{font-family:var(--mono); font-size:13px; color:var(--ink3); text-decoration:line-through}
.price .now{font-family:var(--display); font-weight:800; font-size:29px; color:var(--purple-deep); line-height:1}
.price .now small{font-family:var(--body); font-size:13px; font-weight:500; color:var(--ink2)}
.save{background:var(--red); color:#fff; font-family:var(--mono); font-size:11px; font-weight:600; padding:5px 11px; border-radius:100px; white-space:nowrap}

/* ---------- two-column value exchange ---------- */
.exchange{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:34px; border:1px solid var(--rule); border-radius:3px; overflow:hidden; background:var(--paper)}
.col{padding:30px 28px}
.col:first-child{border-left:1px solid var(--rule); background:var(--purple-soft)}
.col:last-child{background:var(--ink); color:#fff}
.col h3{font-size:17px; margin-bottom:6px}
.col:first-child h3{color:var(--purple-deep)}
.col:last-child h3{color:#fff}
.col .who{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; margin-bottom:16px; color:var(--ink3)}
.col:last-child .who{color:#8E939C}
.col ul{list-style:none; margin:0; padding:0}
.col li{font-size:14.5px; line-height:1.8; padding:11px 0; border-top:1px solid rgba(0,0,0,.08)}
.col:last-child li{border-top:1px solid rgba(255,255,255,.12); color:#D9DCE1}
.col li:first-child{border-top:0}

/* ---------- steps ---------- */
.steps{margin-top:34px; border-top:1px solid var(--rule)}
.step{display:grid; grid-template-columns:64px 1fr 150px; gap:22px; padding:22px 0; border-bottom:1px solid var(--rule); align-items:start}
.step .n{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--red); padding-top:3px}
.step h3{font-size:16px; margin-bottom:4px}
.step p{font-size:14.5px; color:var(--ink2); margin:0}
.step .when{font-family:var(--mono); font-size:12px; color:var(--ink3); text-align:left; padding-top:4px}

/* ---------- terms ---------- */
.terms{list-style:none; margin:30px 0 0; padding:0; columns:2; column-gap:44px}
.terms li{font-size:14.5px; color:var(--ink2); line-height:1.8; padding:0 0 14px; break-inside:avoid; display:flex; gap:12px}
.terms li b{flex:none; font-family:var(--mono); font-size:11.5px; color:var(--red); padding-top:5px; font-weight:600}

/* ---------- close ---------- */
.close{background:var(--ink); color:#fff; border-bottom:0}
.close h2{color:#fff}
.close .lead{color:#B9BEC6}
.sign{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:46px; border:1px solid rgba(255,255,255,.16); border-radius:3px}
.sigbox{padding:28px}
.sigbox:first-child{border-left:1px solid rgba(255,255,255,.16)}
.sigbox .who{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:#8E939C; margin-bottom:10px}
.sigbox strong{display:block; font-family:var(--display); font-size:16px; margin-bottom:3px}
.sigbox span{font-size:13.5px; color:#B9BEC6}
.sigline{margin-top:34px; border-bottom:1px dashed rgba(255,255,255,.3); height:34px}
.sigcap{font-family:var(--mono); font-size:10.5px; color:#8E939C; margin-top:8px; display:flex; justify-content:space-between}
.contact{display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:40px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16); font-size:14px; color:#B9BEC6}
.contact b{color:#fff; font-weight:600}
.fill{border-bottom:1px dotted rgba(255,255,255,.45); min-width:120px; display:inline-block}

footer{padding:26px 0; font-size:12.5px; color:var(--ink3); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; font-family:var(--mono); letter-spacing:.06em}

/* ---------- motion system ---------- */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* أساس الظهور */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal.in{opacity:1; transform:none}

/* ظهور العناوين داخل كل قسم بتتابع */
.reveal .eyebrow,.reveal>.wrap>h2,.reveal>.wrap>.lead{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in .eyebrow{opacity:1; transform:none; transition-delay:.05s}
.reveal.in>.wrap>h2{opacity:1; transform:none; transition-delay:.14s}
.reveal.in>.wrap>.lead{opacity:1; transform:none; transition-delay:.22s}

/* شرطة الـeyebrow ترتسم */
.eyebrow::after{transform:scaleX(0); transform-origin:right; transition:transform .9s var(--ease-out) .3s}
.reveal.in .eyebrow::after{transform:scaleX(1)}

/* تتابع أبناء الشبكات */
.stagger>*{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.in .stagger>*{opacity:1; transform:none}
.reveal.in .stagger>*:nth-child(1){transition-delay:.10s}
.reveal.in .stagger>*:nth-child(2){transition-delay:.18s}
.reveal.in .stagger>*:nth-child(3){transition-delay:.26s}
.reveal.in .stagger>*:nth-child(4){transition-delay:.34s}
.reveal.in .stagger>*:nth-child(5){transition-delay:.42s}
.reveal.in .stagger>*:nth-child(6){transition-delay:.50s}
.reveal.in .stagger>*:nth-child(7){transition-delay:.58s}
.reveal.in .stagger>*:nth-child(8){transition-delay:.66s}
.reveal.in .stagger>*:nth-child(9){transition-delay:.74s}

/* الأرقام: عدّاد + ظهور */
.stat b{transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}

/* صفوف الجدول تظهر بتتابع */
.tablewrap tbody tr{opacity:0; transform:translateX(14px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out)}
.reveal.in .tablewrap tbody tr{opacity:1; transform:none}
.reveal.in .tablewrap tbody tr:nth-child(1){transition-delay:.20s}
.reveal.in .tablewrap tbody tr:nth-child(2){transition-delay:.26s}
.reveal.in .tablewrap tbody tr:nth-child(3){transition-delay:.32s}
.reveal.in .tablewrap tbody tr:nth-child(4){transition-delay:.38s}
.reveal.in .tablewrap tbody tr:nth-child(5){transition-delay:.44s}
.reveal.in .tablewrap tbody tr:nth-child(6){transition-delay:.50s}
.reveal.in .tablewrap tbody tr:nth-child(7){transition-delay:.56s}
.reveal.in .tablewrap tbody tr:nth-child(8){transition-delay:.62s}
.reveal.in .tablewrap tbody tr:nth-child(9){transition-delay:.68s}

/* الخطوات تظهر من الجانب */
.steps .step{opacity:0; transform:translateX(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.reveal.in .steps .step{opacity:1; transform:none}
.reveal.in .steps .step:nth-child(1){transition-delay:.14s}
.reveal.in .steps .step:nth-child(2){transition-delay:.22s}
.reveal.in .steps .step:nth-child(3){transition-delay:.30s}
.reveal.in .steps .step:nth-child(4){transition-delay:.38s}
.reveal.in .steps .step:nth-child(5){transition-delay:.46s}
.reveal.in .steps .step:nth-child(6){transition-delay:.54s}

/* عمودا التبادل */
.exchange .col{opacity:0; transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.exchange .col:first-child{transform:translateX(20px)}
.exchange .col:last-child{transform:translateX(-20px)}
.reveal.in .exchange .col{opacity:1; transform:none}
.reveal.in .exchange .col:first-child{transition-delay:.14s}
.reveal.in .exchange .col:last-child{transition-delay:.24s}

/* الأحكام */
.terms li{opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
.reveal.in .terms li{opacity:1; transform:none}

/* نبضة القلب في الهيرو */
@keyframes draw{to{stroke-dashoffset:0}}
.pulse path{stroke-dasharray:2600; stroke-dashoffset:2600; animation:draw 2.6s var(--ease) .35s forwards}

/* الهيرو: ظهور متتابع */
@keyframes riseIn{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
.hero .docmeta{animation:riseIn .8s var(--ease-out) .05s both}
.hero .brands{animation:riseIn .9s var(--ease-out) .18s both}
.hero h1{animation:riseIn .9s var(--ease-out) .30s both}
.hero .lead{animation:riseIn .9s var(--ease-out) .42s both}

/* شعارات الهيرو */
.chip{transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease)}
.chip:hover{transform:translateY(-3px); box-shadow:0 10px 34px rgba(36,26,32,.09)}
.chip:not(.dark):hover{border-color:var(--purple)}
.chip.dark:hover{border-color:var(--purple); box-shadow:0 10px 34px rgba(36,26,32,.09)}
.join span{animation:pulseX 2.6s var(--ease) infinite}
@keyframes pulseX{0%,100%{opacity:.45; transform:scale(1)} 50%{opacity:1; transform:scale(1.14)}}

/* تفاصيل تفاعلية */
.pack .save{transition:transform .3s var(--ease)}
.pack:hover .save{transform:scale(1.06)}
.wnote .wdot{animation:dotPulse 2.4s var(--ease) infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 5px var(--purple-soft)} 50%{box-shadow:0 0 0 9px rgba(142,58,97,.10)}}
.step .n{transition:color .25s ease, transform .25s ease}
.step:hover .n{color:var(--purple); transform:translateX(-3px)}
.sigline{transition:border-color .3s ease}
.sign .sigbox:hover .sigline{border-bottom-color:var(--red)}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal .eyebrow,.reveal>.wrap>h2,.reveal>.wrap>.lead,
  .stagger>*,.tablewrap tbody tr,.steps .step,.exchange .col,.terms li{
    opacity:1 !important; transform:none !important; transition:none !important
  }
  .eyebrow::after{transform:scaleX(1) !important}
  .pulse path{stroke-dasharray:none !important; stroke-dashoffset:0 !important; animation:none !important}
  .hero .docmeta,.hero .brands,.hero h1,.hero .lead{animation:none !important}
  .join span,.wnote .wdot{animation:none !important}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid3,.grid2,.packs{grid-template-columns:1fr}
  .brands{grid-template-columns:1fr; gap:14px}
  .join{flex-direction:row; height:26px}
  .join i{width:auto; height:1px; flex:1}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-right:0}
  .exchange,.sign{grid-template-columns:1fr}
  .col:first-child,.sigbox:first-child{border-left:0; border-bottom:1px solid var(--rule)}
  .sigbox:first-child{border-bottom:1px solid rgba(255,255,255,.16)}
  .terms{columns:1}
  .step{grid-template-columns:44px 1fr; }
  .step .when{grid-column:2; text-align:right; padding-top:0}
  section{padding:52px 0}
  .rail,.railprog{width:3px}
}


/* ---------- women's section ---------- */
.women{background:linear-gradient(180deg,#FDFBFD 0%,#F8F2F7 100%)}
.women h2{color:var(--purple-deep)}
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:36px;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--paper)}
.wcard{padding:28px 26px;border-left:1px solid var(--rule);border-top:1px solid var(--rule);position:relative}
.wcard:nth-child(1),.wcard:nth-child(2){border-top:0}
.wcard:nth-child(even){border-left:0}
.wcard .wnum{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--purple);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.wcard .wnum::after{content:"";flex:1;height:1px;background:var(--purple-soft)}
.wcard h3{font-size:17px;color:var(--ink);margin-bottom:8px}
.wcard p{font-size:14.5px;color:var(--ink2);margin:0;line-height:1.8}
.wnote{margin-top:26px;display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--purple);border-radius:3px;padding:24px 26px}
.wnote .wdot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--purple);margin-top:9px;box-shadow:0 0 0 5px var(--purple-soft)}
.wnote p{margin:0;font-size:14.5px;color:var(--ink2);line-height:1.85}
.wnote b{color:var(--purple-deep)}
.pack.wpack{border-color:var(--purple-soft)}
.flag.wflag{background:var(--purple-deep)}
.hint{font-style:normal;color:var(--green);font-size:13px;font-weight:500}

/* ---------- polish ---------- */
.card{transition:border-color .25s ease, transform .25s ease}
.card:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.wcard{transition:background .25s ease}
.wcard:hover{background:var(--tint2)}
.pack{transition:box-shadow .25s ease, transform .25s ease}
.pack:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(36,26,32,.07)}
.pack.feature:hover{box-shadow:0 0 0 1px var(--purple), 0 6px 24px rgba(142,58,97,.14)}
.tag{transition:border-color .2s ease,color .2s ease}
.tag:hover{border-color:var(--purple);color:var(--purple-deep)}
tbody tr{transition:background .18s ease}
tbody tr:hover{background:var(--purple-soft)}
.step{transition:background .2s ease}
.step:hover{background:var(--tint2)}

@media (max-width:900px){
  .wgrid{grid-template-columns:1fr}
  .wcard{border-left:0;border-top:1px solid var(--rule)}
  .wcard:nth-child(1){border-top:0}
  .wcard:nth-child(2){border-top:1px solid var(--rule)}
}
@media print{
  .women{background:#fff !important}
  .wgrid,.wnote{break-inside:avoid}
  .card:hover,.pack:hover,.step:hover,tbody tr:hover{transform:none !important;box-shadow:none !important;background:transparent !important}
}


/* ---------- refined polish ---------- */
/* إيقاع أفضل للأقسام */
section{position:relative}
section.tinted{background:linear-gradient(180deg,var(--tint) 0%,#FCFBFC 100%)}

/* علامة رقمية خفيفة على حافة كل قسم */
h2{position:relative}

/* الهيرو */
.hero{padding-bottom:8px}
.docmeta{padding-bottom:0}
h1{text-wrap:balance}
.hero .lead{text-wrap:pretty}

/* البطاقات */
.card{position:relative; overflow:hidden}
.card::before{content:""; position:absolute; top:0; right:0; width:0; height:2px; background:var(--red); transition:width .45s var(--ease-out)}
.card:hover::before{width:100%}
.card h3{transition:color .25s ease}
.card:hover h3{color:var(--purple-deep)}

/* الإحصائيات */
.stat{transition:background .3s ease}
.stat:hover{background:var(--tint2)}
.stat b{font-variant-numeric:tabular-nums}

/* الوسوم */
.tag{cursor:default}

/* الجدول */
.tablewrap{box-shadow:0 1px 0 rgba(36,26,32,.02)}
thead th{position:relative}
td.pct{transition:transform .2s ease}
tbody tr:hover td.pct{transform:scale(1.06)}

/* الباقات */
.pack header{position:relative}
.pack.feature header::after{content:""; position:absolute; bottom:-1px; right:0; left:0; height:2px; background:var(--purple)}
.pack li::before{transition:transform .25s var(--ease), background .25s ease}
.pack:hover li::before{transform:scale(1.35)}
.price .now{transition:color .25s ease}
.pack:hover .price .now{color:var(--purple)}

/* التبادل */
.col li{transition:padding-right .25s var(--ease), color .25s ease}
.col:first-child li:hover{padding-right:8px; color:var(--purple-deep)}
.col:last-child li:hover{padding-right:8px; color:#fff}

/* الخاتمة */
.close{background:linear-gradient(160deg,#3A2A32 0%,#241A20 55%,#1A1218 100%)}
.sigbox{transition:background .3s ease}
.sigbox:hover{background:rgba(255,255,255,.03)}

/* الشريط الجانبي */
.railprog{transition:height .12s linear; box-shadow:0 0 12px rgba(36,26,32,.4)}

/* التذييل */
footer{border-top:1px solid var(--rule)}


/* ---------- professional topbar ---------- */
.topbar{position:sticky; top:0; z-index:55; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--rule); transition:box-shadow .3s var(--ease), border-color .3s ease}
.topbar.stuck{box-shadow:0 6px 26px rgba(36,26,32,.07); border-color:var(--rule-strong)}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:22px; padding:13px 28px; max-width:var(--maxw); margin:0 auto}
.tb-brand{display:flex; align-items:center; gap:11px; flex:none}
.tb-mark{width:9px; height:26px; border-radius:100px; background:linear-gradient(180deg,var(--red) 0%,var(--purple) 60%,var(--purple-deep) 100%); flex:none}
.tb-txt{font-family:var(--display); font-size:14px; font-weight:800; color:var(--ink); white-space:nowrap; letter-spacing:-.01em}
.tb-txt i{font-style:normal; color:var(--rule-strong); font-weight:400; margin:0 3px}
.tb-nav{display:flex; gap:2px; align-items:center; flex:1; justify-content:center}
.tb-nav a{font-size:13.5px; color:var(--ink2); text-decoration:none; padding:8px 12px; border-radius:3px; white-space:nowrap; transition:color .2s ease, background .2s ease; position:relative}
.tb-nav a::after{content:""; position:absolute; bottom:4px; right:12px; left:12px; height:1.5px; background:var(--purple); transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease-out)}
.tb-nav a:hover{color:var(--purple-deep)}
.tb-nav a:hover::after{transform:scaleX(1)}
.tb-nav a.active{color:var(--purple-deep); font-weight:600}
.tb-nav a.active::after{transform:scaleX(1)}
.tb-cta{display:flex; align-items:center; gap:9px; flex:none}
.tb-call{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; padding:9px 13px; border:1px solid var(--rule-strong); border-radius:3px; white-space:nowrap; transition:border-color .25s ease, color .25s ease, background .25s ease}
.tb-call:hover{border-color:var(--purple); color:var(--purple-deep); background:var(--purple-soft)}
.tb-wa{font-size:13.5px; font-weight:600; color:#fff; background:var(--ink); text-decoration:none; padding:10px 17px; border-radius:3px; white-space:nowrap; transition:background .25s ease, transform .25s var(--ease)}
.tb-wa:hover{background:var(--red); transform:translateY(-1px)}
.hero{padding-top:52px}

/* ---------- video ---------- */
.videowrap{margin-top:40px; border:1px solid var(--rule); border-radius:3px; overflow:hidden; background:var(--paper)}
.vid-head{padding:20px 26px; border-bottom:1px solid var(--rule); display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; background:var(--tint2)}
.vid-kicker{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--red); text-transform:uppercase}
.vid-head h3{font-size:17px; margin:0; color:var(--ink)}
.vid-frame{position:relative; aspect-ratio:16/9; background:var(--ink); overflow:hidden}
.vid-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2}
.vid-ph{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:linear-gradient(140deg,#3A2A32,#241A20 60%,#1A1218); color:#8E939C; text-align:center; padding:20px}
.vid-ph p{margin:0; font-size:14px; line-height:1.9}
.vid-ph em{font-style:normal; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:#6C7179}
.vid-play{width:62px; height:62px; border-radius:50%; border:1.5px solid rgba(255,255,255,.28); position:relative; display:block}
.vid-play::after{content:""; position:absolute; top:50%; right:50%; transform:translate(50%,-50%); border-style:solid; border-width:11px 17px 11px 0; border-color:transparent rgba(255,255,255,.55) transparent transparent}

@media (max-width:1040px){ .tb-nav{display:none} }
@media (max-width:640px){
  .topbar-in{padding:11px 18px; gap:12px}
  .tb-txt{font-size:12.5px}
  .tb-call{display:none}
  .tb-wa{padding:9px 14px; font-size:13px}
  .vid-head{padding:16px 20px}
}
@media print{
  .topbar{display:none}
  .hero{padding-top:0}
  .vid-frame{aspect-ratio:auto; height:auto; background:#fff}
  .vid-frame iframe{display:none}
  .vid-ph{position:static; background:#fff !important; color:#333 !important; border:.5pt dashed #bbb; padding:26pt 20pt}
  .vid-ph em{color:#666 !important}
  .vid-play{border-color:#bbb}
  .vid-play::after{border-right-color:#999}
  .videowrap{break-inside:avoid}
}


/* ---------- 2x2 grid ---------- */
.grid22{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:34px}

/* ---------- responsive hardening ---------- */
@media (max-width:900px){
  .grid22{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  section{padding:44px 0}
  h1{font-size:clamp(26px,7vw,34px); line-height:1.35}
  h2{font-size:clamp(20px,5.4vw,25px)}
  .lead{font-size:16px; line-height:1.85}
  .docmeta{gap:8px 16px; font-size:10px; margin-bottom:28px}
  .chip{min-height:120px; padding:22px 18px}
  .chip img{max-height:64px}
  .pulse{height:56px; margin-top:32px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:18px 14px}
  .stat b{font-size:22px}
  .tag{font-size:13px; padding:6px 12px}
  th,td{padding:12px 14px; font-size:14px}
  table{min-width:440px}
  .pack header{padding:18px 20px 15px}
  .pack ul{padding:16px 20px}
  .pack li{font-size:14px}
  .price{padding:15px 20px; flex-wrap:wrap; gap:10px}
  .price .now{font-size:25px}
  .col{padding:24px 20px}
  .col li{font-size:14px}
  .wcard{padding:22px 20px}
  .wnote{padding:20px; gap:12px}
  .terms li{font-size:14px}
  .step{gap:14px; padding:18px 0}
  .sigbox{padding:22px}
  .contact{gap:10px 20px; font-size:13.5px}
  footer .wrap{flex-direction:column; gap:6px; font-size:11.5px}
}
@media (max-width:420px){
  .wrap{padding:0 16px}
  .stats{grid-template-columns:1fr}
  .stat{border-left:0; border-top:1px solid var(--rule)}
  .stat:first-child{border-top:0}
  table{min-width:360px}
  .vid-head{flex-direction:column; gap:6px}
}
@media print{
  .grid22{grid-template-columns:1fr 1fr}
}


/* ---------- clinic row: text + vertical video ---------- */
.clinicrow{display:grid; grid-template-columns:1fr 330px; gap:34px; align-items:start; margin-top:34px}
.clinicrow .clinic-text>.lead{margin-top:0}
.clinicrow .clinic-text>.stats{margin-top:26px}
.clinic-video{position:sticky; top:88px}
.clinic-video .videowrap{margin-top:0}
.clinic-video .vid-frame{aspect-ratio:9/16}
.clinic-video .vid-head{padding:16px 20px}
.clinic-video .vid-head h3{font-size:16px}
.clinic-video .vid-ph{gap:14px}
.clinic-video .vid-ph p{font-size:13px}
.clinic-video .vid-play{width:54px; height:54px}

@media (max-width:980px){
  .clinicrow{grid-template-columns:1fr; gap:28px}
  .clinic-video{position:static; max-width:340px; margin-inline:auto}
}
@media print{
  .clinicrow{grid-template-columns:1fr 240px; gap:20pt}
  .clinic-video{position:static}
  .clinic-video .vid-frame{aspect-ratio:9/16}
  .clinicrow{break-inside:avoid}
}


/* ---------- clinic row: harmonized ---------- */
.clinicrow{align-items:stretch}
.clinic-text{display:flex; flex-direction:column}
.clinic-text>.lead{margin-top:0}
.clinic-text>.stats{margin-top:24px}
.clinic-text>.tags{margin-top:20px; flex:1; align-content:flex-start}
.clinic-video{display:flex; flex-direction:column}
.clinic-video .videowrap{display:flex; flex-direction:column; height:100%}
.clinic-video .vid-frame{flex:1; aspect-ratio:auto; min-height:420px}

/* الإحصائيات: صفّان متساويان يوازيان الفيديو */
.clinic-text .stats{grid-template-columns:repeat(2,1fr)}
.clinic-text .stat{padding:18px 16px}
.clinic-text .stat b{font-size:22px}

/* الوسوم: إيقاع أنظف */
.clinic-text .tags{gap:8px}
.clinic-text .tag{font-size:13px; padding:6px 13px}

@media (max-width:980px){
  .clinic-video .vid-frame{aspect-ratio:9/16; min-height:0}
  .clinic-text>.tags{flex:none}
}
@media (max-width:760px){
  .clinic-text .stats{grid-template-columns:1fr 1fr}
}
@media print{
  .clinic-video .vid-frame{aspect-ratio:9/16; min-height:0}
  .clinic-text .stats{grid-template-columns:repeat(2,1fr)}
}

/* ---------- print ---------- */
@media print{
  .rail,.railprog{display:none}
  body{font-size:11.5pt}
  section{padding:22pt 0; break-inside:avoid; border-bottom:.5pt solid #ccc}
  .close{background:#fff !important; color:#000 !important}
  .close h2,.sigbox strong{color:#000 !important}
  .close .lead,.sigbox span,.contact{color:#333 !important}
  .col:last-child{background:#fff !important; color:#000 !important}
  .col:last-child h3{color:#000 !important}
  .col:last-child li{color:#222 !important; border-top:.5pt solid #ddd !important}
  .sign,.sigbox:first-child,.contact{border-color:#bbb !important}
  .sigline{border-bottom:.5pt dashed #888}
  .sigcap,.sigbox .who{color:#666 !important}
  .fill{border-bottom:.5pt dotted #666}
  .pack,.card,.tablewrap{break-inside:avoid}
  .reveal{opacity:1 !important; transform:none !important}
  .pulse path{stroke-dashoffset:0 !important; animation:none !important}
  .chip.dark{background:#241A20 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  thead th{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}