/* =====================================================
   FINVERCO ARABIC SOFTWARE DIRECTORY V11
   ===================================================== */


/* HERO */

.directory-hero{
  position:relative;

  overflow:hidden;

  padding:
    72px 0 66px;

  border-bottom:
    1px solid rgba(255,255,255,.065);

  background:
    linear-gradient(
      180deg,
      rgba(10,14,21,.98),
      rgba(6,8,12,.98)
    );
}


.directory-grid-bg{
  position:absolute;
  inset:0;

  opacity:.10;

  background-image:
    linear-gradient(
      rgba(255,255,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.045) 1px,
      transparent 1px
    );

  background-size:
    70px 70px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 90%
    );
}


.directory-glow{
  position:absolute;

  width:700px;
  height:700px;

  right:-180px;
  top:-430px;

  border-radius:50%;

  background:#5578ff;

  opacity:.09;

  filter:blur(130px);
}


.directory-hero-layout{
  position:relative;

  display:grid;

  grid-template-columns:
    minmax(0,1.3fr)
    minmax(300px,.7fr);

  gap:70px;

  align-items:center;
}


.directory-verified{
  width:max-content;

  padding:
    7px 10px;

  display:flex;

  align-items:center;

  gap:7px;

  border:
    1px solid rgba(100,224,174,.14);

  border-radius:999px;

  color:#69ddad;

  background:
    rgba(100,224,174,.03);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:750;
}


.directory-verified i{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#64e0ae;
}


.directory-verified span{
  padding-right:7px;

  border-right:
    1px solid rgba(255,255,255,.09);

  color:#8691a0;

  font-family:
    "FINVERCO Arabic",
    Arial,
    sans-serif;

  font-weight:450;
}


.directory-hero-copy h1{
  max-width:800px;

  margin:
    25px 0 18px;

  color:#f6f7f9;

  font-size:
    clamp(55px,5.6vw,80px);

  font-weight:730;

  line-height:1.15;

  letter-spacing:-.04em;
}


.directory-hero-copy h1 span{
  display:block;

  color:#8792a2;
}


.directory-hero-copy>p{
  max-width:700px;

  margin:0;

  color:#a2acb9;

  font-size:13px;

  line-height:2;
}


/* SEARCH */

.directory-search{
  max-width:700px;

  height:64px;

  margin-top:28px;

  padding:
    0 17px;

  display:flex;

  align-items:center;

  gap:12px;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius:14px;

  background:
    rgba(13,18,26,.90);

  box-shadow:
    0 20px 60px rgba(0,0,0,.18);
}


.directory-search:focus-within{
  border-color:
    rgba(100,224,174,.30);

  box-shadow:
    0 20px 60px rgba(0,0,0,.20),
    0 0 0 3px rgba(100,224,174,.025);
}


.directory-search svg{
  width:19px;
  height:19px;

  flex-shrink:0;

  fill:none;

  stroke:#758191;

  stroke-width:1.7;
}


.directory-search input{
  width:100%;

  min-width:0;

  border:0;
  outline:0;

  color:#e5e9ed;

  background:transparent;

  font-size:11.5px;

  text-align:right;
}


.directory-search input::placeholder{
  color:#707c8c;
}


.directory-search-key{
  width:25px;
  height:25px;

  flex-shrink:0;

  display:grid;

  place-items:center;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:6px;

  color:#5f6b7a;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:8px;
}


.directory-proof{
  margin-top:20px;

  display:flex;

  flex-wrap:wrap;

  gap:16px;
}


.directory-proof span{
  display:flex;

  align-items:center;

  gap:5px;

  color:#7c8796;

  font-size:8px;
}


.directory-proof b{
  color:#67dbaa;
}


/* STATUS PANEL */

.directory-status-panel{
  padding:22px;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:19px;

  background:
    linear-gradient(
      145deg,
      rgba(17,23,32,.98),
      rgba(8,12,18,.98)
    );

  box-shadow:
    0 35px 90px rgba(0,0,0,.25);
}


