/* =========================
   السهم المرتفع - تنسيق عام
========================= */
@font-face {
  font-family: 'Noor';
  src: url('../fonts/Noor-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --brand-blue: #1f58ff;
  --brand-gray: #44515c;
  --brand-orange: #ff8c3a; /* برتقالي خفيف */
  --brand-orange-10: rgba(255,140,58,.1);
  --bg: #f6f8fb;
}

html{scroll-behavior:smooth}
body{
  font-family: 'Noor', 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Arabic', 'Noto Sans', sans-serif;
  background: var(--bg);
  color: #111;
  padding-top: 84px; /* navbar fixed */
}

.navbar .nav-link{font-weight:700}
.navbar .nav-link.active,
.navbar .nav-link:hover{color: var(--brand-blue)}

.btn-brand{
  background: var(--brand-blue);
  color:#fff;
  border: none;
  border-radius: 14px;
  padding: .65rem 1.1rem;
  box-shadow: 0 8px 18px rgba(31,88,255,.2);
}
.btn-brand:hover{opacity:.95}
.btn-outline-brand{
  border:2px solid var(--brand-blue);
  color: var(--brand-blue);
  border-radius:14px;
}
.btn-outline-brand:hover{background:var(--brand-blue);color:#fff}

.brand{color:var(--brand-blue)}
.section-title{font-weight:900; color:#111}
.section-padding{padding: 72px 0}

.hero-section{
  position: relative;
  padding: 120px 0 80px;
  background: linear-gradient(180deg, var(--brand-orange-10), transparent 70%);
}
.hero-illustration{max-height: 380px}
.gradient-overlay{
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(1100px 300px at 50% -80px, rgba(31,88,255,.08), transparent 60%);
}

.feature{
  border:1px solid #e9eef3; border-radius:18px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature:hover{ transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.06) }
.feature .feature-icon{
  width:56px; height:56px; display:grid; place-items:center;
  background: #fff; border-radius: 16px; border:1px dashed rgba(0,0,0,.08)
}

.card.product{
  border: 1px solid #e9eef3; border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.product:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.06) }

/* صور البطاقات */
.card-img-top{ padding: 18px; background: #fff; border-bottom:1px solid #f1f4f7 }

footer{ font-weight:600 }