/* ============================================================
   Safyeldin Theme v3 - Work Forward Executive design system
   ============================================================ */

/* ---------- Design tokens (overridden live by the Customizer) ----------
   Brand Guideline 2026 - v1.0:
   Midnight Slate #0B131A • Crisp Ice #F8FAFC • Digital Violet #7C3AED
   Electric Sky #00D2FF • Cyber Yellow #FFDF00 • Deep Petrol #365C6C
--------------------------------------------------------------- */
:root {
  --accent: #365C6C;              /* Deep Petrol */
  --accent-dark: #23424F;
  --accent-shadow: rgba(54, 92, 108, 0.35);
  --accent-soft: rgba(54, 92, 108, 0.10);
  --ink: #0B131A;                 /* Midnight Slate */
  --ink-soft: #46586A;
  --footer-bg: #0B131A;
  --bg-soft: #F8FAFC;             /* Crisp Ice */
  --sf-border: #E5EDF3;
  --sf-border-strong: #D6E1EA;
  --yellow: #FFDF00;              /* Cyber Yellow — للتأكيدات المهمة فقط */
  --violet: #7C3AED;              /* Digital Violet */
  --sky: #00D2FF;                 /* Electric Sky */
  --radius: 18px;
}

/* ---------- RTL hard guarantee ----------
   الثيم عربي بالكامل — الاتجاه مضمون هنا في الـ CSS
   حتى لو إعدادات لغة ووردبريس مش عربية (الوسم dir بييجي من header.php كطبقة تانية). */
html, body { direction: rtl; }

/* ---------- Helpers ---------- */
.sf-container { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.sf-row { display: flex; gap: 24px; }
.sf-hide-sm { display: initial; }
.sf-hide-lg { display: none; }

@media (max-width: 900px) {
  .sf-hide-sm { display: none; }
  .sf-hide-lg { display: initial; }
}

/* ---------- Typography & tokens ---------- */
.sf-heading { font-family: var(--font-heading, 'Alexandria'), sans-serif; }
.sf-body { font-family: var(--font-body, 'Readex Pro'), sans-serif; }

body.sf-theme,
body.sf-theme button,
body.sf-theme input,
body.sf-theme select,
body.sf-theme textarea {
  font-family: var(--font-body, 'Readex Pro'), sans-serif;
}

/* ---------- Buttons ---------- */
.sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 13px 26px;
  background: var(--yellow);
  color: var(--ink) !important;
  font-family: var(--font-heading, 'Alexandria'), sans-serif;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--yellow);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 10px 24px -12px rgba(255, 223, 0, 0.55);
}
.sf-btn:hover { transform: translateY(-2px); background: #F0CE00; border-color: #F0CE00; }
.sf-btn svg { width: 17px; height: 17px; }

.sf-btn--ghost {
  background: #fff;
  color: var(--ink) !important;
  border-color: var(--sf-border-strong);
}
.sf-btn--ghost:hover { background: var(--bg-soft); border-color: var(--accent); color: var(--accent-dark) !important; }

.sf-btn--dark { background: var(--ink); border-color: var(--ink); }
.sf-btn--dark:hover { opacity: 0.9; background: var(--ink); border-color: var(--ink); }

.sf-btn--sm { padding: 9px 18px; font-size: 13px; border-radius: 10px; }

.sf-link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent-dark); font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; font-size: 14px;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.sf-link-arrow:hover { color: var(--ink); }
.sf-link-arrow svg { width: 15px; height: 15px; }

/* ---------- Highlight pills (CSS-highlighted words) ---------- */
.hl {
  background-color: transparent;
  background-image: linear-gradient(rgba(255, 223, 0, 0.30), rgba(255, 223, 0, 0.30)); /* Cyber Yellow soft */
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 100% 100%;
  color: var(--ink);
  border-radius: 999px;
  padding: 0.08em 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
body.sf-theme h1 .hl,
body.sf-theme h2 .hl {
  background-color: transparent;
  background-image: linear-gradient(rgba(255, 223, 0, 0.5), rgba(255, 223, 0, 0.5));
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 0.34em;
  color: var(--ink);
  border-radius: 0;
  padding-inline: 0.12em;
}
.hl-ring {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 999px;
  padding: 0.02em 0.44em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Header ---------- */
.sf-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sf-border);
}
.sf-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 24px;
}
.sf-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.sf-brand__mark {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--ink) 0%, #16324F 100%);
  color: #fff; font-family: var(--font-heading, 'Alexandria'), sans-serif;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.sf-brand__mark .sf-brand__f { color: #fff; }
.sf-brand__mark .sf-brand__s { color: var(--accent); }
.sf-brand__logo { height: 46px; width: auto; display: block; }
@media (max-width: 1000px) { .sf-brand__logo { height: 40px; } }
.sf-brand__name { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); line-height: 1.2; }
.sf-brand__role { font-size: 11px; color: var(--ink-soft); }
.sf-brand__logo { max-width: 220px; max-height: 48px; width: auto; height: 46px; }
.custom-logo { max-height: 48px; width: auto; height: auto; }

.sf-nav { display: flex; align-items: center; gap: 28px; }
.sf-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.sf-nav a {
  text-decoration: none; color: var(--ink-soft); font-size: 14.5px; font-weight: 500;
  transition: color 0.2s ease;
}
.sf-nav a:hover { color: var(--accent-dark); }
.sf-nav > ul > li > a { position: relative; padding-inline: 2px; }
.sf-nav > ul > li > a::after {
  content: ""; position: absolute; bottom: -6px; right: 0; width: 0; height: 2px;
  border-radius: 2px; background: var(--accent); transition: width 0.25s ease;
}
.sf-nav > ul > li > a:hover::after { width: 100%; }

.sf-burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--sf-border-strong); background: #fff; color: var(--ink);
  cursor: pointer;
}
.sf-burger svg { width: 21px; height: 21px; }
body.sf-menu-locked { overflow: hidden; }
.sf-burger .ico-close { display: none; }
.sf-menu-open .sf-burger { background: var(--bg-soft); border-color: var(--accent); }
.sf-menu-open .sf-burger .ico-open { display: none; }
.sf-menu-open .sf-burger .ico-close { display: inline-flex; }

.sf-mobile-backdrop {
  position: fixed; inset: 0; top: 0; z-index: 40;
  background: rgba(11, 19, 26, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.sf-menu-open .sf-mobile-backdrop {
  opacity: 1; pointer-events: auto;
}

.sf-mobile-toggle { display: none; }
.sf-menu-open .sf-mobile-menu { display: block; }
.sf-menu-open .sf-burger { background: var(--bg-soft); }
.sf-mobile-menu {
  display: none;
  position: relative; z-index: 45;
  border-top: 1px solid var(--sf-border);
  background: #fff;
  padding: 18px 24px 24px;
  box-shadow: 0 30px 50px -30px rgba(11, 19, 26, 0.35);
  animation: sf-menu-in 0.22s ease;
}
@keyframes sf-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.sf-mobile-menu ul { list-style: none; margin: 0 0 16px; padding: 0; }
.sf-mobile-menu li a {
  display: block; padding: 11px 4px; text-decoration: none;
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 600; font-size: 14.5px; color: var(--ink);
  border-bottom: 1px dashed var(--sf-border);
}
.sf-mobile-menu li:last-child a { border-bottom: 0; }
.sf-mobile-menu li a:hover { color: var(--accent-dark); }

@media (max-width: 1000px) {
  .sf-nav { display: none; }
  .sf-burger { display: inline-flex; }
}

/* على الشاشات الصغيرة: CTA الهيدر بيتشال لأن نفس الزرار موجود جوه قائمة الموبايل. */
@media (max-width: 700px) {
  .sf-header__actions .sf-btn { display: none; }
}

/* لو القائمة اتفتحت على الموبايل وبعدها الشاشة كبرت: ما تفضلش ظاهرة على الديسكتوب. */
@media (min-width: 1001px) {
  .sf-mobile-menu,
  .sf-mobile-backdrop { display: none !important; }
}

/* ---------- Section shells ---------- */
.sf-section { padding: 84px 0; }
.sf-section--soft { background: var(--bg-soft); }
.sf-section--alt { background: #fff; }
.sf-sec-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: 52px; }
.sf-sec-head--start { text-align: right; margin-inline: 0; }
.sf-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 12px; font-weight: 700;
  color: var(--accent-dark); background: var(--accent-soft);
  padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
}
.sf-sec-head h2 {
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: clamp(26px, 4vw, 40px);
  font-weight: 900; color: var(--ink); line-height: 1.42; margin: 0 0 14px;
}
.sf-sec-head p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.9; }

/* ---------- Hero ---------- */
.sf-hero { padding: 64px 0 40px; background: #fff; overflow: hidden; }
.sf-hero__title {
  font-family: var(--font-heading, 'Alexandria'), sans-serif;
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 900; line-height: 1.34; color: var(--ink);
  margin: 0 0 18px; letter-spacing: -0.3px;
}
.sf-hero__text { color: var(--ink-soft); font-size: 16px; line-height: 2; max-width: 56ch; margin: 0 0 30px; }
.sf-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }

.sf-hero__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
}
.sf-hero__quote {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 8px 16px; border: 1px solid var(--sf-border-strong); border-radius: 999px;
  background: #fff; box-shadow: 0 4px 14px -8px rgba(15, 39, 64, 0.18);
  font-size: 12.5px; color: var(--ink-soft);
}
.sf-hero__quote .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.sf-hero__quote b { font-family: var(--font-heading, 'Alexandria'), sans-serif; color: var(--accent-dark); font-size: 12.5px; }

.sf-cred {
  /* auto-fit عشان عدد البطاقات بقى متغيّر (4-8) من الـ Customizer */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  border-top: 1px solid var(--sf-border); padding-top: 26px;
}
.sf-cred div {
  background: var(--bg-soft); border: 1px solid var(--sf-border); border-radius: 14px;
  padding: 12px 14px;
}
.sf-cred span.sf-cred__k { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.4px; display: block; }
.sf-cred span.sf-cred__v { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 12px; font-weight: 800; color: var(--accent-dark); display: block; margin-top: 4px; }

@media (max-width: 980px) {
  .sf-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .sf-cred { grid-template-columns: repeat(2, 1fr); }
}