.directory-status-head{
  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:20px;
}


.directory-status-head>div{
  display:flex;

  flex-direction:column;

  gap:4px;
}


.directory-status-head span{
  color:#667282;

  font-size:7px;
}


.directory-status-head strong{
  color:#d8dde3;

  font-size:12px;
}


.directory-online{
  padding:
    5px 7px;

  display:flex;

  align-items:center;

  gap:5px;

  border:
    1px solid rgba(100,224,174,.13);

  border-radius:999px;

  color:#69ddad!important;

  font-size:7px!important;
}


.directory-online i{
  width:5px;
  height:5px;

  border-radius:50%;

  background:#64e0ae;
}


.directory-status-number{
  margin-top:25px;

  display:flex;

  align-items:flex-end;

  gap:9px;
}


.directory-status-number strong{
  color:#f4f6f8;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:46px;

  line-height:1;
}


.directory-status-number span{
  padding-bottom:4px;

  color:#7b8796;

  font-size:8px;
}


.directory-status-grid{
  margin-top:19px;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:7px;
}


.directory-status-grid>div{
  min-height:72px;

  padding:10px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  border:
    1px solid rgba(255,255,255,.065);

  border-radius:9px;

  background:
    rgba(255,255,255,.015);
}


.directory-status-grid span{
  color:#626e7e;

  font-size:6.5px;
}


.directory-status-grid strong{
  color:#bcc4cd;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:14px;
}


.directory-status-panel>a{
  margin-top:15px;

  padding-top:13px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  border-top:
    1px solid rgba(255,255,255,.06);

  color:#8e99a8;

  font-size:8px;
}


.directory-status-panel>a:hover{
  color:#69ddad;
}


/* FILTER BAR */

.directory-filter-section{
  position:sticky;

  top:82px;

  z-index:30;

  border-bottom:
    1px solid rgba(255,255,255,.06);

  background:
    rgba(7,10,15,.91);

  backdrop-filter:
    blur(18px);
}


.directory-toolbar{
  min-height:84px;

  display:flex;

  align-items:center;

  gap:28px;
}


.directory-filter-copy{
  min-width:115px;

  display:flex;

  flex-direction:column;

  gap:3px;
}


.directory-filter-copy span{
  color:#657181;

  font-size:7px;
}


.directory-filter-copy strong{
  color:#b9c1cb;

  font-size:10px;
}


.directory-filters{
  min-width:0;

  display:flex;

  align-items:center;

  gap:7px;

  overflow-x:auto;

  scrollbar-width:none;
}


.directory-filters::-webkit-scrollbar{
  display:none;
}


.directory-filters button{
  min-height:34px;

  padding:
    0 11px;

  flex-shrink:0;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:8px;

  color:#7d8897;

  background:
    rgba(255,255,255,.018);

  font-family:inherit;

  font-size:8px;

  cursor:pointer;

  transition:.18s ease;
}


.directory-filters button:hover{
  color:#d3d9df;

  border-color:
    rgba(255,255,255,.14);
}


.directory-filters button.active{
  color:#07110c;

  border-color:#64e0ae;

  background:#64e0ae;

  font-weight:650;
}


/* LIBRARY */

.software-library{
  padding:
    46px 0 80px;

  background:#070a0f;
}


.software-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


.software-card{
  min-height:410px;

  padding:21px;

  display:flex;

  flex-direction:column;

  position:relative;

  overflow:hidden;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(17,23,32,.98),
      rgba(9,13,19,.98)
    );

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.software-card::before{
  content:"";

  position:absolute;

  width:190px;
  height:190px;

  top:-125px;
  left:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(100,224,174,.07),
      transparent 69%
    );

  pointer-events:none;
}


.software-card:hover{
  transform:
    translateY(-4px);

  border-color:
    rgba(100,224,174,.17);

  box-shadow:
    0 25px 70px rgba(0,0,0,.20);
}


