/* ==========================================================================
   منصة كادر — نظام تصميم مسطّح (Flat)
   ألوان صريحة بلا تدرّجات · إنديجو #4F46E5 · كهرماني #F59E0B
   ========================================================================== */

:root {
  --brand-50:#EEF2FF; --brand-100:#E0E7FF; --brand-200:#C7D2FE; --brand-300:#A5B4FC;
  --brand-400:#818CF8; --brand-500:#6366F1; --brand-600:#4F46E5; --brand-700:#4338CA;
  --brand-800:#3730A3; --brand-900:#312E81; --brand-950:#1E1B4B;

  --accent-400:#FBBF24; --accent-500:#F59E0B; --accent-600:#D97706;

  --ok:#059669; --info:#0284C7; --violet:#7C3AED; --rose:#E11D48;

  --ink:#0F172A; --ink-2:#1E293B; --muted:#64748B; --muted-2:#94A3B8;
  --line:#E2E8F0; --line-2:#CBD5E1;
  --surface:#F8FAFC; --card:#FFFFFF;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

* { font-family: 'Tajawal', system-ui, 'Segoe UI', Tahoma, sans-serif; }
body { background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--brand-100); color: var(--brand-900); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius:8px; border:2px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ─────────── Navbar ─────────── */
.kd-nav {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.kd-navlink {
  color: var(--ink-2); font-weight: 700; font-size:.95rem;
  padding:.5rem 1rem; border-radius: var(--r-sm);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.kd-navlink:hover { color: var(--brand-700); background: var(--brand-50); }
.kd-navlink.is-active { color: var(--brand-700); background: var(--brand-50); }

/* ─────────── Buttons ─────────── */
.kd-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:800; border-radius: var(--r-sm); padding:.75rem 1.6rem;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.kd-btn-accent { background: var(--accent-500); color:#1E1B4B; }
.kd-btn-accent:hover { background: var(--accent-600); color:#fff; }
.kd-btn-brand { background: var(--brand-600); color:#fff; }
.kd-btn-brand:hover { background: var(--brand-700); color:#fff; }
.kd-btn-ghost { background: transparent; color:#fff; border-color: rgba(255,255,255,.45); }
.kd-btn-ghost:hover { background:#fff; color: var(--brand-800); border-color:#fff; }
.kd-btn-outline { background:#fff; color: var(--brand-700); border-color: var(--line-2); }
.kd-btn-outline:hover { background: var(--brand-50); border-color: var(--brand-300); }

/* ─────────── Hero (flat) ─────────── */
.kd-hero { background: var(--brand-950); color:#fff; }
.kd-hero h1 { font-weight:900; letter-spacing:-1.5px; line-height:1.08; color:#fff; }
.kd-hero h1 .accent { color: var(--accent-400); }
.kd-hero p.lead { color:#C7D2FE; font-weight:500; }
.kd-hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  color:#E0E7FF; padding:.4rem 1rem; border-radius:999px; font-size:.85rem; font-weight:700;
}
.kd-hero-rule { height:4px; width:64px; background: var(--accent-500); border-radius:2px; }

/* ─────────── Quick tiles (flat solid) ─────────── */
.kd-tile {
  display:block; border-radius: var(--r-md); padding:1.75rem 1rem; text-align:center;
  color:#fff; background: var(--tile, var(--brand-600));
  border:1px solid rgba(0,0,0,.06);
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.kd-tile:hover { background: var(--tile-h, var(--brand-700)); transform: translateY(-3px); color:#fff; }
.kd-tile svg { width:34px; height:34px; margin:0 auto .7rem; display:block; }
.kd-tile span { font-size:.98rem; font-weight:800; }
.kd-tile-1 { --tile:#4F46E5; --tile-h:#4338CA; }
.kd-tile-2 { --tile:#F59E0B; --tile-h:#D97706; }
.kd-tile-3 { --tile:#059669; --tile-h:#047857; }
.kd-tile-4 { --tile:#7C3AED; --tile-h:#6D28D9; }
.kd-tile-5 { --tile:#E11D48; --tile-h:#BE123C; }
.kd-tile-6 { --tile:#0284C7; --tile-h:#0369A1; }

/* ─────────── Section titles ─────────── */
.kd-section-title { font-weight:900; color: var(--ink); letter-spacing:-.5px; }
.kd-section-rule { height:4px; width:56px; background: var(--accent-500); border-radius:2px; margin:.9rem auto 0; }
.kd-eyebrow { color: var(--brand-600); font-weight:800; font-size:.85rem; letter-spacing:.5px; }

/* ─────────── Cards ─────────── */
.kd-card {
  background: var(--card); border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.kd-card:hover { border-color: var(--brand-300); transform: translateY(-3px); }

.kd-journey { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); }
.kd-journey-card { position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .16s var(--ease), transform .16s var(--ease); }
.kd-journey-card:hover { border-color: var(--brand-300); transform: translateY(-3px); }
.kd-journey-icon { width:66px; height:66px; border-radius: var(--r-md); display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; background: var(--brand-50); color: var(--brand-600); border:1px solid var(--brand-100);
  transition: background-color .16s var(--ease), color .16s var(--ease); }
.kd-journey-card:hover .kd-journey-icon { background: var(--brand-600); color:#fff; border-color: var(--brand-600); }
.kd-journey-step { position:absolute; top:-13px; left:-13px; width:36px; height:36px; border-radius: var(--r-sm);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1rem;
  background: var(--accent-500); color:#1E1B4B; border:3px solid #fff; }

.kd-feature { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); text-align:center;
  transition: border-color .16s var(--ease), transform .16s var(--ease); }
.kd-feature:hover { border-color: var(--brand-300); transform: translateY(-3px); }
.kd-feature-icon { width:54px; height:54px; border-radius: var(--r-md); display:flex; align-items:center; justify-content:center;
  margin:0 auto .85rem; background: var(--brand-50); color: var(--brand-600); border:1px solid var(--brand-100); }

/* ─────────── About band (flat) ─────────── */
.kd-about { background: var(--brand-800); color:#fff; }
.kd-chip { display:inline-block; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  color:#fff; padding:.4rem 1rem; border-radius: var(--r-sm); font-weight:700; font-size:.9rem; }
.kd-stat { background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius: var(--r-md); }
.kd-stat b { color:#fff; font-weight:900; }
.kd-stat span { color:#C7D2FE; }

/* ─────────── Footer ─────────── */
.kd-footer { background: var(--brand-950); color:#C7D2FE; }
.kd-footer a { color:#C7D2FE; transition: color .15s var(--ease); }
.kd-footer a:hover { color: var(--accent-400); }
.kd-social { width:36px; height:36px; border-radius: var(--r-sm); display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  transition: background-color .16s var(--ease), color .16s var(--ease); }
.kd-social:hover { background: var(--accent-500); color:#1E1B4B; border-color: var(--accent-500); }

/* ─────────── Panels used inside the site shell ─────────── */
.kd-panel { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); }
.kd-panel-head { padding:1rem 1.25rem; border-bottom:1px solid var(--line); font-weight:800; color: var(--ink);
  display:flex; align-items:center; gap:.6rem; }
.kd-pagehead { background:#fff; border-bottom:1px solid var(--line); }
.kd-tab { padding:.6rem 1.1rem; border-radius: var(--r-sm); font-weight:700; color: var(--muted);
  transition: background-color .15s var(--ease), color .15s var(--ease); }
.kd-tab:hover { background: var(--brand-50); color: var(--brand-700); }
.kd-tab.is-active { background: var(--brand-600); color:#fff; }

/* focus */
a:focus-visible, button:focus-visible { outline:3px solid var(--brand-300); outline-offset:2px; }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition-duration:.001ms !important; } }
@media (max-width:768px) { .kd-hero h1 { font-size:2.5rem !important; letter-spacing:-.5px; } }