/* Hero visual card */
.sf-hero-visual { position: relative; max-width: 430px; margin-inline: auto; width: 100%; }
.sf-hero-visual__card {
  background: #fff; border: 1px solid var(--sf-border-strong);
  border-radius: 26px; padding: 14px;
  box-shadow: 0 30px 60px -30px rgba(15, 39, 64, 0.35);
  position: relative;
}
.sf-hero-visual__img {
  position: relative; /* الكونتينر بتاع المسح واللمعة والزوايا */
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, var(--accent-soft) 0%, #fff 90%);
  display: flex; align-items: flex-end; justify-content: center;
}
.sf-hero-visual__img img { width: 100%; height: auto; max-height: 460px; object-fit: cover; display: block; }
.sf-hero-visual__chip {
  position: absolute; bottom: -22px; right: 24px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--sf-border-strong); border-radius: 16px;
  padding: 12px 16px; box-shadow: 0 16px 30px -20px rgba(15, 39, 64, 0.4);
}
.sf-hero-visual__chip b {
  width: 44px; height: 44px; border-radius: 13px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 14px; flex-shrink: 0;
}
.sf-hero-visual__chip span { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; font-size: 12.5px; color: var(--ink); display: block; }
.sf-hero-visual__chip small { font-size: 10.5px; color: var(--ink-soft); }
.sf-hero-visual__badge {
  position: absolute; top: -16px; left: -8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--yellow); border: 1px dashed rgba(11, 19, 26, 0.28); border-radius: 999px;
  padding: 9px 16px; font-size: 11.5px; font-weight: 700; color: var(--ink);
  font-family: var(--font-heading, 'Alexandria'), sans-serif;
  transform: rotate(-2.5deg);
  box-shadow: 0 12px 24px -16px rgba(11, 19, 26, 0.35);
}
.sf-hero-visual__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }

/* ---------- Stats ---------- */
.sf-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--sf-border); border-radius: 22px;
  overflow: hidden; margin-top: 56px;
}
.sf-stat { padding: 26px 20px; text-align: center; border-inline-end: 1px solid var(--sf-border); }
.sf-stat:last-child { border-inline-end: 0; }
.sf-stat b { display: block; font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 32px; color: var(--ink); line-height: 1; }
.sf-stat span { display: block; margin-top: 9px; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 900px) {
  .sf-stats { grid-template-columns: repeat(2, 1fr); }
  .sf-stat:nth-child(2) { border-inline-end: 0; }
  .sf-stat:nth-child(-n+2) { border-bottom: 1px solid var(--sf-border); }
}