.software-card[hidden]{
  display:none!important;
}


.software-card-head{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;
}


.software-card-logo{
  width:52px;
  height:52px;

  display:grid;

  place-items:center;

  border:
    1px solid rgba(100,224,174,.13);

  border-radius:14px;

  color:#07110c;

  background:
    linear-gradient(
      135deg,
      #e1fff3,
      #65dfac 48%,
      #7ba9ff
    );

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:8px;

  font-weight:900;
}


.software-card-logo.has-logo{
  background:
    rgba(255,255,255,.035);
}


.software-card-logo img{
  width:31px;
  height:31px;

  object-fit:contain;
}


.software-live-status{
  padding:
    5px 7px;

  display:flex;

  align-items:center;

  gap:5px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:999px;

  color:#7b8796;

  background:
    rgba(255,255,255,.018);

  font-size:7px;
}


.software-live-status i{
  width:5px;
  height:5px;

  display:block;

  border-radius:50%;

  background:#718091;
}


.software-live-status.status-current{
  color:#69ddad;
}


.software-live-status.status-current i{
  background:#64e0ae;
}


.software-live-status.status-rolling{
  color:#83adf9;
}


.software-live-status.status-rolling i{
  background:#83adf9;
}


.software-live-status.status-update-available{
  color:#ffc56d;
}


.software-live-status.status-update-available i{
  background:#ffc56d;
}


.software-live-status.status-review-required{
  color:#ff9494;
}


.software-live-status.status-review-required i{
  background:#ff9494;
}


.software-card-main{
  margin-top:28px;
}


.software-category{
  color:#6d7989;

  font-size:7.5px;
}


.software-card-main h2{
  margin:
    7px 0 6px;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

  font-size:23px;

  font-weight:720;

  letter-spacing:-.025em;
}


.software-card-main h2 a{
  color:#f2f4f6;
}


.software-card-main h2 a:hover{
  color:#70e0b2;
}


.software-publisher{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:6px;

  color:#697586;

  font-size:7px;
}


.software-publisher i{
  width:3px;
  height:3px;

  border-radius:50%;

  background:#495463;
}


.software-card-main>p{
  margin:
    18px 0 0;

  color:#9aa5b3;

  font-size:10px;

  line-height:1.9;
}


.software-version{
  margin-top:auto;
  padding-top:22px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;
}


.software-version span{
  color:#667282;

  font-size:7px;
}


.software-version strong{
  max-width:190px;

  overflow:hidden;

  color:#9ea8b5;

  font-size:8px;

  font-weight:550;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.software-platforms{
  margin-top:11px;

  min-height:27px;

  display:flex;

  flex-wrap:wrap;

  gap:5px;
}


.software-platforms span{
  padding:
    5px 6px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius:6px;

  color:#748090;

  background:
    rgba(255,255,255,.015);

  font-size:6.5px;
}


.software-card-footer{
  margin-top:16px;
  padding-top:15px;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:15px;

  border-top:
    1px solid rgba(255,255,255,.06);
}


.software-card-footer>div:first-child{
  display:flex;

  flex-direction:column;

  gap:3px;
}


.software-card-footer>div:first-child span{
  color:#626e7e;

  font-size:6.5px;
}


.software-card-footer>div:first-child strong{
  color:#a5aeb9;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:11px;
}


.software-card-actions{
  display:flex;

  align-items:center;

  gap:6px;
}


.software-source-link,
.software-details-link{
  min-height:34px;

  padding:
    0 9px;

  display:flex;

  align-items:center;

  gap:6px;

  border-radius:8px;

  font-size:7.5px;

  font-weight:550;
}


.software-source-link{
  color:#8994a3;

  border:
    1px solid rgba(255,255,255,.075);
}


.software-source-link:hover{
  color:white;

  border-color:
    rgba(255,255,255,.15);
}


.software-details-link{
  color:#07110c;

  border:
    1px solid #64e0ae;

  background:#64e0ae;
}


.software-details-link:hover{
  background:#86ebc1;
}


/* EMPTY */

.directory-empty{
  max-width:700px;

  margin:
    70px auto 0;

  padding:40px;

  text-align:center;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius:18px;

  background:
    rgba(255,255,255,.018);
}


.directory-empty span{
  color:#66dbaa;

  font-size:8px;
}


.directory-empty h2{
  margin:
    8px 0 10px;

  font-size:28px;
}


.directory-empty p{
  margin:0;

  color:#8692a1;

  font-size:10px;
}


.directory-empty button{
  margin-top:20px;

  min-height:40px;

  padding:
    0 14px;

  border:
    1px solid #64e0ae;

  border-radius:9px;

  color:#07110c;

  background:#64e0ae;

  font-family:inherit;

  font-size:9px;

  cursor:pointer;
}


/* TRUST CTA */

.directory-trust-section{
  padding:
    0 0 90px;

  background:#070a0f;
}


.directory-trust-card{
  padding:
    35px 38px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:50px;

  border:
    1px solid rgba(100,224,174,.12);

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      rgba(100,224,174,.045),
      rgba(10,15,22,.97)
    );
}


