/* ======================================================
   Root & base: ألوان/خطوط وسيطة + نص سيّال + قياسات موحّدة
   ====================================================== */
:root{
  /* ألوان */
  --bg:#fff; --ink:#0e4774; --muted:#e2e2e2; --soft:#f6f7fb; --line:#e6ebf2; --brand:#1d4ed8; --dark:#0c3470;

  /* سُلّم مسافات موحّد */
  --sp-1: .25rem;   /* 4px  */
  --sp-2: .5rem;    /* 8px  */
  --sp-3: .75rem;   /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-5: 1.25rem;  /* 20px */
  --sp-6: 1.5rem;   /* 24px */
  --sp-7: 2rem;     /* 32px */
  --sp-8: 2.5rem;   /* 40px */
  --radius: 12px;

  /* نص سيّال (يتدرج مع العرض) */
  --fz-base: clamp(15px, 0.9vw + 12px, 18px);
  --fz-h1:   clamp(28px, 2.6vw + 16px, 44px);
  --fz-h2:   clamp(20px, 1.2vw + 14px, 26px);
  --fz-small: clamp(11px, 0.4vw + 9px, 13px);

  /* عرض الحاوية */
  --container: 1180px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Naskh Arabic","Tahoma",sans-serif;
  line-height:1.6;
  font-size: var(--fz-base);
  text-size-adjust: 100%;
}

.container{
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: clamp(12px, 3vw, 24px);
}

/* =========================
   Header / Topbar (RTL/LTR)
   ========================= */
.topbar{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.15) blur(6px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease, padding .2s ease;
}
.topbar__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4);
  padding-block: var(--sp-4);
}
.topbar--scrolled{ box-shadow: 0 6px 24px rgba(16,24,40,.06); }
.topbar--scrolled .topbar__row{ padding-block: .5rem; }

.brand{ display:inline-flex; align-items:center; gap:var(--sp-3); color:inherit; text-decoration:none }
.brand__logo{ height:40px; width:auto; display:block }
.topbar--scrolled .brand__logo{ height:32px }

