.elementor-2212 .elementor-element.elementor-element-a96cacc{--display:flex;--min-height:0px;--margin-top:-3px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2212 .elementor-element.elementor-element-a22907b{width:100%;max-width:100%;margin:-17px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;border-style:none;}.elementor-2212 .elementor-element.elementor-element-a22907b.elementor-element{--order:0;}.elementor-2212 .elementor-element.elementor-element-f801230{--display:flex;--justify-content:center;}.elementor-2212 .elementor-element.elementor-element-6dea0c7{width:100%;max-width:100%;}.elementor-2212 .elementor-element.elementor-element-4db8c98{--display:flex;}.elementor-2212 .elementor-element.elementor-element-0095c43{--display:flex;}.elementor-2212 .elementor-element.elementor-element-d29c289{--display:flex;}@media(min-width:768px){.elementor-2212 .elementor-element.elementor-element-a96cacc{--width:100%;}}@media(max-width:1024px){.elementor-2212 .elementor-element.elementor-element-a96cacc{--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-2212 .elementor-element.elementor-element-a96cacc{--margin-top:-11px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2212 .elementor-element.elementor-element-a22907b{width:100%;max-width:100%;margin:1px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2212 .elementor-element.elementor-element-6dea0c7{margin:2px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for html, class: .elementor-element-a22907b */<div class="sa-hd" dir="rtl">
<style>
.sa-hd,
.sa-hd *,
.sa-hd *::before,
.sa-hd *::after {
  box-sizing: border-box;
}

.sa-hd {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: sticky;
  top: 0;
  z-index: 9999;
  direction: rtl;
  font-family: 'Cairo', 'Tajawal', 'Segoe UI', Arial, sans-serif;
  background: rgba(11, 15, 26, 0.92);
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  color: #ffffff;
  line-height: 1.4;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.sa-hd * {
  font-family: 'Cairo', 'Tajawal', 'Segoe UI', Arial, sans-serif !important;
}

.sa-hd__toggle {
  display: none;
}

.sa-hd__bar {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 26px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sa-hd__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  color: inherit;
}

.sa-hd__brand-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1;
  direction: ltr;
}

.sa-hd__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -1.2px;
}

.sa-hd__logo-main {
  color: #d4af37;
  font-weight: 800;
  font-family: 'Montserrat', Arial, sans-serif !important;
}

.sa-hd__logo-sub {
  color: #d8dee8;
  font-weight: 300;
  font-family: 'Montserrat', Arial, sans-serif !important;
  letter-spacing: -1px;
}

.sa-hd__brand-text small {
  font-size: 11px;
  color: #d4af37;
  font-weight: 700;
  direction: rtl;
  text-align: right;
  line-height: 1.2;
  letter-spacing: 0;
}

.sa-hd__menu {
  display: contents;
}

.sa-hd__nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 2px;
}

.sa-hd__nav a {
  display: inline-block;
  padding: 9px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 0.22s ease;
}

.sa-hd__nav a:hover {
  color: #d4af37;
  background: rgba(212, 175, 55, 0.07);
}

.sa-hd__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 800;
  color: #0b0f1a;
  background: linear-gradient(135deg, #e6c653, #c89a22);
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.22);
  transition: all 0.25s ease;
}

.sa-hd__cta svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sa-hd__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(212, 175, 55, 0.32);
}

.sa-hd__burger {
  display: none;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
}

.sa-hd__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #d4af37;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.sa-hd__toggle:checked ~ .sa-hd__bar .sa-hd__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sa-hd__toggle:checked ~ .sa-hd__bar .sa-hd__burger span:nth-child(2) {
  opacity: 0;
}

.sa-hd__toggle:checked ~ .sa-hd__bar .sa-hd__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1040px) {
  .sa-hd__bar {
    height: 64px;
    padding: 0 18px;
  }

  .sa-hd__logo {
    font-size: 29px;
    gap: 6px;
  }

  .sa-hd__burger {
    display: flex;
  }

  .sa-hd__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 18px;
    background: rgba(8, 12, 22, 0.97);
    border-bottom: 1px solid rgba(212, 175, 55, 0.16);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
  }

  .sa-hd__toggle:checked ~ .sa-hd__bar .sa-hd__menu {
    max-height: 600px;
    opacity: 1;
    pointer-events: auto;
    padding: 12px 18px 20px;
  }

  .sa-hd__nav {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .sa-hd__nav a {
    display: block;
    padding: 13px 14px;
    font-size: 15.5px;
    border-radius: 10px;
  }

  .sa-hd__cta {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
    padding: 13px 20px;
  }
}

@media (max-width: 480px) {
  .sa-hd__bar {
    padding: 0 14px;
  }

  .sa-hd__logo {
    font-size: 22px;
    gap: 4px;
    letter-spacing: -1px;
  }

  .sa-hd__brand-text small {
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .sa-hd__brand-text small {
    display: none;
  }

  .sa-hd__logo {
    font-size: 21px;
  }
}
</style>

<input type="checkbox" id="sa-hd-toggle-main" class="sa-hd__toggle">

<div class="sa-hd__bar">
  <a class="sa-hd__brand" href="https://seoarabia.org/" aria-label="SEO Arabia">
    <span class="sa-hd__brand-text">
      <span class="sa-hd__logo">
        <span class="sa-hd__logo-main">SEO</span>
        <span class="sa-hd__logo-sub">Arabia</span>
      </span>
      <small>خدمات السيو والباك لينك</small>
    </span>
  </a>

  <div class="sa-hd__menu">
    <nav class="sa-hd__nav" aria-label="القائمة الرئيسية">
      <a href="https://seoarabia.org/">الرئيسية</a>
      <a href="https://seoarabia.org/seo-services/">خدمات السيو</a>
      <a href="https://seoarabia.org/backlinks-services/">خدمات الباك لينك</a>
      <a href="https://seoarabia.org/about/">من نحن</a>
      <a href="https://seoarabia.org/blog/">المدونة</a>
      <a href="https://seoarabia.org/contact/">تواصل معنا</a>
    </nav>

    <a class="sa-hd__cta" href="https://seoarabia.org/contact/">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <circle cx="11" cy="11" r="7"></circle>
        <path d="m20 20-3.5-3.5"></path>
      </svg>
      فحص موقعك مجاناً
    </a>
  </div>

  <label for="sa-hd-toggle-main" class="sa-hd__burger" aria-label="فتح القائمة">
    <span></span>
    <span></span>
    <span></span>
  </label>
</div>
</div>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6dea0c7 *//* ===== PREMIUM SECTION PILL ===== */

.sa-section-pill {
  display: flex;
  justify-content: center;
  padding: 0 16px;
  margin: 32px 0 24px;
}

.sa-section-pill span {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 15px 30px;
  border-radius: 999px;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: #1a56db;

  background: rgba(26, 86, 219, 0.08);
  border: 1px solid rgba(26, 86, 219, 0.14);

  max-width: 100%;
  white-space: normal;
  word-break: break-word;

  box-shadow:
    0 8px 30px rgba(26, 86, 219, 0.08),
    0 0 0 rgba(26, 86, 219, 0.0);

  transition: all 0.3s ease;
}

/* glow خفيف جدًا */
.sa-section-pill span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(
    circle at center,
    rgba(26, 86, 219, 0.18),
    transparent 70%
  );
  opacity: 0;
  transition: 0.3s;
}

/* hover */
.sa-section-pill span:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(26, 86, 219, 0.16),
    0 0 20px rgba(26, 86, 219, 0.08);
}

.sa-section-pill span:hover::before {
  opacity: 1;
}

/* pulse animation خفيفة جدًا */
@keyframes saPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 86, 219, 0.08);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(26, 86, 219, 0.0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 86, 219, 0.0);
  }
}

.sa-section-pill span {
  animation: saPulse 4s infinite;
}

/* ===== MOBILE ===== */
@media (max-width: 640px) {
  .sa-section-pill {
    margin: 22px 0 16px;
  }

  .sa-section-pill span {
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 18px;
  }
}

