/* =========================
   Base & Design Tokens
   ========================= */
:root {
  --clr-green-600: #1FAE66;
  --clr-green-500: #27C588;
  --clr-blue-600:  #165DFF;
  --clr-blue-500:  #4B83FF;

  --clr-text-900: #1f2937;
  --clr-text-700: #374151;
  --clr-text-500: #6B7280;
  --clr-muted:    #9CA3AF;

  --clr-bg:       #FFFFFF;
  --clr-bg-soft:  #F7F9FB;
  --clr-border:   #E5E7EB;

  --grad-main: linear-gradient(135deg, var(--clr-green-600) 0%, var(--clr-blue-600) 100%);

  --font-ar: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  --fs-900: clamp(2.2rem, 2.6vw + 1.2rem, 3.2rem);
  --fs-800: clamp(1.6rem, 1.8vw + 0.9rem, 2.4rem);
  --fs-700: clamp(1.25rem, 1.1vw + 0.8rem, 1.6rem);
  --fs-600: 1.125rem;
  --fs-500: 1rem;
  --fs-400: 0.9375rem;

  --container-max: 1200px;
  --container-pad: 4vw;
  --radius-lg: 1rem;
  --radius-md: .75rem;
  --radius-sm: .5rem;

  --shadow-sm: 0 4px 12px rgba(0,0,0,.06);
  --shadow-md: 0 10px 24px rgba(0,0,0,.10);

  --speed-1: 150ms;
  --speed-2: 250ms;
  --speed-3: 400ms;
}

/* =========================
   Global Resets & Basics
   ========================= */
html[dir="rtl"] { direction: rtl; }
html { scroll-behavior: smooth; }
*,*::before,*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ar);
  font-size: var(--fs-500);
  line-height: 1.8;
  color: var(--clr-text-700);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .9; }
button { font-family: inherit; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }

/* Focus */
:focus-visible { outline: 3px solid var(--clr-blue-600); outline-offset: 2px; }

/* =========================
   Typography
   ========================= */
h1,h2,h3,h4{ color:var(--clr-text-900); line-height:1.3; margin:0 0 .5em; }
h1{ font-size:var(--fs-900); font-weight:800; }
h2{ font-size:var(--fs-800); font-weight:800; }
h3{ font-size:var(--fs-700); font-weight:700; }
p{ margin:0 0 1rem; color:var(--clr-text-700); }
.small{ font-size:var(--fs-400); color:var(--clr-muted); }

/* =========================
   Layout Helpers
   ========================= */
.container { width:min(var(--container-max),100% - var(--container-pad)); margin-inline:auto; }
.section { padding-block: clamp(48px, 8vw, 96px); }
.section.alt { background: var(--clr-bg-soft); }

.grid{ display:grid; gap:1.25rem; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:992px){ .grid.cols-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid.cols-3,.grid.cols-2,.grid.cols-4{ grid-template-columns:1fr;} }

/* Buttons */
.btn{
  --_bg: var(--clr-text-900); --_fg:#fff; --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.25rem; border-radius:var(--radius-md); border:1px solid var(--_bd);
  background:var(--_bg); color:var(--_fg); font-weight:700;
  transition: transform var(--speed-1) ease, box-shadow var(--speed-2) ease, opacity var(--speed-1);
  text-align:center;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn.primary{ --_bg: var(--grad-main); }
.btn.outline{ --_bg:transparent; --_fg:var(--clr-text-900); --_bd:var(--clr-border); background:transparent; }
.btn.wa{ --_bg:#25D366; }

.badge{
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  background:rgba(31,174,102,.08); color:var(--clr-green-600);
  font-size:.8rem; font-weight:700;
}

/* Utils */
.hidden{ display:none !important; }
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; }
.text-center{ text-align:center; }
.muted{ color:var(--clr-muted); }

/* Shell */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--clr-border); }
.site-footer{ border-top:1px solid var(--clr-border); background:#fff; }

.whatsapp-float{
  position:fixed; inset-inline-end:18px; inset-block-end:18px; width:54px; height:54px;
  border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-md); z-index:60;
}

/* Default hero padding */
.hero{ padding-block: clamp(80px, 12vw, 140px); background: var(--clr-bg-soft); }

/* ###############################################################################################################################
############################################################################################################################### */

/* =========================
   Header
   ========================= */
