/* ============================================================
   هوية شركة خبرة — نظام التصميم المشترك
   مستخرج من موقع خبرة الرسمي (khibrah-website/app/globals.css)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root{
  /* ---- ألوان الهوية ---- */
  --c-deep:#062F33;
  --c-deeper:#03191C;
  --c-dark:#09454B;
  --c-primary:#036051;
  --c-medium:#308B7E;
  --c-bright:#00AAA4;
  --c-green:#57BC59;
  --c-blue:#1A6D92;
  --c-gray:#737373;
  --c-mint:#A8D9DB;
  --c-white:#FFFFFF;
  --c-cream:#F8FAF9;
  --c-soft:#EEF4F2;
  --c-line:#E0E8E5;
  --c-text:#0E2624;
  --c-text-soft:#4A5E5C;

  /* ---- التدرجات ---- */
  --grad-hero:
    radial-gradient(ellipse at top right, rgba(0,170,164,.18) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(48,139,126,.22) 0%, transparent 55%),
    linear-gradient(135deg,#03191C 0%,#062F33 45%,#09454B 100%);
  --grad-accent:linear-gradient(135deg,#00AAA4 0%,#308B7E 60%,#036051 100%);
  --grad-accent-soft:linear-gradient(135deg,#A8D9DB 0%,#00AAA4 100%);
  --grad-deep:linear-gradient(180deg,#062F33 0%,#03191C 100%);
  --grad-gold:linear-gradient(135deg,#F3D391 0%,#D9B45F 55%,#B08D3A 100%);

  /* ---- الظلال ---- */
  --shadow-card:0 18px 44px -24px rgba(9,69,75,.28);
  --shadow-card-hover:0 34px 70px -28px rgba(9,69,75,.40);
  --shadow-glow:0 30px 80px -30px rgba(0,170,164,.45);
  --shadow-cta:0 12px 30px -10px rgba(0,170,164,.6);

  /* ---- الحركة ---- */
  --ease:cubic-bezier(.22,1,.36,1);

  /* ---- الخطوط ---- */
  --font-display:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --font-body:"IBM Plex Sans Arabic","Cairo","Segoe UI",Tahoma,sans-serif;

  /* ---- سلّم الأحجام ----
     أصغر حجم مسموح 0.82rem — العربية تحتاج مساحة أكبر من اللاتينية
  --------------------------------- */
  --fs-micro:.82rem;   /* شارات وتسميات صغيرة */
  --fs-xs:.88rem;      /* نصوص مساعدة */
  --fs-sm:.95rem;      /* نص ثانوي */
  --fs-base:1rem;      /* النص الأساسي */
  --fs-md:1.08rem;     /* نص بارز */
  --fs-lg:1.2rem;      /* عناوين فرعية */

  --lh-tight:1.4;
  --lh-base:1.8;
  --lh-loose:2;

  /* ---- ألوان المراكز ---- */
  --rank-1:#D9B45F;
  --rank-2:#B9C4C6;
  --rank-3:#C08552;
}

*{box-sizing:border-box}

html{
  font-size:17px;              /* أساس أكبر — وضوح أعلى للعربية */
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--c-medium) transparent;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
@media (max-width:640px){ html{font-size:16px} }
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--c-soft)}
::-webkit-scrollbar-thumb{background:var(--c-medium);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--c-primary)}
::selection{background:var(--c-bright);color:#fff}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  font-weight:400;
  font-feature-settings:"ss01","kern";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--lh-base);
}

h1,h2,h3,h4,.font-display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0;
  word-spacing:.02em;
  line-height:var(--lh-tight);
}

/* الأرقام دائمًا لاتينية ومتساوية العرض حتى لا ترتجف عند التحديث */
.num,[data-score],.tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ============ عناصر مشتركة ============ */

.eyebrow{
  display:inline-flex; align-items:center; gap:.9rem;
  font-weight:700; font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase;
}
.eyebrow::before{content:"";width:2.25rem;height:1px;background:currentColor;opacity:.55;flex:none}

.gradient-text{
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gradient-text-soft{
  background:var(--grad-accent-soft);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gradient-gold{
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.card-surface{
  background:var(--c-white);
  border:1px solid var(--c-line);
  border-radius:1.5rem;
  box-shadow:var(--shadow-card);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card-surface:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--c-medium) 45%,transparent);
  box-shadow:var(--shadow-card-hover);
}

.glass-dark{
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);
}
.glass-light{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
}

.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
}
.bg-grid-light{
  background-image:
    linear-gradient(rgba(9,69,75,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(9,69,75,.05) 1px,transparent 1px);
  background-size:48px 48px;
}

.rule-line{
  height:1px;
  background:linear-gradient(to left,transparent,var(--c-line) 18%,var(--c-line) 82%,transparent);
}

/* ---- الأزرار ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:2.75rem; padding:0 1.5rem; border-radius:9999px;
  font-family:var(--font-body); font-size:1rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:all .3s var(--ease);
}
.btn:focus-visible{outline:none; box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(0,170,164,.7)}
.btn-sm{height:2.25rem;padding:0 1.15rem;font-size:.85rem}
.btn-lg{height:3.25rem;padding:0 2rem}

.btn-primary{background:var(--grad-accent);color:#fff;box-shadow:var(--shadow-cta)}
.btn-primary:hover{box-shadow:0 16px 36px -10px rgba(0,170,164,.75);filter:brightness(1.1)}

.btn-ghost{border-color:var(--c-line);background:rgba(255,255,255,.05);color:var(--c-text)}
.btn-ghost:hover{background:color-mix(in srgb,var(--c-soft) 70%,transparent);border-color:color-mix(in srgb,var(--c-medium) 50%,transparent)}

.btn-outline{border-color:var(--c-primary);color:var(--c-primary);background:transparent}
.btn-outline:hover{background:var(--c-primary);color:#fff}

.btn-dark{background:var(--c-deep);color:#fff}
.btn-dark:hover{background:var(--c-deeper)}

.btn-ondark{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;backdrop-filter:blur(10px)}
.btn-ondark:hover{background:rgba(255,255,255,.14);border-color:rgba(0,170,164,.5)}

/* ---- الأيقونات المرفوعة كصور ---- */
/* الأيقونة المرفوعة والإيموجي بمقاس واحد ومحاذاة واحدة */
.ico-img,.ico-em{display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;flex:none;line-height:1}
.ico-img{object-fit:contain;border-radius:.25em}
.ico-em{font-style:normal}

/* ---- الشعار ---- */
.logo{display:block;color:currentColor}
.logo svg{display:block;width:100%;height:100%;fill:currentColor}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}