div.sa-section-pill{
  display: block !important;
  width: fit-content !important;
  margin-inline: auto !important;
  float: none !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dadf051 *//* =============================================================
   SEO Arabia — Section 2: What is SEO?
   Prefix: ss-* (seo-section) — avoids WordPress conflicts
   Direction: RTL | Font: Cairo
   Compatible: WordPress / Elementor / HTML Block
   ============================================================= */

/* ── Reset (scoped) ──────────────────────────────────────── */
.ss-root *,
.ss-root *::before,
.ss-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  /* Fonts */
  --ss-font: 'Cairo', sans-serif;

  /* Palette (matches hero) */
  --ss-navy: #0f1f3d;
  --ss-navy-80: #1a3260;
  --ss-blue: #1a56db;
  --ss-blue-light: #e8f0fe;
  --ss-blue-mid: #3b82f6;
  --ss-blue-dark: #1e3a8a;
  --ss-green: #16a34a;
  --ss-green-light: #dcfce7;
  --ss-green-mid: #22c55e;
  --ss-indigo: #4f46e5;
  --ss-indigo-light: #eef2ff;
  --ss-amber: #d97706;
  --ss-amber-light: #fef3c7;

  /* Backgrounds */
  --ss-bg: #f5f7ff;
  --ss-bg-white: #ffffff;
  --ss-bg-subtle: #eef2fc;
  --ss-bg-alt: #f0f4ff;

  /* Text */
  --ss-heading: #0f1f3d;
  --ss-body: #3d4f6e;
  --ss-muted: #6b7a99;
  --ss-faint: #94a3b8;

  /* Borders */
  --ss-border: rgba(26, 86, 219, 0.09);
  --ss-border-card: rgba(26, 86, 219, 0.07);

  /* Shadows */
  --ss-shadow-sm: 0 2px 8px rgba(15, 31, 61, 0.06);
  --ss-shadow-md: 0 8px 32px rgba(15, 31, 61, 0.10);
  --ss-shadow-card: 0 4px 24px rgba(26, 86, 219, 0.07);
  --ss-shadow-lg: 0 16px 56px rgba(15, 31, 61, 0.12);

  /* Radius */
  --ss-r-sm: 8px;
  --ss-r-md: 14px;
  --ss-r-lg: 20px;
  --ss-r-xl: 28px;
  --ss-r-pill: 999px;

  /* Section spacing — تم تصحيحها */
  --ss-section-pad: clamp(20px, 4vw, 42px);
  --ss-block-gap: clamp(30px, 4vw, 48px);
}

/* ── Scroll Reveal States ──────────────────────────────── */
.ss-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ss-reveal.ss-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Base ──────────────────────────────────────────────── */
.ss-root {
  font-family: var(--ss-font);
  direction: rtl;
  background-color: var(--ss-bg);
  position: relative;
  overflow: hidden;
  padding: var(--ss-section-pad) 0 56px;
}

/* ── Container ─────────────────────────────────────────── */
.ss-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  gap: var(--ss-block-gap);
  position: relative;
  z-index: 1;
}

/* ── Section Label (reusable) ──────────────────────────── */
.ss-section-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ss-blue);
  margin-bottom: 12px;
}

/* ── Background Decoration ─────────────────────────────── */
.ss-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ss-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.ss-bg__orb--a {
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(219, 234, 254, 0.7) 0%, transparent 70%);
  top: -180px;
  right: -180px;
  opacity: 0.6;
}

.ss-bg__orb--b {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(220, 252, 231, 0.6) 0%, transparent 70%);
  bottom: 80px;
  left: -120px;
  opacity: 0.5;
}

.ss-bg__line {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(26, 86, 219, 0.08) 40%, transparent);
}

.ss-bg__line--1 {
  left: 25%;
  height: 100%;
  top: 0;
}

.ss-bg__line--2 {
  right: 25%;
  height: 100%;
  top: 0;
}

/* =============================================================
   BLOCK 1 — SECTION HEADER
   ============================================================= */
.ss-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.ss-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  background: var(--ss-blue-light);
  color: var(--ss-blue);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--ss-r-pill);
  border: 1px solid rgba(26, 86, 219, 0.15);
  margin-bottom: 12px;
}

.ss-badge__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ss-blue);
  flex-shrink: 0;
  animation: ss-pulse 2.2s infinite;
}

@keyframes ss-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

.ss-header__title {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  color: var(--ss-heading);
  line-height: 1.3;
  letter-spacing: -0.4px;
  margin-bottom: 12px;
}

.ss-header__title--em {
  font-style: normal;
  color: var(--ss-blue);
  position: relative;
  display: inline;
}

.ss-header__intro {
  font-size: clamp(15.5px, 1.7vw, 18px);
  color: var(--ss-body);
  line-height: 1.9;
  font-weight: 400;
  max-width: 680px;
  margin: 0 auto;
}

/* =============================================================
   BLOCK 2 — CORE EXPLANATION: Two-column
   ============================================================= */
.ss-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

/* ── SERP Visual ──────────────────────────────────────── */
.ss-split__visual {
  position: relative;
}

.ss-serp-wrap {
  position: relative;
  background: var(--ss-bg-white);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-r-xl);
  padding: 20px;
  box-shadow: var(--ss-shadow-lg);
  overflow: visible;
}

/* Search Bar */
.ss-serp__searchbar {
  background: var(--ss-bg-subtle);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-r-md);
  margin-bottom: 16px;
  overflow: hidden;
}

.ss-serp__searchbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

.ss-serp__query {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ss-heading);
}

.ss-serp__google-icon,
.ss-serp__search-icon {
  flex-shrink: 0;
}

/* Results */
.ss-serp__results {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ss-serp__result {
  position: relative;
  padding: 14px 16px;
  border-radius: var(--ss-r-md);
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

.ss-serp__result--featured {
  background: var(--ss-blue-light);
  border-color: rgba(26, 86, 219, 0.18);
}

.ss-serp__result:not(.ss-serp__result--featured) {ا
  background: var(--ss-bg);
  border-color: var(--ss-border);
  opacity: 0.7;
}

.ss-serp__result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ss-serp__favicon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-serp__domain-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ss-serp__domain {
  font-size: 12px;
  font-weight: 600;
  color: var(--ss-green);
}

.ss-serp__breadcrumb {
  font-size: 12px;
  color: var(--ss-muted);
}

.ss-serp__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ss-blue-dark);
  line-height: 1.4;
  margin-bottom: 5px;
}

.ss-serp__title--dim {
  color: var(--ss-body);
}

.ss-serp__snippet {
  font-size: 12.5px;
  color: var(--ss-body);
  line-height: 1.55;
}

.ss-serp__snippet--dim {
  color: var(--ss-muted);
}

.ss-serp__result-rank {
  position: absolute;
  top: 12px;
  left: 12px;
}

.ss-rank-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--ss-r-sm);
}

.ss-rank-badge--1 {
  background: var(--ss-blue);
  color: white;
}

.ss-rank-badge--other {
  background: var(--ss-bg-subtle);
  color: var(--ss-muted);
  border: 1px solid var(--ss-border);
}

/* Floating Cards on SERP */
.ss-serp__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ss-bg-white);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-r-md);
  box-shadow: var(--ss-shadow-md);
  padding: 10px 14px;
  animation: ss-float-anim 4s ease-in-out infinite;
  z-index: 10;
}

.ss-serp__float--traffic {
  bottom: -18px;
  right: -18px;
  animation-delay: 0s;
}

.ss-serp__float--ctr {
  top: -14px;
  left: -14px;
  animation-delay: 1.6s;
}

@keyframes ss-float-anim {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.ss-float__mini-chart {
  width: 80px;
  height: 32px;
}

.ss-float__mini-chart svg {
  width: 100%;
  height: 100%;
}

.ss-float__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ss-float__info strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ss-heading);
  font-family: var(--ss-font);
  line-height: 1;
}

.ss-float__info small {
  font-size: 11px;
  color: var(--ss-muted);
  font-family: var(--ss-font);
  font-weight: 500;
}

/* ── Text Column ───────────────────────────────────────── */
.ss-split__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss-split__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-blue);
  letter-spacing: 0.4px;
}

.ss-split__heading {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--ss-heading);
  line-height: 1.35;
  letter-spacing: -0.3px;
}

.ss-split__body {
  font-size: clamp(15px, 1.5vw, 16.5px);
  color: var(--ss-body);
  line-height: 1.9;
  font-weight: 400;
}

/* Inline Stats */
.ss-inline-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--ss-bg-white);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-r-lg);
  padding: 20px 24px;
  box-shadow: var(--ss-shadow-sm);
  margin-top: 8px;
  flex-wrap: wrap;
}

.ss-istat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 16px;
  min-width: 120px;
}

.ss-istat__num {
  font-size: 26px;
  font-weight: 900;
  color: var(--ss-blue);
  line-height: 1;
  letter-spacing: -0.5px;
}

.ss-istat__label {
  font-size: 12px;
  color: var(--ss-muted);
  font-weight: 500;
  line-height: 1.4;
}

.ss-istat__sep {
  width: 1px;
  height: 44px;
  background: var(--ss-border);
  flex-shrink: 0;
}