.header{
  position:sticky; top:0; inset-inline:0; z-index:100;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--clr-border);
  transition: box-shadow var(--speed-2) ease, background var(--speed-2) ease;
}
.header--scrolled{ background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.06); }

.header__row{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; min-height:70px; }
.header__logo .logo__txt{ font-weight:800; font-size:1.5rem; letter-spacing:.2px; background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; }

.header__nav{ display:none; }
.header__cta{ display:none; gap:.5rem; align-items:center; }

.nav__list{ display:flex; gap:1rem; }
.nav__link{ display:inline-block; padding:.6rem .8rem; border-radius:var(--radius-sm); color:var(--clr-text-700); font-weight:600; transition: background var(--speed-2), color var(--speed-2); }
.nav__link:hover{ background:var(--clr-bg-soft); color:var(--clr-text-900); }

.nav-toggle{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--clr-border); border-radius:10px; background:#fff; }
.nav-toggle__bar{ width:18px; height:2px; background:var(--clr-text-900); display:block; }
.nav-toggle__bar + .nav-toggle__bar{ margin-top:4px; }

/* Mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:90; display:grid; grid-template-columns:1fr; }
.mobile-menu[hidden]{ display:none; }
.mobile-menu__overlay{ position:absolute; inset:0; background:rgba(15,23,42,.45); }
.mobile-menu__inner{
  position:relative; z-index:2; margin-inline:auto; margin-top:10px; width:min(92vw,420px);
  background:#fff; border-radius:20px; padding:20px; box-shadow:var(--shadow-md);
  animation: slideIn .25s ease both;
}
@keyframes slideIn{ from{ transform:translateY(-6px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.mobile-menu__close{ position:absolute; inset-inline-start:12px; inset-block-start:8px; font-size:2rem; line-height:1; background:transparent; border:0; color:var(--clr-text-900); }
.mobile-menu__list{ display:grid; gap:.25rem; margin-top:.75rem; }
.mobile-link{ display:block; padding:.9rem 1rem; border-radius:12px; font-weight:700; color:var(--clr-text-900); background:#fff; border:1px solid var(--clr-border); }
.mobile-link:hover{ background:var(--clr-bg-soft); }
.mobile-menu__ctas{ display:grid; gap:.5rem; margin-top:1rem; }
.w-100{ width:100%; }

@media (min-width:992px){
  .header__row{ grid-template-columns:auto 1fr auto; }
  .header__nav{ display:block; }
  .header__cta{ display:flex; }
  .nav-toggle{ display:none; }
}

/* ###############################################################################################################################
############################################################################################################################### */

/* =========================
   Hero
   ========================= */

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(22,93,255,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(31,174,102,.12), transparent 55%),
    var(--clr-bg-soft);
}
.hero .container{ position:relative; z-index:2; }

.hero__grid{ display:grid; gap:clamp(24px,4vw,48px); grid-template-columns:1.05fr .95fr; align-items:center; }
@media (max-width:992px){ .hero__grid{ grid-template-columns:1fr; } }

