:root{
  --ui-frame: rgba(151, 185, 255, 0.16);
  --ui-frame-strong: rgba(151, 185, 255, 0.28);
  --ui-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  --ui-glow: 0 0 0 1px rgba(255,255,255,0.04) inset;
}

.section-card,
.case-card,
.service-item,
.contact-link,
.post-card,
.library-item{
  position: relative;
}

.section-card::before,
.case-card::before,
.service-item::before,
.contact-link::before,
.post-card::before,
.library-item::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--ui-glow);
}

.section-card::after,
.case-card::after,
.service-item::after,
.contact-link::after,
.post-card::after,
.library-item::after{
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent);
  pointer-events: none;
  opacity: .9;
}

.action-btn,
.quick-btn,
.post-btn,
.nav-filter-btn,
.jump-link,
.claim-link,
.contact-link,
.service-item{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.action-btn:hover,
.quick-btn:hover,
.post-btn:hover,
.nav-filter-btn:hover,
.jump-link:hover,
.claim-link:hover,
.contact-link:hover,
.service-item:hover{
  transform: translateY(-2px);
}

#services{
  background: linear-gradient(180deg, #081a40 0%, #061530 100%);
  border: 1px solid var(--ui-frame-strong);
}

#services .service-grid{
  gap: 18px;
}

#services .service-item{
  min-height: 188px;
  display: grid !important;
  place-items: center;
  text-align: center;
  gap: 14px;
  padding: 22px 16px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(20,40,82,.96), rgba(8,22,52,.98));
  border: 1px solid var(--ui-frame);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
}

#services .service-item i{
  width: 76px;
  height: 76px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: #fff;
  margin: 0 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}

#services .service-item span{
  color: #f3f8ff;
  font-weight: 800;
  line-height: 1.95;
  font-size: 1.04rem;
}

#services .service-item:nth-child(1){border-color:rgba(91,180,255,.34)}
#services .service-item:nth-child(1) i{background:linear-gradient(135deg,#1b79d8,#38b5ff)}
#services .service-item:nth-child(2){border-color:rgba(133,208,255,.34)}
#services .service-item:nth-child(2) i{background:linear-gradient(135deg,#2f69d9,#58baff)}
#services .service-item:nth-child(3){border-color:rgba(255,158,86,.34)}
#services .service-item:nth-child(3) i{background:linear-gradient(135deg,#cf6f29,#ffae55)}
#services .service-item:nth-child(4){border-color:rgba(123,214,190,.34)}
#services .service-item:nth-child(4) i{background:linear-gradient(135deg,#19956c,#39d3a0)}
#services .service-item:nth-child(5){border-color:rgba(173,158,255,.34)}
#services .service-item:nth-child(5) i{background:linear-gradient(135deg,#6251d9,#9685ff)}
#services .service-item:nth-child(6){border-color:rgba(255,191,94,.34)}
#services .service-item:nth-child(6) i{background:linear-gradient(135deg,#b86c18,#f6ad39)}
#services .service-item:nth-child(7){border-color:rgba(124,196,255,.34)}
#services .service-item:nth-child(7) i{background:linear-gradient(135deg,#1871ce,#49b3ff)}
#services .service-item:nth-child(8){border-color:rgba(255,145,182,.34)}
#services .service-item:nth-child(8) i{background:linear-gradient(135deg,#b94777,#ff76a8)}
#services .service-item:nth-child(9){border-color:rgba(136,230,179,.34)}
#services .service-item:nth-child(9) i{background:linear-gradient(135deg,#1e9d54,#53dc89)}
#services .service-item:nth-child(10){border-color:rgba(228,191,118,.34)}
#services .service-item:nth-child(10) i{background:linear-gradient(135deg,#9c6f1d,#d8a94b)}
#services .service-item:nth-child(11){border-color:rgba(140,198,255,.34)}
#services .service-item:nth-child(11) i{background:linear-gradient(135deg,#1e5faa,#4aa2ff)}
#services .service-item:nth-child(12){border-color:rgba(159,209,255,.34)}
#services .service-item:nth-child(12) i{background:linear-gradient(135deg,#2f67a6,#74b3ff)}

#cases .case-card,
.page-shell .case-grid > .case-card,
.page-shell .posts-grid > .case-card{
  box-shadow: var(--ui-shadow);
}

#cases .case-card:nth-child(1){border-color:rgba(96,179,255,.30) !important}
#cases .case-card:nth-child(2){border-color:rgba(112,231,255,.30) !important}
#cases .case-card:nth-child(3){border-color:rgba(100,223,166,.30) !important}
#cases .case-card:nth-child(4){border-color:rgba(255,187,104,.30) !important}

#cases .case-card li{
  border-width: 1px !important;
  border-style: solid !important;
  backdrop-filter: blur(2px);
}
#cases .case-card:nth-child(1) li{border-color:rgba(96,179,255,.20) !important;background:rgba(23,69,117,.20) !important}
#cases .case-card:nth-child(2) li{border-color:rgba(112,231,255,.20) !important;background:rgba(21,83,105,.20) !important}
#cases .case-card:nth-child(3) li{border-color:rgba(100,223,166,.20) !important;background:rgba(20,94,71,.20) !important}
#cases .case-card:nth-child(4) li{border-color:rgba(255,187,104,.20) !important;background:rgba(107,72,26,.20) !important}

