/* sx-heroes — ترويسات ونبذة وهوية (hero_home · hero_page · hero_lead · about_split · pillars · vision_band) */

/* ── أدوات مشتركة ── */
@keyframes hxRise{from{opacity:0;transform:translateY(22px)}}
@keyframes hxFade{from{opacity:0}}
@keyframes hxMark{from{background-size:0% 34%}}

/* ═══════════════════════════════════════════
   الترويسة الرئيسية
   ═══════════════════════════════════════════ */
.hero.hx{padding:36px 0 0;position:relative;isolation:isolate}
.hx-bg{position:absolute;inset:-40px 0 0;z-index:-1;overflow:hidden;pointer-events:none}
.hx-bg::before{content:"";position:absolute;width:760px;height:760px;inset-inline-end:-160px;top:-220px;border-radius:50%;background:radial-gradient(closest-side,rgba(33,93,65,.13),rgba(33,93,65,0))}
.hx-bg::after{content:"";position:absolute;width:640px;height:560px;inset-inline-end:-40px;top:-10px;background:repeating-linear-gradient(45deg,rgba(33,93,65,.07) 0 1px,transparent 1px 26px),repeating-linear-gradient(-45deg,rgba(33,93,65,.07) 0 1px,transparent 1px 26px);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent);mask:radial-gradient(closest-side,#000 25%,transparent)}
@media (min-width:961px){.hero-grid.hx-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px}}
.hx-in{animation:hxRise .9s var(--ease) backwards;animation-delay:calc(var(--d,0) * 110ms + 60ms)}

.hx .eyebrow{color:var(--teal-dark);font-size:.9rem;margin-bottom:14px}
.hx .eyebrow::before{width:42px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(216,175,77,0))}
.hero.hx h1.hx-title{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.36;margin-bottom:16px}
.hx-title mark{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 100% 88%/100% 34%;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:hxMark 1s var(--ease) backwards .85s}
.hx .lead{font-size:1.07rem;max-width:54ch;margin-bottom:26px}

/* أزرار بتفاعلات دقيقة */
.hx-actions{gap:10px;margin-bottom:24px}
.hx-btn{position:relative;isolation:isolate;overflow:hidden;min-height:58px;padding-block:0;border-radius:14px;gap:11px}
.hx-btn:active{transform:scale(.97)}
.hx-btn .i{transition:transform .35s var(--ease)}
.hx-btn-ic{display:grid;place-items:center;flex-shrink:0;transition:transform .4s var(--ease),background .3s,color .3s}
.hx-btn-main{padding-inline:26px 10px;gap:16px;box-shadow:0 16px 30px -16px rgba(33,93,65,.75)}
.hx-btn-main::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.26) 50%,transparent 65%);transform:translateX(100%);transition:transform .9s var(--ease)}
.hx-btn-bub{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:background .3s,color .3s}
.hx-btn-main:hover::after,.hx-btn-main:focus-visible::after{transform:translateX(-100%)}
.hx-btn-main:hover .hx-btn-bub,.hx-btn-main:focus-visible .hx-btn-bub{background:var(--yellow);color:var(--ink)}
.hx-btn-main:hover .hx-btn-bub .i,.hx-btn-main:focus-visible .hx-btn-bub .i{transform:translateX(-3px)}
.hx-btn-call{padding-inline:12px 24px;border:1.5px solid var(--line);box-shadow:none}
.hx-btn-call .hx-btn-ic{width:34px;height:34px;border-radius:50%;background:var(--teal-soft);color:var(--teal)}
.hx-btn-call:hover,.hx-btn-call:focus-visible{border-color:var(--teal)}
.hx-btn-call:hover .hx-btn-ic,.hx-btn-call:focus-visible .hx-btn-ic{background:var(--teal);color:#fff}
.hx-btn-call:hover .hx-btn-ic .i,.hx-btn-call:focus-visible .hx-btn-ic .i{animation:hxRing .7s ease}
.hx-btn-wa{padding-inline:12px 24px}
.hx-btn-wa .hx-btn-ic{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14)}
.hx-btn-wa:hover .hx-btn-ic,.hx-btn-wa:focus-visible .hx-btn-ic{transform:scale(1.12) rotate(-10deg)}
@keyframes hxRing{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}40%{transform:rotate(13deg)}60%{transform:rotate(-9deg)}80%{transform:rotate(5deg)}}

/* مؤشرات الثقة */
.hx-trust{gap:10px 24px;padding-top:20px;border-top:1px solid var(--line)}
.hx-trust li{gap:10px;font-size:.88rem;color:var(--ink-2)}
.hx-trust-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--teal)}
.hx-trust .hx-trust-ic .i{width:16px;height:16px}