.hero__title{ font-size:var(--fs-900); margin-top:.5rem; }
.hero__brand{ background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
.hero__desc{ font-size:var(--fs-600); color:var(--clr-text-700); margin-top:.4rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }

.hero__points{ display:grid; gap:.35rem; margin-top:1rem; color:var(--clr-text-700); }
.hero__points li{ position:relative; padding-inline-start:1.2rem; font-weight:600; }
.hero__points li::before{ content:"✔"; color:var(--clr-green-600); position:absolute; inset-inline-start:0; inset-block-start:0; }

.hero__legal{ margin-top:.75rem; }

.hero__visual{ position:relative; min-height:340px; display:grid; align-content:center; justify-items:center; }

.glass-card{
  width:min(520px,100%); backdrop-filter:saturate(140%) blur(12px); background:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.5); box-shadow:var(--shadow-md); border-radius:24px; overflow:hidden;
}
.glass-card__head{ display:flex; gap:6px; padding:10px 14px; background:rgba(255,255,255,.6); border-bottom:1px solid var(--clr-border); }
.glass-card__head .dot{ width:10px; height:10px; border-radius:50%; background:var(--clr-border); }
.glass-card__body{ display:flex; flex-wrap:wrap; gap:10px; padding:18px; }
.chip{ padding:.45rem .75rem; border-radius:999px; font-weight:700; font-size:.92rem; background:#fff; border:1px solid var(--clr-border); color:var(--clr-text-900); }
.chip--accent{ background:var(--clr-bg-soft); border-color:transparent; }
.glass-card__footer{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-top:1px solid var(--clr-border); background:rgba(255,255,255,.6); }
.logo-mini{ font-weight:800; letter-spacing:.2px; background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ok{ color:var(--clr-green-600); font-weight:800; }

.trust-row{ margin-top:14px; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:min(520px,100%); }
@media (max-width:520px){ .trust-row{ grid-template-columns:repeat(3,1fr); } }
.trust-item{ background:#fff; border:1px dashed var(--clr-border); border-radius:14px; padding:.6rem; text-align:center; font-weight:700; color:var(--clr-text-700); }

.scroll-hint{
  position:absolute; inset-inline-end:50%; transform:translateX(50%); inset-block-end:16px;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--clr-border);
  display:grid; place-items:center; color:var(--clr-text-900); background:#fff; box-shadow:var(--shadow-sm);
  transition: transform var(--speed-2);
}
.scroll-hint:hover{ transform:translateX(50%) translateY(-2px); }

.hero__blob{ position:absolute; z-index:1; opacity:.18; pointer-events:none; filter:blur(1px); }
.hero__blob--1{ inset-inline-start:-120px; inset-block-start:-120px; width:460px; }
.hero__blob--2{ inset-inline-end:-140px; inset-block-end:-140px; width:520px; }

/* Anchor offset with sticky header */
section{ scroll-margin-top:90px; }

/* ###############################################################################################################################
############################################################################################################################### */

/* =========================
   About
   ========================= */
.about{
  position:relative;
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(31,174,102,.10), transparent 60%),
    radial-gradient(900px 420px at 85% 100%, rgba(22,93,255,.08), transparent 55%),
    #fff;
}
.about__grid{ display:grid; gap:clamp(24px,4vw,48px); grid-template-columns:1.05fr .95fr; align-items:center; }
@media (max-width:992px){ .about__grid{ grid-template-columns:1fr; } }

.about__title{ font-size:var(--fs-800); margin-top:.35rem; }
.about__brand{ background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
.about__desc{ font-size:var(--fs-600); color:var(--clr-text-700); margin-top:.4rem; }
.about__cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.about__legal{ margin-top:.6rem; }

.about__points{ display:grid; gap:.55rem; margin-top:1rem; }
.about__points li{ display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--clr-text-700); }
.icon-circle{ width:34px; height:34px; border-radius:999px; display:grid; place-items:center; background:rgba(22,93,255,.08); color:var(--clr-blue-600); flex:none; }
.icon-circle svg{ width:18px; height:18px; }

.about__visual{ position:relative; }
.about__stack{ position:relative; display:grid; gap:14px; transform-style:preserve-3d; }
.about-card{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:flex-start;
  padding:16px 18px; border-radius:16px; background:#fff; border:1px solid var(--clr-border);
  box-shadow:var(--shadow-sm); transition:transform var(--speed-2), box-shadow var(--speed-2);
}
.about-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.about-card__icon{ width:42px; height:42px; border-radius:12px; background:var(--clr-bg-soft); display:grid; place-items:center; color:var(--clr-green-600); }
.about-card__icon svg{ width:22px; height:22px; }
.about-card__body h3{ margin:0 0 .25rem; font-size:1.05rem; font-weight:800; color:var(--clr-text-900); }
.about-card__body p{ margin:0; color:var(--clr-text-700); }

.about__blob{ position:absolute; pointer-events:none; opacity:.12; filter:blur(1px); }
.about__blob--a{ inset-inline-end:-60px; inset-block-start:-40px; width:360px; }

#about{ scroll-margin-top:90px; }


/* ###############################################################################################################################
############################################################################################################################### */


/* ========== Loans (استخراج القروض) ========== */
.loans{
  position: relative;
  background:
    radial-gradient(1100px 520px at 10% 0%, rgba(31,174,102,.10), transparent 60%),
    radial-gradient(900px 520px at 95% 100%, rgba(22,93,255,.08), transparent 55%),
    var(--clr-bg-soft);
}
.loans__grid{
  display:grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
}
@media (max-width: 992px){
  .loans__grid{ grid-template-columns: 1fr; }
}
.loans__title{ font-size: var(--fs-800); margin-top:.35rem; }
.loans__brand{
  background: var(--grad-main);
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;
}
.loans__desc{ font-size: var(--fs-600); color: var(--clr-text-700); margin-top:.4rem; }

.tick-list{ display:grid; gap:.5rem; margin: 1rem 0; }
.tick-list li{
  position: relative; padding-inline-start: 1.35rem; font-weight: 700; color: var(--clr-text-700);
}
.tick-list li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.25rem;
  width:.9rem; height:.9rem; border-radius:50%;
  background: conic-gradient(from 180deg, var(--clr-green-600), var(--clr-blue-600));
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 60%);
          mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 60%);
  box-shadow: 0 0 0 2px rgba(31,174,102,.12);
}
.loans__cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }

/* Steps */
.steps{
  position: relative;
  counter-reset: step;
  display: grid; gap: 12px;
}
.step{
  display:grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  background:#fff; border:1px solid var(--clr-border); border-radius: 16px;
  padding: 14px 16px; box-shadow: var(--shadow-sm);
  transition: transform var(--speed-2), box-shadow var(--speed-2);
}
.step:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step + .step{ position:relative; }
.step + .step::before{
  /* خط عمودي رفيع يوصل بين البطاقات */
  content:""; position:absolute; inset-inline-start: 22px; inset-block-start:-12px; width:2px; height:12px;
  background: linear-gradient(180deg, rgba(31,174,102,.3), rgba(22,93,255,.3));
}

.step__num{
  width: 36px; height: 36px; border-radius: 12px; flex:none;
  display:grid; place-items:center; font-weight:800; color:#fff;
  background: var(--grad-main);
  box-shadow: 0 6px 16px rgba(22,93,255,.18);
  position:relative; isolation:isolate;
}
.step__num::after{
  /* نبضة خفيفة */
  content:""; position:absolute; inset:0; border-radius:12px; z-index:-1;
  animation: pulseRing 1400ms ease-out infinite;
  background: radial-gradient(60% 60% at 50% 50%, rgba(22,93,255,.22), transparent 65%);
}
@keyframes pulseRing{
  0%{ transform: scale(.9); opacity:.8; }
  100%{ transform: scale(1.25); opacity:0; }
}
.step__body h3{ margin:.1rem 0 .15rem; font-size:1.05rem; font-weight:800; color:var(--clr-text-900); }
.step__body p{ margin:0; color:var(--clr-text-700); }

/* Ribbon */
.ribbon{
  margin-top: 12px;
  display:flex; justify-content:center; align-items:center;
  gap:.5rem; padding:.55rem .9rem;
  border:1px dashed var(--clr-border); border-radius: 999px;
  background:#fff; color: var(--clr-text-700); font-weight:700;
}

/* Decor */
.loans__blob{
  position:absolute; pointer-events:none; opacity:.12; filter: blur(1px);
}
.loans__blob--l{ inset-inline-start:-80px; inset-block-end:-50px; width: 360px; }

/* ###############################################################################################################################
############################################################################################################################### */

.repay{
  position: relative;
  background:
    radial-gradient(1100px 520px at 90% -10%, rgba(22,93,255,.08), transparent 60%),
    radial-gradient(900px 520px at 10% 100%, rgba(31,174,102,.10), transparent 55%),
    #fff;
}
.repay__head{ text-align:center; max-width: 760px; margin-inline:auto; }
.repay__title{ font-size: var(--fs-800); margin-top:.35rem; }
.repay__brand{
  background: var(--grad-main);
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;
}
.repay__desc{ font-size: var(--fs-600); color: var(--clr-text-700); margin-top:.35rem; }

/* شبكة البطاقات */
.city-grid{
  margin-top: clamp(18px, 3vw, 28px);
  display:grid; gap: 14px;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1100px){ .city-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){  .city-grid{ grid-template-columns: 1fr; } }

.city-card{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(31,174,102,.55), rgba(22,93,255,.55)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed-2), box-shadow var(--speed-2), background var(--speed-3);
}
.city-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(31,174,102,.85), rgba(22,93,255,.85)) border-box;
}