/* Nav */
.nav{
  display:flex; align-items:center; gap:var(--sp-3);
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.nav a{
  color: var(--muted);
  text-decoration:none;
  cursor: default;
  padding: .375rem .5rem;
  border-radius:8px;
  transition: background-color .15s ease, color .15s ease;
}
.nav a:not(.btn):hover{ background:var(--soft); color:var(--ink) }
.nav a:not(.btn):focus-visible{ outline:2px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset:2px }
.nav a[aria-current="page"], .nav a.is-active{ color:var(--ink); background:var(--soft); font-weight:700 }

/* Language switch */
.langs{ display:flex; align-items:center; gap:var(--sp-2) }
.langs__label{ color:var(--muted); font-size: var(--fz-small) }
.lang-btn{
  border:1px solid var(--line); background:#fff; border-radius:8px;
  padding:.375rem .625rem; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.lang-btn:hover{ background:var(--soft) }
.lang-btn.active{ border-color:var(--brand); color:var(--brand) }

/* Buttons */
.btn{
  display:inline-block; border:1px solid var(--line); border-radius:10px;
  padding:.625rem 1rem; font-weight:700; cursor:pointer;
  text-decoration:none; color:inherit; background:#fff;
}
.btn--primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
.btn--ghost{ background:var(--dark);  color:#fff; border-color:var(--dark) }

/* ========
   Hero
   ======== */
.hero{ padding: var(--sp-7) 0 var(--sp-4) }
.hero__grid{
  display:grid; gap: var(--sp-5); align-items:start;
  /* على الشاشات الواسعة: النص أولاً ثم النموذج (يمين/يسار حسب اتجاه الصفحة) */
  grid-template-columns: 1.1fr min(440px, 100%);
}
.h1{ font-size: var(--fz-h1); margin:0 0 var(--sp-3); line-height:1.25 }
.muted{ color:var(--muted); margin:0 0 var(--sp-4) }
.cta{ display:flex; gap:var(--sp-3); flex-wrap:wrap }
.kpis{ display:flex; gap:var(--sp-3); margin-top:var(--sp-4); flex-wrap:wrap }
.kpi{ background:var(--soft); border-radius:var(--radius); padding: var(--sp-4) var(--sp-5); min-width: 140px; text-align:center }

/* Cards + forms */
.card{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:var(--sp-5) }
.card__title{ margin:0 0 var(--sp-3) }
.leadcard{ position: sticky; top: 88px }

.row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-3) }
.field{ display:flex; flex-direction:column; gap:.35rem }
.label{ font-size: .875rem; color:#334155; font-weight:600 }
.req{ color:#ef4444; font-weight:900; margin-inline-start:.25rem }

input,select,textarea{
  width:100%; padding:.75rem .875rem;
  border:1px solid var(--line); border-radius:10px; background:#fff; font-size:1rem;
}
input:focus,select:focus,textarea:focus{ outline:2px solid color-mix(in srgb, var(--brand) 30%, transparent); outline-offset:2px }
input:invalid,select:invalid,textarea:invalid{ border-color:#ef4444 }
textarea{ min-height: 96px; resize: vertical }

.note{ color:var(--muted); font-size: var(--fz-small) }
.chk{ display:flex; align-items:center; gap:.5rem; margin-top:.5rem }

/* Sticky send on mobile */
.sticky-send{ position: sticky; bottom:0; inset-inline:0; margin-top: var(--sp-3) }

/* ==========
   Sections
   ========== */
.section{ padding: var(--sp-8) 0 var(--sp-7) }
.h2{ font-size: var(--fz-h2); margin:0 0 var(--sp-3) }
.grid3{ display:grid; gap: var(--sp-4); grid-template-columns: repeat(3,1fr) }
.bullets{ margin: var(--sp-2) 0 0; padding: 0 1.125rem }
.metrics{ display:grid; gap: var(--sp-3); grid-template-columns: repeat(3,1fr); margin-top: var(--sp-4) }
.metric{ background:var(--soft); padding: var(--sp-4); border-radius:var(--radius); text-align:center }
.warning{
  background:#fff7ed; border:1px dashed #fde68a; color:#92400e;
  padding: var(--sp-3); border-radius:8px; margin-top: var(--sp-3)
}
.split__grid{ display:grid; gap: var(--sp-4); grid-template-columns: 1fr .95fr }

/* ========
   Footer
   ======== */
.footer{ border-top:1px solid var(--line); padding: var(--sp-6) 0; margin-top: var(--sp-7) }
.footer__row{ display:flex; flex-direction:column; gap:.4rem }

/* ===============
   Accessibility
   =============== */
:focus-visible{ outline:2px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset: 2px }
::selection{ background: color-mix(in srgb, var(--brand) 18%, transparent) }

/* Anchor offset */
:target{ scroll-margin-top: 92px }

/* =================
   Responsive rules
   ================= */

/* Large tablets (≤ 1100px) */
@media (max-width: 1100px){
  .hero__grid{ grid-template-columns: 1fr }                 /* اجعل النموذج تحت النص */
  .grid3, .split__grid, .row{ grid-template-columns:1fr }   /* أعمدة واحدة */
}

/* Tablets (≤ 960px) */
@media (max-width: 960px){
  .brand__logo{ height:34px }
  .topbar__row{ gap: .625rem }
  .nav{ gap:.625rem }
}

/* Phones (≤ 768px) */
@media (max-width: 768px){
  .kpi{ min-width: 46% }                      /* KPI نصف العرض تقريبًا */
  .leadcard{ position: static }               /* لا sticky على الشاشات الصغيرة */
  .hero{ padding-top: var(--sp-7) }
}

/* Small phones (≤ 480px) */
@media (max-width: 480px){
  .kpi{ min-width: 100% }                     /* KPI سطر كامل */
  .btn, .lang-btn{ padding:.55rem .8rem }     /* تكبير التتش-تارغِت قليلًا */
  .nav{ max-width: 60vw }                     /* تمرير أفقي للروابط */
}

/* =========================
   Reduced motion / Dark mode
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
}