.directory-trust-card>div{
  max-width:750px;
}


.directory-trust-card span{
  color:#65d9aa;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:7px;

  font-weight:750;
}


.directory-trust-card h2{
  margin:
    8px 0 9px;

  color:#f4f6f8;

  font-size:
    clamp(30px,3.3vw,45px);

  line-height:1.35;
}


.directory-trust-card p{
  margin:0;

  color:#929dab;

  font-size:10.5px;

  line-height:1.9;
}


.directory-trust-card>a{
  min-height:45px;

  padding:
    0 16px;

  flex-shrink:0;

  display:flex;

  align-items:center;

  gap:10px;

  border:
    1px solid #64e0ae;

  border-radius:9px;

  color:#07110c;

  background:#64e0ae;

  font-size:9px;

  font-weight:650;
}


/* RESPONSIVE */

@media(max-width:1100px){

  .directory-hero-layout{
    grid-template-columns:1fr;

    gap:40px;
  }

  .directory-status-panel{
    max-width:650px;
  }

  .software-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:800px){

  .directory-filter-section{
    position:static;
  }

  .directory-toolbar{
    padding:
      16px 0;

    align-items:flex-start;

    flex-direction:column;
  }

  .directory-filters{
    width:100%;
  }

}


@media(max-width:650px){

  .directory-hero{
    padding:
      52px 0 48px;
  }

  .directory-hero-copy h1{
    font-size:
      clamp(43px,12vw,60px);
  }

  .directory-hero-copy>p{
    font-size:11.5px;
  }

  .directory-search{
    height:58px;
  }

  .directory-search-key{
    display:none;
  }

  .directory-status-grid{
    grid-template-columns:1fr;
  }

  .software-grid{
    grid-template-columns:1fr;
  }

  .software-card{
    min-height:380px;
  }

  .software-card-footer{
    align-items:flex-start;

    flex-direction:column;
  }

  .software-card-actions{
    width:100%;
  }

  .software-source-link,
  .software-details-link{
    flex:1;

    justify-content:center;
  }

  .directory-trust-card{
    padding:
      28px 23px;

    align-items:flex-start;

    flex-direction:column;
  }

}



/* =====================================================
   FINVERCO DIRECTORY V11.1
   FINAL DENSITY + READABILITY + BRAND POLISH
   ===================================================== */


/* -----------------------------------------------------
   HERO
   ----------------------------------------------------- */

.directory-hero{
  padding-top:62px;
  padding-bottom:58px;
}

.directory-hero-copy>p{
  color:#aab3bf;

  font-size:13.5px;
}

.directory-search{
  margin-top:25px;
}

.directory-proof span{
  color:#8792a1;

  font-size:8.5px;
}


