/*
  ويب كورد — نسخة HTML ثابتة (بدون ووردبريس)
  نفس الهوية البصرية المعتمدة سابقًا: بنفسجي/إنديغو + أخضر تركواز، خطوط Cairo وTajawal
*/
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@300;400;500;700&display=swap');

:root{
  --wk-primary-h: 243;
  --wk-primary-s: 75%;
  --wk-primary-l: 59%;
  --wk-primary: hsl(var(--wk-primary-h) var(--wk-primary-s) var(--wk-primary-l));
  --wk-primary-dark: hsl(var(--wk-primary-h) 70% 42%);
  --wk-primary-tint: hsl(var(--wk-primary-h) 90% 96%);
  --wk-accent: #14B8A6;
  --wk-accent-dark: #0D9488;

  --wk-bg: #FBFBFE;
  --wk-surface: #FFFFFF;
  --wk-text: #10121C;
  --wk-text-muted: #5B5F72;
  --wk-border: #E7E7F1;
  --wk-dark-bg: #0B0F1A;
  --wk-dark-surface: #11162A;

  --wk-radius: 20px;
  --wk-radius-sm: 12px;
  --wk-shadow: 0 10px 34px -12px rgb(24 25 60 / 0.18);
  --wk-font-display: 'Cairo', system-ui, sans-serif;
  --wk-font-body: 'Tajawal', system-ui, sans-serif;
  --wk-container: 1220px;
}

/* أساسيات */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--wk-font-body);
  background: var(--wk-bg);
  color: var(--wk-text);
  line-height: 1.85;
  direction: rtl;
  text-align: right;
  margin:0;
}
h1,h2,h3,h4,h5,h6{ font-family: var(--wk-font-display); font-weight:800; line-height:1.3; color: var(--wk-text); }
a{ color: var(--wk-primary); text-decoration:none; transition:color .15s ease; }
a:hover{ color: var(--wk-primary-dark); }
img{ max-width:100%; height:auto; display:block; }
.container-wk{ max-width: var(--wk-container); margin-inline:auto; padding-inline: 1.25rem; }
::selection{ background: var(--wk-primary-tint); color: var(--wk-primary-dark); }

.btn-primary{
  --bs-btn-bg: var(--wk-primary);
  --bs-btn-border-color: var(--wk-primary);
  --bs-btn-hover-bg: var(--wk-primary-dark);
  --bs-btn-hover-border-color: var(--wk-primary-dark);
  border-radius: 999px;
  font-weight:700;
  padding-inline: 1.6rem;
}
.btn-accent{
  background: var(--wk-accent); border-color: var(--wk-accent); color:#fff; border-radius:999px; font-weight:700; padding-inline:1.6rem;
  display:inline-block; border:1px solid var(--wk-accent); padding-block:.5rem;
}
.btn-accent:hover{ background: var(--wk-accent-dark); border-color: var(--wk-accent-dark); color:#fff; }
.btn-outline-primary{
  --bs-btn-color: var(--wk-primary);
  --bs-btn-border-color: var(--wk-primary);
  --bs-btn-hover-bg: var(--wk-primary);
  --bs-btn-hover-border-color: var(--wk-primary);
  border-radius:999px; font-weight:700; padding-inline:1.6rem;
}
.text-primary{ color: var(--wk-primary) !important; }

/* الهيدر */
.wk-header{
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--wk-border);
  position: sticky; top:0; z-index: 1030;
}
.wk-logo{ font-family: var(--wk-font-display); font-weight:800; font-size:1.45rem; color: var(--wk-text); display:flex; align-items:center; gap:.5rem; }
.wk-logo span.dot{ color: var(--wk-accent); }

.wk-nav ul.nav{
  display:flex; align-items:center; flex-wrap:wrap;
  list-style:none; margin:0; padding:0; gap:.3rem;
}
.wk-nav ul.nav li.nav-item{ list-style:none; margin:0; }
.wk-nav ul.nav li.nav-item > a.nav-link{
  display:inline-block; white-space:nowrap; text-decoration:none; border-radius:999px;
  font-weight:600; color: var(--wk-text-muted); padding:.6rem 1.15rem;
}
.wk-nav ul.nav li.nav-item > a.nav-link:hover,
.wk-nav ul.nav li.nav-item > a.nav-link.active{ color: var(--wk-primary-dark); background: var(--wk-primary-tint); }