/* تكوين الصورة: إطار ذهبي مُزاح + حجر القوس + بطاقة زجاجية */
.hero-media.hx-media{padding:0;padding-block-start:24px;padding-inline-end:30px;max-width:470px;width:100%;justify-self:center}
.hx-media::before{display:none}
.hx-frame{position:absolute;top:0;bottom:24px;inset-inline-start:30px;inset-inline-end:0;border:1.5px solid var(--gold);border-radius:999px 999px 28px 28px;opacity:.6;animation:hxFrame 1.3s var(--ease) backwards .35s}
.hx-photo{position:relative;z-index:1;animation:hxLift 1.1s var(--ease) backwards .1s}
.hero-media .hx-photo .media{aspect-ratio:4/4.75;border-radius:999px 999px 28px 28px;box-shadow:0 40px 80px -42px rgba(20,58,40,.6)}
.hx-photo .media img{animation:hxZoom 1.8s var(--ease) backwards .1s}
.hx-key{position:absolute;z-index:2;top:-7px;inset-inline-start:calc((100% - 30px) / 2 - 31px);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#13806f,var(--teal-deep) 70%);box-shadow:0 0 0 6px var(--bg),0 14px 28px -10px rgba(20,58,40,.7);animation:hxPop .8s cubic-bezier(.3,1.5,.5,1) backwards .75s}
.hx-key img{width:26px;height:auto}
.hx-tri{position:absolute;z-index:0;bottom:-18px;inset-inline-end:-14px;width:88px;height:46px;opacity:.75;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 46'%3E%3Cg fill='%23dead34'%3E%3Cpath d='M8 20 L16 6 L24 20Z'/%3E%3Cpath d='M32 20 L40 6 L48 20Z'/%3E%3Cpath d='M56 20 L64 6 L72 20Z'/%3E%3Cpath d='M20 42 L28 28 L36 42Z'/%3E%3Cpath d='M44 42 L52 28 L60 42Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;animation:hxFade 1s ease backwards 1.1s}
.float-card.hx-card{z-index:3;bottom:34px;inset-inline-start:-40px;inset-inline-end:auto;max-width:285px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(255,255,255,.85);box-shadow:0 26px 50px -24px rgba(20,58,40,.5);animation:hxRise .8s var(--ease) backwards 1s,hxFloat 5.5s ease-in-out 2s infinite alternate}
.hx-card .mk{background:radial-gradient(circle at 30% 25%,#13806f,var(--teal-deep) 75%)}
@keyframes hxFrame{from{opacity:0;transform:translate(-18px,18px)}}
@keyframes hxLift{from{transform:translateY(34px)}}
@keyframes hxZoom{from{transform:scale(1.14)}}
@keyframes hxPop{from{opacity:0;transform:scale(.3) rotate(-40deg)}}
@keyframes hxFloat{to{transform:translateY(-9px)}}

@media (max-width:960px) and (min-width:641px){
  .hero-grid.hx-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:30px}
  .hero-media.hx-media{max-width:330px;padding-block-start:18px;padding-inline-end:20px}
  .hx-frame{bottom:18px;inset-inline-start:20px}
  .hx-key{width:52px;height:52px;top:-8px;inset-inline-start:calc((100% - 20px) / 2 - 26px)}
  .hx-key img{width:22px}
  .float-card.hx-card{inset-inline-start:-24px;bottom:22px;max-width:230px;padding:11px 13px}
  .hx-trust{gap:8px 16px}
}
@media (max-width:640px){
  .hero.hx{padding-top:22px}
  .hx .eyebrow{font-size:.82rem;margin-bottom:10px}
  .hero.hx h1.hx-title{font-size:clamp(1.9rem,8.4vw,2.3rem);margin-bottom:12px}
  .hx .lead{font-size:.98rem;margin-bottom:20px}
  .hx-actions{gap:8px;margin-bottom:20px}
  .hx-btn{min-height:52px}
  .hero-actions .hx-btn-main{flex:1 1 100%;justify-content:space-between}
  .hero-actions .hx-btn-call,.hero-actions .hx-btn-wa{flex:1 1 0;padding-inline:10px 16px}
  .hx-trust{gap:8px 16px;padding-top:16px}
  .hx-trust li{font-size:.82rem;gap:8px}
  .hx-trust-ic{width:28px;height:28px}
  .hero-media.hx-media{max-width:320px;padding-block-start:16px;padding-inline-end:20px;margin-top:4px}
  .hx-frame{bottom:16px;inset-inline-start:20px}
  .hero-media .hx-photo .media{aspect-ratio:4/4.3}
  .hx-key{width:50px;height:50px;top:-9px;inset-inline-start:calc((100% - 20px) / 2 - 25px);box-shadow:0 0 0 5px var(--bg),0 12px 24px -10px rgba(20,58,40,.7)}
  .hx-key img{width:21px}
  .float-card.hx-card{inset-inline-start:-6px;bottom:18px;max-width:240px;padding:11px 13px}
  .hx-tri{width:66px;height:34px;bottom:-14px;inset-inline-end:-8px}
}
@media (prefers-reduced-motion:reduce){
  .hx,.hx *{animation:none!important}
}

/* ═══════════════════════════════════════════
   الرئيسية — بطاقات أقسام الخدمات أسفل الترويسة
   ═══════════════════════════════════════════ */
.hx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px;position:relative}
.hx-tile{--tc:var(--ink);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:14px;min-height:178px;padding:20px 20px 22px;border-radius:22px;background:linear-gradient(180deg,#fff 30%,#fcfbf7);border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--tc);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;animation:hxRise .7s var(--ease) backwards;animation-delay:calc(.55s + var(--i,0) * 90ms);-webkit-tap-highlight-color:transparent}
/* طبقة الكشف التركوازية */
.hx-tile::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 90% at 100% 0%,#127a6d 0%,var(--teal-dark) 45%,var(--teal-deep) 100%);transform:translateY(101%);transition:transform .55s var(--ease)}
/* بقعة ضوء تتبع المؤشر */
.hx-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(216,175,77,.16),transparent 60%);opacity:0;transition:opacity .4s}
.hx-tile-img{position:absolute;inset:0;z-index:-1;background:center/cover no-repeat;opacity:0;mix-blend-mode:luminosity;transform:scale(1.12);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
/* خط ذهبي علوي */
.hx-tile-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}
.hx-tile-top::after{content:"";position:absolute;top:-20px;inset-inline-start:0;width:52px;height:3px;border-radius:0 0 3px 3px;background:var(--gold);transform:scaleX(.45);transform-origin:right;transition:transform .5s var(--ease)}
.hx-tile-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex-shrink:0;color:#fff;background:linear-gradient(150deg,#13806f 0%,var(--teal) 40%,var(--teal-deep) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -12px rgba(20,58,40,.8);transition:background .4s,color .4s,transform .5s var(--ease)}
.hx-tile-ic .i{width:26px;height:26px}
.hx-tile-n{position:absolute;inset-inline-end:-6px;top:-14px;font-family:var(--disp);font-weight:900;font-size:4.6rem;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(33,93,65,.16);pointer-events:none;transition:-webkit-text-stroke-color .4s,transform .6s var(--ease)}
.hx-tile-body{display:flex;flex-direction:column;gap:5px;margin-top:auto;padding-inline-end:46px}
.hx-tile-t{font-family:var(--disp);font-weight:700;font-size:1.12rem;line-height:1.5;transition:color .35s}
.hx-tile-d{font-size:.83rem;line-height:1.7;color:var(--muted);transition:color .35s}
.hx-tile-go{position:absolute;bottom:18px;inset-inline-end:18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--teal);background:transparent;transition:transform .45s var(--ease),background .35s,border-color .35s,color .35s}
.hx-tile-go .i{width:17px;height:17px}

