@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   كيان لمكافحة الحشرات — نظام التصميم
   ---------------------------------------------------------------------------
   كل الألوان مشتقة مباشرة من شعار كيان:
     #78C307  الأخضر الليموني  (الشريط الدائري + "لمكافحة الحشرات")
     #4C7F00  الأخضر الغامق    (كلمة "كيان")
     #000000  الأسود           (الدرع والحشرة)
     #989898  الرمادي          (الشريط الرمادي)

   ملاحظات مهمة للعربية:
     • لا تُستخدم letter-spacing مع النص العربي إطلاقاً (تكسر اتصال الحروف).
     • ارتفاع السطر أعلى من المعتاد لاستيعاب النقاط والحركات.
     • كل الاتجاهات مكتوبة بخصائص منطقية (inline-start/end) لتكون آمنة في RTL.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   1) الخطوط — مستضافة محلياً
   ─────────────────────────────────────────────── */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20BF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20BF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20BF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20A0-20BF}

/* ───────────────────────────────────────────────
   2) الرموز (Design Tokens)
   ─────────────────────────────────────────────── */
:root{
  /* — ألوان العلامة — */
  --k-lime:#78C307;          /* اللون المميّز: أزرار، إبرازات، أسطح */
  --k-lime-600:#6AAE05;
  --k-lime-700:#5C9704;
  --k-lime-soft:#EDF7DC;     /* خلفية فاتحة جداً من نفس العائلة */

  --k-green:#4C7F00;         /* اللون الأساسي: نصوص مميزة وروابط (تباين 4.84:1 على الأبيض) */
  --k-green-800:#3A6100;     /* آمن للنصوص الصغيرة (تباين 7.27:1) */
  --k-green-900:#2A4700;

  --k-ink:#0C1408;           /* أسود مائل للأخضر — نص العناوين (18.76:1) */
  --k-ink-2:#16210F;
  --k-body:#3D4738;          /* نص المتن */
  --k-muted:#4F5B49;         /* نص ثانوي (7.18:1 — آمن) */

  --k-grey:#989898;          /* رمادي الشعار */
  --k-line:#E4EADC;          /* حدود */
  --k-line-2:#F0F4E8;

  --k-surface:#FFFFFF;
  --k-surface-2:#F5F8F0;     /* خلفية أقسام بديلة */
  --k-surface-3:#EEF3E4;

  --k-white:#FFFFFF;

  /* — التدرجات — */
  --k-grad-lime:linear-gradient(135deg,#8AD41A 0%,#78C307 45%,#5C9704 100%);
  --k-grad-dark:linear-gradient(150deg,#16210F 0%,#0C1408 60%,#0A1206 100%);
  --k-grad-soft:linear-gradient(180deg,#FFFFFF 0%,#F5F8F0 100%);
  --k-grad-glow:radial-gradient(60% 60% at 50% 40%,rgba(120,195,7,.22) 0%,rgba(120,195,7,0) 70%);

  /* — الظلال (متدرجة العمق، بمسحة خضراء خفيفة) — */
  --k-sh-1:0 1px 2px rgba(12,20,8,.05), 0 2px 8px rgba(12,20,8,.04);
  --k-sh-2:0 4px 12px rgba(12,20,8,.06), 0 12px 32px rgba(12,20,8,.07);
  --k-sh-3:0 12px 28px rgba(12,20,8,.08), 0 32px 64px rgba(12,20,8,.10);
  --k-sh-4:0 24px 48px rgba(12,20,8,.12), 0 48px 96px rgba(12,20,8,.14);
  --k-sh-lime:0 10px 24px rgba(120,195,7,.28), 0 2px 6px rgba(120,195,7,.20);
  --k-sh-inset:inset 0 1px 0 rgba(255,255,255,.28);

  /* — الاستدارات — */
  --k-r-xs:8px;
  --k-r-sm:12px;
  --k-r:18px;
  --k-r-lg:26px;
  --k-r-xl:36px;
  --k-r-full:999px;

  /* — المسافات — */
  --k-s1:.5rem;  --k-s2:.75rem; --k-s3:1rem;   --k-s4:1.5rem;
  --k-s5:2rem;   --k-s6:2.75rem;--k-s7:3.5rem; --k-s8:5rem;
  /* ═══ الإيقاع الرأسي ═══
     جوال 56px · لوحي 80px · سطح المكتب 96→120px
     (تُضبط عند نقاط التحوّل أسفل الكتلة، لأن clamp وحده لا يصيب المدى المطلوب) */
  --k-section:3.5rem;
  --k-section-sm:2.5rem;
  --k-section-lg:4.5rem;
  /* ═══ نظام الحاوية العام — قيمة واحدة للموقع بالكامل ═══
     كل قسم: عرض 100% (الخلفية تمتد من حافة إلى حافة).
     كل محتوى: داخل .k-container بنفس العرض الأقصى ونفس الحشو.
     لا توجد أي حاوية بعرض مختلف في أي مكان. */
  --k-container-max:1280px;
  --k-pad:24px;                 /* الحشو الأفقي — يصبح 16px على الجوال */

  /* — الحركة — */
  --k-ease:cubic-bezier(.22,.61,.36,1);
  --k-ease-out:cubic-bezier(.16,1,.3,1);
  --k-ease-spring:cubic-bezier(.34,1.4,.44,1);
  --k-t-fast:.18s;
  --k-t:.34s;
  --k-t-slow:.6s;

  /* — الطبقات — */
  --k-z-header:200;
  --k-z-float:180;
  --k-z-modal:300;

  --k-header-h:96px;
}

@media (min-width:600px){
  :root{ --k-section:5rem; --k-section-sm:3.5rem; --k-section-lg:6.5rem; }
}
@media (min-width:1024px){
  :root{
    --k-section:clamp(6rem,7.5vw,7.5rem);
    --k-section-sm:clamp(4rem,5vw,5.25rem);
    --k-section-lg:clamp(7rem,9vw,9.5rem);
  }
}
@media (max-width:600px){ :root{ --k-pad:16px; } }

@media (max-width:1024px){ :root{ --k-header-h:80px; } }
@media (max-width:600px){  :root{ --k-header-h:70px; } }

/* ───────────────────────────────────────────────
   3) الأساسيات
   ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body.kayan{
  margin:0;
  font-family:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  font-size:clamp(1.03rem,.99rem + .2vw,1.125rem);
  line-height:1.95;                 /* العربية تحتاج مساحة رأسية أكبر */
  font-weight:400;
  letter-spacing:0;                /* لا تُغيّر — تكسر اتصال الحروف العربية */
  color:var(--k-body);
  background:var(--k-surface);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

  /* المتصفحات على أندرويد و iOS تُظهر وميضاً أزرق/رمادياً افتراضياً عند اللمس،
     وهو اللون الغريب الذي يظهر على عناصر القائمة. نستبدله بلمسة خضراء خفيفة
     من ألوان كيان. */
  -webkit-tap-highlight-color:rgba(120,195,7,.22);
}

/* مهم: كل أنماط العناصر الأساسية ملفوفة بـ :where() حتى تكون خصوصيتها صفراً،
   فتتفوّق عليها دائماً كلاسات المكوّنات (مثل .k-cta__title) بلا حاجة إلى !important. */
:where(body.kayan) img{max-width:100%;height:auto;display:block}

/* ───────────────────────────────────────────────
   4) الطباعة
   ─────────────────────────────────────────────── */
:where(.kayan) :is(h1,h2,h3,h4,h5,h6){
  margin:0 0 .6em;
  color:var(--k-ink);
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;
  text-wrap:balance;
}
:where(.kayan) h1,.k-h1{font-size:clamp(2.25rem,1.3rem + 3.9vw,4.4rem);line-height:1.2;font-weight:700}
:where(.kayan) h2,.k-h2{font-size:clamp(1.85rem,1.25rem + 2.4vw,3.15rem);line-height:1.26}
:where(.kayan) h3,.k-h3{font-size:clamp(1.28rem,1.08rem + .82vw,1.65rem);line-height:1.42}
:where(.kayan) h4,.k-h4{font-size:clamp(1.1rem,1.02rem + .34vw,1.28rem);line-height:1.55}

:where(.kayan) p{margin:0 0 1.15em}
:where(.kayan) p:last-child{margin-bottom:0}

.k-lead{
  font-size:clamp(1.1rem,1.02rem + .44vw,1.38rem);
  line-height:1.8;
  color:var(--k-muted);
  text-wrap:pretty;
}
.k-small{font-size:.9rem;line-height:1.8}
.k-muted{color:var(--k-muted)}
.k-accent{color:var(--k-green)}

:where(.kayan) a{color:var(--k-green-800);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--k-t-fast) var(--k-ease)}
:where(.kayan) a:hover{color:var(--k-lime-700)}

/* تمييز كلمة داخل عنوان.
   ملاحظة مهمة للعربية: لا يُستخدم شريط تمييز خلف النص في العناوين الكبيرة،
   لأن نزول حروف مثل ج/ذ/ر/و تحت خط الكتابة يجعل الشريط يقطع الحروف بصرياً.
   الاعتماد هنا على اللون والوزن فقط — أنظف وأكثر ملاءمة للخط العربي. */
.k-mark{color:var(--k-green);white-space:nowrap}

/* ───────────────────────────────────────────────
   5) التخطيط
   ─────────────────────────────────────────────── */
/* الحاوية الوحيدة في الموقع.
   min() بدل max-width + padding: هكذا يكون عرض المحتوى الفعلي 1280px بالضبط
   لا 1280 ناقص الحشو، وتتطابق كل الأقسام أفقياً بلا استثناء. */
.k-container{
  width:min(calc(100% - var(--k-pad) * 2), var(--k-container-max));
  margin-inline:auto;
}

/* كل قسم كامل العرض — الخلفية تمتد من حافة الشاشة إلى حافتها.
   max-width:none يبطل أي تقييد قادم من القالب الأب أو من Elementor. */
.k-section,
.k-hero,
.k-trust,
.k-promo,
.k-cta,
.k-footer,
.k-header{width:100%;max-width:none}

.k-section{position:relative;padding-block:var(--k-section)}
.k-section--tight{padding-block:var(--k-section-sm)}
.k-section--lg{padding-block:var(--k-section-lg)}
.k-section--alt{background:var(--k-surface-2)}
.k-section--dark{background:var(--k-grad-dark);color:#D9E3D0}
.k-section--dark :is(h1,h2,h3){color:#fff}
.k-section--dark .k-lead,.k-section--dark .k-muted{color:#B9C7AE}

/* رأس القسم */
.k-head{max-width:720px;margin-inline:auto;text-align:center;margin-bottom:clamp(2.5rem,4.5vw,4rem)}
.k-head--start{margin-inline:0;text-align:start}
.k-head h2{margin-bottom:.6rem}
.k-head .k-lead{margin-inline:auto;max-width:56ch}

.k-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .95rem;margin-bottom:1rem;
  background:var(--k-lime-soft);color:var(--k-green-900);
  border:1px solid rgba(120,195,7,.32);
  border-radius:var(--k-r-full);
  font-size:.845rem;font-weight:600;line-height:1.6;
}
.k-eyebrow .k-icon{width:16px;height:16px;color:var(--k-green)}
.k-section--dark .k-eyebrow{background:rgba(120,195,7,.14);color:#C7E89A;border-color:rgba(120,195,7,.3)}
.k-section--dark .k-eyebrow .k-icon{color:var(--k-lime)}

/* شبكات */
.k-grid{display:grid;gap:clamp(1rem,1.9vw,1.6rem)}
.k-grid--2{grid-template-columns:repeat(2,1fr)}
.k-grid--3{grid-template-columns:repeat(3,1fr)}
.k-grid--4{grid-template-columns:repeat(4,1fr)}
.k-grid--5{grid-template-columns:repeat(5,1fr)}

@media (max-width:1080px){
  .k-grid--5{grid-template-columns:repeat(3,1fr)}
  .k-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .k-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .k-grid--2,.k-grid--3,.k-grid--4,.k-grid--5{grid-template-columns:1fr}
}

/* ───────────────────────────────────────────────
   6) الأيقونات
   ─────────────────────────────────────────────── */
.k-icon{width:24px;height:24px;flex:0 0 auto;display:inline-block;vertical-align:middle}

/* ───────────────────────────────────────────────
   7) الأزرار — بأبعاد ثلاثية خفيفة
   ─────────────────────────────────────────────── */
.k-btn{
  --btn-y:0;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92rem 1.7rem;
  border:1px solid transparent;border-radius:var(--k-r-full);
  font-family:inherit;font-size:1rem;font-weight:600;line-height:1.5;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transform:translateY(var(--btn-y));
  transition:transform var(--k-t) var(--k-ease-spring),box-shadow var(--k-t) var(--k-ease),
             background-color var(--k-t-fast) var(--k-ease),color var(--k-t-fast) var(--k-ease),
             border-color var(--k-t-fast) var(--k-ease);
  will-change:transform;
}
.k-btn .k-icon{width:20px;height:20px}
.k-btn:hover{--btn-y:-3px}
.k-btn:active{--btn-y:-1px;transition-duration:.08s}

/* أساسي — أخضر ليموني مع نص داكن (تباين 8.58:1) */
.k-btn--primary{background:var(--k-grad-lime);color:var(--k-ink);box-shadow:var(--k-sh-lime),var(--k-sh-inset)}
.k-btn--primary:hover{color:var(--k-ink);box-shadow:0 16px 34px rgba(120,195,7,.36),0 3px 8px rgba(120,195,7,.24),var(--k-sh-inset)}

/* داكن */
.k-btn--dark{background:var(--k-ink);color:#fff;box-shadow:var(--k-sh-2),var(--k-sh-inset)}
.k-btn--dark:hover{background:var(--k-ink-2);color:#fff;box-shadow:var(--k-sh-3)}

/* شبح فاتح */
/* ثانوي هادئ — يترك السيادة البصرية للزر الأساسي */
.k-btn--outline{background:var(--k-surface);color:var(--k-ink);border-color:#D3DEC6;box-shadow:var(--k-sh-1)}
.k-btn--outline:hover{background:var(--k-surface);color:var(--k-green-900);border-color:var(--k-lime);box-shadow:var(--k-sh-2)}

.k-btn--ghost{background:transparent;color:var(--k-ink);border-color:var(--k-line)}
.k-btn--ghost:hover{background:var(--k-surface-2);color:var(--k-green-900);border-color:rgba(120,195,7,.5)}

/* شبح على خلفية داكنة */
.k-btn--ghost-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.k-btn--ghost-light:hover{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.45)}

/* أبيض */
.k-btn--white{background:#fff;color:var(--k-ink);box-shadow:var(--k-sh-2)}
.k-btn--white:hover{color:var(--k-green-900);box-shadow:var(--k-sh-3)}

.k-btn--lg{padding:1.05rem 2.05rem;font-size:1.06rem}
.k-btn--xl{padding:1.18rem 2.5rem;font-size:1.12rem;font-weight:700}
.k-btn--sm{padding:.62rem 1.15rem;font-size:.92rem}
.k-btn--block{display:flex;width:100%}

/* رابط نصي بسهم */
.k-link{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--k-green-800);font-weight:600;text-decoration:none;
}
.k-link .k-icon{width:18px;height:18px;transition:transform var(--k-t) var(--k-ease-spring)}
.k-link:hover .k-icon{transform:translateX(-4px)}   /* السهم يتجه لليسار في RTL */

/* حالة عدم ضبط الرقم — يمنع الروابط المكسورة قبل إدخال الأرقام */
[data-kayan-unset]{cursor:not-allowed}
[data-kayan-unset]::after{
  content:"الرقم غير مضبوط بعد";
  position:absolute;inset-inline-start:50%;bottom:calc(100% + 8px);transform:translateX(50%) translateY(4px);
  padding:.3rem .6rem;border-radius:var(--k-r-xs);
  background:var(--k-ink);color:#fff;font-size:.72rem;font-weight:500;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--k-t-fast),transform var(--k-t-fast);
}
[data-kayan-unset]:hover::after{opacity:1;transform:translateX(50%) translateY(0)}

/* ───────────────────────────────────────────────
   8) الأسطح والبطاقات — لغة العمق
   ─────────────────────────────────────────────── */
.k-card{
  position:relative;
  background:var(--k-surface);
  border:1px solid var(--k-line);
  border-radius:var(--k-r-lg);
  box-shadow:var(--k-sh-1);
  transition:transform var(--k-t) var(--k-ease-out),box-shadow var(--k-t) var(--k-ease),border-color var(--k-t) var(--k-ease);
}
.k-card--pad{padding:clamp(1.4rem,2.4vw,2rem)}
.k-card--lift:hover{transform:translateY(-6px);box-shadow:var(--k-sh-3);border-color:rgba(120,195,7,.42)}

/* بطاقة بميلان ثلاثي الأبعاد — تتحرك حسب موضع المؤشر (JS) */
.k-tilt{transform-style:preserve-3d;perspective:1000px}
.k-tilt__inner{
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(0);
  transition:transform .5s var(--k-ease-out);
  transform-style:preserve-3d;
}
.k-tilt.is-tilting .k-tilt__inner{transition:transform .12s linear}
.k-tilt__layer{transform:translateZ(28px)}

/* سطح زجاجي خفيف — يُستخدم بقلة */
.k-glass{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--k-sh-2);
}
.k-glass--dark{
  background:rgba(12,20,8,.55);
  border-color:rgba(255,255,255,.12);
  color:#EAF1E2;
}

/* حواف متدرجة */
.k-edge{position:relative}
.k-edge::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,rgba(120,195,7,.55),rgba(120,195,7,0) 45%,rgba(12,20,8,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* أشكال زخرفية عائمة */
.k-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.k-blob--lime{background:rgba(120,195,7,.30)}
.k-blob--green{background:rgba(76,127,0,.22)}
.k-blob--grey{background:rgba(152,152,152,.22)}

/* نمط نقطي خفيف للخلفيات */
.k-dots{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(12,20,8,.10) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%);
}

/* ───────────────────────────────────────────────
   9) الشارات والرقائق
   ─────────────────────────────────────────────── */
.k-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1rem;
  background:var(--k-surface);border:1px solid var(--k-line);
  border-radius:var(--k-r-full);
  font-size:.9rem;font-weight:600;color:var(--k-ink);
  box-shadow:var(--k-sh-1);
}
.k-chip .k-icon{width:18px;height:18px;color:var(--k-green)}
.k-chip--glass{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);color:#fff;backdrop-filter:blur(10px)}
.k-chip--glass .k-icon{color:var(--k-lime)}

/* قرص الأيقونة */
.k-iconwrap{
  display:inline-grid;place-items:center;
  width:60px;height:60px;
  border-radius:var(--k-r);
  background:var(--k-lime-soft);color:var(--k-green-900);
  border:1px solid rgba(120,195,7,.28);
  transition:transform var(--k-t) var(--k-ease-spring),background-color var(--k-t),color var(--k-t),box-shadow var(--k-t);
}
.k-iconwrap .k-icon{width:30px;height:30px}
.k-iconwrap--lg{width:72px;height:72px}
.k-iconwrap--lg .k-icon{width:36px;height:36px}

/* ───────────────────────────────────────────────
   10) النماذج
   ─────────────────────────────────────────────── */
.k-field{display:flex;flex-direction:column;gap:.42rem}
.k-field label{font-size:.95rem;font-weight:600;color:var(--k-ink)}
.k-field .k-opt{font-weight:500;color:var(--k-muted);font-size:.86rem}
.k-field .k-req{color:#B4341F;margin-inline-start:.15rem}

.k-input,.k-select,.k-textarea{
  width:100%;
  padding:1rem 1.15rem;
  font-family:inherit;font-size:1.02rem;line-height:1.7;color:var(--k-ink);
  background:var(--k-surface);
  border:1px solid #DCE5D1;
  border-radius:var(--k-r-sm);
  transition:border-color var(--k-t-fast),box-shadow var(--k-t-fast),background-color var(--k-t-fast);
  -webkit-appearance:none;appearance:none;
}
.k-textarea{min-height:132px;resize:vertical}
.k-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F5B49' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 1rem center;background-size:18px;
  padding-inline-start:2.7rem;
}
.k-input:focus,.k-select:focus,.k-textarea:focus{
  outline:none;border-color:var(--k-lime);
  box-shadow:0 0 0 4px rgba(120,195,7,.18);
}
.k-input::placeholder,.k-textarea::placeholder{color:#93A18B}

/* رسائل التحقق */
.k-error{display:none;color:#B4341F;font-size:.84rem;font-weight:500}
.k-field.has-error .k-input,.k-field.has-error .k-select{border-color:#B4341F;box-shadow:0 0 0 4px rgba(180,52,31,.12)}
.k-field.has-error .k-error{display:block}

/* ───────────────────────────────────────────────
   11) إمكانية الوصول — حالات التركيز
   ─────────────────────────────────────────────── */
.kayan :focus-visible{
  outline:3px solid var(--k-green);
  outline-offset:3px;
  border-radius:var(--k-r-xs);
}
.k-section--dark :focus-visible,.k-btn--primary:focus-visible{outline-color:var(--k-lime)}

.k-skip{
  position:absolute;inset-inline-start:50%;top:-100px;transform:translateX(50%);
  z-index:calc(var(--k-z-modal) + 10);
  padding:.85rem 1.5rem;background:var(--k-ink);color:#fff;
  border-radius:0 0 var(--k-r-sm) var(--k-r-sm);font-weight:600;text-decoration:none;
  transition:top var(--k-t) var(--k-ease);
}
.k-skip:focus{top:0;color:#fff}

.k-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ───────────────────────────────────────────────
   12) نظام الحركة
   ─────────────────────────────────────────────── */

/* الكشف عند التمرير — العنصر مخفي فقط إذا كان الجافاسكربت يعمل */
.js .k-reveal{opacity:0;transform:translateY(26px);will-change:opacity,transform}
.js .k-reveal--right{transform:translateX(34px)}
.js .k-reveal--left{transform:translateX(-34px)}
/* على الشاشات الأضيق لا توجد مساحة جانبية فائضة، فالإزاحة الأفقية تخرج عن
   حدود الشاشة وتُخفيها overflow-x — وهذا إخفاء لخلل لا حل له.
   لذلك تتحول الحركة إلى رأسية بالكامل تحت 1024px. */
@media (max-width:1024px){
  .js .k-reveal--right,
  .js .k-reveal--left{transform:translateY(26px)}
}
.js .k-reveal--scale{transform:scale(.94)}
.js .k-reveal--blur{opacity:0;filter:blur(8px);transform:translateY(18px)}

.js .k-reveal.is-in{
  opacity:1;transform:none;filter:none;
  transition:opacity .75s var(--k-ease-out),transform .75s var(--k-ease-out),filter .75s var(--k-ease-out);
  transition-delay:var(--k-delay,0ms);
}

/* تتابع تلقائي للأبناء */
.js .k-stagger > *{opacity:0;transform:translateY(22px)}
.js .k-stagger.is-in > *{
  opacity:1;transform:none;
  transition:opacity .68s var(--k-ease-out),transform .68s var(--k-ease-out);
}
.js .k-stagger.is-in > *:nth-child(1){transition-delay:.04s}
.js .k-stagger.is-in > *:nth-child(2){transition-delay:.10s}
.js .k-stagger.is-in > *:nth-child(3){transition-delay:.16s}
.js .k-stagger.is-in > *:nth-child(4){transition-delay:.22s}
.js .k-stagger.is-in > *:nth-child(5){transition-delay:.28s}
.js .k-stagger.is-in > *:nth-child(6){transition-delay:.34s}
.js .k-stagger.is-in > *:nth-child(7){transition-delay:.40s}
.js .k-stagger.is-in > *:nth-child(8){transition-delay:.46s}
.js .k-stagger.is-in > *:nth-child(9){transition-delay:.52s}
.js .k-stagger.is-in > *:nth-child(10){transition-delay:.58s}

/* شبكة أمان: إن لم يبدأ نظام الكشف خلال ثانيتين ونصف (فشل تحميل السكربت،
   خطأ جافاسكربت، متصفح لا يدعم IntersectionObserver) يُضاف هذا الكلاس من
   السكربت المضمّن في <head> فيظهر كل المحتوى فوراً.
   خصوصية أعلى من قواعد الإخفاء، فلا حاجة إلى !important. */
.js.k-revealed .k-reveal,
.js.k-revealed .k-stagger > *{opacity:1;transform:none;filter:none}

/* طفو لطيف */
@keyframes k-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes k-float-soft{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-9px) rotate(1.4deg)}
}
.k-float{animation:k-float 7s var(--k-ease) infinite}
.k-float--soft{animation:k-float-soft 9s var(--k-ease) infinite}
.k-float--d1{animation-delay:-2.2s}
.k-float--d2{animation-delay:-4.4s}

/* نبض خفيف للزر العائم */
@keyframes k-pulse{
  0%{box-shadow:0 0 0 0 rgba(120,195,7,.5)}
  70%{box-shadow:0 0 0 18px rgba(120,195,7,0)}
  100%{box-shadow:0 0 0 0 rgba(120,195,7,0)}
}

/* شريط متحرك للصور */
.k-zoom{overflow:hidden}
.k-zoom img{transition:transform 1.1s var(--k-ease-out)}
.k-zoom:hover img{transform:scale(1.07)}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .k-reveal,.js .k-stagger > *{opacity:1!important;transform:none!important;filter:none!important}
  .k-float,.k-float--soft{animation:none}
}

/* ───────────────────────────────────────────────
   13) توافق العرض مع القالب الأب و Elementor
   ───────────────────────────────────────────────
   السبب الأشهر لظهور المحتوى "أضيق من الهيدر والفوتر" أو لظهور الخلفيات
   محبوسة داخل صندوق: قالب Hello Elementor يضع عرضاً أقصى على .site-main،
   و Elementor يضع 1140px افتراضياً على حاوياته.
   الهيدر والفوتر هنا خارج <main> فيظهران بعرض كامل — ومن هنا يأتي الاختلاف.
   الأسطر التالية تُعيد الجميع إلى نظام حاوية كيان الواحد.
   ─────────────────────────────────────────────── */
body.kayan #content,
body.kayan .site-main,
body.kayan .page-content,
body.kayan .entry-content{
  width:100%;max-width:none;
  margin-inline:0;padding-inline:0;
}

/* حاويات Elementor التي تحمل أقسام كيان */
body.kayan .elementor-widget-shortcode > .elementor-widget-container{width:100%}
body.kayan .elementor-section.elementor-section-boxed > .elementor-container{max-width:none}
body.kayan .elementor-element:has(> .elementor-widget-container > .k-section),
body.kayan .elementor-element:has(> .elementor-widget-container > .k-hero),
body.kayan .elementor-element:has(> .elementor-widget-container > .k-trust),
body.kayan .elementor-element:has(> .elementor-widget-container > .k-promo),
body.kayan .elementor-element:has(> .elementor-widget-container > .k-cta){
  max-width:none;width:100%;
}

/* ───────────────────────────────────────────────
   14) مساعدات
   ─────────────────────────────────────────────── */
.k-relative{position:relative;z-index:1}
.k-center{text-align:center}
.k-flex{display:flex;flex-wrap:wrap;gap:var(--k-s3)}
.k-flex--center{justify-content:center;align-items:center}
.k-mt-4{margin-top:var(--k-s4)}
.k-mt-5{margin-top:var(--k-s5)}
.k-mt-6{margin-top:var(--k-s6)}
.k-hide-mobile{display:initial}
.k-only-mobile{display:none}

/* نقطة التحوّل للجوال — يجب أن تطابق نقاط التحوّل في homepage.css
   (زر القائمة، الشريط السفلي، الزر العائم) وإلا ظهرت القائمة والزر معاً. */
@media (max-width:900px){
  .k-hide-mobile{display:none!important}
  .k-only-mobile{display:initial}
}