/* =============================================================
   BLOCK 3 — PILLARS OF SEO
   ============================================================= */
.ss-pillars-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 44px;
}

.ss-pillars-header__title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  color: var(--ss-heading);
  line-height: 1.35;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
}

.ss-pillars-header__sub {
  font-size: 15.5px;
  color: var(--ss-body);
  line-height: 1.8;
}

/* Pillars Grid */
.ss-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
}

/* 5th pillar spans full row when it's alone */
.ss-pillar--5 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 0 20px;
}

.ss-pillar--5 .ss-pillar__number {
  grid-row: 1 / 3;
  align-self: center;
}

.ss-pillar--5 .ss-pillar__icon-wrap {
  grid-row: 1 / 3;
  align-self: center;
}

.ss-pillar--5 .ss-pillar__title {
  grid-column: 3;
  grid-row: 1;
}

.ss-pillar--5 .ss-pillar__body {
  grid-column: 3;
  grid-row: 2;
  max-width: 680px;
}

.ss-pillar--5 .ss-pillar__tag {
  grid-column: 4;
  grid-row: 1;
  align-self: start;
}

/* Pillar Card */
.ss-pillar {
  background: var(--ss-bg-white);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-r-lg);
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--ss-shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ss-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--ss-shadow-md);
}

.ss-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: var(--ss-r-lg) var(--ss-r-lg) 0 0;
}

.ss-pillar--1::before { background: linear-gradient(90deg, #1a56db, #3b82f6); }
.ss-pillar--2::before { background: linear-gradient(90deg, #0891b2, #06b6d4); }ا
.ss-pillar--3::before { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.ss-pillar--4::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.ss-pillar--5::before { background: linear-gradient(90deg, #16a34a, #22c55e); }

.ss-pillar__number {
  font-size: 13px;
  font-weight: 900;
  color: var(--ss-border);
  letter-spacing: 0.5px;
  line-height: 1;
  position: absolute;
  top: 20px;
  left: 20px;
}

.ss-pillar--5 .ss-pillar__number {
  position: static;
  align-self: center;
}

.ss-pillar__icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: var(--ss-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.ss-pillar--1 .ss-pillar__icon-wrap { background: var(--ss-blue-light); color: var(--ss-blue); }
.ss-pillar--2 .ss-pillar__icon-wrap { background: #cffafe; color: #0891b2; }
.ss-pillar--3 .ss-pillar__icon-wrap { background: #ede9fe; color: #7c3aed; }
.ss-pillar--4 .ss-pillar__icon-wrap { background: var(--ss-amber-light); color: var(--ss-amber); }
.ss-pillar--5 .ss-pillar__icon-wrap { background: var(--ss-green-light); color: var(--ss-green); margin-bottom: 0; }

.ss-pillar--5 .ss-pillar__icon-wrap svg {
  width: 22px;
  height: 22px;
}

.ss-pillar__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ss-heading);
  line-height: 1.35;
  margin-bottom: 10px;
}

.ss-pillar--5 .ss-pillar__title {
  margin-bottom: 6px;
}

.ss-pillar__body {
  font-size: 14px;
  color: var(--ss-body);
  line-height: 1.8;
  font-weight: 400;
}

.ss-pillar__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: var(--ss-r-sm);
  background: var(--ss-bg-subtle);
  color: var(--ss-muted);
  margin-top: 14px;
  border: 1px solid var(--ss-border);
}

.ss-pillar--5 .ss-pillar__tag {
  margin-top: 0;
}

/* =============================================================
   BLOCK 4 — CORE INSIGHT
   ============================================================= */
.ss-insight {
  position: relative;
  background: linear-gradient(135deg, var(--ss-navy) 0%, var(--ss-navy-80) 100%);
  border-radius: var(--ss-r-xl);
  overflow: hidden;
  padding: clamp(40px, 5vw, 64px);
}

.ss-insight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(26, 86, 219, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.ss-insight::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.06);
  pointer-events: none;
}

.ss-insight__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

.ss-insight__decoration svg {
  opacity: 0.6;
}

.ss-insight__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss-insight__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.ss-insight__quote {
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 700;
  color: white;
  line-height: 1.55;
  letter-spacing: -0.2px;
  font-style: normal;
}

.ss-insight__context {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
  font-weight: 400;
  max-width: 600px;
}

/* Intent Diagram */
.ss-intent-diagram {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.ss-intent__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ss-intent__step span {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  font-family: var(--ss-font);
}

.ss-intent__circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-intent__circle--search  { background: rgba(26, 86, 219, 0.5);  border: 1.5px solid rgba(26, 86, 219, 0.7); }
.ss-intent__circle--serp    { background: rgba(139, 92, 246, 0.45); border: 1.5px solid rgba(139, 92, 246, 0.6); }
.ss-intent__circle--convert { background: rgba(22, 163, 74, 0.5);   border: 1.5px solid rgba(22, 163, 74, 0.7); }

.ss-intent__arrow {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.2);
  line-height: 1;
}

/* =============================================================
   BLOCK 5 — BENEFITS CARDS
   ============================================================= */
.ss-benefits__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.ss-benefits__title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  color: var(--ss-heading);
  line-height: 1.35;
  letter-spacing: -0.3px;
  margin-top: 8px;
}

.ss-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ss-benefit-card {
  background: var(--ss-bg-white);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-r-lg);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--ss-shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ss-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ss-shadow-md);
}

.ss-benefit-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ss-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ss-benefit-card__icon--blue   { background: var(--ss-blue); }
.ss-benefit-card__icon--green  { background: var(--ss-green); }
.ss-benefit-card__icon--indigo { background: var(--ss-indigo); }
.ss-benefit-card__icon--amber  { background: var(--ss-amber); }

.ss-benefit-card__metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ss-border);
}

.ss-benefit-card__metric-num {
  font-size: 20px;
  font-weight: 900;
  color: var(--ss-blue);
  line-height: 1;
  letter-spacing: -0.3px;
}

.ss-benefit-card__metric-context {
  font-size: 12px;
  color: var(--ss-muted);
  font-weight: 500;
}

.ss-benefit-card__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ss-heading);
  line-height: 1.35;
}

.ss-benefit-card__body {
  font-size: 13.5px;
  color: var(--ss-body);
  line-height: 1.8;
  font-weight: 400;
}

/* =============================================================
   BLOCK 6 — SEO vs PAID COMPARISON
   ============================================================= */
.ss-compare {
  background: var(--ss-bg-white);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-r-xl);
  padding: clamp(32px, 4vw, 52px);
  box-shadow: var(--ss-shadow-card);
}

.ss-compare__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.ss-compare__col {
  flex: 1;
  padding: 0 28px;
}

.ss-compare__col--paid {
  border-left: 1px solid var(--ss-border);
  padding-left: 0;
  padding-right: 28px;
}

.ss-compare__col--seo {
  padding-right: 0;
}

.ss-compare__header {
  margin-bottom: 20px;
}

.ss-compare__tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--ss-r-pill);
}

.ss-compare__tag--neutral {
  background: var(--ss-bg-subtle);
  color: var(--ss-muted);
  border: 1px solid var(--ss-border);
}

.ss-compare__tag--blue {
  background: var(--ss-blue-light);
  color: var(--ss-blue);
  border: 1px solid rgba(26, 86, 219, 0.15);
}

.ss-compare__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-compare__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
}

.ss-compare__item--neutral { color: var(--ss-muted); }
.ss-compare__item--positive { color: var(--ss-body); }

.ss-compare__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  position: relative;
}

.ss-compare__divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--ss-border);
}

.ss-compare__divider-vs {
  position: relative;
  z-index: 1;
  background: var(--ss-bg-white);
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ss-faint);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-r-sm);
}

/* =============================================================
   BLOCK 7 — BRIDGE TO BACKLINKS
   ============================================================= */
.ss-bridge {
  background: linear-gradient(135deg, var(--ss-bg-alt) 0%, var(--ss-bg-subtle) 100%);
  border: 1px solid var(--ss-border-card);
  border-radius: var(--ss-r-xl);
  padding: clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}

.ss-bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 50%, rgba(26, 86, 219, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.ss-bridge__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.ss-bridge__text-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss-bridge__title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--ss-heading);
  line-height: 1.35;
  letter-spacing: -0.3px;
}

.ss-bridge__body {
  font-size: clamp(14.5px, 1.5vw, 16px);
  color: var(--ss-body);
  line-height: 1.9;
}