.city-card__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; }
.city-card__icon{
  width:38px; height:38px; border-radius:12px; flex:none;
  display:grid; place-items:center; color: var(--clr-blue-600);
  background: rgba(22,93,255,.08);
}
.city-card__icon svg{ width:20px; height:20px; }
.city-card__title{ margin:0; font-size:1.05rem; font-weight:800; color: var(--clr-text-900); }

.city-card__text{ margin:.25rem 0 .5rem; color: var(--clr-text-700); }
.city-card__points{ display:grid; gap:.25rem; margin:.35rem 0 .6rem; }
.city-card__points li{
  position:relative; padding-inline-start: 1.05rem; font-weight:700; color: var(--clr-text-700);
}
.city-card__points li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.45rem;
  width:.5rem; height:.5rem; border-radius:50%;
  background: conic-gradient(from 180deg, var(--clr-green-600), var(--clr-blue-600));
}

.city-card__cta{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* دعوة موحّدة أسفل القسم */
.repay__cta{
  margin-top: clamp(18px, 3vw, 28px);
  display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:center;
  background:#fff; border:1px dashed var(--clr-border); border-radius: 16px; padding: .9rem 1rem;
}
.repay__cta-actions{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* ديكور */
.repay__blob{
  position:absolute; pointer-events:none; opacity:.12; filter: blur(1px);
}
.repay__blob--r{ inset-inline-end:-80px; inset-block-start:-60px; width: 360px; }

/* تحسين مسافة الانكور */
#repay{ scroll-margin-top: 90px; }

/* ###############################################################################################################################
############################################################################################################################### */
/* ========== Benefits (ما يميز خدماتنا) ========== */
.benefits{
  position: relative;
  background:
    radial-gradient(1000px 520px at 15% -10%, rgba(31,174,102,.10), transparent 60%),
    radial-gradient(900px 520px at 90% 110%, rgba(22,93,255,.08), transparent 55%),
    var(--clr-bg-soft);
}
.benefits__head{ text-align:center; max-width: 760px; margin-inline:auto; }
.benefits__title{ font-size: var(--fs-800); margin-top:.35rem; }
.benefits__brand{
  background: var(--grad-main);
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;
}
.benefits__desc{ font-size: var(--fs-600); color: var(--clr-text-700); margin-top:.35rem; }

/* شبكة المزايا */
.features-grid{
  margin-top: clamp(18px, 3vw, 28px);
  display:grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px){ .features-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  .features-grid{ grid-template-columns: 1fr; } }

.feature-card{
  position:relative; isolation:isolate;
  border-radius: 18px;
  padding: 16px 16px 18px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(31,174,102,.45), rgba(22,93,255,.45)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed-2), box-shadow var(--speed-2), background var(--speed-3);
  overflow: hidden;
}
.feature-card::before{
  /* خط علوي متدرّج يعطي إحساس بالجودة */
  content:""; position:absolute; inset-inline:0; inset-block-start:0; height:3px;
  background: var(--grad-main);
  opacity:.85;
}
.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(31,174,102,.85), rgba(22,93,255,.85)) border-box;
}
.feature-card__icon{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:grid; place-items:center; color:var(--clr-green-600);
  background: rgba(31,174,102,.10);
  box-shadow: 0 6px 16px rgba(31,174,102,.15);
  position: relative;
}
.feature-card__icon::after{
  /* نبضة خفيفة عند المرور */
  content:""; position:absolute; inset:0; border-radius:12px; z-index:-1;
  animation: benefitsPulse 1.8s ease-out infinite; opacity:.0;
}
.feature-card:hover .feature-card__icon::after{ opacity:.9; }
@keyframes benefitsPulse{
  0%{ transform: scale(.9); background: radial-gradient(60% 60% at 50% 50%, rgba(31,174,102,.22), transparent 65%); }
  100%{ transform: scale(1.25); background: radial-gradient(60% 60% at 50% 50%, rgba(22,93,255,.0), transparent 65%); }
}

.feature-card__title{ margin:.6rem 0 .2rem; font-size:1.05rem; font-weight:800; color:var(--clr-text-900); }
.feature-card__text{ margin:0 0 .55rem; color:var(--clr-text-700); }
.feature-card__tag{
  display:inline-block; padding:.3rem .6rem; border-radius:999px; font-weight:800; font-size:.8rem;
  background: rgba(22,93,255,.08); color: var(--clr-blue-600);
}