/* ---------- Logos strip ---------- */
.sf-logos { padding: 40px 0 72px; background: #fff; }
.sf-logos__title { text-align: center; color: var(--ink-soft); font-size: 12px; letter-spacing: 1px; margin-bottom: 26px; }
.sf-logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sf-logos__row span,
.sf-logos__row a {
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; font-size: 13px;
  color: var(--ink-soft); background: var(--bg-soft);
  border: 1px solid var(--sf-border); border-radius: 12px;
  padding: 12px 22px; transition: all 0.2s ease;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.sf-logos__row span:hover,
.sf-logos__row a:hover { color: var(--accent-dark); border-color: var(--accent); transform: translateY(-2px); background: #fff; }
/* لوجو مرفوع كصورة: الصورة رمادية لحد المرور وبعدها بلونها الأصلي */
.sf-logos__row .sf-logos__pill--img { padding: 10px 18px; }
.sf-logos__row img {
  display: block; height: 32px; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(1); opacity: 0.75;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.sf-logos__row span:hover img,
.sf-logos__row a:hover img { filter: none; opacity: 1; }

/* ---------- About split sections ---------- */
.sf-about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sf-about h2 {
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: clamp(25px, 3.4vw, 36px);
  font-weight: 900; line-height: 1.5; color: var(--ink); margin: 0 0 16px;
}
.sf-about p.main { color: var(--ink-soft); font-size: 15px; line-height: 2.05; margin: 0 0 26px; }
.sf-about__visual { position: relative; max-width: 480px; margin-inline: auto; width: 100%; }

/* Visual A: كارت خطوات نظام العمل — Dark Petrol + Yellow/Sky/Violet */
.sf-visual-steps {
  position: relative; border-radius: 26px; overflow: hidden;
  background: linear-gradient(150deg, #0B131A 0%, #16303C 60%, #365C6C 140%);
  box-shadow: 0 30px 60px -32px rgba(11, 19, 26, 0.6);
  padding: 36px 30px;
}
.sf-visual-steps::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1.4px, transparent 1.4px);
  background-size: 20px 20px; opacity: 0.55; pointer-events: none;
}
.sf-visual-steps__head {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.sf-visual-steps__title { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; font-size: 15px; color: #fff; }
.sf-visual-steps__logo { height: 30px; width: auto; opacity: 0.9; }
.sf-step {
  position: relative; z-index: 1;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 17px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
}
.sf-step:last-child { border-bottom: 0; padding-bottom: 4px; }
.sf-step > b {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 12.5px;
}
.sf-step--1 > b { background: var(--yellow); color: var(--ink); }
.sf-step--2 > b { background: var(--sky); color: #06263A; }
.sf-step--3 > b { background: var(--violet); color: #fff; }
.sf-step h4 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 15px; font-weight: 800; color: #fff; margin: 2px 0 5px; }
.sf-step p { margin: 0; font-size: 12px; color: #A9BCCB; line-height: 1.9; }

/* Visual B: كارت اقتباس الهوية — Midnight Slate + Yellow */
.sf-visual-quote {
  position: relative; border-radius: 26px; overflow: hidden;
  background: radial-gradient(circle at 88% 12%, rgba(124, 58, 237, 0.35) 0%, transparent 55%),
              radial-gradient(circle at 8% 95%, rgba(0, 210, 255, 0.18) 0%, transparent 50%),
              #0B131A;
  box-shadow: 0 30px 60px -32px rgba(11, 19, 26, 0.6);
  padding: 40px 34px 96px;
}
.sf-visual-quote__q { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 18px; color: #B9C6D4; letter-spacing: 0.5px; margin-bottom: 14px; }
.sf-visual-quote__mark {
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900;
  font-size: clamp(26px, 3vw, 34px); line-height: 1.55; color: #fff;
  margin: 0 0 18px;
}
.sf-visual-quote__mark em { font-style: normal; color: var(--yellow); }
.sf-visual-quote__mark em, .sf-visual-quote__mark .hl {
  background-color: transparent;
  background-image: linear-gradient(rgba(255, 223, 0, 0.22), rgba(255, 223, 0, 0.22));
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 0.26em;
  border-radius: 0;
  padding: 0;
  color: var(--yellow);
}
.sf-visual-quote__by { display: flex; align-items: center; gap: 10px; color: #9FB0C4; font-size: 12.5px; }
.sf-visual-quote__by b { color: #fff; font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 12.5px; }
.sf-visual-quote__dots { display: flex; gap: 6px; margin-bottom: 20px; }
.sf-visual-quote__dots i { width: 9px; height: 9px; border-radius: 50%; }
.sf-visual-quote__dots i:nth-child(1) { background: var(--yellow); }
.sf-visual-quote__dots i:nth-child(2) { background: var(--sky); }
.sf-visual-quote__dots i:nth-child(3) { background: var(--violet); }
.sf-visual-quote img.sf-visual-steps__logo { position: absolute; bottom: 26px; right: 34px; height: 34px; }

/* Floating chip (مشترك بين الفيجوالات) */
.sf-about__chip {
  position: absolute; bottom: -20px; right: 20px; z-index: 3;
  background: #fff; border: 1px solid var(--sf-border-strong); border-radius: 16px;
  padding: 13px 18px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 18px 34px -20px rgba(11, 19, 26, 0.4);
}
.sf-about__chip b {
  width: 46px; height: 46px; border-radius: 13px; background: var(--yellow); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 13px;
}
.sf-about__chip span { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 12.5px; font-weight: 700; color: var(--ink); display: block; }
.sf-about__chip small { font-size: 10.5px; color: var(--ink-soft); }
@media (max-width: 980px) {
  .sf-about { grid-template-columns: 1fr; gap: 44px; }
  .sf-about__chip { bottom: -26px; }
}

/* ---------- Services cards ---------- */
.sf-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sf-card {
  position: relative; background: #fff; border: 1px solid var(--sf-border-strong);
  border-radius: 22px; padding: 30px 26px; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sf-card:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -26px rgba(15, 39, 64, 0.35); border-color: var(--accent); }
.sf-card__tag {
  align-self: flex-start; font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 11px; font-weight: 700;
  color: var(--accent-dark); background: var(--accent-soft);
  border-radius: 999px; padding: 5px 12px;
}
.sf-card__icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.sf-card__icon svg { width: 22px; height: 22px; }
.sf-card h3 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 17.5px; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.6; }
.sf-card p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.95; margin: 0; flex: 1; }
.sf-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px dashed var(--sf-border-strong); }
.sf-card--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.sf-card--accent:hover { border-color: var(--accent-dark); }
.sf-card--accent h3 { color: #fff; }
.sf-card--accent p { color: rgba(255, 255, 255, 0.85); }
.sf-card--accent .sf-card__tag { background: rgba(255, 255, 255, 0.18); color: #fff; }
.sf-card--accent .sf-card__icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.sf-card--accent .sf-card__foot { border-top-color: rgba(255, 255, 255, 0.25); }
.sf-card--accent .sf-link-arrow { color: #fff; }
.sf-card--accent .sf-card__corner { color: rgba(255, 255, 255, 0.5); }
.sf-card__corner { color: #C3D0DA; position: absolute; top: 22px; left: 22px; }
.sf-card__corner svg { width: 20px; height: 20px; }
@media (max-width: 980px) { .sf-cards-3 { grid-template-columns: 1fr; } }

/* ---------- Training & partnerships (ticket-style cards) ---------- */
.sf-train__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* لو المستخدم ظبط5 أو 6 كروت → 3×2 أكتر تماثلاً من 4+2 (على الشاشات الكبيرة بس) */
@media (min-width: 1081px) {
  .sf-train__grid:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
}
.sf-partner {
  position: relative; background: #fff; border: 1px dashed var(--sf-border-strong);
  border-radius: 22px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px; flex: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sf-partner:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -26px rgba(11, 19, 26, 0.35); border-color: var(--accent); border-style: solid; }
.sf-partner__logo {
  width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 13px;
  margin-bottom: 6px;
}
.sf-partner__logo svg { width: 26px; height: 26px; }
/* لوجو مرفوع كصورة جوه البطاقة */
.sf-partner__logo--img { width: auto; min-width: 54px; padding: 0 12px; background: #fff; border: 1px solid var(--sf-border); }
.sf-partner__logo--img img { display: block; height: 36px; width: auto; max-width: 140px; object-fit: contain; }
.sf-partner__logo--petrol { background: var(--accent-soft); color: var(--accent-dark); }
.sf-partner__logo--sky { background: rgba(0, 210, 255, 0.14); color: #0077A3; }
.sf-partner__logo--yellow { background: rgba(255, 223, 0, 0.26); color: #8A6D00; }
.sf-partner__logo--violet { background: rgba(124, 58, 237, 0.14); color: #7C3AED; font-size: 14px; }
.sf-partner small { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.sf-partner--petrol small { color: var(--accent-dark); }
.sf-partner--sky small { color: #0077A3; }
.sf-partner--yellow small { color: #8A6D00; }
.sf-partner--violet small { color: #7C3AED; }
.sf-partner h3 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; font-size: 16.5px; color: var(--ink); margin: 0; line-height: 1.6; }
.sf-partner p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.95; flex: 1; }
.sf-partner__foot { padding-top: 12px; border-top: 1px solid var(--sf-border); display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 11.5px; font-weight: 700; }
.sf-partner--petrol .sf-partner__foot { color: var(--accent-dark); }
.sf-partner--sky .sf-partner__foot { color: #0077A3; }
.sf-partner--yellow .sf-partner__foot { color: #8A6D00; }
.sf-partner--violet .sf-partner__foot { color: #7C3AED; }

.sf-pillars {
  background: #fff; border: 1px solid var(--sf-border-strong); border-radius: 26px;
  padding: 40px 34px; box-shadow: 0 24px 50px -30px rgba(11, 19, 26, 0.25);
  margin-top: 26px;
}
.sf-pillars > h3 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: clamp(18px, 2.4vw, 24px); color: var(--ink); text-align: center; margin: 0 0 26px; }
.sf-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sf-pillar { background: var(--bg-soft); border: 1px solid var(--sf-border); border-radius: 18px; padding: 18px; }
.sf-pillar b {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 11px; margin-bottom: 12px;
}
.sf-pillar--1 b { background: var(--accent); color: var(--yellow); }
.sf-pillar--2 b { background: var(--sky); color: #0B131A; }
.sf-pillar--3 b { background: var(--violet); color: #fff; }
.sf-pillar h4 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; font-size: 13.5px; color: var(--ink); margin: 0 0 6px; }
.sf-pillar p { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.9; }
.sf-train__cta { text-align: center; margin-top: 30px; }
.sf-train__cta span { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.sf-train__cta a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; font-size: 13.5px; color: var(--ink); text-decoration: none; background: var(--yellow); padding: 11px 20px; border-radius: 9px; transition: all 0.2s ease; }
.sf-train__cta a:hover { background: #F0CE00; text-decoration: none; transform: translateY(-2px); }
.sf-train__cta a:hover { color: var(--ink); text-decoration: underline; }
.sf-train__cta a svg { width: 15px; height: 15px; }
@media (max-width: 1080px) { .sf-train__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .sf-pillars__grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .sf-train__grid { grid-template-columns: 1fr; } }

/* ---------- Tools (calculators) — بنية الديزاين الأول: inputs يمين + كارت أبيض للمخرجات ---------- */
.sf-tabs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 34px; }
.sf-tab {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; font-size: 13px;
  padding: 14px 22px; border-radius: 16px; border: 1.5px solid var(--sf-border-strong);
  background: var(--bg-soft); color: #3B4B5C; cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 8px 18px -12px rgba(11, 19, 26, 0.2);
}
.sf-tab svg { width: 16px; height: 16px; }
.sf-tab--violet svg { color: var(--violet); }
.sf-tab--sky svg { color: #008DBF; }
.sf-tab--yellow svg { color: #B78900; }
.sf-tab:hover { background: #fff; border-color: var(--accent); color: var(--accent-dark); }
.sf-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 14px 28px -14px var(--accent-shadow); }
.sf-tab.is-active svg { color: var(--yellow); }

.sf-calc {
  background: var(--bg-soft); border: 1px solid var(--sf-border-strong); border-radius: 28px;
  padding: 38px 34px; box-shadow: 0 28px 56px -32px rgba(11, 19, 26, 0.28);
}
.sf-calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sf-calc__out {
  background: #fff; border: 1px solid var(--sf-border); border-radius: 20px;
  padding: 24px 22px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 12px 26px -18px rgba(11, 19, 26, 0.2);
  height: 100%;
}
.sf-calc__badge {
  align-self: flex-start; font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 11px; font-weight: 800;
  color: var(--accent-dark); background: var(--accent-soft);
  padding: 5px 13px; border-radius: 999px;
}
.sf-calc__foot {
  margin-top: auto; border-top: 1px solid var(--sf-border); padding-top: 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-soft);
}
.sf-calc__foot a { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; font-size: 11.5px; color: var(--accent-dark); text-decoration: none; }
.sf-calc__foot a:hover { color: var(--ink); text-decoration: underline; }
.sf-calc__h { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); margin: 0 0 6px; }
.sf-calc__s { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 22px; }
.sf-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.sf-field .sf-strong { color: var(--accent-dark); font-family: var(--font-heading, 'Alexandria'), sans-serif; }
.sf-qcard { background: #fff; border: 1px solid var(--sf-border); border-radius: 15px; padding: 15px 17px; }
.sf-qcard + .sf-qcard { margin-top: 12px; }
.sf-qcard label { margin-bottom: 8px; }
.sf-input, .sf-select, .sf-textarea {
  width: 100%; border: 1px solid var(--sf-border-strong); background: #fff;
  border-radius: 12px; padding: 11px 14px; font-size: 13.5px; color: var(--ink);
  outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 10px -8px rgba(11, 19, 26, 0.15);
}
.sf-input:focus, .sf-select:focus, .sf-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
.sf-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2347566B' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 13px center; padding-left: 36px; }
.sf-textarea { resize: vertical; min-height: 86px; }

.sf-out-card { background: var(--bg-soft); border: 1px solid var(--sf-border); border-radius: 16px; padding: 16px; }
.sf-out-card > span:first-child { font-size: 11px; color: var(--ink-soft); display: block; }
.sf-out-card b { display: block; font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 22px; color: var(--ink); margin-top: 6px; }

.sf-bars { margin-top: 24px; }
.sf-bar-row + .sf-bar-row { margin-top: 13px; }
.sf-bar-tops { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.sf-bar-tops span { color: var(--ink-soft); }
.sf-bar-tops b { font-family: var(--font-heading, 'Alexandria'), sans-serif; color: var(--accent-dark); }
.sf-bar-track { height: 9px; background: var(--sf-border); border-radius: 999px; overflow: hidden; }
.sf-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.35s ease; }
.sf-bar-fill--violet { background: var(--violet); }
.sf-bar-fill--sky { background: var(--sky); }
.sf-bar-fill--amber { background: #F59E0B; }

.sf-input-range { width: 100%; height: 7px; -webkit-appearance: none; appearance: none; background: var(--sf-border); border-radius: 999px; outline: none; margin: 8px 0 2px; }
.sf-input-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15, 39, 64, 0.35); cursor: pointer; }
.sf-input-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15, 39, 64, 0.35); cursor: pointer; }
.sf-quiz-dial { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 128px; height: 128px; margin: 18px auto; border-radius: 50%; border: 5px solid var(--accent-soft); background: #fff; }
.sf-quiz-dial b { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 34px; color: var(--ink); }
.sf-quiz-dial span { font-size: 11px; color: var(--ink-soft); }
.sf-quiz-box { border-radius: 16px; border: 1.5px solid #E7D18A; background: #FBF4DC; padding: 18px; }
.sf-quiz-box.is-good { border-color: #9BDDB1; background: #EAF9F0; }
.sf-quiz-box.is-bad { border-color: #F3ACB0; background: #FDF0F0; }
.sf-quiz-box h4 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; font-size: 14.5px; margin: 0 0 6px; color: #9C6F0A; }
.sf-quiz-box.is-good h4 { color: #157F3D; }
.sf-quiz-box.is-bad h4 { color: #C0392B; }
.sf-quiz-box p { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }
.sf-out-ratio-good { color: #157F3D; }
.sf-out-ratio-warn { color: #B7791F; }
@media (max-width: 980px) { .sf-calc__grid { grid-template-columns: 1fr; } }

/* ---------- Video section ---------- */
.sf-video-section { background: var(--bg-soft); }
.sf-video-wrap {
  position: relative; margin-inline: auto; max-width: 900px; aspect-ratio: 16 / 9;
  background: var(--ink); border-radius: 24px; overflow: hidden;
  border: 1px solid var(--sf-border-strong); box-shadow: 0 34px 70px -34px rgba(15, 39, 64, 0.55);
}
.sf-video-wrap iframe, .sf-video-wrap video { width: 100%; height: 100%; border: 0; display: block; }
.sf-video-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background:
  radial-gradient(circle at 20% 30%, rgba(0, 210, 255, 0.22) 0%, transparent 55%),
  radial-gradient(circle at 85% 80%, rgba(124, 58, 237, 0.28) 0%, transparent 50%),
  var(--ink); text-align: center; }
.sf-video-fallback::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.08) 1.3px, transparent 1.3px); background-size: 22px 22px; }
.sf-video-fallback__btn { width: 78px; height: 78px; border-radius: 50%; background: var(--yellow); border: 0; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease; position: relative; z-index: 1; }
.sf-video-fallback__btn svg { width: 30px; height: 30px; margin-left: -3px; }
.sf-video-fallback__btn:hover { transform: scale(1.08); }
.sf-video-fallback span { color: #B9C6D4; font-size: 13px; position: relative; z-index: 1; }

/* ---------- Blogs ---------- */
.sf-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sf-post-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--sf-border-strong); border-radius: 22px; overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sf-post-card:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -28px rgba(15, 39, 64, 0.35); border-color: var(--accent); }
.sf-post-card__img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); }
.sf-post-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.sf-post-card:hover .sf-post-card__img img { transform: scale(1.05); }
.sf-post-card__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-soft), #fff 65%); color: var(--accent); }
.sf-post-card__ph svg { width: 44px; height: 44px; }
.sf-post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.sf-post-card__meta { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-soft); }
.sf-post-card__cat { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }
.sf-post-card h3 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.68; margin: 0; }
.sf-post-card__excerpt { color: var(--ink-soft); font-size: 12.5px; line-height: 1.9; margin: 0; flex: 1; }
.sf-post-card__more { margin-top: 10px; padding-top: 13px; border-top: 1px dashed var(--sf-border-strong); color: var(--accent-dark); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: space-between; }
.sf-post-card__more svg { width: 15px; height: 15px; }
.sf-blog-foot { margin-top: 40px; text-align: center; }
.sf-blog-empty { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 44px 0; }
.sf-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 42px; }
.sf-pagination .page-numbers {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sf-border-strong); border-radius: 12px;
  background: #fff; color: var(--ink-soft); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.sf-pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent-dark); }
.sf-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.sf-pagination .page-numbers.dots { border-color: transparent; background: transparent; }
@media (max-width: 980px) { .sf-blog-grid { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.sf-tst { background: linear-gradient(160deg, var(--accent-dark) 0%, var(--accent) 100%); border-radius: 30px; padding: 52px 40px; position: relative; overflow: hidden; color: #fff; }
.sf-tst::before { content: ""; position: absolute; top: -80px; left: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.sf-tst::after { content: ""; position: absolute; bottom: -100px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); }
.sf-tst__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; position: relative; z-index: 1; flex-wrap: wrap; }
.sf-tst__head h2 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: clamp(23px, 3vw, 31px); margin: 0; }
.sf-tst__arrows { display: flex; gap: 10px; }
.sf-tst__arrow { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; }
.sf-tst__arrow:hover { background: rgba(255, 255, 255, 0.28); }
.sf-tst__arrow svg { width: 18px; height: 18px; }
.sf-tst__track { display: flex; gap: 18px; scroll-snap-type: x mandatory; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 1; padding-bottom: 6px; }
.sf-tst__track::-webkit-scrollbar { display: none; }
.sf-tst-item { flex: 0 0 calc(33.33% - 12px); min-width: 260px; scroll-snap-align: start; background: #fff; border-radius: 18px; padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.sf-tst-item__stars { color: #F5A623; display: flex; gap: 2px; }
.sf-tst-item__stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.sf-tst-item p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 2; flex: 1; }
.sf-tst-item__who { display: flex; align-items: center; gap: 12px; }
.sf-tst-item__who b { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.sf-tst-item__who span { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; font-size: 13px; color: var(--ink); display: block; }
.sf-tst-item__who small { color: var(--ink-soft); font-size: 11px; }
@media (max-width: 980px) { .sf-tst-item { flex-basis: 88%; } }

/* ---------- Consultation ---------- */
.sf-consult { background: var(--bg-soft); }
.sf-consult__card {
  background: #fff; border: 1px solid var(--sf-border-strong); border-radius: 28px;
  padding: 44px 40px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px;
  position: relative; overflow: hidden; box-shadow: 0 28px 60px -36px rgba(15, 39, 64, 0.4);
}
.sf-consult__card::before { content: ""; position: absolute; top: -70px; left: -70px; width: 240px; height: 240px; background: var(--accent-soft); border-radius: 50%; filter: blur(4px); }
.sf-consult__left { position: relative; z-index: 1; }
.sf-consult__left h2 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: clamp(24px, 3vw, 33px); font-weight: 900; color: var(--ink); line-height: 1.5; margin: 0 0 14px; }
.sf-consult__left > p { color: var(--ink-soft); font-size: 14px; line-height: 2.05; margin: 0 0 24px; }
.sf-contact-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; }
.sf-contact-row__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sf-contact-row__icon svg { width: 18px; height: 18px; }
.sf-contact-row small { display: block; color: var(--ink-soft); font-size: 10.5px; }
.sf-contact-row a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 13.5px; font-family: var(--font-heading, 'Alexandria'), sans-serif; }
.sf-contact-row a:hover { color: var(--accent-dark); }
.sf-free-callout { margin-top: 22px; background: #EAF9F0; border: 1px solid #9BDDB1; border-radius: 16px; padding: 15px 17px; display: flex; gap: 13px; align-items: flex-start; }
.sf-free-callout__icon { width: 34px; height: 34px; border-radius: 10px; background: #D2F2DE; color: #157F3D; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sf-free-callout__icon svg { width: 16px; height: 16px; }
.sf-free-callout h4 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 12.5px; font-weight: 800; color: #157F3D; margin: 2px 0 4px; }
.sf-free-callout p { margin: 0; font-size: 11.5px; color: #2F6B41; line-height: 1.85; }
.sf-free-callout a { display: inline-block; margin-top: 6px; color: #157F3D; font-weight: 700; font-size: 11.5px; text-decoration: underline; }

.sf-consult__form { position: relative; z-index: 1; background: var(--bg-soft); border: 1px solid var(--sf-border); border-radius: 20px; padding: 26px 24px; }
.sf-consult__form h3 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 15.5px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.sf-consult__form > p { margin: 0 0 16px; font-size: 11.5px; color: var(--ink-soft); }
.sf-field + .sf-field { margin-top: 12px; }
.sf-form-body { display: flex; flex-direction: column; }
.sf-btn--full { width: 100%; justify-content: center; margin-top: 16px; }
.sf-form-status { display: none; margin-top: 14px; border-radius: 12px; padding: 11px 14px; font-size: 12.5px; line-height: 1.8; }
.sf-form-status.is-ok { display: block; background: #EAF9F0; border: 1px solid #9BDDB1; color: #157F3D; }
.sf-form-status.is-err { display: block; background: #FDF0F0; border: 1px solid #F3ACB0; color: #C0392B; }
.sf-hp { position: absolute; opacity: 0; pointer-events: none; height: 0; width: 0; }
@media (max-width: 980px) { .sf-consult__card { grid-template-columns: 1fr; padding: 28px 22px; gap: 30px; } }

/* ---------- Footer ---------- */
.sf-footer { background: var(--footer-bg); color: #CBD6E4; padding: 64px 0 0; position: relative; overflow: hidden; }
.sf-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 90% 10%, rgba(124, 58, 237, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 6% 90%, rgba(0, 210, 255, 0.15) 0%, transparent 40%),
    radial-gradient(rgba(255, 255, 255, 0.05) 1.3px, transparent 1.3px);
  background-size: auto, auto, 22px 22px;
}
.sf-footer .sf-container { position: relative; z-index: 1; }
.sf-footer__top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 44px; align-items: center; padding-bottom: 46px; }
.sf-footer__brand { display: flex; align-items: center; gap: 12px; }
.sf-footer__brand .sf-brand__mark { border: 1px solid rgba(255, 255, 255, 0.16); }
.sf-footer__brand .sf-brand__logo { height: 54px; max-height: 56px; }
.sf-footer__brand .custom-logo { max-height: 56px; }
.sf-footer__tagline { margin-top: 14px; color: #9FB0C4; font-size: 13px; }
.sf-footer__social { display: flex; gap: 10px; margin-top: 20px; }
.sf-footer__social a { width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); color: #CBD6E4; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.2s ease; }
.sf-footer__social a:hover { border-color: var(--yellow); color: #fff; background: rgba(255, 223, 0, 0.14); }
.sf-footer__social svg { width: 17px; height: 17px; }

.sf-talk { display: grid; grid-template-columns: auto auto; align-items: center; gap: 26px; justify-content: start; }
.sf-talk__title {
  font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; letter-spacing: 0.4px;
  font-size: clamp(40px, 6.4vw, 74px); line-height: 1.2; margin: 0;
  background: linear-gradient(100deg, #FFFFFF 12%, rgba(0, 210, 255, 0.85) 48%, rgba(255, 223, 0, 0.92) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sf-talk__btnwrap { display: flex; flex-direction: column; gap: 10px; }
.sf-talk__text { color: #9FB0C4; font-size: 13px; margin: 0; }

.sf-widgets { padding-top: 8px; }
.sf-widgets::before { content: ""; display: block; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 30px; }

.sf-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0 24px; }
.sf-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sf-footer__menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; }
.sf-footer__menu a { color: #8FA0B4; text-decoration: none; font-size: 12.5px; }
.sf-footer__menu a:hover { color: #fff; }
.sf-footer__copy { color: #8FA0B4; font-size: 12px; margin: 0; }
@media (max-width: 900px) {
  .sf-footer__top { grid-template-columns: 1fr; gap: 34px; }
  .sf-talk { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---------- Generic pages / blog listing ---------- */
.sf-page-head { padding: 72px 0 44px; text-align: center; }
.sf-page-head h1 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: clamp(27px, 4vw, 44px); font-weight: 900; color: var(--ink); margin: 0 0 12px; line-height: 1.4; }
.sf-page-head p { color: var(--ink-soft); max-width: 640px; margin: 0 auto; font-size: 15px; line-height: 1.95; }

.sf-featured-card {
  background: #fff; border: 1px solid var(--sf-border-strong); border-radius: 26px;
  box-shadow: 0 26px 50px -30px rgba(15, 39, 64, 0.35); overflow: hidden; margin-bottom: 44px;
}
.sf-featured-card__grid { display: grid; grid-template-columns: 7fr 5fr; }
.sf-featured-card__body { padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; }
.sf-featured-card__badge { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 11px; font-weight: 800; color: var(--ink); background: var(--yellow); border-radius: 999px; padding: 5px 12px; align-self: flex-start; }
.sf-featured-card__body h2 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: clamp(19px, 2.4vw, 26px); font-weight: 900; color: var(--ink); line-height: 1.55; margin: 0; }
.sf-featured-card__body h2 a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.sf-featured-card__body h2 a:hover { color: var(--accent-dark); }
.sf-featured-card__body p { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 2; }
.sf-featured-card__side { background: linear-gradient(135deg, var(--ink) 0%, #1B2A38 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; position: relative; overflow: hidden; }
.sf-featured-card__side::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(0, 210, 255, 0.3) 0%, transparent 60%), radial-gradient(rgba(255,255,255,0.07) 1.3px, transparent 1.3px); background-size: 100% 100%, 20px 20px; }
.sf-featured-card__side div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sf-featured-card__side svg { width: 34px; height: 34px; color: var(--accent); }
.sf-featured-card__side .tag { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 11px; color: var(--accent); }
.sf-featured-card__side .ttl { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; font-size: 16px; }
.sf-featured-card__more { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
@media (max-width: 900px) { .sf-featured-card__grid { grid-template-columns: 1fr; } }

.sf-entry { max-width: 780px; margin-inline: auto; }
.sf-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); margin-bottom: 18px; }
.sf-entry__cat { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; font-size: 11.5px; color: var(--accent-dark); background: var(--accent-soft); padding: 4px 12px; border-radius: 999px; }
.sf-entry h1.sf-entry__title { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: clamp(26px, 4vw, 40px); font-weight: 900; color: var(--ink); line-height: 1.42; margin: 0 0 14px; }
.sf-entry__fig img { width: 100%; border-radius: 24px; margin: 26px 0; box-shadow: 0 26px 50px -28px rgba(15, 39, 64, 0.3); }
.sf-entry__summary {
  background: var(--accent-soft); border-right: 4px solid var(--accent);
  border-radius: 14px; padding: 16px 20px; margin-bottom: 26px;
}
.sf-entry__summary b { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 12px; color: var(--accent-dark); display: block; margin-bottom: 5px; }
.sf-entry__summary p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 2; }
.sf-entry__content { font-size: 16px; line-height: 2.15; color: #2E3D4D; }
.sf-entry__content > * + * { margin-top: 1.2em; }
.sf-entry__content h1, .sf-entry__content h2, .sf-entry__content h3, .sf-entry__content h4 {
  font-family: var(--font-heading, 'Alexandria'), sans-serif; color: var(--ink); line-height: 1.6; margin-top: 1.8em;
}
.sf-entry__content h2 { font-size: 25px; font-weight: 800; }
.sf-entry__content h3 { font-size: 19px; font-weight: 800; }
.sf-entry__content h2::before, .sf-entry__content h3::before { content: "# "; color: var(--accent); }
.sf-entry__content a { color: var(--accent-dark); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.sf-entry__content ul, .sf-entry__content ol { padding-right: 26px; padding-left: 0; }
.sf-entry__content ul li { list-style: disc; }
.sf-entry__content ol li { list-style: decimal; }
.sf-entry__content li + li { margin-top: 0.5em; }
.sf-entry__content blockquote {
  margin: 1.4em 0; padding: 16px 22px; background: var(--bg-soft);
  border-right: 4px solid var(--accent); border-radius: 14px; color: var(--ink-soft);
}
.sf-entry__content img, .sf-entry__content video, .sf-entry__content iframe { max-width: 100%; border-radius: 16px; }
.sf-entry__content code { background: var(--bg-soft); border: 1px solid var(--sf-border); border-radius: 6px; padding: 2px 7px; font-size: 0.9em; direction: ltr; display: inline-block; }
.sf-entry__content pre { direction: ltr; text-align: left; background: var(--ink); color: #DCE7F2; border-radius: 14px; padding: 18px 22px; overflow-x: auto; }
.wp-block-button__link, .wp-block-image img, .wp-block-embed iframe, .wp-block-embed video { max-width: 100%; }
.alignwide { max-width: 1000px; margin-inline: auto; }
.alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; width: calc(100vw - (100vw - 100%)); }

.sf-author-box { background: #fff; border: 1px solid var(--sf-border-strong); border-radius: 22px; padding: 26px; margin-top: 40px; display: flex; gap: 18px; align-items: flex-start; }
.sf-author-box__av { width: 58px; height: 58px; border-radius: 16px; background: var(--ink); color: var(--accent); font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.sf-author-box h4 { font-family: var(--font-heading, 'Alexandria'), sans-serif; color: var(--ink); font-weight: 800; margin: 0; font-size: 14.5px; }
.sf-author-box p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.95; }
.sf-author-box__links { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; }
.sf-author-box__links a { color: var(--accent-dark); text-decoration: none; font-weight: 700; font-family: var(--font-heading, 'Alexandria'), sans-serif; }
.sf-author-box__links a:hover { text-decoration: underline; }

.sf-cta-banner {
  max-width: 780px; margin: 44px auto 0; text-align: center;
  background: linear-gradient(135deg, var(--ink) 0%, #1B2A38 100%);
  border-radius: 26px; padding: 40px 30px; color: #fff; position: relative; overflow: hidden; }
.sf-cta-banner::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.3px, transparent 1.3px); background-size: 20px 20px; }
.sf-cta-banner .chip { display: inline-block; background: rgba(255, 255, 255, 0.12); color: var(--yellow); font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 11px; font-weight: 800; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
.sf-cta-banner h3 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 24px; margin: 0 0 10px; position: relative; z-index: 1; }
.sf-cta-banner .chip { position: relative; z-index: 1; }
.sf-cta-banner p { position: relative; z-index: 1; color: #B9C6D4; font-size: 13px; margin: 0 0 22px; line-height: 1.95; }
.sf-cta-banner .sf-btn { position: relative; z-index: 1; }

/* Pagination */
.sf-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.sf-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--sf-border-strong); background: #fff; color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: 13px; transition: all 0.2s ease; }
.sf-pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent-dark); }
.sf-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Comments ---------- */
.sf-comments { max-width: 780px; margin: 52px auto 0; }
.sf-comments-title { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; color: var(--ink); font-size: 19px; }
.comment-navigation { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 30px; font-size: 12.5px; font-weight: 700; }
.comment-navigation a { color: var(--accent-dark); text-decoration: none; }
.comment-list { list-style: none; margin: 0 0 30px; padding: 0; }
.comment-list .comment { background: #fff; border: 1px solid var(--sf-border); border-radius: 18px; padding: 20px 22px; margin-top: 14px; }
.comment-list .children { list-style: none; margin: 14px 0 0; padding-right: 22px; }
.comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.comment-author .avatar { border-radius: 12px; }
.comment-author .says { display: none; }
.comment-author .fn { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; color: var(--ink); font-size: 13.5px; }
.comment-metadata { font-size: 11px; color: var(--ink-soft); margin-bottom: 8px; }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-content { font-size: 13px; color: #2E3D4D; line-height: 2; }
.comment-content p { margin: 0 0 8px; }
.reply a { color: var(--accent-dark); font-size: 12px; font-weight: 700; text-decoration: none; }
.comment-respond { background: #fff; border: 1px solid var(--sf-border-strong); border-radius: 20px; padding: 26px 24px; }
.comment-respond h3 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; font-size: 16px; color: var(--ink); margin: 0 0 16px; }
.comment-respond label { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.comment-respond .submit { background: var(--accent); color: #fff; border: 0; border-radius: 12px; padding: 12px 26px; font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 700; cursor: pointer; }
.comment-form { display: grid; gap: 12px; }
.comment-form p { margin: 0; }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; border: 1px solid var(--sf-border-strong); background: var(--bg-soft); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; outline: none; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent); background: #fff; }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); }
.comment-form .logged-in-as, .comment-notes { font-size: 12px; color: var(--ink-soft); margin: 0; }
.bypostauthor { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- 404 / no results ---------- */
.sf-404 { padding: 96px 0; text-align: center; }
.sf-404__num { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: clamp(70px, 12vw, 130px); line-height: 1; background: linear-gradient(120deg, var(--sky), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.sf-404 h1 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; color: var(--ink); font-size: clamp(20px, 3vw, 28px); margin: 14px 0 10px; }
.sf-404 p { color: var(--ink-soft); margin: 0 0 26px; }
.sf-searchform { display: flex; gap: 10px; max-width: 480px; margin-inline: auto; }
.sf-searchform input { flex: 1; border: 1px solid var(--sf-border-strong); background: #fff; border-radius: 12px; padding: 12px 16px; font-size: 13.5px; outline: none; }
.sf-searchform input:focus { border-color: var(--accent); }
.sf-searchform button { background: var(--ink); color: #fff; border: 0; border-radius: 12px; padding: 0 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sf-searchform button svg { width: 17px; height: 17px; }

/* ---------- Videos page (TikTok style) ---------- */
.sf-tt { background: var(--bg-soft); min-height: 100vh; padding-bottom: 40px; }
.sf-tt__strip { background: var(--ink); color: #CBD6E4; position: sticky; top: 76px; z-index: 30; padding: 12px 0; }
.sf-tt__strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sf-tt__tags { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sf-tt__tags::-webkit-scrollbar { display: none; }
.sf-tt__tags span { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 11.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); white-space: nowrap; }
.sf-tt__tags span.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sf-tt__nav { display: flex; gap: 8px; }
.sf-tt__navbtn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sf-tt__navbtn:hover { background: var(--accent); border-color: var(--accent); }
.sf-tt__navbtn svg { width: 16px; height: 16px; }
.sf-tt__viewport { height: calc(100vh - 122px); overflow-y: auto; scroll-snap-type: y mandatory; max-width: 480px; margin-inline: auto; padding-top: 14px; }
.sf-tt__card { height: calc(100vh - 122px); scroll-snap-align: start; scroll-snap-stop: always; padding: 8px 6px; display: flex; }
.sf-tt__inner {
  position: relative; width: 100%; border-radius: 24px; overflow: hidden;
  border: 1px solid #1C3550; background: linear-gradient(180deg, #13293F 0%, #0B1A2B 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 30px 60px -30px rgba(11, 26, 43, 0.8);
}
.sf-tt__top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 6; padding: 15px 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent); }
.sf-tt__top-left { display: flex; align-items: center; gap: 9px; font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 11.5px; font-weight: 700; }
.sf-tt__live { width: 9px; height: 9px; border-radius: 50%; background: #F43F5E; }
.sf-tt__open { color: var(--yellow); font-weight: 700; font-size: 11px; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.sf-tt__open svg { width: 13px; height: 13px; }
.sf-tt__embed-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow-y: auto; scrollbar-width: none; background: #000; z-index: 4; }
.sf-tt__embed-wrap::-webkit-scrollbar { display: none; }
.sf-tt__play-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 26px; z-index: 3; }
.sf-tt__play { width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 2px solid var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.sf-tt__play svg { width: 26px; height: 26px; margin-left: -3px; }
.sf-tt__episode { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--accent); padding: 5px 12px; border-radius: 999px; }
.sf-tt__play-wrap h3 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 900; font-size: 21px; line-height: 1.55; margin: 2px 0; max-width: 270px; }
.sf-tt__play-wrap p { font-size: 11.5px; color: #A9B8C9; margin: 0; max-width: 280px; }
.sf-tt__side { position: absolute; bottom: 96px; left: 12px; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sf-tt__side button, .sf-tt__side a { display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: 0; color: #fff; text-decoration: none; font-size: 10.5px; font-weight: 700; cursor: pointer; padding: 0; }
.sf-tt__side .ico { width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); border: 0; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; }
.sf-tt__side button:hover .ico, .sf-tt__side a:hover .ico { color: var(--accent); }
.sf-tt__side svg { width: 18px; height: 18px; }
.sf-tt__side .ico--cta { background: rgba(255, 223, 0, 0.28); border: 1.5px solid var(--yellow); }
.sf-tt__bottom { position: relative; z-index: 6; padding: 14px 16px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 20%, rgba(0, 0, 0, 0.4)); }
.sf-tt__handle { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sf-tt__handle b { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: 13px; }
.sf-tt__handle span { color: var(--accent); font-size: 11px; font-weight: 600; }
.sf-tt__bottom p.pp { font-size: 11px; color: #C3CFDB; margin: 0 0 8px; line-height: 1.9; }
.sf-tt__sound { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #8FA0B4; }
.sf-tt__sound svg { width: 13px; height: 13px; color: var(--yellow); }
.sf-tt__fab { position: fixed; bottom: 18px; inset-inline-start: 50%; transform: translateX(-50%); margin-inline-start: 0; z-index: 40; background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 9px 16px; display: flex; align-items: center; gap: 14px; font-size: 11.5px; }
.sf-tt__fab a, .sf-tt__fab button { color: #CBD6E4; text-decoration: none; background: transparent; border: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11.5px; cursor: pointer; }
.sf-tt__fab a:hover, .sf-tt__fab button:hover { color: #fff; }
.sf-tt__fab svg { width: 14px; height: 14px; }
.sf-tt__fab .sep { color: rgba(255, 255, 255, 0.2); }

/* ---------- Free consultation page ---------- */
.sf-free-hero { padding: 64px 0 30px; text-align: center; }
.sf-free-hero h1 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-size: clamp(27px, 4vw, 44px); font-weight: 900; color: var(--ink); line-height: 1.4; margin: 0 0 14px; }
.sf-free-hero > p { color: var(--ink-soft); max-width: 660px; margin: 0 auto; font-size: 15px; line-height: 2; }
.sf-free-elig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 900px) { .sf-free-elig { grid-template-columns: 1fr; } }
.sf-faq { max-width: 720px; margin: 56px auto 0; }
.sf-faq__item { background: #fff; border: 1px solid var(--sf-border-strong); border-radius: 16px; padding: 18px 22px; margin-bottom: 14px; }
.sf-faq__item h4 { font-family: var(--font-heading, 'Alexandria'), sans-serif; font-weight: 800; color: var(--accent-dark); font-size: 14px; margin: 0 0 7px; }
.sf-faq__item p { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.95; }

/* ---------- Misc ---------- */
::selection { background: var(--yellow); color: var(--ink); }
body.sf-theme { background: #fff; color: var(--ink); -webkit-font-smoothing: antialiased; }
img { user-select: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
input[type="range"] { accent-color: var(--accent); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: #C3D0DA; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; }
.skip-link { position: absolute; top: -48px; right: 12px; z-index: 60; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 12px; }
.skip-link:focus { top: 12px; color: #fff; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ============================================================
   v3.2 — Sharpness pass (ألوان أجرأ + زوايا حادة) + إصلاح الـ panels
   ============================================================ */

/* إصلاح: الـ hidden attribute بيتقاوض من الرعاية display:grid في الحاسبات */
[hidden] { display: none !important; }

/* ---------- زوايا حادة (الحد الأقصى للانحناء 14-16 بكسل بدل 26-30) ---------- */
.sf-btn { border-radius: 9px; }
.sf-btn--sm { border-radius: 7px; }
.sf-tab { border-radius: 8px; box-shadow: none; }
.sf-tab:hover { transform: translateY(-1px); }
.sf-tab.is-active { transform: translateY(-1px); }
.sf-input, .sf-select, .sf-textarea { border-radius: 7px; box-shadow: none; }
.sf-searchform input, .sf-searchform button { border-radius: 7px; }
.sf-out-card, .sf-qcard, .sf-pillar, .sf-partner, .sf-tst-item, .sf-faq__item,
.comment-list .comment, .sf-form-status, .sf-quiz-box { border-radius: 8px; }
.sf-partner__logo { border-radius: 9px; }
.sf-card, .sf-post-card, .sf-author-box { border-radius: 10px; }
.sf-stats { border-radius: 12px; }
.sf-calc, .sf-calc__out, .sf-consult__card, .sf-consult__form,
.sf-featured-card, .sf-cta-banner, .sf-video-wrap, .sf-pillars,
.sf-visual-steps, .sf-visual-quote, .comment-respond { border-radius: 14px; }
.sf-tst { border-radius: 16px; }
.sf-step > b { border-radius: 8px; }
.sf-contact-row__icon { border-radius: 8px; }
.sf-hero-visual__card { border-radius: 12px; }
.sf-hero-visual__img { border-radius: 9px; }
.sf-hero-visual__chip, .sf-hero-visual__chip b, .sf-about__chip, .sf-about__chip b { border-radius: 8px; }
.sf-hero-visual__badge { border-radius: 4px; }
.sf-logos__row span,
.sf-logos__row a { border-radius: 6px; }
.sf-tt__inner { border-radius: 12px; }

/* ---------- ألوان أجرأ (روح) ---------- */
/* الكايكر: أصفر البراند بدل الرمادي الباهت */
.sf-kicker { background: var(--yellow); color: var(--ink); }
/* الأرقام: لون مختلف لكل رقم */
.sf-stat:nth-child(2) b { color: #7C3AED; }
.sf-stat:nth-child(3) b { color: #008DBF; }
.sf-stat:nth-child(4) b { color: #B7791F; }
/* أيقونات كروت الخدمات: سماوي وبنفسجي */
.sf-cards-3 .sf-card:nth-child(2) .sf-card__icon { background: rgba(0, 210, 255, 0.16); color: #008DBF; }
.sf-cards-3 .sf-card:nth-child(3) .sf-card__icon { background: rgba(124, 58, 237, 0.14); color: #7C3AED; }
/* خط ملون فوق كل كارت خدمة */
.sf-card { border-top: 3px solid var(--sky); }
.sf-card--accent { border-top-color: var(--yellow); }
.sf-cards-3 .sf-card:nth-child(2) { border-top-color: var(--sky); }
.sf-cards-3 .sf-card:nth-child(3) { border-top-color: var(--violet); }
/* خلفيات الأقسام الناعمة اشفالت بالسماوي تفتيح مش باهتة */
.sf-section--soft { background: #F0F6FA; }
/* الكلمة المميزة على الداكن (تشهد العميل): أزرق زايد */
body.sf-theme .sf-tst .hl {
  background-color: transparent;
  background-image: linear-gradient(rgba(255, 223, 0, 0.20), rgba(255, 223, 0, 0.20));
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 0.26em;
  color: var(--yellow);
  border-radius: 0;
  padding-inline: 0.08em;
}
/* لوحة الـ Hero أصغر ألوان وفي */
.sf-hero__quote b { color: var(--accent-dark); }

/* ============================================================
   v3.3 — CTA أصفر عالي المنفاذ + Tooltips للمصطلحات
   ============================================================ */

/* رابط CTA داخل الحاسبات: يبقى زرار أصفر واضح بدل كلمة رابطة عادية */
.sf-calc__foot a {
  background: var(--yellow);
  color: var(--ink) !important;
  padding: 10px 18px;
  border-radius: 9px;
  transition: all 0.2s ease;
  box-shadow: 0 8px 18px -10px rgba(255, 223, 0, 0.55);
}
.sf-calc__foot a:hover { background: #F0CE00; text-decoration: none; transform: translateY(-2px); }

/* Tooltip بسيط لمصطلحات الحاسبات (hover على الديسكتوب / tap على الموبايل) */
.sf-tip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 9.5px; font-weight: 800; font-family: var(--font-heading, 'Alexandria'), sans-serif;
  cursor: help; vertical-align: middle; margin-inline-start: 5px;
  outline: none;
}
.sf-tip:hover, .sf-tip:focus { background: var(--accent-dark); color: #fff; }
.sf-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); right: 50%;
  transform: translateX(50%);
  background: var(--ink); color: #fff;
  font-family: var(--font-body, 'Readex Pro'), sans-serif; font-weight: 400; font-size: 11px;
  line-height: 1.7; white-space: normal; width: max-content; max-width: 230px;
  padding: 8px 12px; border-radius: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
  box-shadow: 0 10px 24px -10px rgba(11, 19, 26, 0.5);
}
.sf-tip:hover::after, .sf-tip:focus::after { opacity: 1; visibility: visible; }
.sf-tip::before {
  content: '';
  position: absolute; bottom: calc(100% + 2px); right: 50%;
  transform: translateX(50%);
  border: 5px solid transparent; border-top-color: var(--ink);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease; z-index: 30;
}
.sf-tip:hover::before, .sf-tip:focus::before { opacity: 1; visibility: visible; }

/* ============================================================================
 * v3.4 — HERO MOTION
 * كارت الصورة: هالة ملوّنة بتدور + حلقات مدار + دخول مرجّح + طفو مستمر
 *            + ميلان 3D مع الماوس + مسح ضوئي على الصورة + لمعة تتبع المؤشر
 *            + زوايا حادة بتدخل بالتتابع + شريط حالة نابض
 * ========================================================================== */

/* منع أي تمدد أفقي من الهالة والحلقات */
.sf-hero { overflow-x: clip; }

.sf-hero-visual {
  perspective: 1100px;
  animation: sf-hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sf-hero-in {
  from { opacity: 0; transform: translate3d(0, 44px, 0) rotate(-4deg) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

/* --- هالة التدرّج اللي بتدور ورا الكارت --- */
.sf-hero-visual__aura {
  position: absolute;
  inset: -4% -7% -6%;
  z-index: 0;
  border-radius: 30px;
  background: conic-gradient(from 0deg,
    var(--violet) 0deg, var(--sky) 95deg, var(--yellow) 175deg,
    var(--violet) 265deg, var(--sky) 360deg);
  filter: blur(38px);
  opacity: 0.48;
  animation: sf-hero-aura 11s linear infinite;
  will-change: transform;
}
@keyframes sf-hero-aura {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- حلقات المدار (واحدة بتلف عادية والتانية عكس) --- */
.sf-hero-visual__orbit {
  position: absolute;
  inset: -30px;
  z-index: 0;
  border: 1px dashed rgba(124, 58, 237, 0.5);
  border-radius: 50%;
  pointer-events: none;
  animation: sf-hero-orbit 32s linear infinite;
}
.sf-hero-visual__orbit--b {
  inset: -54px;
  border: 1px solid rgba(0, 210, 255, 0.3);
  animation-duration: 50s;
  animation-direction: reverse;
}
@keyframes sf-hero-orbit {
  to { transform: rotate(360deg); }
}

/* --- طبقة الميلان: بتتحكّم من JS عن طريق --rx / --ry --- */
.sf-hero-visual__tilt {
  position: relative;
  z-index: 1;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- طفو مستمر للكارت (منفصل عن الميلان عشان الـ transform ما يتضاربش) --- */
.sf-hero-visual__card {
  animation: sf-hero-float 7s ease-in-out 1.2s infinite;
}
@keyframes sf-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* --- الزوايا الحادة: بتدخل واحدة ورا التانية --- */
.sf-hero-visual__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.2);
  animation: sf-corner-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.sf-hero-visual__corner--tl {
  top: 10px; left: 10px;
  border-top: 3px solid var(--violet);
  border-left: 3px solid var(--violet);
  transform-origin: top left;
  animation-delay: 0.55s;
}
.sf-hero-visual__corner--tr {
  top: 10px; right: 10px;
  border-top: 3px solid var(--sky);
  border-right: 3px solid var(--sky);
  transform-origin: top right;
  animation-delay: 0.7s;
}
.sf-hero-visual__corner--bl {
  bottom: 10px; left: 10px;
  border-bottom: 3px solid var(--yellow);
  border-left: 3px solid var(--yellow);
  transform-origin: bottom left;
  animation-delay: 0.85s;
}
.sf-hero-visual__corner--br {
  bottom: 10px; right: 10px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  transform-origin: bottom right;
  animation-delay: 1s;
}
@keyframes sf-corner-in {
  to { opacity: 1; transform: scale(1); }
}

/* --- المسح الضوئي اللي بيعدي على الصورة --- */
.sf-hero-visual__scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: screen;
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.55) 46%,
    rgba(0, 210, 255, 0.45) 51%,
    rgba(255, 255, 255, 0) 62%);
  transform: translate3d(-140%, 0, 0);
  animation: sf-hero-scan 6.5s cubic-bezier(0.4, 0, 0.2, 1) 1.6s infinite;
}
@keyframes sf-hero-scan {
  0%   { transform: translate3d(-140%, 0, 0); }
  46%  { transform: translate3d(140%, 0, 0); }
  100% { transform: translate3d(140%, 0, 0); }
}

/* --- اللمعة اللي بتتبع الماوس (الموقع بيتحط من JS) --- */
.sf-hero-visual__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.42),
    rgba(0, 210, 255, 0.16) 42%,
    rgba(124, 58, 237, 0.1) 56%,
    transparent 70%);
}
.sf-hero-visual:hover .sf-hero-visual__glare { opacity: 1; }

/* --- شريط الحالة --- */
.sf-hero-visual__status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-family: var(--font-heading, 'Alexandria'), sans-serif;
}
.sf-hero-visual__status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16A34A;
  flex-shrink: 0;
  animation: sf-status-pulse 2.3s ease-out infinite;
}
@keyframes sf-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.sf-hero-visual__status-t {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}
.sf-hero-visual__status-e {
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #0B7A34;
  background: #EAF9F0;
  border: 1px solid rgba(21, 127, 61, 0.28);
  padding: 4px 9px;
  border-radius: 999px;
}

/* --- كارت الخبرة العائم بيطفو بإيقاع مختلف --- */
.sf-hero-visual__chip {
  animation: sf-hero-chip 5.6s ease-in-out 1.5s infinite;
}
@keyframes sf-hero-chip {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* --- موبايل: نشيل الحلقات ونخفف الهالة عشان ما يحصلش تمدد أفقي --- */
@media (max-width: 767px) {
  .sf-hero-visual__orbit { display: none; }
  .sf-hero-visual__aura { inset: -3% -4%; filter: blur(26px); opacity: 0.4; }
}

/* --- احترام إعداد تقليل الحركة في نظام التشغيل --- */
@media (prefers-reduced-motion: reduce) {
  .sf-hero-visual,
  .sf-hero-visual__card,
  .sf-hero-visual__chip,
  .sf-hero-visual__orbit,
  .sf-hero-visual__aura,
  .sf-hero-visual__scan,
  .sf-hero-visual__corner,
  .sf-hero-visual__status-dot {
    animation: none !important;
  }
  .sf-hero-visual__corner { opacity: 1 !important; transform: none !important; }
  .sf-hero-visual__tilt { transform: none !important; }
  .sf-hero-visual__scan { display: none; }
}

/* ============================================================================
 * v3.5 — STATS (Apple-style) + SLIDE HANDOFF
 * الأرقام: لوحة بخلفية متدرّجة + كروت زجاجية طايفية + دخول متتابع بالتتابع
 * الشهادات: كل سلايد بيتسلّم بسلاسة للسلايد اللي بعده (أوتو أدفانس)
 * ========================================================================== */

/* ---------- لوحة الأرقام ---------- */
.sf-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 56px;
  padding: 14px;
  background:
    radial-gradient(85% 120% at 6% 0%, rgba(124, 58, 237, 0.10), transparent 62%),
    radial-gradient(85% 120% at 94% 100%, rgba(0, 210, 255, 0.13), transparent 62%),
    linear-gradient(180deg, #F5F7FB 0%, #FFFFFF 100%);
  border: 1px solid rgba(11, 19, 26, 0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(11, 19, 26, 0.05),
    0 26px 54px -34px rgba(11, 19, 26, 0.35);
}

/* ---------- كارت الرقم ---------- */
.sf-stat {
  --stat-tint: rgba(11, 19, 26, 0.12);
  position: relative;
  padding: 26px 16px 24px;
  text-align: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  box-shadow:
    0 1px 1px rgba(11, 19, 26, 0.04),
    0 10px 22px -16px rgba(11, 19, 26, 0.2);
  opacity: 1;
  transform: none;
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.sf-stat:nth-child(2) { --stat-tint: rgba(124, 58, 237, 0.20); }
.sf-stat:nth-child(3) { --stat-tint: rgba(0, 141, 191, 0.18); }
.sf-stat:nth-child(4) { --stat-tint: rgba(183, 121, 31, 0.18); }

/* هالة لون خفيفة جوّه الكارت (نفس ألوان الأرقام) */
.sf-stat::before {
  content: "";
  position: absolute;
  top: -76px;
  left: 50%;
  width: 172px;
  height: 150px;
  margin-left: -86px;
  background: radial-gradient(closest-side, var(--stat-tint), transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}

/* الرقم: كبير، تتبّع ضيّق، وأرقام ثابتة العرض عشان ما يهتزّش أثناء العدّ */
.sf-stat b {
  position: relative;
  display: block;
  font-family: var(--font-heading, 'Alexandria'), sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 3.1vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* النص تحت الرقم */
.sf-stat span {
  position: relative;
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* حالات الدخول المتتابع — JS بيدوّر عليها عند دخول السيكشن الشاشة */
.sf-stat.is-armed { opacity: 0; transform: translateY(28px) scale(0.96); }
.sf-stat.is-in    { opacity: 1; transform: none; }

/* رفع خفيف عند المرور — لازم بعد is-in عشان يغلب عليها */
.sf-stat:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 1px rgba(11, 19, 26, 0.04),
    0 22px 36px -18px rgba(11, 19, 26, 0.32);
}

/* تحييد أثر القواعد القديمة اللي كانت بتشيل حدّ من كارت معيّن */
.sf-stat:nth-child(2),
.sf-stat:last-child { border-inline-end: 1px solid rgba(255, 255, 255, 0.95); }

@media (max-width: 900px) {
  .sf-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; }
  .sf-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.95); }
}
@media (max-width: 480px) {
  .sf-stat { padding: 22px 12px 20px; }
  .sf-stat b { font-size: 29px; }
}

/* ---------- الشهادات: تسليم سلس بين السلايدات ---------- */
.sf-tst__track {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
/* 2.5 كارت ظاهر — عشان يبقى فيه سلايد فعلاً يتسلّم (كانت 3 في نفس الصف) */
.sf-tst-item {
  flex: 0 0 calc(40% - 9px);
  min-width: 260px;
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .sf-stat { transition: box-shadow 0.2s ease !important; }
  .sf-stat:hover { transform: none !important; }
}

/* ============================================================================
 * v3.6 - SITE MOTION
 * ...
 * ========================================================================== */

/* ---------- (1) محرّك الكشف: البلوك بيدخل الشاشة وأبناءه بيتبنيوا بالتتابع ---------- */
.sf-rv.is-armed { opacity: 0; }

@keyframes sf-rise {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to   { opacity: 1; transform: none; }
}

/* مستوى 1: أبناء البلوك المكشوف مباشرة
   ملحوظة: لازم longhand (من غير الـ shorthand) عشان قواعد nth-child تحت
   تقدر تحدّد الـ delay من غير ما الـ shorthand يرجّعها لـ0. */
.sf-rv.is-in > *:not(.hl) {
  animation-name: sf-rise;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: backwards;
}
.sf-rv.is-in > *:nth-child(1) { animation-delay: 0.06s; }
.sf-rv.is-in > *:nth-child(2) { animation-delay: 0.13s; }
.sf-rv.is-in > *:nth-child(3) { animation-delay: 0.20s; }
.sf-rv.is-in > *:nth-child(4) { animation-delay: 0.27s; }
.sf-rv.is-in > *:nth-child(5) { animation-delay: 0.34s; }
.sf-rv.is-in > *:nth-child(6) { animation-delay: 0.41s; }
.sf-rv.is-in > *:nth-child(7) { animation-delay: 0.48s; }
.sf-rv.is-in > *:nth-child(8) { animation-delay: 0.55s; }
.sf-rv.is-in > *:nth-child(9) { animation-delay: 0.62s; }
.sf-rv.is-in > *:nth-child(10) { animation-delay: 0.69s; }

/* مستوى 2: تفاصيل جوّه كل ابن — من غير اللاين والأيقونات عشان ما تتوهّشش عن أخواتها */
.sf-rv.is-in > * > *:not(.hl):not(svg):not(img):not(.sf-card__icon):not(.sf-contact-row__icon):not(.sf-free-callout__icon):not(.sf-partner__logo) {
  animation-name: sf-rise;
  animation-duration: 0.72s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: backwards;
}
.sf-rv.is-in > * > *:nth-child(1) { animation-delay: 0.20s; }
.sf-rv.is-in > * > *:nth-child(2) { animation-delay: 0.26s; }
.sf-rv.is-in > * > *:nth-child(3) { animation-delay: 0.32s; }
.sf-rv.is-in > * > *:nth-child(4) { animation-delay: 0.38s; }
.sf-rv.is-in > * > *:nth-child(5) { animation-delay: 0.44s; }
.sf-rv.is-in > * > *:nth-child(6) { animation-delay: 0.50s; }

/* ---------- (2) اللاين الأصفر بيترسم لوحده (الـ JS بيدوّر .hl-drawn) ---------- */
@keyframes sf-hl-pill { from { background-size: 0% 100%; }   to { background-size: 100% 100%; } }
@keyframes sf-hl-draw { from { background-size: 0% 0.34em; } to { background-size: 100% 0.34em; } }
@keyframes sf-hl-draw-sm { from { background-size: 0% 0.26em; } to { background-size: 100% 0.26em; } }

.hl.hl-drawn { animation: sf-hl-pill 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
body.sf-theme h1 .hl.hl-drawn,
body.sf-theme h2 .hl.hl-drawn { animation: sf-hl-draw 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.32s backwards; }
body.sf-theme .sf-tst .hl.hl-drawn { animation: sf-hl-draw-sm 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.32s backwards; }
.sf-visual-quote__mark .hl.hl-drawn,
.sf-visual-quote__mark em.hl-drawn { animation: sf-hl-draw-sm 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.32s backwards; }

/* ---------- (3) الأيقونات: بوَب عند الدخول + رياكشن على المرور ---------- */
@keyframes sf-icon-pop {
  0%   { opacity: 0; transform: scale(0.35) rotate(-18deg); }
  62%  { opacity: 1; transform: scale(1.12) rotate(6deg); }
  100% { opacity: 1; transform: none; }
}

.sf-rv.is-in .sf-card__icon,
.sf-rv.is-in .sf-contact-row__icon,
.sf-rv.is-in .sf-free-callout__icon,
.sf-rv.is-in .sf-partner__logo {
  animation: sf-icon-pop 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
}

.sf-card__icon,
.sf-contact-row__icon,
.sf-partner__logo {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s ease;
}
.sf-card:hover .sf-card__icon {
  transform: translateY(-5px) rotate(-10deg) scale(1.1);
  box-shadow: 0 16px 26px -16px rgba(11, 19, 26, 0.55);
}
.sf-contact-row:hover .sf-contact-row__icon { transform: rotate(-10deg) scale(1.14); }
.sf-partner:hover .sf-partner__logo { transform: translateY(-5px) rotate(-7deg) scale(1.08); }

/* رنين خفيف لأيقونة الـ kicker (قليل العدد - مش هيثقل الصفحة) */
@keyframes sf-kicker-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45%      { transform: translateY(-3px) rotate(-9deg); }
}
.sf-kicker svg,
.sf-rv.is-in .sf-kicker svg {
  animation: sf-kicker-bob 3.6s ease-in-out infinite;
  transform-origin: 50% 65%;
}

/* ---------- (4) سهم ضوئي (sheen) على الأزرار عند المرور ---------- */
.sf-btn { position: relative; overflow: hidden; isolation: isolate; }
.sf-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 66%);
  transform: translateX(150%);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.sf-btn:hover::before { transform: translateX(-150%); }

/* ---------- (5) أسهم الشهادات رياكشن ---------- */
.sf-tst__arrow {
  transition: background 0.2s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sf-tst__arrow:hover  { transform: scale(1.12); }
.sf-tst__arrow:active { transform: scale(0.92); }

/* ---------- (6) دخول الهيرو وصفحة الحجز من غير JS (يشتغل من أول رسم) ---------- */
.sf-hero__quote,
.sf-hero__title,
.sf-hero__text,
.sf-hero__actions,
.sf-cred {
  animation: sf-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.sf-hero__quote    { animation-delay: 0.06s; }
.sf-hero__title    { animation-delay: 0.18s; }
.sf-hero__text     { animation-delay: 0.32s; }
.sf-hero__actions  { animation-delay: 0.46s; }
.sf-cred           { animation-delay: 0.58s; }

.sf-cred > div { animation: sf-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.sf-cred > div:nth-child(1) { animation-delay: 0.70s; }
.sf-cred > div:nth-child(2) { animation-delay: 0.78s; }
.sf-cred > div:nth-child(3) { animation-delay: 0.86s; }
.sf-cred > div:nth-child(4) { animation-delay: 0.94s; }
.sf-cred > div:nth-child(5) { animation-delay: 1.02s; }
.sf-cred > div:nth-child(6) { animation-delay: 1.10s; }
.sf-cred > div:nth-child(7) { animation-delay: 1.18s; }
.sf-cred > div:nth-child(8) { animation-delay: 1.26s; }

.sf-free-hero .sf-container > * { animation: sf-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.sf-free-hero .sf-container > *:nth-child(1) { animation-delay: 0.05s; }
.sf-free-hero .sf-container > *:nth-child(2) { animation-delay: 0.16s; }
.sf-free-hero .sf-container > *:nth-child(3) { animation-delay: 0.30s; }
.sf-free-hero .sf-container > *:nth-child(4) { animation-delay: 0.44s; }

/* ---------- (7) تقليل الحركة: كل حاجة تظهر عادية ---------- */
@media (prefers-reduced-motion: reduce) {
  .sf-rv.is-armed { opacity: 1 !important; }
  .sf-rv.is-in > *,
  .sf-rv.is-in > * > *,
  .sf-rv.is-in .sf-card__icon,
  .sf-rv.is-in .sf-contact-row__icon,
  .sf-rv.is-in .sf-free-callout__icon,
  .sf-rv.is-in .sf-partner__logo,
  .hl.hl-drawn,
  .sf-hero__quote,
  .sf-hero__title,
  .sf-hero__text,
  .sf-hero__actions,
  .sf-cred,
  .sf-cred > div,
  .sf-free-hero .sf-container > * { animation: none !important; }
  .sf-kicker svg { animation: none !important; }
  .sf-btn::before { display: none; }
  .sf-card__icon,
  .sf-contact-row__icon,
  .sf-partner__logo { transition: none; }
}


/* 4.2.0 — brand controls, focus visibility and editor consistency */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}
body.sf-theme ::selection { background: var(--violet); color: #fff; }
body.sf-theme .sf-kicker { border-color: color-mix(in srgb, var(--accent) 18%, transparent); }
body.sf-theme .sf-btn:focus-visible { outline-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Editorial inner pages — 4.4.0 */
.sf-inner-page{background:var(--surface,#fff);color:var(--ink,#0b131a)}
.sf-inner-hero{padding:clamp(64px,9vw,112px) 0 58px;background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(0,210,255,.06) 55%,rgba(248,250,252,.96));border-bottom:1px solid rgba(54,92,108,.12)}
.sf-inner-hero__inner{max-width:920px}.sf-inner-hero h1{font-family:'Alexandria',sans-serif;font-size:clamp(30px,5vw,54px);line-height:1.45;font-weight:800;letter-spacing:-.035em;margin:14px 0 20px;color:var(--ink,#0b131a)}
.sf-inner-hero p{max-width:800px;font-size:clamp(16px,1.5vw,19px);line-height:2;color:var(--ink-soft,#52616b);margin:0 0 24px}
.sf-inner-content{padding-top:36px;padding-bottom:76px}.sf-inner-section{padding:38px 0;border-bottom:1px solid rgba(54,92,108,.13)}.sf-inner-section:last-child{border-bottom:0}.sf-inner-section h2,.sf-tools-live h2{font-family:'Alexandria',sans-serif;font-size:clamp(22px,3vw,32px);line-height:1.5;margin:0 0 20px;color:var(--ink,#0b131a)}.sf-inner-lead{max-width:900px;line-height:2;font-size:17px;color:var(--ink-soft,#52616b)}
.sf-inner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}.sf-inner-card{padding:24px;border:1px solid rgba(54,92,108,.15);border-radius:18px;background:rgba(248,250,252,.78)}.sf-inner-card h3{font-family:'Alexandria',sans-serif;font-size:17px;line-height:1.6;margin:0 0 10px}.sf-inner-card p{margin:0;line-height:1.9;color:var(--ink-soft,#52616b)}.sf-inner-list{padding-inline-start:22px;line-height:2.1;color:var(--ink-soft,#52616b)}.sf-inner-list li{padding-inline-start:5px;margin:4px 0}
.sf-contact-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:34px}.sf-contact-form{display:grid;gap:15px}.sf-contact-form label,.sf-tool-calc label{display:grid;gap:7px;font-weight:600}.sf-contact-form input,.sf-contact-form select,.sf-contact-form textarea,.sf-tool-calc input{width:100%;padding:13px 14px;border:1px solid rgba(54,92,108,.25);border-radius:10px;background:#fff;color:#0b131a;font:inherit}.sf-contact-form input:focus,.sf-contact-form select:focus,.sf-contact-form textarea:focus,.sf-tool-calc input:focus{outline:3px solid rgba(0,210,255,.24);border-color:#365c6c}.sf-honeypot{position:absolute!important;inset-inline-start:-10000px!important;width:1px;height:1px;overflow:hidden}.sf-tool-calcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.sf-tool-calc{display:grid;align-content:start;gap:13px;padding:22px;border:1px solid rgba(54,92,108,.17);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(11,19,26,.045)}.sf-tool-calc h3{font-family:'Alexandria',sans-serif;margin:0 0 5px;font-size:18px}.sf-tool-calc output{display:block;padding:12px;border-radius:10px;background:rgba(0,210,255,.09);font-weight:800;min-height:48px}.sf-tool-calc small,.sf-tool-disclaimer{line-height:1.8;color:var(--ink-soft,#52616b)}.sf-tools-live{padding:48px 0;background:#f8fafc}.sf-tool-disclaimer{max-width:900px}.sf-form-status{min-height:1.5em}
@media(max-width:760px){.sf-inner-grid,.sf-contact-layout,.sf-tool-calcs{grid-template-columns:1fr}.sf-inner-hero{padding-top:58px}.sf-inner-content{padding-bottom:46px}.sf-inner-section{padding:28px 0}.sf-inner-card{padding:19px}}

/* Career timeline — About page */
.sf-career-timeline{--career-line:rgba(124,58,237,.28);position:relative;display:grid;gap:18px;margin:28px 0 8px;padding:0 34px 0 0}
.sf-career-timeline:before{content:"";position:absolute;inset-block:12px 12px;inset-inline-start:auto;inset-inline-end:10px;width:2px;background:linear-gradient(180deg,var(--violet,#7c3aed),var(--sky,#00d2ff) 70%,rgba(54,92,108,.16))}
.sf-career-item{position:relative;min-width:0}
.sf-career-item__marker{position:absolute;inset-inline-end:-31px;top:27px;width:14px;height:14px;border:3px solid var(--surface,#fff);border-radius:50%;background:var(--violet,#7c3aed);box-shadow:0 0 0 2px rgba(124,58,237,.2)}
.sf-career-item:first-child .sf-career-item__marker{width:18px;height:18px;inset-inline-end:-33px;top:25px;background:var(--sky,#00d2ff);box-shadow:0 0 0 4px rgba(0,210,255,.14)}
.sf-career-item__card{padding:20px 22px;border:1px solid rgba(54,92,108,.15);border-radius:15px;background:linear-gradient(135deg,rgba(248,250,252,.96),rgba(255,255,255,.98));box-shadow:0 7px 22px rgba(11,19,26,.035);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.sf-career-item__card:hover{transform:translateY(-2px);border-color:rgba(124,58,237,.35);box-shadow:0 12px 28px rgba(11,19,26,.07)}
.sf-career-item__card h3{font-family:'Alexandria',sans-serif;font-size:17px;line-height:1.65;margin:0 0 8px;color:var(--ink,#0b131a)}
.sf-career-item__card p{margin:0;color:var(--ink-soft,#52616b);font-size:15px;line-height:1.95}
@media(max-width:600px){.sf-career-timeline{gap:13px;padding-inline-end:27px}.sf-career-timeline:before{inset-inline-end:7px}.sf-career-item__marker{inset-inline-end:-25px;top:23px;width:12px;height:12px}.sf-career-item:first-child .sf-career-item__marker{inset-inline-end:-28px;top:21px}.sf-career-item__card{padding:16px 15px;border-radius:12px}.sf-career-item__card h3{font-size:15px}.sf-career-item__card p{font-size:14px;line-height:1.85}}
@media(prefers-reduced-motion:reduce){.sf-career-item__card{transition:none}}


/* Homepage: clear path from the featured tools to the full tools library. */
.sf-home-tools-more{padding-top:22px}
.sf-home-tools-more__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 30px;border:1px solid rgba(54,92,108,.18);border-radius:20px;background:linear-gradient(120deg,rgba(124,58,237,.07),rgba(0,210,255,.07),rgba(248,250,252,.9))}
.sf-home-tools-more__copy{max-width:720px}
.sf-home-tools-more__copy h2{margin:7px 0 8px;font-size:clamp(20px,2.3vw,27px);line-height:1.5}
.sf-home-tools-more__copy p{margin:0;color:var(--ink-soft,#52616b);line-height:1.9}
.sf-home-tools-more .sf-btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:680px){.sf-home-tools-more__inner{align-items:stretch;flex-direction:column;padding:22px 18px;gap:18px}.sf-home-tools-more .sf-btn{align-self:flex-start;white-space:normal}}