.ss-bridge__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 13px 26px;
  background: var(--ss-blue);
  color: white;
  font-family: var(--ss-font);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--ss-r-pill);
  box-shadow: 0 4px 18px rgba(26, 86, 219, 0.3);
  transition: all 0.25s ease;
  width: fit-content;
}

.ss-bridge__cta:hover {
  background: var(--ss-navy-80);
  box-shadow: 0 8px 28px rgba(26, 86, 219, 0.4);
  transform: translateY(-2px);
}

/* Node Diagram */
.ss-bridge__visual-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ss-bridge__nodes {
  position: relative;
  width: 280px;
  height: 280px;
  flex-shrink: 0;
}

.ss-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ss-node span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ss-muted);
  font-family: var(--ss-font);
  white-space: nowrap;
}

/* Center node */
.ss-node--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.ss-node__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid;
}

.ss-node__circle--main {
  width: 60px;
  height: 60px;
  background: var(--ss-blue);
  border-color: var(--ss-blue-dark);
  box-shadow: 0 0 0 8px var(--ss-blue-light);
}

.ss-node__circle--sat {
  width: 40px;
  height: 40px;
  background: var(--ss-indigo);
  border-color: rgba(79, 70, 229, 0.6);
  transition: transform 0.2s;
}

.ss-node--sat:hover .ss-node__circle--sat {
  transform: scale(1.1);
}

.ss-node--sat-1 { top: 20px; left: 20px; }
.ss-node--sat-2 { top: 20px; right: 20px; }
.ss-node--sat-3 { bottom: 20px; left: 20px; }
.ss-node--sat-4 { bottom: 20px; right: 20px; }

.ss-node__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.ss-bridge__visual-caption {
  font-size: 12.5px;
  color: var(--ss-muted);
  text-align: center;
  line-height: 1.5;
  max-width: 260px;
}

/* =============================================================
   RESPONSIVE — LARGE TABLET (≤ 1100px)
   ============================================================= */
@media (max-width: 1100px) {
  .ss-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ss-insight__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ss-insight__decoration {
    display: none;
  }

  .ss-intent-diagram {
    justify-content: center;
  }

  .ss-insight__context {
    margin: 0 auto;
  }
}

/* =============================================================
   RESPONSIVE — TABLET (≤ 900px)
   ============================================================= */
@media (max-width: 900px) {
  .ss-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ss-split__visual {
    order: -1;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  .ss-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ss-pillar--5 {
    grid-column: 1 / -1;
    grid-template-columns: auto auto 1fr;
  }

  .ss-pillar--5 .ss-pillar__tag {
    display: none;
  }

  .ss-compare__inner {
    flex-direction: column;
    gap: 24px;
  }

  .ss-compare__col {
    padding: 0;
  }

  .ss-compare__col--paid {
    padding: 0;
    border-left: none;
    border-bottom: 1px solid var(--ss-border);
    padding-bottom: 24px;
  }

  .ss-compare__divider {
    display: none;
  }

  .ss-bridge__inner {
    grid-template-columns: 1fr;
  }

  .ss-bridge__visual-col {
    display: none;
  }

  .ss-inline-stats {
    flex-wrap: wrap;
  }

  .ss-istat__sep {
    display: none;
  }

  .ss-istat {
    min-width: 120px;
  }
}

/* =============================================================
   RESPONSIVE — MOBILE (≤ 640px)
   ============================================================= */
@media (max-width: 640px) {
  :root {
    --ss-section-pad: 16px;
    --ss-block-gap: 34px;
  }

  .ss-root {
    padding: var(--ss-section-pad) 0 42px;
  }

  .ss-header__intro {
    font-size: 15px;
  }

  .ss-pillars-grid {
    grid-template-columns: 1fr;
  }

  .ss-pillar--5 {
    grid-column: 1;
    display: flex;
    flex-direction: column;
  }

  .ss-pillar--5 .ss-pillar__tag {
    display: inline-block;
  }

  .ss-benefits__grid {
    grid-template-columns: 1fr;
  }

  .ss-serp__float--traffic,
  .ss-serp__float--ctr {
    display: none;
  }

  .ss-insight {
    padding: 32px 24px;
  }

  .ss-intent-diagram {
    flex-direction: column;
    gap: 12px;
  }

  .ss-intent__arrow {
    transform: rotate(90deg);
  }

  .ss-bridge {
    padding: 32px 24px;
  }

  .ss-bridge__cta {
    width: 100%;
    justify-content: center;
  }

  .ss-compare {
    padding: 28px 20px;
  }

  .ss-istat {
    flex: 0 0 calc(50% - 8px);
  }
}

/* =============================================================
   RESPONSIVE — SMALL MOBILE (≤ 400px)
   ============================================================= */
@media (max-width: 400px) {
  .ss-container {
    padding: 0 16px;
  }

  .ss-header__title {
    font-size: 24px;
  }

  .ss-split__heading {
    font-size: 20px;
  }

  .ss-pillar {
    padding: 20px 18px;
  }

  .ss-benefit-card {
    padding: 20px 18px;
  }
}

/* =============================================================
   WORDPRESS / ELEMENTOR COMPATIBILITY
   ============================================================= */
.ss-root,
.ss-root * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ss-root ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ss-root a {
  text-decoration: none;
}

.ss-root blockquote {
  margin: 0;
}

.ss-root h2,
.ss-root h3,
.ss-root h4 {
  margin: 0;
}

.ss-root p {
  margin: 0;
}

.ss-root {
  max-width: 100%;
  overflow-x: hidden;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a758213 *//* =============================================================
   SEO Arabia — Section 3: Backlinks
   Prefix: bl-* — avoids WordPress/theme conflicts
   Direction: RTL | Font: Cairo
   Compatible: WordPress / Elementor / HTML Block
   ============================================================= */

/* ── Reset (scoped) ──────────────────────────────────────── */
.bl-root *,
.bl-root *::before,
.bl-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  --bl-font:          'Cairo', sans-serif;

  /* Palette */
  --bl-navy:          #0f1f3d;
  --bl-navy-80:       #1a3260;
  --bl-blue:          #1a56db;
  --bl-blue-light:    #e8f0fe;
  --bl-blue-mid:      #3b82f6;
  --bl-blue-dark:     #1e3a8a;
  --bl-green:         #16a34a;
  --bl-green-light:   #dcfce7;
  --bl-green-mid:     #22c55e;
  --bl-indigo:        #4f46e5;
  --bl-indigo-light:  #eef2ff;
  --bl-amber:         #d97706;
  --bl-amber-light:   #fef3c7;
  --bl-red:           #dc2626;
  --bl-red-light:     #fee2e2;

  /* Backgrounds */
  --bl-bg:            #f5f7ff;
  --bl-bg-white:      #ffffff;
  --bl-bg-subtle:     #eef2fc;
  --bl-bg-deep:       #f0f4ff;

  /* Text */
  --bl-heading:       #0f1f3d;
  --bl-body:          #3d4f6e;
  --bl-muted:         #6b7a99;
  --bl-faint:         #94a3b8;

  /* Borders */
  --bl-border:        rgba(26, 86, 219, 0.09);
  --bl-border-card:   rgba(26, 86, 219, 0.07);

  /* Shadows */
  --bl-shadow-sm:   0 2px 8px rgba(15, 31, 61, 0.06);
  --bl-shadow-md:   0 8px 32px rgba(15, 31, 61, 0.10);
  --bl-shadow-card: 0 4px 24px rgba(26, 86, 219, 0.07);
  --bl-shadow-lg:   0 16px 56px rgba(15, 31, 61, 0.12);

  /* Radius */
  --bl-r-sm:   8px;
  --bl-r-md:   14px;
  --bl-r-lg:   20px;
  --bl-r-xl:   28px;
  --bl-r-pill: 999px;

  /* Spacing */
  --bl-pad:    var(--ss-section-pad, clamp(72px, 9vw, 120px));
  --bl-gap:    clamp(56px, 7vw, 96px);
}

/* ── Scroll Reveal ─────────────────────────────────────── */
.bl-reveal {
  opacity:    0;
  transform:  translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bl-reveal.bl-revealed {
  opacity:   1;
  transform: translateY(0);
}

/* ── Base ──────────────────────────────────────────────── */
.bl-root {
  font-family:      var(--bl-font);
  direction:        rtl;
  background-color: var(--bl-bg);
  position:         relative;
  overflow:         hidden;
  padding:          clamp(72px, 9vw, 120px) 0;
}

.bl-container {
  width:     100%;
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 clamp(20px, 5vw, 60px);
  display:   flex;
  flex-direction: column;
  gap:       clamp(56px, 7vw, 96px);
  position:  relative;
  z-index:   1;
}

/* ── Section Label ─────────────────────────────────────── */
.bl-section-label {
  display:        inline-block;
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color:          var(--bl-blue);
  margin-bottom:  12px;
}

/* ── Background ────────────────────────────────────────── */
.bl-bg {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  overflow:       hidden;
  z-index:        0;
}

.bl-bg__gradient {
  position: absolute;
  inset:    0;
  background: linear-gradient(
    175deg,
    rgba(232, 240, 254, 0.5) 0%,
    rgba(245, 247, 255, 0) 40%,
    rgba(220, 252, 231, 0.15) 100%
  );
}

.bl-bg__orb {
  position:      absolute;
  border-radius: 50%;
  filter:        blur(100px);
}
.bl-bg__orb--a {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(219,234,254,0.65) 0%, transparent 70%);
  top: -200px; right: -200px; opacity: 0.7;
}
.bl-bg__orb--b {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(220,252,231,0.55) 0%, transparent 70%);
  bottom: 100px; left: -150px; opacity: 0.6;
}
.bl-bg__orb--c {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(238,242,255,0.8) 0%, transparent 70%);
  top: 50%; left: 45%; opacity: 0.5;
}