.page-shell .case-grid > .case-card h2,
.page-shell .posts-grid > .case-card h2,
.page-shell .posts-grid > .case-card .chapter-pill,
.page-shell .case-grid > .case-card .chapter-pill{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 20px;
  color: #f5f9ff;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.page-shell .case-grid > .case-card h2::before,
.jump-link::before{
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  flex: 0 0 44px;
  color: #fff;
}

.page-shell .posts-grid > .case-card,
.page-shell .case-grid > .case-card,
.page-shell .service-grid > .jump-link{
  background: linear-gradient(180deg, rgba(18,38,83,.96), rgba(9,23,51,.98));
  border: 1px solid var(--ui-frame);
  border-radius: 24px;
  overflow: hidden;
}

.page-shell .posts-grid > .case-card .claim-link,
.page-shell .case-grid > .case-card .claim-link,
.jump-link{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

#bab-maliyah,
a.jump-link[href="#bab-maliyah"]{border-color:rgba(57,173,255,.34) !important}
#bab-maliyah h2,
a.jump-link[href="#bab-maliyah"]{background:linear-gradient(135deg,#1569b5,#26a5ff) !important}
#bab-maliyah h2::before,
a.jump-link[href="#bab-maliyah"]::before{content:"💰"}
#bab-maliyah .claim-link{border-color:rgba(57,173,255,.22) !important}

#bab-milkiyah,
a.jump-link[href="#bab-milkiyah"]{border-color:rgba(68,210,150,.34) !important}
#bab-milkiyah h2,
a.jump-link[href="#bab-milkiyah"]{background:linear-gradient(135deg,#177957,#27bf87) !important}
#bab-milkiyah h2::before,
a.jump-link[href="#bab-milkiyah"]::before{content:"🏠"}
#bab-milkiyah .claim-link{border-color:rgba(68,210,150,.22) !important}

#bab-uqud,
a.jump-link[href="#bab-uqud"]{border-color:rgba(255,177,94,.34) !important}
#bab-uqud h2,
a.jump-link[href="#bab-uqud"]{background:linear-gradient(135deg,#a35e18,#e29a35) !important}
#bab-uqud h2::before,
a.jump-link[href="#bab-uqud"]::before{content:"📜"}
#bab-uqud .claim-link{border-color:rgba(255,177,94,.22) !important}

#bab-ijar,
a.jump-link[href="#bab-ijar"]{border-color:rgba(182,133,255,.34) !important}
#bab-ijar h2,
a.jump-link[href="#bab-ijar"]{background:linear-gradient(135deg,#7241b0,#a770ef) !important}
#bab-ijar h2::before,
a.jump-link[href="#bab-ijar"]::before{content:"🏢"}
#bab-ijar .claim-link{border-color:rgba(182,133,255,.22) !important}

#bab-qismah,
a.jump-link[href="#bab-qismah"]{border-color:rgba(255,113,142,.34) !important}
#bab-qismah h2,
a.jump-link[href="#bab-qismah"]{background:linear-gradient(135deg,#b23b62,#ee6a8d) !important}
#bab-qismah h2::before,
a.jump-link[href="#bab-qismah"]::before{content:"⚖️"}
#bab-qismah .claim-link{border-color:rgba(255,113,142,.22) !important}

#bab-ithbat-waqti,
a.jump-link[href="#bab-ithbat-waqti"]{border-color:rgba(78,169,255,.34) !important}
#bab-ithbat-waqti h2,
a.jump-link[href="#bab-ithbat-waqti"]{background:linear-gradient(135deg,#1567b1,#2d97ea) !important}
#bab-ithbat-waqti h2::before,
a.jump-link[href="#bab-ithbat-waqti"]::before{content:"⏱️"}
#bab-ithbat-waqti .claim-link{border-color:rgba(78,169,255,.22) !important}

#bab-hiyazah,
a.jump-link[href="#bab-hiyazah"]{border-color:rgba(63,210,155,.34) !important}
#bab-hiyazah h2,
a.jump-link[href="#bab-hiyazah"]{background:linear-gradient(135deg,#177b59,#25bb88) !important}
#bab-hiyazah h2::before,
a.jump-link[href="#bab-hiyazah"]::before{content:"🛡️"}
#bab-hiyazah .claim-link{border-color:rgba(63,210,155,.22) !important}

#bab-amwal,
a.jump-link[href="#bab-amwal"]{border-color:rgba(255,183,88,.34) !important}
#bab-amwal h2,
a.jump-link[href="#bab-amwal"]{background:linear-gradient(135deg,#9e5d19,#d89234) !important}
#bab-amwal h2::before,
a.jump-link[href="#bab-amwal"]::before{content:"💼"}
#bab-amwal .claim-link{border-color:rgba(255,183,88,.22) !important}

#bab-shakhsiyah,
a.jump-link[href="#bab-shakhsiyah"]{border-color:rgba(255,115,157,.34) !important}
#bab-shakhsiyah h2,
a.jump-link[href="#bab-shakhsiyah"]{background:linear-gradient(135deg,#9e375a,#d25a81) !important}
#bab-shakhsiyah h2::before,
a.jump-link[href="#bab-shakhsiyah"]::before{content:"🚫"}
#bab-shakhsiyah .claim-link{border-color:rgba(255,115,157,.22) !important}

#bab-awraq{border-color:rgba(64,176,255,.34) !important}
#bab-banks{border-color:rgba(72,217,154,.34) !important}
#bab-agency{border-color:rgba(255,182,94,.34) !important}
#bab-companies{border-color:rgba(182,133,255,.34) !important}
#bab-sales{border-color:rgba(255,145,98,.34) !important}
#bab-competition{border-color:rgba(255,108,159,.34) !important}
#bab-contracts{border-color:rgba(108,156,255,.34) !important}

#bab-awraq .claim-link{border-color:rgba(64,176,255,.22) !important}
#bab-banks .claim-link{border-color:rgba(72,217,154,.22) !important}
#bab-agency .claim-link{border-color:rgba(255,182,94,.22) !important}
#bab-companies .claim-link{border-color:rgba(182,133,255,.22) !important}
#bab-sales .claim-link{border-color:rgba(255,145,98,.22) !important}
#bab-competition .claim-link{border-color:rgba(255,108,159,.22) !important}
#bab-contracts .claim-link{border-color:rgba(108,156,255,.22) !important}

#library-main .case-card,
.page-shell .case-grid > .case-card:nth-child(1){border-color:rgba(80,177,255,.34)}
.page-shell .case-grid > .case-card:nth-child(1) h2::before{content:"🏛️"}
.page-shell .case-grid > .case-card:nth-child(2){border-color:rgba(70,211,155,.34)}
.page-shell .case-grid > .case-card:nth-child(2) h2::before{content:"⏱️"}
.page-shell .case-grid > .case-card:nth-child(3){border-color:rgba(255,176,99,.34)}
.page-shell .case-grid > .case-card:nth-child(3) h2::before{content:"💼"}
.page-shell .case-grid > .case-card:nth-child(1) h2{background:linear-gradient(135deg,#1669b7,#2aa6ff) !important}
.page-shell .case-grid > .case-card:nth-child(2) h2{background:linear-gradient(135deg,#177a59,#2abf89) !important}
.page-shell .case-grid > .case-card:nth-child(3) h2{background:linear-gradient(135deg,#9e5e1a,#d99634) !important}

#posts{
  background: linear-gradient(180deg,#08183a 0%, #07152f 100%);
  border-color: rgba(130,169,255,.18);
}
#posts .post-card,
#posts .empty-state{
  background: linear-gradient(180deg, rgba(15,33,69,.96), rgba(7,19,44,.98));
  border: 1px solid var(--ui-frame);
  color: #eff7ff;
  border-radius: 22px;
}
#posts .post-title-link{color:#f4f8ff}
#posts .post-date{color:#b3c7ea}
#posts .post-excerpt,
#posts .post-body{color:#d8e6ff}
#posts .post-btn{border-radius:16px}
#posts .post-link{background:linear-gradient(135deg,#1d6fd2,#32b0ff)}
#posts .post-download{background:linear-gradient(135deg,#1a8b52,#39d588)}
#posts .post-share{background:linear-gradient(135deg,#a5661e,#de9c40)}

#contact{
  background: linear-gradient(180deg,#07193d 0%, #05162f 100%);
  border-color: rgba(134,171,255,.16);
}
#contact .contact-link{
  border: 1px solid var(--ui-frame);
  box-shadow: var(--ui-shadow);
}

@media (max-width: 900px){
  #services .service-item{min-height:160px;padding:18px 14px}
  #services .service-item i{width:64px;height:64px;font-size:1.7rem;border-radius:20px}
  #services .service-item span{font-size:.96rem}
}

@media (max-width: 700px){
  #services .service-grid,
  #posts .posts-grid,
  .page-shell .posts-grid,
  .page-shell .case-grid{grid-template-columns:1fr !important}
  #services .service-item{min-height:148px;border-radius:22px}
  .page-shell .posts-grid > .case-card,
  .page-shell .case-grid > .case-card,
  .jump-link{border-radius:20px !important}
  .page-shell .case-grid > .case-card h2,
  .page-shell .posts-grid > .case-card h2,
  .page-shell .posts-grid > .case-card .chapter-pill,
  .page-shell .case-grid > .case-card .chapter-pill{font-size:1rem;padding:12px 14px;border-radius:16px}
  .page-shell .case-grid > .case-card h2::before,
  .jump-link::before{width:38px;height:38px;flex-basis:38px}
  .jump-link{min-height:66px !important;font-size:.96rem !important;padding:14px 16px !important}
}