/* -----------------------------------------------------
   FILTERS
   ----------------------------------------------------- */

.directory-toolbar{
  min-height:78px;
}

.directory-filter-copy span{
  font-size:7.5px;
}

.directory-filter-copy strong{
  font-size:11px;
}

.directory-filters{
  gap:8px;
}

.directory-filters button{
  min-height:36px;

  padding-inline:12px;

  color:#8994a3;

  font-size:8.5px;
}


/* -----------------------------------------------------
   SOFTWARE GRID
   ----------------------------------------------------- */

.software-library{
  padding-top:40px;
}

.software-grid{
  gap:12px;
}


/* Much less empty space */

.software-card{
  min-height:350px;

  padding:19px;

  border-radius:17px;
}


/* Logo */

.software-card-logo{
  width:50px;
  height:50px;
}

.software-card-logo.has-logo{
  border-color:
    rgba(255,255,255,.075);

  background:
    rgba(255,255,255,.025);
}

.software-card-logo img{
  width:34px;
  height:34px;

  filter:
    drop-shadow(
      0 4px 10px rgba(0,0,0,.22)
    );
}


/* Status */

.software-live-status{
  padding:
    6px 8px;

  font-size:7.5px;
}


/* Product information */

.software-card-main{
  margin-top:22px;
}

.software-category{
  color:#788494;

  font-size:8px;
}

.software-card-main h2{
  margin-top:6px;

  font-size:22px;
}

.software-publisher{
  color:#778292;

  font-size:7.5px;
}

.software-card-main>p{
  margin-top:14px;

  color:#a0aab7;

  font-size:10.5px;

  line-height:1.85;
}


/* Version */

.software-version{
  padding-top:17px;
}

.software-version span{
  color:#748090;

  font-size:7.5px;
}

.software-version strong{
  color:#acb5c0;

  font-size:8.5px;
}


/* Platform chips */

.software-platforms{
  margin-top:9px;
}

.software-platforms span{
  padding:
    5px 7px;

  color:#818c9b;

  font-size:7px;
}


/* Footer */

.software-card-footer{
  margin-top:13px;
  padding-top:13px;
}

.software-card-footer
>div:first-child span{
  color:#717d8d;

  font-size:7px;
}

.software-card-footer
>div:first-child strong{
  color:#b1bac5;

  font-size:11px;
}


/* Actions */

.software-source-link,
.software-details-link{
  min-height:36px;

  padding-inline:10px;

  font-size:8px;
}

.software-details-link{
  box-shadow:
    0 8px 20px rgba(83,220,168,.06);
}


/* -----------------------------------------------------
   Give actual logos more visual importance
   ----------------------------------------------------- */

.software-card:has(
  .software-card-logo.has-logo
)
.software-card-logo{
  box-shadow:
    inset 0 1px rgba(255,255,255,.04);
}


/* -----------------------------------------------------
   STATUS PANEL
   ----------------------------------------------------- */

.directory-status-number strong{
  font-size:50px;
}

.directory-status-grid span{
  color:#707c8b;

  font-size:7px;
}

.directory-status-grid strong{
  color:#cbd2da;

  font-size:15px;
}


/* -----------------------------------------------------
   TRUST CTA
   ----------------------------------------------------- */

.directory-trust-card p{
  color:#9ba6b4;

  font-size:11px;
}


/* -----------------------------------------------------
   FOOTER READABILITY
   ----------------------------------------------------- */

.footer-main{
  padding-top:48px;
}

.footer-top p{
  color:#818c9b;
}

.footer-bottom{
  color:#6f7a8a;
}


/* -----------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------- */

@media(max-width:1100px){

  .software-card{
    min-height:345px;
  }

}


@media(max-width:650px){

  .directory-hero{
    padding-top:45px;
    padding-bottom:45px;
  }

  .software-card{
    min-height:330px;
  }

  .software-card-main>p{
    font-size:10px;
  }

}