/* شريط نقاط سريعة */
.benefits__strip{
  margin-top: clamp(18px, 3vw, 28px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
}
.benefits__strip span{
  display:inline-block; padding:.45rem .8rem; border-radius:999px; font-weight:700; color: var(--clr-text-700);
  background:#fff; border:1px dashed var(--clr-border);
}

/* CTA أسفل القسم */
.benefits__cta{
  margin-top: clamp(18px, 3vw, 28px);
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}

/* ديكور */
.benefits__blob{ position:absolute; pointer-events:none; opacity:.12; filter: blur(1px); }
.benefits__blob--b{ inset-inline-start:-80px; inset-block-start:-60px; width: 360px; }

/* تحسّن مسافة الانكور مع الهيدر اللاصق */
#benefits{ scroll-margin-top: 90px; }


/* ###############################################################################################################################
############################################################################################################################### */
/* ========== Clients (عملاء يثقون بخدماتنا) ========== */
.clients{
  position: relative;
  background:
    radial-gradient(1000px 520px at 85% -10%, rgba(22,93,255,.08), transparent 60%),
    radial-gradient(900px 520px at 10% 110%, rgba(31,174,102,.10), transparent 55%),
    #fff;
}
.clients__head{ text-align:center; max-width: 760px; margin-inline:auto; }
.clients__title{ font-size: var(--fs-800); margin-top:.35rem; }
.clients__desc{ font-size: var(--fs-600); color: var(--clr-text-700); margin-top:.35rem; }

/* شريط الثقة */
.logo-belt{
  margin-top: clamp(16px, 3vw, 24px);
  display:flex; gap:.6rem; align-items:center;
  overflow-x:auto; padding: .25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.logo-pill{
  flex: 0 0 auto;
  padding: .55rem .9rem;
  border-radius: 999px;
  background:#fff;
  border:1px dashed var(--clr-border);
  font-weight:800; color: var(--clr-text-700);
  white-space: nowrap;
}

/* بطاقات الآراء */
.t-grid{
  margin-top: clamp(16px, 3vw, 24px);
  display:grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px){ .t-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  .t-grid{ grid-template-columns: 1fr; } }

.t-card{
  position: relative; isolation: isolate;
  border-radius: 18px;
  padding: 16px 16px 18px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(31,174,102,.45), rgba(22,93,255,.45)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed-2), box-shadow var(--speed-2), background var(--speed-3);
}
.t-card::before{
  content:""; position:absolute; inset-inline:0; inset-block-start:0; height:3px;
  background: var(--grad-main); opacity:.85;
}
.t-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(31,174,102,.85), rgba(22,93,255,.85)) border-box;
}

/* نجوم */
.t-card__stars{
  display:flex; gap: 4px; color: var(--clr-green-600);
}
.t-card__stars svg{ width:18px; height:18px; }

.t-card__quote{
  margin: .45rem 0 .7rem;
  color: var(--clr-text-700);
  font-weight: 600;
}

/* الميتا */
.t-card__meta{
  display:flex; align-items:center; gap:.6rem;
}
.t-card__avatar{
  width: 38px; height: 38px;
  border-radius: 50%;
  display:grid; place-items:center;
  font-weight: 800; color:#fff;
  background: var(--grad-main);
  box-shadow: 0 6px 16px rgba(22,93,255,.18);
}
.t-card__name{ font-weight: 800; color: var(--clr-text-900); }
.t-card__role{ font-size: .9rem; color: var(--clr-text-500); }

/* ديكور */
.clients__blob{
  position:absolute; pointer-events:none; opacity:.12; filter: blur(1px);
}
.clients__blob--c{ inset-inline-end:-80px; inset-block-start:-60px; width: 360px; }

/* تحسين مسافة الانكور */
#clients{ scroll-margin-top: 90px; }




/* ###############################################################################################################################
############################################################################################################################### */

/* ========== Footer ========== */
.footer{
  position: relative;
  background:#fff;
}
.footer::before{
  /* خط علوي متدرّج لطيف */
  content:""; position:absolute; inset-inline:0; inset-block-start:0; height:3px;
  background: var(--grad-main); opacity:.85;
}
.footer__grid{
  display:grid; gap: 14px;
  grid-template-columns: 1.3fr 1fr 1fr;
  align-items: start;
}
@media (max-width: 992px){ .footer__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .footer__grid{ grid-template-columns: 1fr; } }