#wkMobileMenu ul.nav.flex-column li.nav-item{ list-style:none; }
#wkMobileMenu ul.nav.flex-column li.nav-item > a.nav-link{
  display:block; padding:.75rem .5rem; border-bottom:1px solid var(--wk-border); font-weight:600; color:var(--wk-text);
}

/* Hero */
.wk-hero{ position:relative; overflow:hidden; padding: 5.5rem 0 4rem; }
.wk-hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:620px; z-index:-1;
  background:
    radial-gradient(600px 300px at 15% 10%, hsl(var(--wk-primary-h) 90% 92% / .9), transparent 60%),
    radial-gradient(500px 260px at 90% 0%, hsl(168 76% 90% / .9), transparent 60%);
}
.wk-hero h1{ font-size: clamp(2rem, 4.4vw, 3.4rem); }
.wk-hero .lead{ color: var(--wk-text-muted); font-size:1.15rem; }
.wk-hero-badges{ display:flex; gap:.6rem; flex-wrap:wrap; }
.wk-hero-badges span{
  background:var(--wk-surface); border:1px solid var(--wk-border); border-radius:999px; padding:.4rem 1rem;
  font-size:.85rem; font-weight:700; box-shadow: var(--wk-shadow);
}
.wk-hero-visual{
  background: linear-gradient(160deg, var(--wk-primary), var(--wk-accent));
  border-radius: var(--wk-radius); padding:2rem; color:#fff; box-shadow: var(--wk-shadow); position:relative;
}
.wk-hero-visual .browser-bar{ display:flex; gap:6px; margin-bottom:1rem; }
.wk-hero-visual .browser-bar span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); }
.wk-hero-visual .mock-line{ height:12px; border-radius:6px; background:rgba(255,255,255,.35); margin-bottom:10px; }

/* البطاقات */
.wk-card{
  background: var(--wk-surface); border:1px solid var(--wk-border); border-radius: var(--wk-radius);
  box-shadow: var(--wk-shadow); transition: transform .2s ease, box-shadow .2s ease; overflow:hidden; height:100%;
}
.wk-card:hover{ transform: translateY(-5px); }
.wk-card .wk-card-body{ padding:1.6rem; }
.wk-badge{
  display:inline-block; background: var(--wk-primary-tint); color: var(--wk-primary-dark);
  font-size:.75rem; font-weight:800; padding:.3rem .8rem; border-radius:999px;
}
.wk-badge.accent{ background: #E6FBF8; color: var(--wk-accent-dark); }
.wk-meta{ color: var(--wk-text-muted); font-size:.88rem; }

.wk-icon-circle{
  width:56px; height:56px; border-radius:16px; background: var(--wk-primary-tint); color: var(--wk-primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem; font-size:1.5rem;
}

/* خطوات العمل */
.wk-step-num{
  font-family: var(--wk-font-display); font-weight:800; font-size:2.4rem; color: var(--wk-primary-tint);
  -webkit-text-stroke: 1.5px var(--wk-primary); line-height:1;
}

/* قسم داكن */
.wk-dark-section{ background: var(--wk-dark-bg); color:#EDEFFB; border-radius: var(--wk-radius); }
.wk-dark-section .wk-meta{ color:#A7ACC7; }
.wk-host-card{ background: var(--wk-dark-surface); border:1px solid #232A45; border-radius: var(--wk-radius-sm); padding:1.5rem; height:100%; }
.wk-host-card h4{ color:#fff; }

/* التذييل */
.wk-footer{ background: var(--wk-dark-bg); color:#B9BEDA; margin-top:4rem; }
.wk-footer a{ color:#B9BEDA; }
.wk-footer a:hover{ color:#fff; }
.wk-footer ul{ list-style:none; padding:0; margin:0; }

/* نموذج التواصل */
.form-control, .form-select{
  border-radius: var(--wk-radius-sm); border-color: var(--wk-border); background: var(--wk-bg); color: var(--wk-text);
  padding:.7rem 1rem;
}
.form-control:focus, .form-select:focus{ border-color: var(--wk-primary); box-shadow: 0 0 0 .2rem hsl(var(--wk-primary-h) var(--wk-primary-s) var(--wk-primary-l) / .16); outline:none; }

/* استجابة الشاشات الصغيرة */
@media (max-width: 767.98px){
  .wk-hero{ padding: 3.5rem 0 2.5rem; text-align:center; }
  .wk-hero-badges{ justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}