:root {
      --brand: #0B4EDB;
      /* أزرق */
      --brand-2: #4DA3FF;
      /* أزرق فاتح */
      --ink: #0F172A;
      /* نص داكن */
      --muted: #64748B;
      /* نص ثانوي */
      --bg: #F6F9FF;
      /* خلفية لطيفة */
      --card: #FFFFFF;
      --ring: rgba(11, 78, 219, .18);
      --bs-primary: #2563eb;
      /* Modern Blue */
      --bs-secondary: #64748b;
      /* Slate */
      --bs-success: #16a34a;
      /* Emerald */
      --bs-warning: #f59e0b;
      /* Amber */
      --bs-danger: #dc2626;
      /* Soft Red */
      --bs-light: #f8fafc;
      --bs-dark: #0f172a;
      --font-ar: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
      --font-en: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  }

  html[lang="ar"] body {
      font-family: var(--font-ar);
  }

  html[lang="en"] body {
      font-family: var(--font-en);
  }

  .btn {
      border-radius: 10px;
      font-weight: 500;
      padding: 10px 18px;
      transition: all 0.25s ease;
  }

  .btn-primary {
      --bs-btn-bg: #2563eb;
      --bs-btn-border-color: #2563eb;
      --bs-btn-hover-bg: #1e40af;
      --bs-btn-hover-border-color: #1e40af;
      --bs-btn-active-bg: #1e3a8a;
      --bs-btn-active-border-color: #1e3a8a;
      --bs-btn-color: #fff;
      --bs-btn-hover-color: #fff;

      border-radius: 10px;
      font-weight: 500;
      box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
  }

  .btn-primary:hover {
      background-color: #1e40af;
      transform: translateY(-1px);
  }

  .btn-outline-primary {
      color: var(--bs-primary);
      border: 1.5px solid var(--bs-primary);
  }

  .btn-outline-primary:hover {
      background-color: var(--bs-primary);
      color: #fff;
  }

  html,
  body {
      height: 100%;
  }

  body {

      color: var(--ink);
      background: var(--bg);
  }

  .jc {
      justify-content: center;
  }

  .ac {
      align-items: center;
  }

  /* Helpers */
  .text-muted-2 {
      color: var(--muted) !important;
  }

  .shadow-soft {
      box-shadow: 0 10px 25px rgba(2, 6, 23, .08);
  }

  .radius-2xl {
      border-radius: 1.25rem;
  }

  .text-primary {
      color: var(--brand) !important;
  }

  .text-secondary {
      color: var(--brand-2) !important;
  }

  .btn-brand {
      --bs-btn-bg: var(--brand);
      --bs-btn-border-color: var(--brand);
      --bs-btn-hover-bg: #0A43BE;
      --bs-btn-hover-border-color: #0A43BE;
      --bs-btn-color: #fff;
      --bs-btn-hover-color: #fff;
      box-shadow: 0 10px 20px var(--ring);

  }

  .btn {
      font-size: 1rem;
  }

  .btn-outline-brand {
      --bs-btn-color: var(--brand);
      --bs-btn-border-color: rgba(11, 78, 219, .25);
      --bs-btn-hover-bg: rgba(11, 78, 219, .08);
      --bs-btn-hover-border-color: rgba(11, 78, 219, .35);
      --bs-btn-hover-color: var(--brand);
      background: #fff;
  }

  /* Navbar */
  .navbar {
      background: #fff;
      border-bottom: 1px solid rgba(15, 23, 42, .06);
  }

  .brand-badge {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      color: #fff;
      box-shadow: 0 10px 20px var(--ring);
      flex: 0 0 auto;
  }

  .navbar .nav-link {
      color: rgba(15, 23, 42, .78);

      padding: .65rem .9rem;
      border-radius: 30px;
      font-size: .8rem;
  }

  .navbar .nav-link:hover {
      background: rgba(11, 78, 219, .07);
      color: var(--brand);
  }

  .navbar .nav-link.active {
      background: rgba(11, 78, 219, .10);
      color: var(--brand);
      font-weight: 700;
  }

  /* Hero */
  .hero {
      position: relative;
      overflow: hidden;
      border-radius: 1.5rem;
      background:
          linear-gradient(90deg, rgba(11, 78, 219, .78), rgba(77, 163, 255, .85)),
          url("https://honorrank.sa/images/hero.webp");
      background-size: cover;
      background-position: center;
      min-height: 520px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 18px 40px rgba(2, 6, 23, .12);
  }

  .hero::after {
      content: "";
      position: absolute;

      /*inset: -40%;*/
      background:
          radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .18), transparent 40%),
          radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .14), transparent 42%);
      transform: rotate(12deg);
      pointer-events: none;
  }

  .hero .content {
      position: relative;
      z-index: 1;
      color: #fff;
      text-align: center;
  }

  .hero .kpis .kpi {
      background: rgba(255, 255, 255, .14);
      border: 1px solid rgba(255, 255, 255, .18);
      backdrop-filter: blur(10px);
  }

  .hero .kpis .kpi strong {
      font-size: 1rem;
  }

  /* Sections */
  section {
      padding: 72px 0;
  }

  .section-title {
      font-weight: 800;
      letter-spacing: .2px;
  }

  .section-sub {
      color: var(--muted);
      max-width: 720px;
  }

  /* Feature cards */
  .feature-card {
      background: var(--card);
      border: 1px solid rgba(15, 23, 42, .06);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      height: 100%;
  }

  .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 30px rgba(2, 6, 23, .10);
      border-color: rgba(11, 78, 219, .18);
  }

  .icon-pill {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: rgba(11, 78, 219, .08);
      color: var(--brand);
      font-size: 1.35rem;
  }

  /* About */
  .about-card {
      background: #fff;
      border: 1px solid rgba(15, 23, 42, .06);
  }

  .about-img {
      border-radius: 1.25rem;
      overflow: hidden;
      min-height: 360px;
      background:
          linear-gradient(135deg, rgba(11, 78, 219, .25), rgba(77, 163, 255, .25)),
          url("https://images.unsplash.com/photo-1529070538774-1843cb3265df?auto=format&fit=crop&w=1400&q=80");
      background-size: cover;
      background-position: center;
      box-shadow: 0 14px 30px rgba(2, 6, 23, .10);
  }

  /* Contact */
  .form-control,
  .form-select {
      border-radius: 14px;
      border-color: rgba(15, 23, 42, .10);
      padding: .85rem 1rem;
  }

  .form-control:focus,
  .form-select:focus {
      border-color: rgba(11, 78, 219, .35);
      box-shadow: 0 0 0 .25rem rgba(11, 78, 219, .12);
  }

  /* Footer */
  footer {
      padding: 32px 0 96px;
      /* مساحة للبوتوم ناف */
      border-top: 1px solid rgba(15, 23, 42, .06);
      background: #fff;
  }

  /* Bottom nav (mobile) */
  .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-top: 1px solid rgba(15, 23, 42, .08);
      padding: .6rem .75rem;
      display: none;
      z-index: 1030;
  }

  .bottom-nav a {
      text-decoration: none;
      color: rgba(15, 23, 42, .75);
      font-weight: 700;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .15rem;
      padding: .35rem .2rem;
      border-radius: 14px;
      width: 20%;
  }

  .bottom-nav a i {
      font-size: 1.1rem;
  }

  .bottom-nav a.active {
      color: var(--brand);
      background: rgba(11, 78, 219, .08);
  }

  .btn-light {
      color: #0A43BE;
  }

  @keyframes fadeinout {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .fade-item {
      animation: fadeinout infinite alternate-reverse 1s;
  }

  @media (max-width: 991.98px) {
      .hero {
          min-height: 540px;
          background-position: right;
      }

      .bottom-nav {
          display: flex;
          justify-content: space-between;
          gap: .4rem;
      }

      .nav-actions-desktop {
          display: none !important;
      }

      .lead {
          font-size: .9rem;
      }

      .hero .kpis .kpi strong {
          font-size: .8rem;
      }
  }

  @media (min-width: 992px) {
      .nav-actions-mobile {
          display: none !important;
      }
  }



  /* Payments strip */
  .payments-strip {
      padding: 14px 0;
      background: #f6f8fb;
      /* قريب من اللي بالصورة */
      border-top: 1px solid rgba(15, 23, 42, .08);
  }

  .payments-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
  }

  .payments-wrap img {
      height: 20px;
      /* تحكم بالحجم */
      width: auto;
      object-fit: contain;
      filter: grayscale(0);
      opacity: .95;
      transition: transform .2s ease, opacity .2s ease;
  }

  .payments-wrap img:hover {
      transform: translateY(-1px);
      opacity: 1;
  }

  /* موبايل */
  @media (max-width: 576px) {
      .payments-wrap {
          gap: 12px;
      }

      .payments-wrap img {
          height: 15px;
      }
  }