.hx-tile:hover,.hx-tile:focus-visible{transform:translateY(-6px);border-color:transparent;box-shadow:0 30px 60px -28px rgba(20,58,40,.55);--tc:#fff}
.hx-tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.hx-tile:hover::before,.hx-tile:focus-visible::before{transform:none}
.hx-tile:hover::after,.hx-tile:focus-visible::after{opacity:1}
.hx-tile:hover .hx-tile-img.ld,.hx-tile:focus-visible .hx-tile-img.ld{opacity:.2;transform:scale(1)}
.hx-tile:hover .hx-tile-top::after,.hx-tile:focus-visible .hx-tile-top::after{transform:scaleX(1)}
.hx-tile:hover .hx-tile-ic,.hx-tile:focus-visible .hx-tile-ic{background:var(--gold);color:var(--teal-deep);transform:rotate(-6deg) scale(1.04)}
.hx-tile:hover .hx-tile-n,.hx-tile:focus-visible .hx-tile-n{-webkit-text-stroke-color:rgba(216,175,77,.7);transform:translateY(4px)}
.hx-tile:hover .hx-tile-d,.hx-tile:focus-visible .hx-tile-d{color:rgba(255,255,255,.74)}
.hx-tile:hover .hx-tile-go,.hx-tile:focus-visible .hx-tile-go{transform:translateX(-5px);background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.hx-tile:active{transform:translateY(-2px) scale(.99)}

@media (max-width:960px){
  .hx-tiles{grid-template-columns:1fr 1fr;margin-top:40px}
}
@media (max-width:640px){
  .hx-tiles{gap:10px;margin-top:34px}
  .hx-tile{min-height:0;padding:16px 14px 18px;gap:12px;border-radius:18px}
  .hx-tile-top::after{top:-16px;width:44px}
  .hx-tile-ic{width:44px;height:44px;border-radius:13px}
  .hx-tile-ic .i{width:22px;height:22px}
  .hx-tile-n{font-size:3.4rem;top:-10px;inset-inline-end:-4px}
  .hx-tile-t{font-size:.98rem;line-height:1.45}
  .hx-tile-d{font-size:.76rem;line-height:1.65}
  .hx-tile-go{display:none}
  .hx-tile-body{padding-inline-end:0}
}
@media (prefers-reduced-motion:reduce){
  .hx-tile,.hx-tile *{animation:none!important;transition:none!important}
  .hx-tile:hover{transform:none}
}

/* ═══════════════════════════════════════════
   الرؤية والرسالة والقيم — لوحة تركوازية تحريرية
   ═══════════════════════════════════════════ */
.sec.px{padding:84px 0}
.bg-white + .px.bg-white,.bg-gray + .px.bg-gray,.sec + .px.sec:not([class*="bg-"]){padding-top:0}
.px-panel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:50px 54px;border-radius:var(--r-xl);color:#fff;box-shadow:var(--shadow-lg);background:
  radial-gradient(80% 110% at 100% 0%,rgba(28,140,124,.55),transparent 58%),
  radial-gradient(55% 70% at 0% 100%,rgba(216,175,77,.12),transparent 62%),
  linear-gradient(160deg,var(--teal-dark) 0%,var(--teal-deep) 58%,#05302a 100%)}
.px-panel.has-values{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:46px;align-items:stretch}
.px-panel::before{content:"";position:absolute;inset:10px;z-index:-1;border:1px solid rgba(216,175,77,.2);border-radius:calc(var(--r-xl) - 8px);pointer-events:none}
.px-panel::after{content:"";position:absolute;inset:0;z-index:-2;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 1px,transparent 1px 22px);-webkit-mask:radial-gradient(75% 95% at 100% 0%,#000,transparent 72%);mask:radial-gradient(75% 95% at 100% 0%,#000,transparent 72%);pointer-events:none}
.px-wm{position:absolute;z-index:-1;width:250px;aspect-ratio:600/675;top:-46px;inset-inline-end:35%;background:var(--gold);opacity:.07;-webkit-mask:url(/img/mark.svg) center/contain no-repeat;mask:url(/img/mark.svg) center/contain no-repeat;transform:rotate(-8deg);pointer-events:none}

.px-head{max-width:640px;margin-bottom:34px}
.px-head .tag{background:rgba(255,255,255,.1);margin-bottom:14px}
.px-head h2{font-size:clamp(1.6rem,3.1vw,2.25rem);line-height:1.42;color:#fff}
.px-head h2 mark{color:var(--ink)}
.px-head p{color:rgba(255,255,255,.72);margin-top:10px;max-width:56ch}

.px-stmts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:40px}
.px-stmt{position:relative;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.px-stmt::before{content:"";position:absolute;top:-1px;inset-inline:0;height:2px;background:linear-gradient(270deg,var(--gold),rgba(216,175,77,.2));transform-origin:right;transform:scaleX(.16);transition:transform .7s var(--ease)}
.px-stmt-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.px-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:var(--gold);background:rgba(216,175,77,.1);box-shadow:inset 0 0 0 1px rgba(216,175,77,.38);transition:background .35s,color .35s,transform .5s var(--ease),box-shadow .35s}
.px-ic .i{width:24px;height:24px}
.px-n{font-family:var(--disp);font-weight:900;font-size:3rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(216,175,77,.6);transition:color .4s,transform .5s var(--ease)}
.px-stmt h3{font-size:1.32rem;line-height:1.5;color:#fff;margin-bottom:8px}
.px-stmt p{color:rgba(255,255,255,.76);font-size:.97rem;line-height:1.95}
.px-stmt:hover::before{transform:scaleX(1)}
.px-stmt:hover .px-ic{background:var(--gold);color:var(--teal-deep);box-shadow:none;transform:rotate(-8deg)}
.px-stmt:hover .px-n{color:rgba(216,175,77,.92);transform:translateY(-3px)}

/* بطاقة القيم */
.px-vals{position:relative;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);border-radius:22px;padding:24px 22px 18px;box-shadow:0 34px 60px -30px rgba(0,0,0,.55)}
.px-vals + .px-vals{grid-column:2}
.px-vals-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.px-vals-head .px-ic{background:var(--teal-deep);color:var(--gold);box-shadow:none}
.px-vals-head h3{font-size:1.3rem;line-height:1.4}
.px-vals-head p{font-size:.84rem;color:var(--muted);line-height:1.6}
.px-vals-head .px-n{margin-inline-start:auto;font-size:2.5rem;-webkit-text-stroke-color:rgba(33,93,65,.32)}
.px-vlist{list-style:none;display:grid;gap:2px;margin-top:10px;flex:1;align-content:space-evenly}
.px-vlist li{position:relative;display:flex;align-items:center;gap:13px;padding:9px 10px;border-radius:14px;transition:background .3s,transform .4s var(--ease)}
.px-vlist li::after{content:"";width:6px;height:6px;margin-inline-start:auto;background:var(--gold);transform:rotate(45deg);opacity:.55;flex-shrink:0;transition:opacity .3s,transform .4s var(--ease)}
.px-vic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:var(--teal-soft);color:var(--teal);transition:background .3s,color .3s,transform .45s var(--ease)}
.px-vic .i{width:21px;height:21px}
.px-vt b{display:block;font-family:var(--disp);font-weight:700;font-size:1.06rem;line-height:1.5}
.px-vt small{display:block;font-size:.8rem;color:var(--muted);line-height:1.6}
.px-vlist li:hover{background:#fff;transform:translateX(-4px)}
.px-vlist li:hover .px-vic{background:var(--teal);color:#fff;transform:rotate(-8deg)}
.px-vlist li:hover::after{opacity:1;transform:rotate(45deg) scale(1.3)}

/* تتابع الظهور */
.px-panel.in .px-head > *{animation:hxRise .8s var(--ease) backwards}
.px-panel.in .px-head > :nth-child(2){animation-delay:.08s}
.px-panel.in .px-head > :nth-child(3){animation-delay:.16s}
.px-panel.in .px-stmt{animation:hxRise .8s var(--ease) backwards;animation-delay:calc(.22s + var(--i,0) * 120ms)}
.px-panel.in .px-stmt::before{animation:pxRule 1.1s var(--ease) backwards;animation-delay:calc(.5s + var(--i,0) * 120ms)}
.px-panel.in .px-vals{animation:hxRise .9s var(--ease) backwards;animation-delay:.32s}
.px-panel.in .px-vlist li{animation:pxSlide .7s var(--ease) backwards;animation-delay:calc(.6s + var(--j,0) * 90ms)}
.px-panel.in .px-wm{animation:pxWm 1.4s var(--ease) backwards .2s}
.px-head h2 mark{background-size:100% 34%;background-image:linear-gradient(var(--yellow),var(--yellow));background-repeat:no-repeat;background-position:100% 88%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.px-panel.in .px-head h2 mark{animation:hxMark .9s var(--ease) backwards .55s}
@keyframes pxRule{from{transform:scaleX(0)}}
@keyframes pxSlide{from{opacity:0;transform:translateX(18px)}}
@keyframes pxWm{from{opacity:0;transform:rotate(-8deg) translateY(30px) scale(.92)}}

@media (max-width:960px){
  .sec.px{padding:72px 0}
  .px-panel{padding:38px 32px}
  .px-panel.has-values{grid-template-columns:minmax(0,1fr);gap:30px}
  .px-vals + .px-vals{grid-column:auto}
  .px-vlist{grid-template-columns:1fr 1fr;column-gap:8px}
  .px-wm{inset-inline-end:-40px;bottom:auto;top:-40px;width:260px}
}
@media (max-width:640px){
  .sec.px{padding:56px 0}
  .px-panel{padding:30px 20px 22px;border-radius:24px}
  .px-panel::before{inset:7px;border-radius:19px}
  .px-head{margin-bottom:24px}
  .px-stmts{grid-auto-flow:row;gap:24px}
  .px-stmt{padding-top:18px}
  .px-stmt-top{margin-bottom:10px}
  .px-ic{width:42px;height:42px}
  .px-ic .i{width:21px;height:21px}
  .px-n{font-size:2.4rem}
  .px-stmt h3{font-size:1.18rem;margin-bottom:4px}
  .px-stmt p{font-size:.93rem;line-height:1.85}
  .px-vals{padding:18px 14px 12px;border-radius:18px;margin-inline:-6px}
  .px-vlist{grid-template-columns:1fr 1fr;gap:4px}
  .px-vlist li{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 10px;background:#fff;border:1px solid var(--line)}
  .px-vlist li::after{display:none}
  .px-vt b{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .px-panel *{animation:none!important}
}

/* ═══════════════════════════════════════════
   ترويسة الصفحات الداخلية (تشمل قوالب الصفحات التي تستخدم .phero)
   ═══════════════════════════════════════════ */
.phero{padding:30px 0 0;isolation:isolate;overflow:clip}
.phero::before{content:"";position:absolute;z-index:-1;width:860px;aspect-ratio:1;left:calc(max(24px,50% - 568px) + 170px - 430px);top:calc(50% - 450px);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 52px,rgba(33,93,65,.08) 52px 53px);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);pointer-events:none}
.phero::after{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(640px 340px at 12% 10%,rgba(33,93,65,.08),transparent 70%),linear-gradient(180deg,rgba(241,240,234,.0),rgba(241,240,234,.55));pointer-events:none}
.phero.no-img::before{left:calc(max(24px,50% - 520px) + 90px - 430px)}
.phero .phero-deco{inset-inline-end:max(24px,50% - 520px);top:50%;width:180px;opacity:.09;transform:translateY(-58%) rotate(-6deg);animation:pgDeco 1.4s var(--ease) backwards .2s}
.phero:not(.no-img) .phero-deco{display:none}

/* مسار التنقل في كبسولة */
.phero .crumbs{display:inline-flex;max-width:100%;gap:8px;margin-bottom:24px;padding:6px 16px;border-radius:18px;background:rgba(255,255,255,.78);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:.8rem;line-height:1.7;animation:hxRise .7s var(--ease) backwards}
.phero .crumbs li{gap:8px}
.phero .crumbs li+li::before{background:var(--gold);width:5px;height:5px}
.phero .crumbs a{position:relative;transition:color .2s}
.phero .crumbs a::after{content:"";position:absolute;inset-inline:0;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.phero .crumbs a:hover::after,.phero .crumbs a:focus-visible::after{transform:scaleX(1)}
.phero .crumbs [aria-current]{color:var(--ink);font-weight:500}

@media (min-width:961px){.phero-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:56px;align-items:center}}
.phero .tag{animation:hxRise .7s var(--ease) backwards .06s}
.phero h1{font-size:clamp(2rem,4.1vw,3.05rem);line-height:1.38;margin-bottom:14px;animation:hxRise .8s var(--ease) backwards .12s}
.phero.no-img h1{font-size:clamp(2.1rem,4.6vw,3.3rem);max-width:24ch}
.phero h1 mark{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 100% 88%/100% 34%;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:hxMark .9s var(--ease) backwards .7s}
.phero .lead{font-size:1.06rem;max-width:60ch;animation:hxRise .8s var(--ease) backwards .2s}
.phero .post-meta,.phero .hero-actions,.phero .pg-btn{animation:hxRise .8s var(--ease) backwards .28s}

/* زر بفقاعة سهم */
.pg-btn{position:relative;isolation:isolate;overflow:hidden;padding:7px 8px;padding-inline-start:22px;gap:14px;border-radius:13px;box-shadow:0 14px 28px -16px rgba(33,93,65,.7)}
.pg-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.24) 50%,transparent 65%);transform:translateX(100%);transition:transform .9s var(--ease)}
.pg-bub{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:background .3s,color .3s}
.pg-bub .i{transition:transform .35s var(--ease)}
.pg-btn:hover::after,.pg-btn:focus-visible::after{transform:translateX(-100%)}
.pg-btn:hover .pg-bub,.pg-btn:focus-visible .pg-bub{background:var(--yellow);color:var(--ink)}
.pg-btn:hover .pg-bub .i,.pg-btn:focus-visible .pg-bub .i{transform:translateX(-3px)}
.pg-btn:active{transform:scale(.97)}

/* الصورة: قوس مربع بإطار ذهبي مُزاح وحجر قوس */
.pg-media{position:relative;width:100%;max-width:330px;justify-self:end;padding-block-start:18px;padding-inline-end:22px}
.pg-frame{position:absolute;top:0;bottom:18px;inset-inline-start:22px;inset-inline-end:0;border:1.5px solid var(--gold);border-radius:150px 150px 24px 24px;opacity:.6;animation:hxFrame 1.2s var(--ease) backwards .3s}
.phero .pg-media .media{aspect-ratio:1/1;max-height:none;border-radius:150px 150px 24px 24px;box-shadow:0 34px 60px -36px rgba(20,58,40,.6);animation:hxLift 1s var(--ease) backwards .1s}
.pg-media .media img{animation:hxZoom 1.7s var(--ease) backwards .1s}
.pg-key{position:absolute;z-index:2;top:-4px;inset-inline-start:calc((100% - 22px) / 2 - 22px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#13806f,var(--teal-deep) 70%);box-shadow:0 0 0 5px var(--bg),0 10px 22px -8px rgba(20,58,40,.6);animation:hxPop .8s cubic-bezier(.3,1.5,.5,1) backwards .7s}
.pg-key img{width:19px;height:auto}
/* صور قوالب الصفحات الأخرى داخل .phero-grid */
.phero .phero-grid > .media{aspect-ratio:1/1;max-height:none;width:100%;max-width:310px;justify-self:end;margin:12px;outline:1.5px solid rgba(216,175,77,.55);outline-offset:10px;box-shadow:0 34px 60px -36px rgba(20,58,40,.6);animation:hxLift 1s var(--ease) backwards .1s}

/* الخط السفلي: إفريز مثلثات نجدية */
.phero-line{position:relative;height:12px;margin-top:46px;background:none}
.phero-line::before{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:linear-gradient(270deg,var(--line-2),var(--line-2) 70%,rgba(217,214,202,0))}
.phero-line::after{content:"";position:absolute;bottom:1px;inset-inline-start:0;width:168px;height:9px;background:var(--gold);opacity:.6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 9 L7 1 L13 9Z'/%3E%3C/svg%3E") repeat-x right bottom/14px 9px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 9 L7 1 L13 9Z'/%3E%3C/svg%3E") repeat-x right bottom/14px 9px;transform-origin:right;animation:pgRule 1.1s var(--ease) backwards .45s}
@media (min-width:641px) and (max-width:960px){
  .phero:not(.no-img) .phero-grid{grid-template-columns:minmax(0,1fr) 250px;gap:32px;align-items:center}
  .phero .pg-media,.phero .phero-grid > .media{justify-self:end}
}
@keyframes pgRule{from{transform:scaleX(0)}}
@keyframes pgDeco{from{opacity:0;transform:translateY(-50%) rotate(-14deg) scale(.9)}}

@media (max-width:960px){
  .phero::before{width:560px;left:-200px;top:-260px}
  .phero .phero-deco{display:block;inset-inline-end:var(--gut);top:24px;width:96px;opacity:.07;transform:rotate(-6deg);animation-name:hxFade}
  .phero:not(.no-img) .phero-deco{display:none}
  .pg-media{justify-self:start;max-width:300px}
  .phero .phero-grid > .media{justify-self:start}
}
@media (max-width:640px){
  .phero{padding-top:20px}
  .phero .crumbs{margin-bottom:18px;font-size:.76rem;padding:5px 13px}
  .phero h1,.phero.no-img h1{font-size:clamp(1.8rem,7.6vw,2.2rem)}
  .phero .lead{font-size:.98rem}
  .phero-grid{gap:26px}
  .pg-media{max-width:none;padding-block-start:14px;padding-inline-end:16px}
  .pg-frame{bottom:14px;inset-inline-start:16px;border-radius:130px 130px 20px 20px}
  .phero .pg-media .media{aspect-ratio:16/10.5;border-radius:130px 130px 20px 20px}
  .pg-key{width:40px;height:40px;top:-6px;inset-inline-start:calc((100% - 16px) / 2 - 20px)}
  .phero .phero-grid > .media{aspect-ratio:16/11;max-width:none;width:calc(100% - 24px)}
  .phero-line{margin-top:34px}
  .phero-line::after{width:112px}
}
@media (prefers-reduced-motion:reduce){
  .phero,.phero *,.phero::before,.phero::after{animation:none!important}
}

/* ═══════════════════════════════════════════
   ترويسة صفحات الهبوط مع النموذج
   ═══════════════════════════════════════════ */
.lhero.lh{position:relative;isolation:isolate;text-align:start;padding:34px 0 30px}
.lh-bg{position:absolute;inset:-40px 0 0;z-index:-1;overflow:hidden;pointer-events:none}
.lh-bg::before{content:"";position:absolute;width:820px;height:820px;inset-inline-end:-180px;top:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(33,93,65,.14),rgba(33,93,65,0))}
.lh-bg::after{content:"";position:absolute;width:560px;height:520px;inset-inline-start:-80px;bottom:-60px;background:repeating-linear-gradient(45deg,rgba(33,93,65,.06) 0 1px,transparent 1px 26px),repeating-linear-gradient(-45deg,rgba(33,93,65,.06) 0 1px,transparent 1px 26px);-webkit-mask:radial-gradient(closest-side,#000 20%,transparent);mask:radial-gradient(closest-side,#000 20%,transparent)}
.lh-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:56px;align-items:center}
.lh-in{animation:hxRise .85s var(--ease) backwards;animation-delay:calc(var(--d,0) * 110ms + 60ms)}
.lhero.lh h1{font-size:clamp(1.95rem,3.9vw,3rem);line-height:1.4;max-width:20ch;margin:0 0 14px}
.lh h1 mark{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 100% 88%/100% 34%;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:hxMark 1s var(--ease) backwards .8s}
.lhero.lh .lead{font-size:1.05rem;max-width:52ch;margin:0 0 20px}

/* شارات الثقة */
.lh-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.lh-trust li{display:flex;align-items:center;gap:9px;padding:5px 14px 5px 6px;padding-inline:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:.86rem;font-weight:500;color:var(--ink-2);line-height:1.5;transition:border-color .3s,transform .35s var(--ease)}
.lh-tic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--teal-soft);color:var(--teal);transition:background .3s,color .3s}
.lh-tic .i{width:15px;height:15px}
.lh-trust li:hover{border-color:rgba(33,93,65,.4);transform:translateY(-2px)}
.lh-trust li:hover .lh-tic{background:var(--teal);color:#fff}

/* الصورة: نافذة قوس عريضة بإطار ذهبي */
.lh-media{position:relative;margin-top:30px;max-width:520px;padding-block-start:16px;padding-inline-end:20px}
.lh-frame{position:absolute;top:0;bottom:16px;inset-inline-start:20px;inset-inline-end:0;border:1.5px solid var(--gold);border-radius:200px 200px 24px 24px;opacity:.55}
.lh-media .media{aspect-ratio:2/1;border-radius:200px 200px 24px 24px;box-shadow:0 30px 60px -36px rgba(20,58,40,.55)}
.lh-media .media img{transition:transform 1s var(--ease)}
.lh-media:hover .media img{transform:scale(1.04)}
.lh-key{position:absolute;z-index:2;top:-4px;inset-inline-start:calc((100% - 20px) / 2 - 22px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#13806f,var(--teal-deep) 70%);box-shadow:0 0 0 5px var(--bg),0 10px 22px -8px rgba(20,58,40,.6)}
.lh-key img{width:19px;height:auto}

/* مكان النموذج: إطار ذهبي خلفي وتوهج — دون المساس بالنموذج نفسه */
.lh-form{position:relative;z-index:0}
.lh-form::before{content:"";position:absolute;z-index:-1;top:-16px;bottom:26px;inset-inline-start:26px;inset-inline-end:-16px;border:1.5px solid rgba(216,175,77,.5);border-radius:34px;pointer-events:none;animation:hxFrame 1.2s var(--ease) backwards .4s}
.lh-form::after{content:"";position:absolute;z-index:-2;inset:12% 6% -4%;border-radius:50%;background:radial-gradient(closest-side,rgba(33,93,65,.25),transparent);filter:blur(10px);pointer-events:none}
.lh-form .frame{margin:0;max-width:none}

@media (max-width:960px){
  .lh-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .lh-media{display:none}
  .lh-form{max-width:640px;width:100%}
}
@media (max-width:640px){
  .lhero.lh{padding:18px 0 14px}
  .lhero.lh h1{font-size:clamp(1.7rem,7.2vw,2.05rem);line-height:1.42;margin-bottom:10px}
  .lhero.lh .lead{font-size:.95rem;line-height:1.8;margin-bottom:14px}
  .lh-trust{gap:6px}
  .lh-trust li{font-size:.78rem;padding-inline:4px 11px;gap:7px}
  .lh-tic{width:24px;height:24px}
  .lh-tic .i{width:13px;height:13px}
  .lh-grid{gap:20px}
  .lh-form::before{top:-10px;inset-inline-end:-8px;inset-inline-start:18px;border-radius:30px}
}
@media (prefers-reduced-motion:reduce){
  .lh,.lh *,.lh-form::before{animation:none!important}
}

/* ═══════════════════════════════════════════
   نبذة مع صورة
   ═══════════════════════════════════════════ */
.sec.ab{padding:84px 0}
.bg-white + .ab.bg-white,.bg-gray + .ab.bg-gray{padding-top:0}
.ab-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:64px;align-items:stretch}
.ab-grid.img-end .ab-media{order:2}
.ab-media{position:relative;min-height:430px;padding-block-end:24px;padding-inline-end:24px}
.ab-block{position:absolute;inset-block:44px 0;inset-inline:44px 0;border-radius:28px;border-start-start-radius:190px;overflow:hidden;background:radial-gradient(90% 70% at 100% 100%,rgba(28,140,124,.5),transparent 60%),linear-gradient(160deg,var(--teal-dark),var(--teal-deep));transition:transform .9s var(--ease) .15s}
.ab-block::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 18px)}
.ab-block::after{content:"";position:absolute;width:110px;aspect-ratio:600/675;inset-inline-end:16px;bottom:-26px;background:var(--gold);opacity:.22;-webkit-mask:url(/img/mark.svg) center/contain no-repeat;mask:url(/img/mark.svg) center/contain no-repeat}
.ab-photo{position:relative;z-index:1;height:100%}
.ab-photo .media{height:100%;border-radius:28px;border-start-start-radius:190px;box-shadow:0 34px 70px -40px rgba(20,58,40,.6)}
.ab-photo .media img{transition:transform 1.4s var(--ease)}
html:not(.no-js) .ab-media.rv:not(.in) .media img{transform:scale(1.1)}
html:not(.no-js) .ab-media.rv:not(.in) .ab-block{transform:translate(26px,-26px)}
.ab-media:hover .media img{transform:scale(1.035)}
.ab-badge{position:absolute;z-index:2;bottom:52px;inset-inline-start:-20px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 20px);padding:8px 16px 8px 8px;padding-inline:8px 16px;border-radius:16px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 40px -22px rgba(20,58,40,.55);font-family:var(--disp);font-weight:700;font-size:.92rem;line-height:1.5;color:var(--ink);transition:transform .5s var(--ease)}
.ab-badge-mk{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:radial-gradient(circle at 30% 25%,#13806f,var(--teal-deep) 75%)}
.ab-badge-mk img{width:15px;height:auto}
.ab-media.in .ab-badge{animation:hxRise .8s var(--ease) backwards .5s}
.ab-media:hover .ab-badge{transform:translateY(-4px)}

.ab-copy{align-self:center}
.ab-copy h2{font-size:clamp(1.6rem,3.1vw,2.3rem);line-height:1.45;margin-bottom:16px}
.ab-copy h2 mark{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 100% 88%/100% 34%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ab-copy.in h2 mark{animation:hxMark 1s var(--ease) backwards .45s}
.ab-intro{color:var(--muted);margin-bottom:14px;font-size:1.04rem}
.ab-prose{position:relative;padding-inline-start:22px;font-size:.99rem;line-height:1.95;color:var(--muted)}
.ab-prose::before{content:"";position:absolute;inset-inline-start:0;top:.55em;bottom:.55em;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--gold),rgba(216,175,77,.08))}
.ab-prose > p:first-child{color:var(--ink-2);font-size:1.06rem}
.ab-prose > * + *{margin-top:.85em}
.ab-copy.in .ab-prose::before{animation:abRule 1.2s var(--ease) backwards .35s}
@keyframes abRule{from{transform:scaleY(0);transform-origin:top}}

.ab-btn{position:relative;isolation:isolate;overflow:hidden;margin-top:26px;padding:7px 8px;padding-inline-start:22px;gap:14px;border-radius:13px}
.ab-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);transform:translateX(100%);transition:transform .9s var(--ease)}
.ab-bub{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.12);transition:background .3s,color .3s}
.ab-bub .i{transition:transform .35s var(--ease)}
.ab-btn:hover::after,.ab-btn:focus-visible::after{transform:translateX(-100%)}
.ab-btn:hover .ab-bub,.ab-btn:focus-visible .ab-bub{background:var(--yellow);color:var(--ink)}
.ab-btn:hover .ab-bub .i,.ab-btn:focus-visible .ab-bub .i{transform:translateX(-3px)}
.ab-btn:active{transform:scale(.97)}
.bg-teal .ab-prose,.bg-ink .ab-prose{color:rgba(255,255,255,.78)}
.bg-teal .ab-prose > p:first-child,.bg-ink .ab-prose > p:first-child{color:#fff}

@media (max-width:960px){
  .sec.ab{padding:72px 0}
  .ab-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .ab-grid.img-end .ab-media{order:0}
  .ab-media{min-height:0;max-width:640px}
  .ab-photo .media{height:auto;aspect-ratio:16/10}
}
@media (max-width:640px){
  .sec.ab{padding:56px 0}
  .ab-grid{gap:30px}
  .ab-media{padding-block-end:16px;padding-inline-end:16px}
  .ab-block{inset-block:30px 0;inset-inline:30px 0;border-start-start-radius:120px}
  .ab-photo .media{aspect-ratio:16/11;border-start-start-radius:120px;border-radius:22px;border-start-start-radius:120px}
  .ab-block{border-radius:22px;border-start-start-radius:120px}
  .ab-badge{inset-inline-start:10px;bottom:30px;font-size:.82rem;padding-inline:6px 12px}
  .ab-badge-mk{width:30px;height:30px;border-radius:9px}
  .ab-prose{padding-inline-start:16px;font-size:.95rem;line-height:1.9}
  .ab-prose > p:first-child{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .ab-media .media img,.ab-block{transform:none!important;transition:none!important}
  .ab-media *,.ab-copy *{animation:none!important}
}