:root{
  --navy:#03045e;
  --navy-deep:#01021f;
  --blue:#023e8a;
  --cyan:#4bc9f1;
  --coral:#ff8a5b;
  --paper:#eef2f8;
  --paper-2:#dde5f0;
  --ink:#0a0b2e;
  --m:clamp(38px,4.6vw,64px);      /* وحدة الشبكة المستمدة من الشعار */
  --pad:clamp(20px,5vw,88px);
  --maxw:1320px;
  --f-sm:clamp(.82rem,.35vw + .74rem,.94rem);
  --f-body:clamp(1rem,.5vw + .88rem,1.18rem);
  --f-lead:clamp(1.18rem,1vw + .95rem,1.65rem);
  --f-h3:clamp(1.35rem,1.3vw + 1rem,2.05rem);
  --f-h2:clamp(1.75rem,2.4vw + .9rem,3.2rem);
  --f-h1:clamp(2.15rem,3.3vw + 1.1rem,4.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--navy-deep);color:#fff;
  font-family:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  font-weight:300;font-size:var(--f-body);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sect{position:relative;padding:clamp(72px,10vw,160px) 0}
section[id]{scroll-margin-top:88px}

/* ——— جدار الوحدات: نسيج المكعبات من هوية قمة ——— */
.hero .tile-wall{
  background-image:
    linear-gradient(to left,rgba(3,4,94,.075) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(3,4,94,.075) 1px,transparent 1px);
  mask-image:radial-gradient(125% 100% at 80% 10%,#000 34%,transparent 84%);
  -webkit-mask-image:radial-gradient(125% 100% at 80% 10%,#000 34%,transparent 84%);
}
.hero .tile-wall::after{opacity:.12}
.tile-wall{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to left,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:var(--m) var(--m);
  mask-image:radial-gradient(120% 90% at 85% 10%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 85% 10%,#000 25%,transparent 78%);
}
.tile-wall.light{
  background-image:
    linear-gradient(to left,rgba(3,4,94,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(3,4,94,.07) 1px,transparent 1px);
}

/* ——— الرأس ——— */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(1,2,31,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.top-in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);height:74px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand{position:relative}
.brand .q-logo{height:27px;width:auto;display:block}
.foot-logo{display:block}
.foot-logo .q-logo{height:36px;width:auto;display:block}
.nav{display:flex;gap:clamp(12px,1.8vw,30px);margin-inline-start:auto;font-size:var(--f-sm);font-weight:400}
.nav a{color:rgba(255,255,255,.72);padding:6px 0;position:relative;transition:color .18s}
.nav a::after{
  content:"";position:absolute;inset-inline-end:0;bottom:0;height:2px;width:0;
  background:var(--cyan);transition:width .22s ease;
}
.nav a:hover{color:#fff}
.nav a:hover::after{width:100%}
.top-cta{
  flex:0 0 auto;font-size:var(--f-sm);font-weight:500;padding:9px 20px;
  background:var(--coral);color:#01021f;
  border-radius:0 0 999px 0;transition:background .2s,transform .2s;
}
.top-cta:hover{background:#ffa079;transform:translateY(-1px)}
.burger{display:none}
.lang-btn{
  flex:0 0 auto;font-family:inherit;font-size:.82rem;font-weight:600;letter-spacing:.04em;
  padding:8px 15px;cursor:pointer;border:0;
  background:rgba(3,4,94,.07);color:var(--navy);
  box-shadow:inset 0 0 0 1.5px rgba(3,4,94,.26);
  border-radius:0 13px 0 13px;transition:background .2s,box-shadow .2s,transform .2s;
}
.lang-btn:hover{background:rgba(3,4,94,.14);box-shadow:inset 0 0 0 1.5px var(--navy);transform:translateY(-1px)}

/* ——— الهيرو ——— */
.hero{
  position:relative;min-height:min(86svh,760px);display:flex;align-items:flex-end;
  padding-bottom:clamp(56px,6vw,86px);padding-top:clamp(48px,7vw,96px);
  background:
    radial-gradient(62% 58% at 84% 2%,rgba(75,201,241,.20),transparent 62%),
    radial-gradient(52% 56% at 6% 96%,rgba(255,138,91,.16),transparent 66%),
    radial-gradient(44% 50% at 24% 42%,rgba(255,255,255,.9),transparent 72%),
    linear-gradient(200deg,#ffffff 0%,#f6f9fd 46%,#e8eff8 100%);
  overflow:hidden;
}
.hero-grid{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,72px);align-items:end;
}
.hero h1{font-size:var(--f-h1);font-weight:700;max-width:21ch;color:var(--navy)}
.hero h1 span{display:block}
.hero h1 .l2{color:rgba(3,4,94,.5);font-weight:200}
.hero-lead{
  font-size:var(--f-lead);font-weight:300;color:rgba(3,4,94,.8);
  max-width:34ch;margin-top:clamp(20px,2.6vw,34px);line-height:1.6;
}
.hero-foot{
  display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;
  margin-top:clamp(30px,4vw,52px);
}
.btn{
  display:inline-block;padding:14px 30px;font-weight:500;font-size:var(--f-body);
  background:#fff;color:var(--navy);border-radius:0 0 26px 0;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
.btn:hover{background:var(--cyan);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);border-radius:0 26px 0 0}
.btn.ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--cyan)}
.hero .btn{background:var(--navy);color:#fff}
.hero .btn:hover{background:#0a0d8a;transform:translateY(-2px)}
.hero .btn.ghost{background:rgba(3,4,94,.06);color:var(--navy);box-shadow:inset 0 0 0 1.5px rgba(3,4,94,.45)}
.hero .btn.ghost:hover{background:rgba(3,4,94,.12);box-shadow:inset 0 0 0 1.5px var(--navy)}
.hero-geo{position:relative;padding-inline-end:clamp(0px,2vw,44px)}

.tile{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.55)}
.built .tile{animation:pop .62s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes pop{to{opacity:1;transform:scale(1)}}

@media (max-width:960px){
  .hero{
    background:
      radial-gradient(78% 30% at 76% 2%,rgba(75,201,241,.20),transparent 64%),
      radial-gradient(70% 26% at 8% 98%,rgba(255,138,91,.16),transparent 66%),
      linear-gradient(190deg,#ffffff 0%,#f6f9fd 52%,#e8eff8 100%);
  }
  .hero-grid{grid-template-columns:1fr}
  .hero-geo{min-height:0;max-width:420px;margin-inline-start:auto;order:-1}
  .nav{display:none}
  .nav.open{
    display:flex;flex-direction:column;position:absolute;top:74px;inset-inline:0;
    background:rgba(255,255,255,.97);padding:18px var(--pad) 26px;gap:6px;
    border-bottom:1px solid rgba(3,4,94,.12);
    box-shadow:0 24px 44px -22px rgba(3,4,94,.25);
  }
  .nav.open a{color:var(--navy)}
  .nav.open a{font-size:1.05rem;padding:10px 0}
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-inline-start:auto;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:0;
  }
  .burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .2s}
  .burger span:nth-child(1){width:22px;margin-inline-start:auto}
  .burger span:nth-child(2){width:14px;margin-inline-start:auto}
  .top-cta{display:none}
  .lang-btn{margin-inline-start:auto;order:-1}
}

/* ═══════════ منظومة الحركة ═══════════ */

/* شريط تقدّم القراءة أسفل الهيدر */
.prog{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:transparent;pointer-events:none}
.prog i{display:block;height:100%;width:0;background:linear-gradient(to left,#ff8a5b,#4bc9f1 55%,#023e8a);
  transform-origin:right center;transition:width .08s linear}

/* كشف تدريجي عند الدخول للشاشة */
[data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.18,.85,.24,1),transform .8s cubic-bezier(.18,.85,.24,1)}
[data-rv].in{opacity:1;transform:none}
[data-rv="fade"]{transform:none}
[data-rv="right"]{transform:translateX(34px)}
[data-rv="scale"]{transform:scale(.94)}

/* كشف أسطر العنوان الرئيسي */
.hero h1 .ln{display:block;overflow:hidden;padding-block:.1em .16em;margin-block:-.1em -.16em}
.hero h1 .ln em{display:block;font-style:normal;transform:translateY(118%);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.hero.ready h1 .ln:nth-child(1) em{transform:none;transition-delay:.15s}
.hero.ready h1 .ln:nth-child(2) em{transform:none;transition-delay:.32s}
.hero-lead,.hero-foot{opacity:0;transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.18,.85,.24,1),transform .9s cubic-bezier(.18,.85,.24,1)}
.hero.ready .hero-lead{opacity:1;transform:none;transition-delay:.5s}
.hero.ready .hero-foot{opacity:1;transform:none;transition-delay:.64s}

/* ميل الشعار مع حركة المؤشر */
.hero-geo{perspective:1100px}
.logo-plate svg{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.3,1);
}


@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;transform:none!important}
  .hero h1 .ln em,.hero-lead,.hero-foot{opacity:1!important;transform:none!important}
  .hero h1 .ln{overflow:visible}
  .logo-plate svg{transform:none!important}
}

/* ——— بيان الحضور المؤثر ——— */
.statement{background:linear-gradient(160deg,#01021f,#040a3a 60%,#02082e)}
.statement .wrap{position:relative;z-index:2}
.st-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(28px,5vw,80px);align-items:start}
.st-grid h2{font-size:var(--f-h2)}
.st-grid h2 em{display:block;font-style:normal;color:rgba(255,255,255,.42);font-weight:200}
.rule{width:100%;height:1px;background:linear-gradient(to left,var(--coral),rgba(255,255,255,.08));margin:clamp(22px,3vw,38px) 0}
.st-side p{font-size:var(--f-lead);font-weight:200;color:rgba(255,255,255,.78);line-height:1.65}
.st-note{margin-top:26px;font-size:var(--f-sm);color:var(--cyan);font-weight:400}

/* ——— من نحن ——— */
.about{background:linear-gradient(190deg,#02082e,#03045e 45%,#010726)}
.about .wrap{position:relative;z-index:2}
.sect-head{max-width:min(72ch,920px);margin-bottom:clamp(38px,5vw,70px)}
.sect-head p{max-width:56ch}
.sect-head .kicker{font-size:var(--f-sm);color:var(--cyan);font-weight:500;display:block;margin-bottom:16px}
.sect-head h2{font-size:var(--f-h2)}
.sect-head p{margin-top:20px;font-size:var(--f-lead);font-weight:200;color:rgba(255,255,255,.72);line-height:1.6}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.pillar{
  padding:clamp(22px,2.4vw,32px);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
  border-radius:0 0 clamp(26px,3vw,44px) 0;
}
.pillar:nth-child(even){border-radius:0 clamp(26px,3vw,44px) 0 0}
.pillar b{display:block;font-size:var(--f-h3);font-weight:600;line-height:1.2}
.pillar small{display:block;font-size:var(--f-sm);color:var(--coral);font-weight:500;margin-bottom:6px}
.pillar p{margin-top:14px;font-size:var(--f-sm);color:rgba(255,255,255,.68);line-height:1.7}

/* ——— ما يميزنا ——— */
.traits{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,4vw,52px)}
.trait{
  padding:11px 22px;font-size:var(--f-sm);font-weight:400;
  box-shadow:inset 0 0 0 1px rgba(75,201,241,.42);color:rgba(255,255,255,.9);
  border-radius:0 18px 0 18px;background:rgba(75,201,241,.07);
}
/* ——— القدرات: قسم فاتح ——— */
.light{
  color:var(--navy);
  background:
    radial-gradient(70% 60% at 84% 6%,rgba(75,201,241,.20),transparent 62%),
    radial-gradient(55% 55% at 6% 92%,rgba(255,138,91,.10),transparent 66%),
    linear-gradient(200deg,#f5f8fc,#e2eaf6 58%,#eef3fa);
}
.light .wrap{position:relative;z-index:2}
.light .sect-head .kicker{color:var(--blue)}
.light .sect-head p{color:rgba(3,4,94,.72)}
.caps{
  position:relative;isolation:isolate;overflow:hidden;
  padding:2px clamp(20px,2.6vw,38px);
  border-radius:0 0 clamp(28px,3.4vw,50px) 0;
  background:linear-gradient(152deg,rgba(255,255,255,.82),rgba(255,255,255,.52) 55%,rgba(255,255,255,.38));
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 28px 58px -26px rgba(3,4,94,.32);
}
.caps::before{
  content:"";position:absolute;inset:0;padding:1px;pointer-events:none;z-index:2;border-radius:inherit;
  background:linear-gradient(135deg,#ff8a5b,rgba(255,255,255,.9) 28%,#4bc9f1 62%,rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:.4;
}
.cap:first-child .cap-btn{padding-top:clamp(24px,2.8vw,34px)}
.cap{border-bottom:1px solid rgba(3,4,94,.13);position:relative;z-index:3}
.cap:last-child{border-bottom:0}
.cap-btn{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(14px,2vw,28px);
  background:none;border:0;cursor:pointer;text-align:start;
  padding:clamp(20px,2.4vw,30px) 0;font-family:inherit;color:var(--navy);
}
.cap-mark{width:26px;height:26px;flex:0 0 auto;background:var(--navy);border-radius:0 0 13px 0;transition:background .2s,border-radius .25s}
.cap:nth-child(even) .cap-mark{border-radius:0 13px 0 0;background:var(--blue)}
.cap-btn:hover .cap-mark,.cap-btn[aria-expanded="true"] .cap-mark{background:var(--coral)}
.cap-btn h3{font-size:var(--f-h3);font-weight:600}
.cap-plus{position:relative;width:20px;height:20px;flex:0 0 auto}
.cap-plus::before,.cap-plus::after{
  content:"";position:absolute;inset-inline:0;top:9px;height:2px;background:var(--navy);transition:transform .25s;
}
.cap-plus::after{transform:rotate(90deg)}
.cap-btn[aria-expanded="true"] .cap-plus::after{transform:rotate(0)}
.cap-body{overflow:hidden;height:0;transition:height .32s ease}
.cap-body-in{padding:0 clamp(40px,4.6vw,54px) clamp(26px,3vw,38px)}
.cap-body p{max-width:70ch;color:rgba(3,4,94,.8);font-weight:300}
.cap-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cap-tags span{
  font-size:var(--f-sm);padding:7px 15px;background:rgba(3,4,94,.07);
  color:var(--blue);font-weight:400;border-radius:0 12px 0 12px;
}

/* ——— الأعمال ——— */
.work{background:linear-gradient(200deg,#010726,#03045e 55%,#02082e)}
.work .wrap{position:relative;z-index:2}
.cases{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.case{
  display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.36fr);
  gap:clamp(24px,3.2vw,56px);align-items:center;
  padding:clamp(24px,2.8vw,42px);
  background:linear-gradient(200deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  border-radius:0 0 clamp(30px,3.4vw,52px) 0;
  transition:box-shadow .25s,transform .25s;
}
.case:hover{transform:translateY(-4px)}
.case-sector{
  display:flex;align-items:center;gap:10px;
  font-size:var(--f-sm);color:rgba(255,255,255,.62);font-weight:400;
}
.case-sector i{width:13px;height:13px;flex:0 0 auto;background:var(--k);border-radius:0 0 7px 0}
.case-body{display:flex;flex-direction:column}
.case h3{font-size:clamp(1.45rem,1.6vw + 1rem,2.3rem);font-weight:600;margin-top:14px}
.case-body > p{margin-top:16px;font-size:var(--f-body);color:rgba(255,255,255,.76);line-height:1.85;max-width:46ch}
.case-scope{
  padding-top:20px;margin-block-start:26px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:var(--f-sm);color:rgba(255,255,255,.6);line-height:1.8;
}


/* ——— لقطات الأعمال داخل البطاقة ——— */
.case-gallery{position:relative;min-width:0}
.case-media{
  display:flex;gap:clamp(10px,1.1vw,17px);margin:0;
  overflow-x:auto;overflow-y:hidden;padding-bottom:14px;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.34) rgba(255,255,255,.08);
  overscroll-behavior-x:contain;
}
.case-media::-webkit-scrollbar{height:5px}
.case-media::-webkit-scrollbar-track{background:rgba(255,255,255,.09);border-radius:3px}
.case-media::-webkit-scrollbar-thumb{background:rgba(255,255,255,.36);border-radius:3px}
.case-media::-webkit-scrollbar-thumb:hover{background:var(--cyan)}
.shot{scroll-snap-align:start}

/* أسهم التنقّل داخل الشريط */
.media-nav{position:absolute;inset:0;pointer-events:none;z-index:5}
.mn{
  position:absolute;top:calc(50% - 26px);width:40px;height:40px;
  border:0;cursor:pointer;pointer-events:auto;font-family:inherit;
  background:rgba(3,4,94,.62);color:#fff;font-size:1.3rem;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:0 0 13px 0;opacity:0;transition:opacity .25s,background .2s,transform .2s;
}
.mn.prev{inset-inline-start:-6px}
.mn.next{inset-inline-end:-6px;border-radius:0 13px 0 0}
.case-gallery:hover .mn:not([disabled]){opacity:1}
.mn:hover{background:var(--navy);transform:translateY(-2px)}
.mn[disabled]{opacity:0!important;pointer-events:none}
@media (hover:none){.mn{display:none}}
.shot{
  position:relative;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;
  flex:0 0 auto;height:clamp(186px,19.5vw,262px);width:auto;
  border-radius:0 0 clamp(14px,1.5vw,22px) 0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 18px 34px -16px rgba(0,0,10,.7);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s;
}
.shot:nth-child(even){border-radius:0 clamp(14px,1.5vw,22px) 0 0}
.shot img{height:100%;width:auto;display:block;object-fit:contain}
.shot:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:inset 0 0 0 1.5px rgba(75,201,241,.75),0 26px 44px -16px rgba(0,0,10,.78);
}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(3,4,94,.35),transparent 42%);
  opacity:0;transition:opacity .3s;
}
.shot:hover::after{opacity:1}
.shot .zoom{
  position:absolute;inset-inline-end:10px;bottom:10px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:rgba(255,255,255,.92);color:var(--navy);font-size:.95rem;line-height:1;
  border-radius:0 0 10px 0;opacity:0;transform:translateY(6px);
  transition:opacity .3s,transform .3s;box-shadow:0 6px 16px -6px rgba(0,0,10,.6);
}
.shot:hover .zoom{opacity:1;transform:none}
.shot .more{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(3,4,94,.76);backdrop-filter:blur(2px);color:#fff;font-weight:600;
  font-size:clamp(1rem,1.1vw,1.35rem);
}

/* ——— معرض ملء الشاشة ——— */
.lb{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(1,2,20,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:clamp(56px,7vw,72px) clamp(14px,4vw,40px);
}
.lb.on{display:flex}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.lb img{
  max-width:min(88vw,400px);max-height:74svh;width:auto;height:auto;display:block;
  border-radius:0 0 22px 0;box-shadow:0 44px 90px -30px rgba(0,0,0,.85);
}
.lb figcaption{font-size:var(--f-sm);color:rgba(255,255,255,.72);text-align:center}
.lb figcaption b{display:block;color:#fff;font-weight:600;font-size:1.02rem;margin-bottom:4px}
.lb-btn{
  position:absolute;width:48px;height:48px;border:0;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.1);color:#fff;font-size:1.4rem;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(10px);
  border-radius:0 0 16px 0;transition:background .2s,transform .2s;
}
.lb-btn:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.lb-close{top:clamp(14px,2.4vw,26px);inset-inline-end:clamp(14px,2.4vw,26px);border-radius:0 16px 0 0}
.lb-prev{inset-inline-start:clamp(10px,2vw,32px);top:50%;margin-top:-24px}
.lb-next{inset-inline-end:clamp(10px,2vw,32px);top:50%;margin-top:-24px;border-radius:0 16px 0 0}
@media (max-width:620px){
  .lb-prev,.lb-next{top:auto;bottom:clamp(12px,3vw,22px);margin-top:0}
}

/* ——— الذكاء الإعلامي ——— */
.intel{background:linear-gradient(170deg,#02082e,#010726 70%)}
.intel .wrap{position:relative;z-index:2}
.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.13)}
.use{background:#040b33;padding:clamp(22px,2.4vw,32px)}
.use b{display:block;font-size:1.06rem;font-weight:600;line-height:1.3}
.use p{margin-top:9px;font-size:var(--f-sm);color:rgba(255,255,255,.62);line-height:1.65}
.layers{margin-top:clamp(22px,2.6vw,34px);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(14px,1.6vw,20px)}
.layer{padding-top:20px;border-top:2px solid var(--coral)}
.layer:nth-child(2){border-color:var(--cyan)}
.layer:nth-child(3){border-color:#4d7fd6}
.layer:nth-child(4){border-color:rgba(255,255,255,.35)}
.layer b{display:block;font-size:1.1rem;font-weight:600}
.layer p{margin-top:8px;font-size:var(--f-sm);color:rgba(255,255,255,.65);line-height:1.7}

/* ——— الأرقام ——— */
.metrics{
  position:relative;
  background:
    radial-gradient(80% 70% at 82% 8%,rgba(2,62,138,.75),transparent 62%),
    radial-gradient(60% 60% at 8% 96%,rgba(255,138,91,.13),transparent 66%),
    linear-gradient(200deg,#03045e,#020a3c 70%,#01021f);
}
.metrics .wrap{position:relative;z-index:2}
.mgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(24px,3vw,40px);padding:clamp(26px,3vw,44px);
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:0 0 clamp(30px,4vw,58px) 0;
  background:linear-gradient(152deg,rgba(255,255,255,.14),rgba(255,255,255,.045) 46%,rgba(255,255,255,.016));
  backdrop-filter:blur(18px) saturate(155%);-webkit-backdrop-filter:blur(18px) saturate(155%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 30px 60px -26px rgba(0,0,4,.6);
}
html[dir="ltr"] .metric b{text-align:left}
.mgrid::before{
  content:"";position:absolute;inset:0;padding:1px;pointer-events:none;z-index:2;border-radius:inherit;
  background:linear-gradient(135deg,#ff8a5b,rgba(255,255,255,.85) 26%,rgba(75,201,241,.95) 58%,rgba(255,255,255,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:.3;
}
.metric{z-index:3}
.metric + .metric{border-inline-end:1px solid rgba(255,255,255,.12);padding-inline-end:clamp(18px,2vw,30px)}
.metric{position:relative;padding-top:26px}
.metric::before{content:"";position:absolute;top:0;inset-inline-end:0;width:38px;height:5px;background:var(--cyan)}
.metric:nth-child(2)::before{background:var(--coral)}
.metric:nth-child(3)::before{background:#7fd6f5}
.metric:nth-child(4)::before{background:#fff}
.metric b{display:block;direction:ltr;text-align:right;font-size:clamp(2.1rem,3.4vw,3.4rem);font-weight:700;letter-spacing:-.02em;line-height:1}
.metric span{display:block;margin-top:12px;font-weight:500}
.metric small{display:block;margin-top:4px;font-size:var(--f-sm);color:rgba(255,255,255,.55)}

/* ——— الشركاء ——— */
.wall-label{
  display:flex;align-items:center;gap:16px;
  font-size:var(--f-sm);font-weight:600;color:var(--blue);
  margin:clamp(30px,3.6vw,52px) 0 clamp(4px,1vw,14px);
}
.wall-label::after{content:"";flex:1;height:1px;background:rgba(3,4,94,.16)}
.wall-label:first-of-type{margin-top:0}
/* شعارات الجهات الحكومية أعرض وفيها نص ثنائي اللغة، فتحتاج مساحة أكبر */
html[dir="ltr"] body{letter-spacing:0}
.logos.gov{gap:clamp(30px,3.6vw,54px) clamp(20px,2.6vw,42px)}
.logos.gov span{flex:0 0 clamp(140px,17.2%,208px)}
.logos.gov span img{height:calc(var(--hs,1) * clamp(50px,4.8vw,78px))}
.logos{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(28px,3.4vw,58px) clamp(18px,2.4vw,40px);
  padding:clamp(16px,2.2vw,34px) 0;
}
.logos span{
  flex:0 0 clamp(112px,13.4%,164px);
  display:flex;align-items:center;justify-content:center;min-width:0;
}
.logos span img{
  width:100%;height:calc(var(--hs,1) * clamp(36px,3.3vw,52px));object-fit:contain;display:block;
  opacity:.88;transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.3,1);
}
.logos span:hover img{opacity:1;transform:scale(1.09)}
.logos span[hidden]{display:none}

/* ——— تواصل ——— */
.contact{
  background:
    radial-gradient(58% 62% at 8% 92%,rgba(255,138,91,.20),transparent 68%),
    radial-gradient(46% 50% at 92% 4%,rgba(2,62,138,.55),transparent 62%),
    linear-gradient(200deg,#03045e,#010726 72%);
}
.contact .wrap{position:relative;z-index:2}
.c-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:start}
.c-grid h2{font-size:var(--f-h2)}
.c-grid > div > p{margin-top:20px;font-size:var(--f-lead);font-weight:200;color:rgba(255,255,255,.75);max-width:36ch;line-height:1.6}
.c-list{margin-top:clamp(28px,3.4vw,44px);display:grid;gap:1px;background:rgba(255,255,255,.14)}
.c-list a,.c-list div{
  background:#04093a;padding:20px clamp(18px,2vw,26px);display:flex;
  justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
}
.c-list a{transition:background .2s}
.c-list a:hover{background:#0b1560}
.c-list small{font-size:var(--f-sm);color:rgba(255,255,255,.55);font-weight:400}
.c-list b{font-weight:500;font-size:1.05rem}
.c-cta{margin-top:clamp(26px,3vw,38px)}

/* ——— الفوتر ——— */
.foot{background:#01021a;padding:clamp(38px,5vw,64px) 0 clamp(28px,4vw,44px);border-top:1px solid rgba(255,255,255,.08)}
.foot-in{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}

.foot p{font-size:var(--f-sm);color:rgba(255,255,255,.45)}
.foot-links{display:flex;gap:22px;font-size:var(--f-sm)}
.foot-links a{color:rgba(255,255,255,.6);transition:color .18s}
.foot-links a:hover{color:var(--cyan)}
.social{display:flex;gap:9px}
.social a{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.74);background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  border-radius:0 0 13px 0;
  transition:color .22s,background .22s,transform .22s,box-shadow .22s;
}
.social a:nth-child(even){border-radius:0 13px 0 0}
.social a svg{width:17px;height:17px;fill:currentColor;display:block}
.social a:hover{color:#01021a;background:var(--cyan);box-shadow:none;transform:translateY(-3px)}
@media (max-width:720px){
  .foot-in{justify-content:center;text-align:center;gap:20px 26px}
  .social{order:-1}
}

@media (max-width:1024px){
  .case{grid-template-columns:1fr;gap:clamp(20px,3vw,30px)}
  .case-gallery{order:-1}
}
@media (max-width:900px){
  .st-grid,.pillars{grid-template-columns:1fr 1fr}
  .cap-body-in{padding-inline:0}
  .c-grid{grid-template-columns:1fr}
}
@media (max-width:840px){
  .uses{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .shot{height:clamp(168px,44vw,210px)}
  .logos{gap:clamp(24px,6vw,34px) clamp(14px,4vw,24px)}
  .logos span{flex-basis:clamp(96px,27%,140px)}
  .logos.gov span{flex-basis:clamp(118px,38%,176px)}
}
@media (max-width:600px){
  .st-grid,.pillars{grid-template-columns:1fr}
  .uses{grid-template-columns:1fr}
}

/* ═══ هيدر فاتح يناسب الهيرو الأبيض، والشعار بألوانه الرسمية الكاملة ═══ */
.top .q-logo .qw-1,.top .q-logo .qw-2,.top .q-logo .qw-3{fill:#03045e;opacity:1}
.top .qm > *{stroke:none}
.nav a{color:rgba(3,4,94,.7)}
.nav a:hover{color:var(--navy)}
.nav a::after{background:var(--coral)}
.top-cta{background:var(--navy);color:#fff}
.top-cta:hover{background:#0a0d8a}
.burger span{background:var(--navy)}

/* ═══ النظام الزجاجي: مستمد من مكعبات الكريستال في البروفايل ═══ */
.glass{
  position:relative;isolation:isolate;
  background:linear-gradient(152deg,rgba(255,255,255,.155),rgba(255,255,255,.05) 46%,rgba(255,255,255,.018));
  backdrop-filter:blur(18px) saturate(155%);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 26px 54px -22px rgba(0,0,4,.62);
  overflow:hidden;
}
/* حافة طيفية رقيقة (تشتت ضوئي) */
.glass::before{
  content:"";position:absolute;inset:0;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,#ff8a5b 0%,rgba(255,255,255,.85) 26%,rgba(75,201,241,.95) 58%,rgba(255,255,255,.22) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:.34;transition:opacity .3s;
  border-radius:inherit;
}
/* لمعة انعكاس تمر عند التفاعل */
.glass::after{
  content:"";position:absolute;top:-45%;height:190%;width:42%;
  inset-inline-start:-55%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.20) 45%,rgba(190,235,255,.10) 60%,transparent);
  transform:rotate(12deg);transition:inset-inline-start .75s cubic-bezier(.3,.8,.3,1);
}
.glass:hover::after,.glass:focus-within::after{inset-inline-start:115%}
.glass:hover::before{opacity:.62}

/* تطبيق الزجاج على البطاقات */
.pillar,.case,.use,.c-list a,.c-list div{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(152deg,rgba(255,255,255,.155),rgba(255,255,255,.05) 46%,rgba(255,255,255,.018));
  backdrop-filter:blur(18px) saturate(155%);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 26px 54px -22px rgba(0,0,4,.6);
}
.pillar::before,.case::before,.use::before,.c-list a::before,.c-list div::before{
  content:"";position:absolute;inset:0;padding:1px;pointer-events:none;z-index:2;border-radius:inherit;
  background:linear-gradient(135deg,#ff8a5b 0%,rgba(255,255,255,.85) 26%,rgba(75,201,241,.95) 58%,rgba(255,255,255,.2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:.3;transition:opacity .3s;
}
.pillar::after,.case::after,.use::after{
  content:"";position:absolute;top:-45%;height:190%;width:44%;
  inset-inline-start:-58%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22) 45%,rgba(190,235,255,.12) 62%,transparent);
  transform:rotate(12deg);transition:inset-inline-start .8s cubic-bezier(.3,.8,.3,1);
}
.pillar:hover::after,.case:hover::after,.use:hover::after{inset-inline-start:118%}
.pillar:hover::before,.case:hover::before,.use:hover::before{opacity:.6}
.pillar > *,.case > *,.use > *{position:relative;z-index:3}

/* شبكة الاستخدامات: بطاقات زجاجية بدل الخطوط */
.uses{gap:clamp(10px,1.2vw,16px);background:none}
.use{padding:clamp(22px,2.4vw,30px);border-radius:0 0 clamp(22px,2.4vw,34px) 0;transition:transform .3s}
.use:nth-child(even){border-radius:0 clamp(22px,2.4vw,34px) 0 0}
.use:hover{transform:translateY(-3px)}
.pillar,.case{transition:transform .3s,box-shadow .3s}
.pillar:hover{transform:translateY(-3px)}

/* قائمة التواصل زجاجية */
.c-list{gap:10px;background:none}
.c-list a,.c-list div{border-radius:0 0 22px 0}
.c-list a:nth-child(even),.c-list div:nth-child(even){border-radius:0 22px 0 0}
.c-list a:hover{background:linear-gradient(152deg,rgba(255,255,255,.24),rgba(255,255,255,.07))}
.c-list small,.c-list b{position:relative;z-index:3}

/* الشرائح والأزرار: لمسة زجاجية */
.trait{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn.ghost{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(255,255,255,.06)}
.top{backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);background:rgba(255,255,255,.93);border-bottom:1px solid rgba(3,4,94,.10);box-shadow:0 10px 30px -18px rgba(3,4,94,.28)}

/* حبيبات دقيقة على الخلفيات الداكنة، مثل جدار المكعبات في البروفايل */
.tile-wall::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ═══ كتل زجاجية طائفة في الهيرو ═══ */
.hero-glow{
  position:absolute;z-index:0;pointer-events:none;
  width:min(58vw,720px);aspect-ratio:1;border-radius:50%;
  inset-inline-start:-10%;top:-12%;
  background:radial-gradient(circle,rgba(75,201,241,.24),rgba(2,62,138,.06) 48%,transparent 72%);
  filter:blur(28px);
  animation:drift 22s ease-in-out infinite alternate;
}
.hero-glow.two{
  inset-inline-start:auto;inset-inline-end:-14%;top:auto;bottom:-24%;
  width:min(44vw,540px);
  background:radial-gradient(circle,rgba(255,138,91,.20),transparent 68%);
  animation-duration:28s;animation-direction:alternate-reverse;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4%,5%,0) scale(1.08)}
  100%{transform:translate3d(-3%,-4%,0) scale(.96)}
}
.floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.gf{
  position:absolute;display:block;
  background:linear-gradient(150deg,rgba(75,201,241,.26),rgba(255,138,91,.13) 58%,rgba(255,255,255,.32));
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(3,4,94,.07),
    0 26px 52px -24px rgba(3,4,94,.22);
}
.gf::before{
  content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
  background:linear-gradient(140deg,#ff8a5b,rgba(255,255,255,.9) 34%,#4bc9f1 70%,rgba(3,4,94,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:.5;
}
.gf1{width:clamp(84px,10vw,148px);aspect-ratio:1;inset-inline-end:8%;top:10%;border-radius:0 0 46% 0;animation:bob 13s ease-in-out infinite}
.gf2{width:clamp(54px,6.4vw,96px);aspect-ratio:1;inset-inline-end:33%;top:5%;border-radius:0 46% 0 0;animation:bob 17s ease-in-out .8s infinite reverse}
.gf3{width:clamp(40px,4.4vw,68px);aspect-ratio:1;inset-inline-end:3%;bottom:13%;border-radius:0 0 0 46%;animation:bob 20s ease-in-out 1.4s infinite}
@keyframes bob{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  33%{transform:translate3d(-8px,-16px,0) rotate(-3deg)}
  66%{transform:translate3d(7px,11px,0) rotate(2.5deg)}
}
/* شريحة زجاجية خلف الشعار، كما في أغلفة البروفايل */
/* لوح زجاجي فاتح يحمل الشعار الرسمي بألوانه الأصلية */
.logo-plate{
  position:relative;
  width:min(100%,clamp(210px,23vw,320px));margin-inline-start:auto;
  animation:plate 16s ease-in-out infinite;
}
.logo-plate svg{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 48px rgba(3,4,94,.16))}
@keyframes plate{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-12px,0) rotate(-.6deg)}
}
.sheen{animation:sheen 6.5s cubic-bezier(.6,0,.4,1) 1.5s infinite}
@keyframes sheen{
  0%{transform:translateX(-70px)}
  55%,100%{transform:translateX(160px)}
}
@media (max-width:960px){
  .gf1{top:3%;inset-inline-end:3%;width:clamp(64px,16vw,104px)}
  .gf2{top:auto;bottom:6%;inset-inline-end:auto;inset-inline-start:4%;width:clamp(46px,11vw,74px)}
  .gf3{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tile,.built .tile{opacity:1!important;transform:none!important;animation:none!important}
  .hero-glow,.gf,.logo-plate{animation:none!important}
  .sheen{opacity:0!important}
  *{transition-duration:.01ms!important}
}
/* ═══════════ الصفحات الداخلية ═══════════ */
.page{background:linear-gradient(200deg,#ffffff 0%,#f6f9fd 40%,#e8eff8 100%);color:var(--navy);
  padding:clamp(90px,11vw,150px) 0 clamp(60px,8vw,110px);position:relative;overflow:hidden}
.page .tile-wall{background-image:
  linear-gradient(to left,rgba(3,4,94,.06) 1px,transparent 1px),
  linear-gradient(to bottom,rgba(3,4,94,.06) 1px,transparent 1px)}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--f-sm);
  color:rgba(3,4,94,.6);margin-bottom:clamp(18px,2.4vw,30px)}
.crumb a{color:var(--blue)}.crumb a:hover{text-decoration:underline}
.crumb i{font-style:normal;opacity:.45}
.page h1{font-size:clamp(2rem,3.4vw + .9rem,3.5rem);max-width:20ch;color:var(--navy)}
.page .lede{margin-top:clamp(18px,2.2vw,28px);font-size:var(--f-lead);font-weight:300;
  color:rgba(3,4,94,.78);max-width:58ch;line-height:1.7}
.sec{padding:clamp(56px,7vw,96px) 0;position:relative}
.sec.dark{background:linear-gradient(200deg,#02082e,#03045e 55%,#010726);color:#fff}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.light{background:linear-gradient(200deg,#f6f9fd,#e8eff8);color:var(--navy)}
.sec h2{font-size:var(--f-h2);max-width:24ch}
.sec .wrap > p{margin-top:20px;font-size:var(--f-body);line-height:1.95;max-width:66ch;color:rgba(3,4,94,.8)}
.sec.dark .wrap > p{color:rgba(255,255,255,.78)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(14px,1.7vw,24px);margin-top:clamp(30px,3.6vw,46px)}
.gcard{padding:clamp(22px,2.4vw,32px);border-radius:0 0 clamp(22px,2.6vw,38px) 0;
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(3,4,94,.1),0 22px 44px -26px rgba(3,4,94,.26)}
.gcard:nth-child(even){border-radius:0 clamp(22px,2.6vw,38px) 0 0}
.sec.dark .gcard{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.gcard h3{font-size:var(--f-h3);font-weight:600;line-height:1.25}
.gcard p{margin-top:12px;font-size:var(--f-sm);line-height:1.8;color:rgba(3,4,94,.75)}
.sec.dark .gcard p{color:rgba(255,255,255,.7)}
.tick{margin-top:clamp(26px,3vw,40px);display:grid;gap:12px;max-width:70ch}
.tick li{position:relative;padding-inline-start:30px;font-size:var(--f-body);line-height:1.8;color:rgba(3,4,94,.82)}
.sec.dark .tick li{color:rgba(255,255,255,.8)}
.tick li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:13px;height:13px;
  background:var(--coral);border-radius:0 0 7px 0}
.tick li:nth-child(even)::before{background:var(--cyan);border-radius:0 7px 0 0}
.related{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,38px)}
.related a{font-size:var(--f-sm);padding:11px 20px;border-radius:0 16px 0 16px;
  background:rgba(3,4,94,.06);color:var(--blue);box-shadow:inset 0 0 0 1px rgba(3,4,94,.16);
  transition:background .2s,box-shadow .2s,transform .2s}
.related a:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--blue);transform:translateY(-2px)}
.sec.dark .related a{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.sec.dark .related a:hover{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px var(--cyan)}
.cta-band{background:linear-gradient(200deg,#03045e,#010726 72%);color:#fff;
  padding:clamp(52px,6.5vw,88px) 0;text-align:center}
.cta-band h2{font-size:var(--f-h2);margin-inline:auto;max-width:22ch}
.cta-band p{margin:18px auto 0;max-width:52ch;color:rgba(255,255,255,.76);font-weight:300}
.cta-band .btn{margin-top:clamp(24px,3vw,36px)}