@font-face{font-family:PlexArabic;src:url('arabic.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
:root{--navy:#072d6b;--blue:#0764c5;--green:#2abc55;--muted:#838ea6}
.distinction{position:relative;isolation:isolate;overflow:hidden;min-height:850px;padding:30px clamp(25px,5.2vw,110px) 94px;background:radial-gradient(ellipse at 49% 40%,#ffffffa3 0%,#eff9ff88 48%,#e8f5ff 100%);font-family:PlexArabic,Tahoma,Arial,sans-serif;color:var(--navy)}
.distinction *{box-sizing:border-box}
.distinction button{font:inherit;color:inherit;cursor:pointer}
.distinction button:focus-visible{outline:3px solid #1fa951;outline-offset:5px}
.distinction button:disabled{cursor:default}
.atmosphere{position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse at 4% 20%,#fff 0%,transparent 43%),radial-gradient(ellipse at 92% 15%,#fff,transparent 45%),linear-gradient(165deg,transparent 45%,#ffffff9c 70%,transparent 85%)}
.atmosphere:before,.atmosphere:after{content:'';position:absolute;width:460px;height:650px;background:#ffffff6b;border-radius:50%;top:-370px;transform:rotate(-35deg);left:-160px}
.atmosphere:after{left:auto;right:-100px;top:-270px;transform:rotate(40deg)}
.three-layer{position:absolute;inset:0;z-index:-1;pointer-events:none}
.three-layer canvas{display:block;pointer-events:none!important;width:100%;height:100%}
.environmental-sweep{position:absolute;z-index:-2;pointer-events:none;left:1%;top:175px;width:450px;height:370px;border-radius:68% 32% 70% 30%;border-left:55px solid #43c9b019;border-top:25px solid #43c9b013;transform:rotate(-25deg)}
.environmental-sweep:after{content:'';position:absolute;inset:-40px;border:1px solid #a4ddff4d;border-radius:inherit}
.section-header{text-align:center;position:relative;z-index:1}
.heading-accent{display:block;background:linear-gradient(90deg,#60c6f9 0 48%,#31bd51 48%);width:49px;height:3px;border-radius:9px;margin:0 auto 15px}
.distinction h1{margin:0 0 9px;font-size:clamp(30px,2.65vw,49px);line-height:1.45;font-weight:700;letter-spacing:-.4px}
.section-header>p{font-size:clamp(14px,1.1vw,19px);line-height:1.95;margin:0;color:var(--muted);font-weight:400}
.ecosystem{position:relative;max-width:1720px;margin:51px auto 0;display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,20.5vw,380px) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:70px 25px;align-items:center;direction:rtl}
.feature{position:relative;isolation:isolate;min-height:235px;display:flex;align-items:center;border:1px solid #ffffffbd;background:linear-gradient(120deg,#ffffffdf,#ffffff8c);box-shadow:0 14px 50px #599cdc08;border-radius:44px;transition:box-shadow .3s,border-color .3s}
.feature:hover,.feature.selected{border-color:#c3e2f4;box-shadow:0 15px 50px #5398cf15}
.feature-right{padding:27px 34% 22px 27px}
.feature-left{padding:27px 27px 22px 34%}
.local{grid-column:1;grid-row:1}
.partnerships{grid-column:3;grid-row:1}
.capabilities{grid-column:1;grid-row:2}
.governance{grid-column:3;grid-row:2}
.feature-copy{width:100%;position:relative;z-index:2}
.feature h2{margin:0;font-size:clamp(15px,1.07vw,20px);line-height:1.8;font-weight:700;white-space:normal}
.small-accent{display:block;height:2px;background:var(--green);width:35px;margin:9px 0 10px}
.feature p{font-size:clamp(13px,.99vw,17px);line-height:1.8;color:var(--muted);margin:0 0 15px;font-weight:400}
.discover{background:none;border:0;padding:2px 0;display:flex;gap:14px;align-items:center;font-size:clamp(12px,.85vw,15px);font-weight:700;line-height:1.5;text-decoration:none;color:inherit}
.discover span{border:1px solid #1a63b8;border-radius:50%;width:37px;height:37px;display:grid;place-items:center;font-family:Arial;font-size:20px;transition:background .2s,color .2s,transform .2s}
.discover:hover span{background:#0860b8;color:white;transform:translateX(-3px)}
.icon-badge{position:absolute;top:-29px;background:linear-gradient(130deg,#eff9ff,#fff);width:82px;height:82px;border-radius:50%;display:grid;place-items:center;color:#0860bd;box-shadow:0 10px 24px #90b7cc0b;z-index:4;overflow:hidden}
.icon-badge img{width:100%;height:100%;object-fit:contain;padding:16px}
.feature-right .icon-badge{left:-18px}
.feature-left .icon-badge{right:-18px}
.icon-badge svg{width:38px;height:38px}

/* background photo — driven per-card by --feature-photo, set inline from the CMS `photo` field */
.feature-photo{position:absolute;top:-12px;bottom:-12px;width:36%;z-index:0;background-image:var(--feature-photo);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.9;pointer-events:none}
.feature-right .feature-photo{right:-10px;border-radius:8% 75% 9% 60%;mask-image:linear-gradient(270deg,#000 60%,transparent 100%)}
.feature-left .feature-photo{left:-10px;border-radius:75% 8% 60% 9%;mask-image:linear-gradient(90deg,#000 60%,transparent 100%)}

.hub{position:relative;grid-column:2;grid-row:1/3;aspect-ratio:1;width:100%;border-radius:50%;background:radial-gradient(circle,#f6fcff 30%,#eef9ff 72%,#d9efff 100%);border:12px solid #ffffffcf;box-shadow:0 0 0 12px #d9effb44,0 0 0 25px #edf8ff9e,inset 0 0 18px #bcdeef55;display:grid;place-items:center;z-index:2}
.hub-ring{position:absolute;inset:-29px;border:1px dashed #52c8e9a6;border-radius:50%;pointer-events:none}
.hub-content{text-align:center;width:100%;padding:13px 14px;position:relative}
.logo-crop{width:100%;max-width:210px;height:clamp(58px,7.2vw,92px);margin:0 auto;display:flex;align-items:center;justify-content:center}
.logo-crop img{max-width:100%;max-height:100%;object-fit:contain}
.hub-motto{font-size:clamp(12px,.89vw,16px);margin:16px 0 14px}
.hub .heading-accent{margin-bottom:0;background:#2ebb50}
.orbit-node{position:absolute;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#b3f2be,#39c87a 65%,#139f77);border:1px solid white;box-shadow:0 0 0 9px #d8f0ffb8,0 0 16px #93ddcb44;z-index:4;transform:translate(50%,-50%)}
.n0{right:3%;top:3%}
.n1{right:97%;top:3%}
.n2{right:3%;top:97%}
.n3{right:97%;top:97%}
.detail-dialog{border:1px solid #cfebf6;border-radius:28px;padding:40px;max-width:550px;width:calc(100% - 32px);color:var(--navy);background:#f7fcff;box-shadow:0 35px 120px #042e6b25;text-align:right;font-family:PlexArabic,Tahoma,Arial,sans-serif}
.detail-dialog::backdrop{background:#082c5840;backdrop-filter:blur(6px)}
.close-dialog{position:absolute;left:15px;top:10px;border:0;background:transparent;font:30px Arial;color:#6b91ad;padding:5px 8px}
.detail-dialog h2{font-size:24px;line-height:1.7;margin:22px 0 14px}
.detail-dialog p{color:#6f829a;line-height:2;font-size:17px}
.dialog-back{background:none;border:0;color:#0564b3;padding:10px 0;display:flex;gap:20px;font-size:15px}
.detail-dialog .heading-accent{margin-right:0}
.distinction[data-static=true] .feature{transition:none}
@media(min-width:1650px){.distinction{padding-top:27px;min-height:832px}.ecosystem{margin-top:56px;gap:72px 28px}.feature{min-height:238px}.icon-badge{width:88px;height:88px}.feature-right{padding-right:34%;padding-left:35px}.feature-left{padding-left:34%;padding-right:35px}.hub{border-width:13px}.section-header>p{font-size:18px}}
@media(max-width:1150px){.distinction{padding-inline:30px}.ecosystem{grid-template-columns:minmax(0,1fr) 235px minmax(0,1fr);gap:56px 24px}.feature-right{padding-right:25%;padding-left:18px}.feature-left{padding-left:25%;padding-right:18px}.feature-photo{width:30%;opacity:.55}.feature h2{font-size:15px}.feature p{font-size:13px}.hub-motto{font-size:10px}.logo-crop{max-width:160px;height:clamp(46px,8vw,70px)}.icon-badge{width:66px;height:66px}.icon-badge svg{width:31px;height:31px}.hub-content{padding-inline:0}}
@media(max-width:850px){.distinction{padding:35px 24px 85px;min-height:100vh}.section-header>p{font-size:14px;line-height:1.95}.wide-break{display:none}.ecosystem{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:48px 24px;margin-top:49px}.hub{grid-column:1/-1;grid-row:1;width:270px;justify-self:center;margin:15px 0 22px}.hub-motto{font-size:12px}.logo-crop{max-width:150px;height:56px}.local{grid-column:1;grid-row:2}.partnerships{grid-column:2;grid-row:2}.capabilities{grid-column:1;grid-row:3}.governance{grid-column:2;grid-row:3}.feature{min-height:265px;padding:50px 22px 22px;border-radius:32px}.feature-photo{opacity:.2;width:45%;bottom:0;top:0}.feature-copy{max-width:none}.feature h2{font-size:16px}.feature p{font-size:14px}.icon-badge,.feature-right .icon-badge,.feature-left .icon-badge{right:22px;left:auto;top:-25px}.environmental-sweep{top:250px;opacity:.55}.feature-photo{mask-image:linear-gradient(270deg,#000,transparent)!important}}
@media(max-width:540px){.distinction{padding:27px 21px 76px}.section-header h1{font-size:30px}.section-header>p{font-size:14px}.ecosystem{grid-template-columns:1fr;gap:42px;margin-top:38px}.hub{grid-column:1;grid-row:1;width:258px;margin:18px 0 28px}.logo-crop{max-width:140px;height:52px}.local{grid-column:1;grid-row:2}.partnerships{grid-column:1;grid-row:3}.capabilities{grid-column:1;grid-row:4}.governance{grid-column:1;grid-row:5}.feature{min-height:238px;padding:41px 23px 23px}.feature h2{font-size:17px;max-width:95%}.feature p{font-size:14px;max-width:88%;line-height:1.9}.feature-photo{width:36%;opacity:.2}.discover{font-size:13px}.detail-dialog{padding:38px 25px 25px}.detail-dialog h2{font-size:21px}.orbit-node{width:18px;height:18px}}
.feature-photo{top:50%;bottom:auto;aspect-ratio:.82;transform:translateY(-50%)}
.feature-left .feature-photo{mask-image:linear-gradient(90deg,#000 40%,transparent 77%)}
.feature-right .feature-photo{mask-image:linear-gradient(270deg,#000 58%,transparent 100%)}
@media(min-width:851px){.feature{padding-top:42px}.icon-badge{top:-48px}.hub-content{padding-inline:8px}.feature h2{line-height:1.65}}
@media(max-width:850px){.feature-photo{mask-image:linear-gradient(270deg,#000 25%,transparent 90%)!important}.feature-left .feature-photo{mask-image:linear-gradient(90deg,#000 25%,transparent 75%)!important}}
@media(prefers-reduced-motion:reduce){.distinction *{scroll-behavior:auto!important;transition:none!important}.distinction .feature{transform:none!important;opacity:1!important}}