.footer__logo .logo__txt{
  font-weight: 800; font-size: 1.6rem; letter-spacing:.2px;
  background: var(--grad-main); -webkit-background-clip:text; background-clip:text; color: transparent;
}
.footer__tagline{ margin:.35rem 0 .6rem; color: var(--clr-text-700); }

.footer__chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.footer__chips li{
  padding:.35rem .6rem; border-radius:999px; font-weight:700;
  background: var(--clr-bg-soft); color: var(--clr-text-700); border:1px solid var(--clr-border);
}

.footer__title{ margin:0 0 .6rem; font-size:1rem; font-weight:800; color: var(--clr-text-900); }
.footer__list{ display:grid; gap:.35rem; }
.footer__list a{ color: var(--clr-text-700); font-weight:700; }
.footer__list a:hover{ color: var(--clr-text-900); }

.contact-pill{
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem .8rem; border:1px solid var(--clr-border); border-radius:12px;
  font-weight:800; color: var(--clr-text-900); background:#fff;
  transition: transform var(--speed-2), box-shadow var(--speed-2);
  margin-bottom:.5rem;
}
.contact-pill svg{ width:18px; height:18px; }
.contact-pill:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.contact-pill--wa{ background:#25D366; border-color:#25D366; color:#fff; }

.footer__legal{ margin-top:.6rem; }

.footer__bottom{
  margin-top: 1rem; padding-top: .75rem;
  border-top: 1px solid var(--clr-border);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.to-top{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .65rem; border-radius:999px; background:#fff; border:1px solid var(--clr-border);
  font-weight:800; color: var(--clr-text-900);
}
.to-top svg{ width:16px; height:16px; }

/* ###############################################################################################################################
############################################################################################################################### */
/* ========== Preloader ========== */
body.is-preloading { overflow: hidden; }

.preloader{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(22,93,255,.06), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(31,174,102,.08), transparent 55%),
    #ffffff;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.preloader__inner{
  display: grid; justify-items: center; gap: .6rem;
}
.preloader__ring{
  width: 64px; height: 64px; border-radius: 50%;
  /* حلقة بدوائر متدرجة */
  background: conic-gradient(from 0deg, var(--clr-green-600), var(--clr-blue-600));
  -webkit-mask: radial-gradient(circle 52% at 50% 50%, transparent 49%, #000 50% 100%);
          mask: radial-gradient(circle 52% at 50% 50%, transparent 49%, #000 50% 100%);
  animation: spin 900ms linear infinite;
  filter: drop-shadow(0 6px 16px rgba(22,93,255,.18));
}
.preloader__logo{
  font-weight: 800; font-size: 1.35rem; letter-spacing: .2px;
  background: var(--grad-main);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.preloader__txt{
  font-size: .9rem; color: var(--clr-text-500); font-weight: 700;
}

/* إخفاء عندما تضاف الكلاس من JS */
.preloader.preloader--hide{
  opacity: 0; visibility: hidden;
}

/* دوران الحلقة */
@keyframes spin{
  to { transform: rotate(360deg); }
}

/* احترام تفضيلات تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .preloader__ring{ animation: none; }
}


/* ###############################################################################################################################
############################################################################################################################### */

/* تحسين مسافة الانكور مع الهيدر اللاصق */
#contact{ scroll-margin-top: 90px;}


/* قصّ الديكور ومنع تمرير أفقي */
html, body { max-width: 100%; overflow-x: hidden; }

/* الأقسام التي فيها Blobs ديكورية */
.hero, .about, .loans, .repay { overflow: hidden; }

/* ضبط الـcontainer للموبايل بدقّة */
:root { --container-pad: clamp(16px, 4vw, 32px); }

.container{
  width: min(var(--container-max), 100%);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* تصغير أحجام الـBlobs على الشاشات الصغيرة */
@media (max-width: 480px){
  .hero__blob--1, .hero__blob--2,
  .loans__blob--l,
  .repay__blob--r,
  .about__blob--a { width: 240px; }
}
/* =========================
   WOW + Animate.css v4 compatibility
   ========================= */
.wow{ visibility:hidden; }
.wow.animate__animated{ visibility:visible; }