/* Extracted internal CSS from backlinks-building.php */
    /* ============================================================
       BACKLINKS BUILDING -Creative Visual Animation System (bkl- prefix)
       Visual height = content height via items-stretch grid.
    ============================================================ */
    @keyframes bklFloatA   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-10px)} }
    @keyframes bklFloatB   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-14px)} }
    @keyframes bklCountBar { from{transform:scaleX(0)} to{transform:scaleX(1)} }
    @keyframes bklBlink    { 0%,100%{opacity:1} 50%{opacity:.3} }
    @keyframes bklRise     { 0%{transform:translateY(16px);opacity:0} 100%{transform:translateY(0);opacity:1} }
    @keyframes bklRingSweep{ from{stroke-dashoffset:283} to{stroke-dashoffset:var(--bkl-off,60)} }
    @keyframes bklRingPulse{ 0%,100%{stroke-dashoffset:var(--bkl-off,60)} 50%{stroke-dashoffset:calc(var(--bkl-off,60) - 6)} }
    @keyframes bklGlow     { 0%{background-position:-150% 0} 100%{background-position:250% 0} }
    @keyframes bklLinkDraw { from{stroke-dashoffset:120} to{stroke-dashoffset:0} }
    @keyframes bklNodePulse{ 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(106,88,228,.35)} 50%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(106,88,228,0)} }
    @keyframes bklDotTravel{ 0%{offset-distance:0%; opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{offset-distance:100%; opacity:0} }
    @keyframes bklSlideIn  { 0%{opacity:0;transform:translateX(14px)} 100%{opacity:1;transform:translateX(0)} }
    @keyframes bklSpin     { to{transform:rotate(360deg)} }
    @keyframes bklShield   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

    /* ---- shells ---- */
    .bkl-frame {
      width:100%; max-width:560px; max-height:100%; border-radius:1.1rem;
      background:#fff; border:1px solid #E6ECF5;
      box-shadow:0 12px 30px -14px rgba(17,24,39,.12);
      overflow:hidden; animation:bklFloatA 6s ease-in-out infinite;
      min-width:0; box-sizing:border-box;
    }
    .bkl-frame * { box-sizing:border-box; }
    .bkl-frame-bar {
      display:flex; align-items:center; gap:.5rem;
      padding:.85rem 1.1rem; background:#F7F8FC;
      border-bottom:1px solid #ECEFF6; min-width:0;
    }
    .bkl-dot { width:10px; height:10px; border-radius:9999px; flex-shrink:0; }
    .bkl-frame-url {
      flex:1; min-width:0; margin-left:.5rem; height:24px;
      border-radius:9999px; background:#EEF1F8;
      display:flex; align-items:center; padding:0 .75rem;
      font:600 11px/1 'Inter',monospace; color:#475569;
      gap:.35rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    }
    .bkl-frame-tag {
      margin-left:auto; display:flex; align-items:center; gap:.35rem;
      font:800 10px/1 'Inter',monospace; color:#6A58E4; letter-spacing:.05em;
    }
    .bkl-live-dot { width:7px; height:7px; border-radius:9999px; background:#6A58E4; animation:bklBlink 1.4s ease-in-out infinite; }
    .bkl-frame-body { padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,1.9rem) clamp(1.5rem,3.5vw,2.1rem); }

    .bkl-terminal {
      width:100%; max-width:560px; max-height:100%; border-radius:1.1rem;
      background:#0A0E17; border:1px solid rgba(255,255,255,.08);
      box-shadow:0 12px 30px -14px rgba(0,0,0,.35);
      overflow:hidden; animation:bklFloatB 7s ease-in-out infinite;
      min-width:0; box-sizing:border-box;
    }
    .bkl-terminal * { box-sizing:border-box; }
    .bkl-terminal-bar { display:flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.07); }
    .bkl-terminal-title { font:600 12px/1 'Inter',monospace; color:#94A3B8; margin-left:.35rem; }
    .bkl-terminal-live {
      margin-left:auto; display:inline-flex; align-items:center; gap:.35rem;
      padding:.25rem .6rem; border-radius:9999px;
      border:1px solid rgba(52,211,153,.35); background:rgba(52,211,153,.08);
      font:800 10px/1 'Inter',monospace; color:#6A58E4; letter-spacing:.05em;
    }
    .bkl-terminal-body { padding:1.1rem 1.2rem 1.3rem; }

    /* ---- link network diagram (hero + services) ---- */
    .bkl-network { position:relative; width:100%; height:180px; }
    .bkl-node {
      position:absolute; border-radius:9999px; display:flex; align-items:center; justify-content:center;
      color:#fff; box-shadow:0 8px 18px -6px rgba(0,0,0,.25); z-index:2;
    }
    .bkl-node.center { width:56px; height:56px; background:linear-gradient(135deg,#6A58E4,#4A86F5); animation:bklNodePulse 2.6s ease-in-out infinite; }
    .bkl-node.small  { width:34px; height:34px; background:linear-gradient(135deg,#4A86F5,#28A8D9); animation:bklFloatA 4s ease-in-out infinite; }

    /* ---- bars ---- */
    .bkl-bar-row  { display:flex; align-items:center; gap:.7rem; padding:.5rem 0; min-width:0; }
    .bkl-bar-label{ flex-shrink:0; width:120px; font:700 11px/1.25 'Inter',monospace; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .bkl-bar-track{ flex:1; min-width:0; height:6px; border-radius:9999px; background:#EEF1F8; overflow:hidden; position:relative; }
    .bkl-bar-fill {
      position:absolute; inset:0; border-radius:9999px;
      background:linear-gradient(90deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);
      background-size:250% 100%; transform-origin:left;
      animation:bklCountBar 1.1s cubic-bezier(.2,.8,.2,1) both, bklGlow 3.2s linear infinite 1.1s;
    }
    .bkl-bar-val { flex-shrink:0; width:40px; text-align:right; font:800 13px/1 'Inter',monospace; color:#6A58E4; }

    .bkl-t-bar-row   { display:flex; align-items:center; gap:.7rem; padding:.5rem 0; min-width:0; }
    .bkl-t-bar-label { flex-shrink:0; width:130px; font:700 11px/1.2 'Inter',monospace; color:#94A3B8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .bkl-t-bar-track { flex:1; min-width:0; height:6px; border-radius:9999px; background:rgba(255,255,255,.08); overflow:hidden; position:relative; }
    .bkl-t-bar-fill  {
      position:absolute; inset:0; border-radius:9999px;
      background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);
      background-size:250% 100%; transform-origin:left;
      animation:bklCountBar 1.1s cubic-bezier(.2,.8,.2,1) both, bklGlow 3.2s linear infinite 1.1s;
    }
    .bkl-t-bar-val { flex-shrink:0; width:38px; text-align:right; font:800 12px/1 'Inter',monospace; color:#6A58E4; }

    /* ---- footers ---- */
    .bkl-frame-footer {
      margin-top:1.2rem; display:flex; align-items:center; justify-content:space-between;
      padding:1rem 1.1rem; border-radius:.95rem;
      background:rgba(106,88,228,.06); border:1px solid rgba(106,88,228,.18);
    }
    .bkl-frame-footer b { font:700 13px/1 'Inter',sans-serif; color:#111827; }
    .bkl-t-footer {
      margin-top:1.1rem; display:flex; align-items:center; justify-content:space-between;
      padding:.9rem 1rem; border-radius:.9rem;
      background:rgba(52,211,153,.07); border:1px solid rgba(52,211,153,.22);
    }
    .bkl-t-footer b { font:700 12px/1 'Inter',sans-serif; color:#fff; }
    .bkl-pill-violet {
      padding:.4rem .85rem; border-radius:9999px;
      background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);
      background-size:250% 100%; color:#fff; font:800 11px/1 'Inter',monospace;
      animation:bklGlow 3.6s linear infinite;
    }
    .bkl-pill-green {
      padding:.35rem .8rem; border-radius:9999px;
      background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);
      background-size:250% 100%; animation:bklGlow 3.6s linear infinite;
      color:#04140D; font:800 10px/1 'Inter',monospace;
    }

    /* ---- domain authority row ---- */
    .bkl-da-row {
      display:flex; align-items:center; justify-content:space-between;
      padding:.7rem .85rem; border-radius:.8rem; background:#FAFBFF; border:1px solid #ECEFF6;
      animation:bklSlideIn .5s ease-out both;
    }
    .bkl-da-domain { font:700 12px/1.2 'Inter',sans-serif; color:#1E293B; }
    .bkl-da-badge  { flex-shrink:0; padding:.25rem .6rem; border-radius:9999px; font:800 11px/1 'Inter',monospace; background:rgba(106,88,228,.1); color:#6A58E4; }

    /* ---- ring cards ---- */
    .bkl-ring-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; width:100%; }
    .bkl-ring-card {
      background:#FAFBFF; border:1px solid #ECEFF6; border-radius:1rem;
      padding:1rem .8rem; text-align:center; display:flex;
      flex-direction:column; align-items:center; justify-content:center;
      gap:.5rem; animation:bklRise .55s ease-out both;
    }
    .bkl-ring-svg  { transform:rotate(-90deg); width:clamp(48px,7vw,60px); height:clamp(48px,7vw,60px); flex-shrink:0; }
    .bkl-ring-svg .track { fill:none; stroke:#EDEFF6; stroke-width:6; }
    .bkl-ring-svg .fill  { fill:none; stroke-width:6; stroke-linecap:round; stroke-dasharray:283; animation:bklRingSweep 1.3s cubic-bezier(.2,.8,.2,1) both, bklRingPulse 2.6s ease-in-out infinite 1.3s; }
    .bkl-ring-card-num   { font:800 20px/1 'Inter',sans-serif; color:#111827; }
    .bkl-ring-card-label { font:700 11px/1 'Inter',monospace; color:#475569; text-transform:uppercase; letter-spacing:.03em; }

    /* ---- funnel/checklist rows ---- */
    .bkl-funnel { display:flex; flex-direction:column; gap:.5rem; width:100%; }
    .bkl-funnel-step { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border-radius:.9rem; background:#FAFBFF; border:1px solid #ECEFF6; animation:bklRise .5s ease-out both; }
    .bkl-funnel-num { flex-shrink:0; width:30px; height:30px; border-radius:.65rem; display:flex; align-items:center; justify-content:center; font:800 13px/1 'Inter',monospace; color:#fff; background:linear-gradient(135deg,#6A58E4,#4A86F5); }
    .bkl-funnel-title { font:700 13px/1.2 'Inter',sans-serif; color:#1E293B; }
    .bkl-funnel-sub   { font:600 11px/1.3 'Inter',sans-serif; color:#475569; margin-top:.15rem; }

    /* ---- check rows ---- */
    .bkl-check-row  { display:flex; align-items:center; gap:.7rem; animation:bklRise .5s ease-out both; }
    .bkl-check-icon { flex-shrink:0; width:24px; height:24px; border-radius:.55rem; background:rgba(16,185,129,.12); color:#059669; display:flex; align-items:center; justify-content:center; }
    .bkl-check-text { font:600 13px/1.3 'Inter',sans-serif; color:#1E293B; }

    /* ---- outer visual wrapper ---- */
    .bkl-visual { position:relative; width:100%; height:100%; min-height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden; box-sizing:border-box; }

    .grid > * { min-width:0; }
    .bkl-frame, .bkl-terminal { min-width:0; box-sizing:border-box; }

    @media (max-width:640px) {
      .bkl-visual { min-height:240px; padding:.75rem; }
      .bkl-frame-body, .bkl-terminal-body { padding:.9rem 1rem 1.1rem; }
      .bkl-bar-label, .bkl-t-bar-label { width:82px; font-size:10px; }
      .bkl-ring-grid  { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .bkl-network { height:150px; }
      .bkl-node.center { width:46px; height:46px; }
      .bkl-node.small  { width:28px; height:28px; }
    }
    @media (max-width:400px) {
      .bkl-bar-label, .bkl-t-bar-label { width:76px; font-size:10px; }
    }
    @media (prefers-reduced-motion:reduce) {
      .bkl-visual * { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
    }
  