.bl-bg__dots {
  position:   absolute;
  inset:      0;
  background-image:
    radial-gradient(circle, rgba(26,86,219,0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.7;
  mask-image: radial-gradient(ellipse 70% 50% at 70% 30%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 70% 30%, black 0%, transparent 100%);
}


/* =============================================================
   BLOCK 1 — HEADER
   ============================================================= */
.bl-header {
  text-align: center;
  max-width:  820px;
  margin:     0 auto;
}

.bl-header__badge {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 18px;
  background:    var(--bl-blue-light);
  color:         var(--bl-blue);
  font-size:     13px;
  font-weight:   700;
  border-radius: var(--bl-r-pill);
  border:        1px solid rgba(26, 86, 219, 0.16);
  margin-bottom: 24px;
}

.bl-badge__pulse {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--bl-blue);
  animation:     bl-pulse 2s infinite;
  flex-shrink:   0;
}
@keyframes bl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

.bl-header__title {
  font-size:      clamp(28px, 4vw, 50px);
  font-weight:    800;
  color:          var(--bl-heading);
  line-height:    1.28;
  letter-spacing: -0.4px;
  margin-bottom:  20px;
}

.bl-header__title--em {
  font-style:  normal;
  color:       var(--bl-blue);
  display:     inline;
  position:    relative;
}

.bl-header__intro {
  font-size:   clamp(15.5px, 1.7vw, 18px);
  color:       var(--bl-body);
  line-height: 1.9;
  font-weight: 400;
  max-width:   700px;
  margin:      0 auto;
}


/* =============================================================
   BLOCK 2 — CONCEPT (Network Visual + Text)
   ============================================================= */
.bl-concept {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         clamp(40px, 5vw, 72px);
  align-items: center;
}

/* ── Authority Network Visual ──────────────────────────── */
.bl-concept__visual {
  position: relative;
}

.bl-network {
  position:      relative;
  background:    var(--bl-bg-white);
  border:        1px solid var(--bl-border-card);
  border-radius: var(--bl-r-xl);
  padding:       32px;
  box-shadow:    var(--bl-shadow-lg);
  min-height:    400px;
  overflow:      visible;
}

.bl-network__lines {
  position:  absolute;
  inset:     0;
  width:     100%;
  height:    100%;
  pointer-events: none;
  z-index:   1;
}

/* Center Node */
.bl-node--center {
  position:  absolute;
  top:       50%;
  left:      50%;
  transform: translate(-50%, -50%);
  z-index:   5;
  display:   flex;
  flex-direction: column;
  align-items: center;
  gap:       8px;
}

.bl-node__ring {
  position:      absolute;
  border-radius: 50%;
  border:        1.5px solid rgba(26, 86, 219, 0.15);
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  animation:     bl-ring-pulse 3s ease-in-out infinite;
}

.bl-node__ring--outer {
  width:  100px;
  height: 100px;
  animation-delay: 0.6s;
}
.bl-node__ring--inner {
  width:  76px;
  height: 76px;
}
@keyframes bl-ring-pulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
}

.bl-node__core {
  position:        relative;
  z-index:         2;
  width:           60px;
  height:          60px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--bl-blue) 0%, var(--bl-blue-dark) 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 0 0 6px rgba(26,86,219,0.12), 0 8px 24px rgba(26,86,219,0.35);
}

.bl-node__label {
  font-size:   12px;
  font-weight: 700;
  color:       var(--bl-heading);
  font-family: var(--bl-font);
  position:    relative;
  z-index:     2;
}

.bl-node__da {
  display:         flex;
  align-items:     center;
  gap:             3px;
  background:      var(--bl-blue);
  color:           white;
  font-family:     var(--bl-font);
  padding:         3px 9px;
  border-radius:   var(--bl-r-pill);
  font-size:       11px;
  font-weight:     700;
  position:        relative;
  z-index:         2;
}
.bl-node__da span { opacity: 0.7; }

/* Satellite Nodes */
.bl-node--sat {
  position:       absolute;
  z-index:        4;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            5px;
}

.bl-node--sat-1 { top: 8%;  right: 8%; }
.bl-node--sat-2 { top: 8%;  left: 8%; }
.bl-node--sat-3 { top: 38%; right: 3%; }
.bl-node--sat-4 { top: 38%; left: 3%; }
.bl-node--sat-5 { bottom: 8%; right: 18%; }
.bl-node--sat-6 { bottom: 8%; left: 18%; }

.bl-node__sat-inner {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1.5px solid transparent;
  transition:      transform 0.2s, box-shadow 0.2s;
}

.bl-node--sat:hover .bl-node__sat-inner { transform: scale(1.12); }

.bl-node__sat-inner--news    { background: #6366f1; box-shadow: 0 3px 12px rgba(99,102,241,0.3); }
.bl-node__sat-inner--gov     { background: #0891b2; box-shadow: 0 3px 12px rgba(8,145,178,0.3); }
.bl-node__sat-inner--edu     { background: #d97706; box-shadow: 0 3px 12px rgba(217,119,6,0.3); }
.bl-node__sat-inner--industry{ background: var(--bl-green); box-shadow: 0 3px 12px rgba(22,163,74,0.3); }
.bl-node__sat-inner--blog    { background: var(--bl-blue-mid); box-shadow: 0 3px 12px rgba(59,130,246,0.3); }
.bl-node__sat-inner--partner { background: #7c3aed; box-shadow: 0 3px 12px rgba(124,58,237,0.3); }

.bl-node__sat-label {
  font-size:   11px;
  font-weight: 600;
  color:       var(--bl-muted);
  font-family: var(--bl-font);
  white-space: nowrap;
}
.bl-node__sat-da {
  font-size:     10px;
  font-weight:   700;
  color:         var(--bl-blue);
  background:    var(--bl-blue-light);
  padding:       2px 7px;
  border-radius: var(--bl-r-pill);
  font-family:   var(--bl-font);
}

/* Arrow SVGs on nodes */
.bl-node__arrow {
  position:   absolute;
  z-index:    6;
  animation:  bl-arrow-pulse 2s ease-in-out infinite;
}

.bl-node--sat-1 .bl-node__arrow { bottom: -22px; left: 50%; transform: translateX(-50%) rotate(135deg); }
.bl-node--sat-2 .bl-node__arrow { bottom: -22px; left: 50%; transform: translateX(-50%) rotate(45deg); }
.bl-node--sat-3 .bl-node__arrow { bottom: 50%;  right: -24px; transform: translateY(50%) rotate(180deg); }
.bl-node--sat-4 .bl-node__arrow { bottom: 50%;  left: -24px;  transform: translateY(50%); }

@keyframes bl-arrow-pulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

/* Network Floating Badges */
.bl-network__badge {
  position:      absolute;
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--bl-bg-white);
  border:        1px solid var(--bl-border-card);
  border-radius: var(--bl-r-md);
  box-shadow:    var(--bl-shadow-md);
  padding:       10px 14px;
  z-index:       10;
  direction:     rtl;
}

.bl-network__badge--authority {
  bottom:    -16px;
  right:     -16px;
  animation: bl-float 4s ease-in-out infinite;
}
.bl-network__badge--juice {
  top:       -16px;
  left:      -16px;
  animation: bl-float 4s ease-in-out infinite;
  animation-delay: 1.8s;
}

@keyframes bl-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.bl-network__badge > svg { flex-shrink: 0; }
.bl-network__badge > div {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.bl-network__badge strong {
  font-size:   13px;
  font-weight: 800;
  color:       var(--bl-heading);
  font-family: var(--bl-font);
  line-height: 1;
}
.bl-network__badge small {
  font-size:   11px;
  color:       var(--bl-muted);
  font-family: var(--bl-font);
}

.bl-juice-bar {
  width:         60px;
  height:        6px;
  background:    var(--bl-bg-subtle);
  border-radius: var(--bl-r-pill);
  overflow:      hidden;
}
.bl-juice-bar__fill {
  height:     100%;
  width:       78%;
  background: linear-gradient(90deg, var(--bl-blue) 0%, var(--bl-green-mid) 100%);
  border-radius: var(--bl-r-pill);
  animation:  bl-grow-bar 1.5s ease-out both;
}
@keyframes bl-grow-bar { from { width: 0; } to { width: 78%; } }

/* ── Concept Text Column ──────────────────────────────── */
.bl-concept__content {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.bl-concept__heading {
  font-size:      clamp(22px, 2.6vw, 30px);
  font-weight:    800;
  color:          var(--bl-heading);
  line-height:    1.38;
  letter-spacing: -0.3px;
}

.bl-concept__body {
  font-size:   clamp(15px, 1.5vw, 16.5px);
  color:       var(--bl-body);
  line-height: 1.9;
  font-weight: 400;
}

/* Stats Bars */
.bl-concept__stats {
  display:          grid;
  grid-template-columns: repeat(3, 1fr);
  gap:              16px;
  margin-top:       8px;
  background:       var(--bl-bg-white);
  border:           1px solid var(--bl-border-card);
  border-radius:    var(--bl-r-lg);
  padding:          20px 16px 16px;
  box-shadow:       var(--bl-shadow-sm);
}

.bl-cstat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  text-align:     center;
}

.bl-cstat__bar {
  width:         4px;
  height:        60px;
  background:    var(--bl-bg-subtle);
  border-radius: var(--bl-r-pill);
  overflow:      hidden;
  position:      relative;
  margin:        0 auto;
}

.bl-cstat__bar::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  height:           var(--h, 50%);
  background:       var(--bl-blue);
  border-radius:    var(--bl-r-pill);
  animation:        bl-bar-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay:  0.4s;
}
.bl-cstat__bar--green::after  { background: var(--bl-green); }
.bl-cstat__bar--indigo::after { background: var(--bl-indigo); }

@keyframes bl-bar-up {
  from { height: 0; }
  to   { height: var(--h, 50%); }
}

.bl-cstat__num {
  font-size:   20px;
  font-weight: 900;
  color:       var(--bl-blue);
  line-height: 1;
  letter-spacing: -0.3px;
}

.bl-cstat__label {
  font-size:   11px;
  color:       var(--bl-muted);
  line-height: 1.4;
  font-weight: 500;
}


/* =============================================================
   BLOCK 3 — HIGHLIGHT QUOTE
   ============================================================= */
.bl-highlight {
  position:      relative;
  background:    linear-gradient(135deg, var(--bl-navy) 0%, var(--bl-blue-dark) 100%);
  border-radius: var(--bl-r-xl);
  padding:       clamp(36px, 5vw, 56px);
  overflow:      hidden;
}

.bl-highlight::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 55% 70% at 20% 50%, rgba(26, 86, 219, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.bl-highlight__inner {
  position:     relative;
  z-index:      1;
  display:      grid;
  grid-template-columns: 56px 1fr 120px;
  align-items:  center;
  gap:          clamp(24px, 4vw, 48px);
}

.bl-highlight__icon { flex-shrink: 0; }

.bl-highlight__text {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.bl-highlight__eyebrow {
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.35);
}

.bl-highlight__quote {
  font-size:      clamp(18px, 2.2vw, 24px);
  font-weight:    700;
  color:          white;
  line-height:    1.6;
  letter-spacing: -0.2px;
  font-style:     normal;
}

.bl-highlight__decoration {
  flex-shrink: 0;
  opacity:     0.4;
}


/* =============================================================
   BLOCK 4 — QUALITY FACTORS GRID
   ============================================================= */
.bl-quality__header {
  text-align: center;
  max-width:  740px;
  margin:     0 auto 44px;
}

.bl-quality__title {
  font-size:      clamp(22px, 2.8vw, 32px);
  font-weight:    800;
  color:          var(--bl-heading);
  line-height:    1.35;
  letter-spacing: -0.3px;
  margin-bottom:  12px;
}

.bl-quality__sub {
  font-size:   15.5px;
  color:       var(--bl-body);
  line-height: 1.8;
}

.bl-quality__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   20px;
}

/* Quality Card */
.bl-qcard {
  background:    var(--bl-bg-white);
  border:        1px solid var(--bl-border-card);
  border-radius: var(--bl-r-lg);
  padding:       26px 24px;
  position:      relative;
  overflow:      hidden;
  box-shadow:    var(--bl-shadow-card);
  display:       flex;
  flex-direction: column;
  gap:           12px;
  transition:    transform 0.25s ease, box-shadow 0.25s ease;
}

.bl-qcard:hover {
  transform:  translateY(-4px);
  box-shadow: var(--bl-shadow-md);
}

.bl-qcard::before {
  content:      '';
  position:     absolute;
  top:          0;
  right:        0;
  left:         0;
  height:       3px;
  border-radius: var(--bl-r-lg) var(--bl-r-lg) 0 0;
}

.bl-qcard--1::before { background: linear-gradient(90deg, var(--bl-blue), var(--bl-blue-mid)); }
.bl-qcard--2::before { background: linear-gradient(90deg, var(--bl-indigo), #818cf8); }
.bl-qcard--3::before { background: linear-gradient(90deg, var(--bl-green), var(--bl-green-mid)); }
.bl-qcard--4::before { background: linear-gradient(90deg, var(--bl-amber), #f59e0b); }

.bl-qcard__icon {
  width:           44px;
  height:          44px;
  border-radius:   var(--bl-r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.bl-qcard--1 .bl-qcard__icon { background: var(--bl-blue-light);   color: var(--bl-blue); }
.bl-qcard--2 .bl-qcard__icon { background: var(--bاl-indigo-light);  color: var(--bl-indigo); }
.bl-qcard--3 .bl-qcard__icon { background: var(--bl-green-light);   color: var(--bl-green); }
.bl-qcard--4 .bl-qcard__icon { background: var(--bl-amber-light);   color: var(--bl-amber); }

.bl-qcard__title {
  font-size:   17px;
  font-weight: 800;
  color:       var(--bl-heading);
  line-height: 1.3;
}

.bl-qcard__body {
  font-size:   14px;
  color:       var(--bl-body);
  line-height: 1.8;
  flex:        1;
}

.bl-qcard__meter {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  padding-top:    12px;
  border-top:     1px solid var(--bl-border);
  font-size:      12px;
  color:          var(--bl-muted);
  font-weight:    500;
}

.bl-qcard__meter > span:first-child { font-weight: 500; }
.bl-qcard__meter-val {
  font-weight: 700;
  color:       var(--bl-blue);
  align-self:  flex-end;
}

.bl-qmeter__track {
  width:         100%;
  height:        6px;
  background:    var(--bl-bg-subtle);
  border-radius: var(--bl-r-pill);
  overflow:      hidden;
}

.bl-qmeter__fill {
  height:         100%;
  width:          var(--w, 70%);
  border-radius:  var(--bl-r-pill);
  background:     linear-gradient(90deg, var(--bl-blue) 0%, var(--bl-blue-mid) 100%);
  animation:      bl-meter-fill 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-play-state: paused;
  animation-delay: 0.2s;
}

.bl-qcard--2 .bl-qmeter__fill { background: linear-gradient(90deg, var(--bl-indigo), #818cf8); }
.bl-qcard--3 .bl-qmeter__fill { background: linear-gradient(90deg, var(--bl-green), var(--bl-green-mid)); }
.bl-qcard--4 .bl-qmeter__fill { background: linear-gradient(90deg, var(--bl-amber), #f59e0b); }

@keyframes bl-meter-fill {
  from { width: 0; }
  to   { width: var(--w, 70%); }
}


/* =============================================================
   BLOCK 5 — COMPARISON TABLE
   ============================================================= */
.bl-compare__header {
  text-align: center;
  max-width:  740px;
  margin:     0 auto 40px;
}

.bl-compare__title {
  font-size:      clamp(22px, 2.8vw, 32px);
  font-weight:    800;
  color:          var(--bl-heading);
  line-height:    1.35;
  letter-spacing: -0.3px;
  margin-bottom:  12px;
}

.bl-compare__sub {
  font-size:   15.5px;
  color:       var(--bl-body);
  line-height: 1.8;
}

.bl-table-wrap {
  overflow-x:    auto;
  border-radius: var(--bl-r-xl);
  box-shadow:    var(--bl-shadow-lg);
  border:        1px solid var(--bl-border-card);
  background:    var(--bl-bg-white);
  -webkit-overflow-scrolling: touch;
}

.bl-table {
  width:           100%;
  border-collapse: collapse;
  min-width:       640px;
  direction:       rtl;
}

.bl-table__th {
  padding:     18px 20px;
  text-align:  right;
  font-family: var(--bl-font);
  font-size:   14px;
  font-weight: 600;
  color:       var(--bl-muted);
  background:  var(--bl-bg-deep);
  border-bottom: 2px solid var(--bl-border);
}

.bl-table__th--attr  { width: 22%; border-left: 1px solid var(--bl-border); }
.bl-table__th--strong { width: 39%; }
.bl-table__th--weak  { width: 39%; border-right: 1px solid var(--bl-border); }

.bl-table__col-label {
  display:     flex;
  align-items: center;
  justify-content: center;
}

.bl-table__badge {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       7px 16px;
  border-radius: var(--bl-r-pill);
  font-size:     13px;
  font-weight:   700;
  font-family:   var(--bl-font);
}

.bl-table__badge--strong {
  background: var(--bl-blue);
  color:      white;
}
.bl-table__badge--weak {
  background: var(--bl-red);
  color:      white;
}

.bl-table__row { transition: background 0.2s; }
.bl-table__row:hover { background: rgba(26, 86, 219, 0.025); }
.bl-table__row--alt  { background: rgba(248, 250, 255, 0.7); }
.bl-table__row--alt:hover { background: rgba(26, 86, 219, 0.035); }

.bl-table__td {
  padding:        16px 20px;
  vertical-align: middle;
  border-bottom:  1px solid rgba(26, 86, 219, 0.05);
  font-family:    var(--bl-font);
}

.bl-table__td--attr {
  border-left: 1px solid var(--bl-border);
}

.bl-table__td--weak {
  border-right: 1px solid var(--bl-border);
}

.bl-table__attr {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13.5px;
  font-weight: 600;
  color:       var(--bl-heading);
}

.bl-table__val {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  font-size:   13.5px;
  color:       var(--bl-body);
  line-height: 1.55;
}

.bl-table__val svg { flex-shrink: 0; margin-top: 1px; }

.bl-table__val--neg { color: var(--bl-body); }


/* =============================================================
   BLOCK 6 — IMPACT CARDS
   ============================================================= */
.bl-impact__header {
  text-align: center;
  max-width:  680px;
  margin:     0 auto 40px;
}

.bl-impact__title {
  font-size:      clamp(22px, 2.8vw, 32px);
  font-weight:    800;
  color:          var(--bl-heading);
  line-height:    1.35;
  letter-spacing: -0.3px;
  margin-top:     8px;
}

.bl-impact__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   20px;
}

.bl-icard {
  background:    var(--bl-bg-white);
  border:        1px solid var(--bl-border-card);
  border-radius: var(--bl-r-lg);
  padding:       26px 22px;
  display:       flex;
  flex-direction: column;
  gap:           14px;
  box-shadow:    var(--bl-shadow-card);
  transition:    transform 0.25s ease, box-shadow 0.25s ease;
}

.bl-icard:hover {
  transform:  translateY(-4px);
  box-shadow: var(--bl-shadow-md);
}

.bl-icard__top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.bl-icard__icon {
  width:           44px;
  height:          44px;
  border-radius:   var(--bl-r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.bl-icard__icon--blue   { background: var(--bl-blue); }
.bl-icard__icon--green  { background: var(--bl-green); }
.bl-icard__icon--indigo { background: var(--bl-indigo); }

.bl-icard__trend {
  display:       flex;
  align-items:   center;
  gap:           5px;
  font-size:     12px;
  font-weight:   700;
  padding:       5px 11px;
  border-radius: var(--bl-r-pill);
}

.bl-icard__trend--up {
  background: var(--bl-green-light);
  color:      var(--bl-green);
}

.bl-icard__title {
  font-size:   16.5px;
  font-weight: 800;
  color:       var(--bl-heading);
  line-height: 1.38;
}

.bl-icard__body {
  font-size:   13.5px;
  color:       var(--bl-body);
  line-height: 1.8;
  flex:        1;
}

.bl-icard__metric {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding-top:    14px;
  border-top:     1px solid var(--bl-border);
}

.bl-icard__metric > span {
  font-size:   12px;
  color:       var(--bl-muted);
  font-weight: 500;
  line-height: 1.4;
}

.bl-icard__metric strong {
  color:       var(--bl-blue);
  font-weight: 800;
}

.bl-icard__metric-bar {
  width:         100%;
  height:        6px;
  background:    var(--bl-bg-subtle);
  border-radius: var(--bl-r-pill);
  overflow:      hidden;
}

.bl-icard__metric-fill {
  height:         100%;
  width:          var(--fill-w, 70%);
  border-radius:  var(--bl-r-pill);
  background:     linear-gradient(90deg, var(--bl-blue) 0%, var(--bl-blue-mid) 100%);
  animation:      bl-fill-anim 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-play-state: paused;
  animation-delay: 0.3s;
}

.bl-icard__metric-fill--green  { background: linear-gradient(90deg, var(--bl-green), var(--bl-green-mid)); }
.bl-icard__metric-fill--indigo { background: linear-gradient(90deg, var(--bl-indigo), #818cf8); }

@keyframes bl-fill-anim {
  from { width: 0; }
  to   { width: var(--fill-w, 70%); }
}


/* =============================================================
   BLOCK 7 — GROWTH CHART
   ============================================================= */
.bl-growth { }

.bl-growth__inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         clamp(40px, 5vw, 72px);
  align-items: center;
}

.bl-growth__text {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.bl-growth__title {
  font-size:      clamp(22px, 2.6vw, 30px);
  font-weight:    800;
  color:          var(--bl-heading);
  line-height:    1.38;
  letter-spacing: -0.3px;
}

.bl-growth__body {
  font-size:   clamp(14.5px, 1.5vw, 16px);
  color:       var(--bl-body);
  line-height: 1.9;
}

.bl-growth__bullets {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  margin-top:     4px;
}

.bl-growth__bullet {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   14px;
  color:       var(--bl-body);
  font-weight: 500;
  line-height: 1.5;
}

.bl-growth__bullet-dot {
  display:       block;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    5px;
}

.bl-growth__bullet-dot--blue   { background: var(--bl-blue); box-shadow: 0 0 0 3px rgba(26,86,219,0.15); }
.bl-growth__bullet-dot--green  { background: var(--bl-green-mid); box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.bl-growth__bullet-dot--indigo { background: var(--bl-indigo); box-shadow: 0 0 0 3px rgba(79,70,229,0.15); }

/* Chart */
.bl-growth__chart-wrap {
  position: relative;
}

.bl-growth__chart {
  background:    var(--bl-bg-white);
  border:        1px solid var(--bl-border-card);
  border-radius: var(--bl-r-xl);
  padding:       24px 24px 16px;
  box-shadow:    var(--bl-shadow-lg);
}

.bl-chart__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   16px;
}

.bl-chart__title {
  font-size:   14px;
  font-weight: 700;
  color:       var(--bl-heading);
}

.bl-chart__range {
  font-size:     12px;
  font-weight:   600;
  color:         var(--bl-muted);
  background:    var(--bl-bg-subtle);
  padding:       4px 12px;
  border-radius: var(--bl-r-pill);
  border:        1px solid var(--bl-border);
}

.bl-chart__body {
  position: relative;
}

.bl-chart__svg {
  width:   100%;
  height:  200px;
  display: block;
}

.bl-chart__x-labels {
  display:         flex;
  justify-content: space-between;
  padding:         8px 0 4px;
}

.bl-chart__x-labels span {
  font-size:   11px;
  color:       var(--bl-faint);
  font-weight: 500;
  font-family: var(--bl-font);
}

.bl-chart__legend {
  display:    flex;
  gap:        20px;
  padding-top: 12px;
  border-top:  1px solid var(--bl-border);
  margin-top:  4px;
}

.bl-chart__legend-item {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   12px;
  color:       var(--bl-muted);
  font-weight: 600;
}

.bl-chart__legend-line {
  display:       inline-block;
  width:         24px;
  height:        3px;
  border-radius: 2px;
}
.bl-chart__legend-line--blue  { background: var(--bl-blue); }
.bl-chart__legend-line--green {
  background:          var(--bl-green-mid);
  background-image:    repeating-linear-gradient(90deg, var(--bl-green-mid) 0, var(--bl-green-mid) 4px, transparent 4px, transparent 7px);
}

/* Growth Floating Badges */
.bl-growth__float {
  position:      absolute;
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--bl-bg-white);
  border:        1px solid var(--bl-border-card);
  border-radius: var(--bl-r-md);
  padding:       10px 14px;
  box-shadow:    var(--bl-shadow-md);
  z-index:       5;
}

.bl-growth__float--top {
  top:    -14px;
  left:   -14px;
  animation: bl-float 4s ease-in-out infinite;
  animation-delay: 0.5s;
}
.bl-growth__float--bottom {
  bottom:  -14px;
  right:   -14px;
  animation: bl-float 4s ease-in-out infinite;
  animation-delay: 2s;
}
.bl-growth__float > div {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.bl-growth__float strong {
  font-size:   13px;
  font-weight: 800;
  color:       var(--bl-heading);
  font-family: var(--bl-font);
  line-height: 1;
}
.bl-growth__float small {
  font-size:   11px;
  color:       var(--bl-muted);
  font-family: var(--bl-font);
}


/* =============================================================
   BLOCK 8 — BRIDGE TO "WHY US"
   ============================================================= */
.bl-bridge {
  background:    linear-gradient(135deg, var(--bl-navy) 0%, #0d2352 100%);
  border-radius: var(--bl-r-xl);
  padding:       clamp(40px, 5vw, 64px);
  position:      relative;
  overflow:      hidden;
}

.bl-bridge::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(26, 86, 219, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.bl-bridge::after {
  content:    '';
  position:   absolute;
  top:        -80px;
  left:       -80px;
  width:      300px;
  height:     300px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.05);
  pointer-events: none;
}

.bl-bridge__inner {
  position:   relative;
  z-index:    1;
  display:    grid;
  grid-template-columns: 40px 1fr;
  gap:        clamp(24px, 4vw, 48px);
  align-items: start;
}

.bl-bridge__label-col {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  padding-top:    4px;
}

.bl-bridge__vertical-line {
  width:        2px;
  flex:         1;
  min-height:   80px;
  background:   linear-gradient(to bottom, rgba(26,86,219,0.5), rgba(34,197,94,0.3));
  border-radius: 2px;
}

.bl-bridge__step-num {
  writing-mode:    vertical-rl;
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  1px;
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.3);
  font-family:     var(--bl-font);
  white-space:     nowrap;
}

.bl-bridge__content-col {
  display:        flex;
  flex-direction: column;
  gap:            18px;
}

.bl-bridge__title {
  font-size:      clamp(22px, 2.8vw, 34px);
  font-weight:    800;
  color:          white;
  line-height:    1.35;
  letter-spacing: -0.3px;
}

.bl-bridge__body {
  font-size:   clamp(14.5px, 1.5vw, 16.5px);
  color:       rgba(255, 255, 255, 0.65);
  line-height: 1.9;
  max-width:   700px;
}

.bl-bridge__cta-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         14px;
  align-items: center;
  margin-top:  8px;
}

.bl-bridge__cta {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--bl-font);
  font-size:       15px;
  font-weight:     700;
  text-decoration: none;
  border-radius:   var(--bl-r-pill);
  transition:      all 0.25s ease;
  padding:         13px 26px;
}

.bl-bridge__cta--primary {
  background: var(--bl-blue);
  color:      white;
  box-shadow: 0 4px 20px rgba(26, 86, 219, 0.4);
}

.bl-bridge__cta--primary:hover {
  background: #1e40af;
  box-shadow: 0 8px 28px rgba(26, 86, 219, 0.5);
  transform:  translateY(-2px);
}

.bl-bridge__cta--secondary {
  background:  rgba(255, 255, 255, 0.08);
  color:       rgba(255, 255, 255, 0.85);
  border:      1px solid rgba(255, 255, 255, 0.15);
}

.bl-bridge__cta--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  color:      white;
  transform:  translateY(-2px);
}


/* =============================================================
   RESPONSIVE — LARGE TABLET (≤ 1100px)
   ============================================================= */
@media (max-width: 1100px) {

  .bl-highlight__inner {
    grid-template-columns: 56px 1fr;
  }

  .bl-highlight__decoration {
    display: none;
  }

  .bl-impact__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* wrap last card full width */
  .bl-icard:last-child {
    grid-column: 1 / -1;
  }

  .bl-concept__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =============================================================
   RESPONSIVE — TABLET (≤ 900px)
   ============================================================= */
@media (max-width: 900px) {

  .bl-concept {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .bl-concept__visual {
    order: -1;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }

  .bl-quality__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bl-growth__inner {
    grid-template-columns: 1fr;
  }

  .bl-growth__chart-wrap {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }

  .bl-impact__grid {
    grid-template-columns: 1fr;
  }

  .bl-icard:last-child {
    grid-column: auto;
  }

  .bl-bridge__inner {
    grid-template-columns: 1fr;
  }

  .bl-bridge__label-col {
    display: none;
  }

  .bl-highlight__inner {
    grid-template-columns: 1fr;
  }

  .bl-highlight__icon {
    display: none;
  }

  /* Network responsive */
  .bl-network {
    min-height: 320px;
  }

  .bl-network__badge--authority { bottom: -12px; right: -4px; }
  .bl-network__badge--juice     { top:    -12px; left: -4px; }

  .bl-concept__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}


/* =============================================================
   RESPONSIVE — MOBILE (≤ 640px)
   ============================================================= */
@media (max-width: 640px) {

  .bl-root {
    padding: 52px 0;
  }

  .bl-header__intro {
    font-size: 15px;
  }

  .bl-concept__stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bl-cstat {
    flex-direction: row;
    align-items:    center;
    gap:            14px;
    text-align:     right;
  }

  .bl-cstat__bar {
    width:  40px;
    height: 4px;
    flex-shrink: 0;
    transform: rotate(0deg);
  }

  .bl-cstat__bar::after { height: 100%; width: var(--h, 50%); animation: bl-grow-bar 1.2s ease-out both; }
  @keyframes bl-grow-bar { from { width: 0; } to { width: var(--h, 50%); } }

  .bl-highlight {
    padding: 30px 24px;
  }

  .bl-highlight__quote {
    font-size: 18px;
  }

  /* Table responsive: stack */
  .bl-table-wrap {
    border-radius: var(--bl-r-lg);
  }

  .bl-table {
    min-width: 560px;
  }

  .bl-table__td,
  .bl-table__th {
    padding: 13px 14px;
  }

  .bl-table__val {
    font-size: 12.5px;
  }

  .bl-network__badge {
    display: none;
  }

  .bl-network {
    min-height: 280px;
    padding: 20px;
  }

  .bl-growth__float {
    display: none;
  }

  .bl-bridge__cta-row {
    flex-direction: column;
    align-items:    stretch;
  }

  .bl-bridge__cta {
    justify-content: center;
  }

  .bl-quality__grid {
    gap: 14px;
  }
}


/* =============================================================
   RESPONSIVE — SMALL MOBILE (≤ 400px)
   ============================================================= */
@media (max-width: 400px) {
  .bl-container {
    padding: 0 16px;
  }

  .bl-header__title {
    font-size: 24px;
  }

  .bl-qcard,
  .bl-icard {
    padding: 20px 16px;
  }

  .bl-bridge {
    padding: 28px 20px;
  }

  .bl-node__core { width: 50px; height: 50px; }
  .bl-node__ring--outer { width: 80px; height: 80px; }
  .bl-node__ring--inner { width: 62px; height: 62px; }
}


/* =============================================================
   WORDPRESS / ELEMENTOR COMPATIBILITY
   ============================================================= */
.bl-root,
.bl-root * {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bl-root ul,
.bl-root ol { list-style: none; margin: 0; padding: 0; }
.bl-root a  { text-decoration: none; }
.bl-root blockquote { margin: 0; }
.bl-root h2, .bl-root h3, .bl-root h4 { margin: 0; }
.bl-root p  { margin: 0; }
.bl-root table { border-spacing: 0; }

.bl-root { max-width: 100%; overflow-x: hidden; }
.bl-root {
  padding-bottom: 0 !important;
}

@media (max-width: 640px) {
  .bl-root {
    padding-bottom: 0 !important;
  }
}
.bl-root {
  padding-bottom: 0 !important;
  margin-bottom: -80px !important;
}

@media (max-width: 640px) {
  .bl-root {
    padding-bottom: 0 !important;
    margin-bottom: -50px !important;
  }
}/* End custom CSS */