/* Extracted internal CSS from white-label-seo.php */
    /* ============================================================
       WHITE LABEL SEO -Creative Visual Animation System
       Follows google-ranking-service.php design system exactly.
       Visual side height = content side height via items-stretch.
    ============================================================ */

    /* ---- core keyframes ---- */
    @keyframes wlsFloatA   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-10px)} }
    @keyframes wlsFloatB   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-14px)} }
    @keyframes wlsCountBar { from{transform:scaleX(0)} to{transform:scaleX(1)} }
    @keyframes wlsBlink    { 0%,100%{opacity:1} 50%{opacity:.3} }
    @keyframes wlsRise     { 0%{transform:translateY(16px);opacity:0} 100%{transform:translateY(0);opacity:1} }
    @keyframes wlsRingSweep{ from{stroke-dashoffset:283} to{stroke-dashoffset:var(--wls-off,60)} }
    @keyframes wlsRingPulse{ 0%,100%{stroke-dashoffset:var(--wls-off,60)} 50%{stroke-dashoffset:calc(var(--wls-off,60) - 6)} }
    @keyframes wlsGlow     { 0%{background-position:-150% 0} 100%{background-position:250% 0} }
    @keyframes wlsSpin     { to{transform:rotate(360deg)} }
    @keyframes wlsTypeCursor{ 0%,100%{opacity:1} 50%{opacity:0} }
    @keyframes wlsOrbit    { from{transform:rotate(0deg) translateX(52px) rotate(0deg)} to{transform:rotate(360deg) translateX(52px) rotate(-360deg)} }
    @keyframes wlsOrbitRev { from{transform:rotate(0deg) translateX(38px) rotate(0deg)} to{transform:rotate(-360deg) translateX(38px) rotate(360deg)} }
    @keyframes wlsDash     { to{stroke-dashoffset:0} }
    @keyframes wlsFadeSlide{ 0%{opacity:0;transform:translateX(-8px)} 100%{opacity:1;transform:translateX(0)} }
    @keyframes wlsPingRing { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.2);opacity:0} }
    @keyframes wlsScaleIn  { 0%{transform:scale(.7);opacity:0} 100%{transform:scale(1);opacity:1} }

    /* ============================================================
       SHARED FRAME / TERMINAL SHELLS (identical to grs- system)
    ============================================================ */
    .wls-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:wlsFloatA 6s ease-in-out infinite;
      min-width:0; box-sizing:border-box;
    }
    .wls-frame * { box-sizing:border-box; }
    .wls-frame-bar {
      display:flex; align-items:center; gap:.5rem;
      padding:.85rem 1.1rem; background:#F7F8FC;
      border-bottom:1px solid #ECEFF6; min-width:0;
    }
    .wls-dot { width:10px; height:10px; border-radius:9999px; flex-shrink:0; }
    .wls-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;
    }
    .wls-frame-tag {
      margin-left:auto; display:flex; align-items:center; gap:.35rem;
      font:800 10px/1 'Inter',monospace; color:#6A58E4; letter-spacing:.05em;
    }
    .wls-live-dot {
      width:7px; height:7px; border-radius:9999px; background:#6A58E4;
      animation:wlsBlink 1.4s ease-in-out infinite;
    }
    .wls-frame-body {
      padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,1.9rem) clamp(1.5rem,3.5vw,2.1rem);
    }

    /* Dark terminal shell */
    .wls-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:wlsFloatB 7s ease-in-out infinite;
      min-width:0; box-sizing:border-box;
    }
    .wls-terminal * { box-sizing:border-box; }
    .wls-terminal-bar {
      display:flex; align-items:center; gap:.5rem;
      padding:.85rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.07);
    }
    .wls-terminal-title { font:600 12px/1 'Inter',monospace; color:#94A3B8; margin-left:.35rem; }
    .wls-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;
    }
    .wls-terminal-body { padding:1.1rem 1.2rem 1.3rem; }

    /* ---- animated progress bars (light) ---- */
    .wls-bar-row  { display:flex; align-items:center; gap:.7rem; padding:.5rem 0; min-width:0; }
    .wls-bar-label{ flex-shrink:0; width:120px; font:700 11px/1.25 'Inter',monospace; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .wls-bar-track{ flex:1; min-width:0; height:6px; border-radius:9999px; background:#EEF1F8; overflow:hidden; position:relative; }
    .wls-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:wlsCountBar 1.1s cubic-bezier(.2,.8,.2,1) both, wlsGlow 3.2s linear infinite 1.1s;
    }
    .wls-bar-val { flex-shrink:0; width:40px; text-align:right; font:800 13px/1 'Inter',monospace; color:#6A58E4; }

    /* ---- animated progress bars (dark/green) ---- */
    .wls-t-bar-row   { display:flex; align-items:center; gap:.7rem; padding:.5rem 0; min-width:0; }
    .wls-t-bar-label { flex-shrink:0; width:120px; font:700 11px/1.2 'Inter',monospace; color:#94A3B8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .wls-t-bar-track { flex:1; min-width:0; height:6px; border-radius:9999px; background:rgba(255,255,255,.08); overflow:hidden; position:relative; }
    .wls-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:wlsCountBar 1.1s cubic-bezier(.2,.8,.2,1) both, wlsGlow 3.2s linear infinite 1.1s;
    }
    .wls-t-bar-val { flex-shrink:0; width:38px; text-align:right; font:800 12px/1 'Inter',monospace; color:#6A58E4; }

    /* ---- footer strips ---- */
    .wls-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);
    }
    .wls-frame-footer b { font:700 13px/1 'Inter',sans-serif; color:#111827; }
    .wls-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);
    }
    .wls-t-footer b { font:700 12px/1 'Inter',sans-serif; color:#fff; }
    .wls-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:wlsGlow 3.6s linear infinite;
    }
    .wls-pill-green {
      padding:.35rem .8rem; border-radius:9999px;
      background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);
      background-size:250% 100%; animation:wlsGlow 3.6s linear infinite;
      color:#04140D; font:800 10px/1 'Inter',monospace;
    }

    /* ---- stat tile grid ---- */
    .wls-stat-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }
    .wls-stat-tile  { text-align:center; padding:.9rem .5rem; border-radius:.85rem; background:#FAFBFF; border:1px solid #ECEFF6; }
    .wls-stat-tile b{ display:block; font:800 17px/1.1 'Inter',sans-serif; color:#111827; }
    .wls-stat-tile span{ display:block; margin-top:.35rem; font:700 12px/1.2 'Inter',monospace; color:#475569; letter-spacing:.04em; text-transform:uppercase; }

    /* ---- check rows ---- */
    .wls-check-row  { display:flex; align-items:center; gap:.7rem; animation:wlsRise .5s ease-out both; }
    .wls-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; }
    .wls-check-text { font:600 13px/1.3 'Inter',sans-serif; color:#1E293B; }
    .wls-check-row-dark .wls-check-icon { background:rgba(52,211,153,.15); color:#6A58E4; }
    .wls-check-row-dark .wls-check-text { color:#E2E8F0; }

    /* ---- ring score cards ---- */
    .wls-ring-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; width:100%; }
    .wls-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:wlsRise .55s ease-out both;
    }
    .wls-ring-svg  { transform:rotate(-90deg); width:clamp(48px,7vw,60px); height:clamp(48px,7vw,60px); flex-shrink:0; }
    .wls-ring-svg .track { fill:none; stroke:#EDEFF6; stroke-width:6; }
    .wls-ring-svg .fill  { fill:none; stroke-width:6; stroke-linecap:round; stroke-dasharray:283; animation:wlsRingSweep 1.3s cubic-bezier(.2,.8,.2,1) both, wlsRingPulse 2.6s ease-in-out infinite 1.3s; }
    .wls-ring-card-num   { font:800 20px/1 'Inter',sans-serif; color:#111827; }
    .wls-ring-card-label { font:700 11px/1 'Inter',monospace; color:#475569; text-transform:uppercase; letter-spacing:.03em; }

    /* ---- process step cards ---- */
    .wls-steps { display:flex; flex-direction:column; gap:1.1rem; width:100%; max-width:560px; }
    .wls-step {
      display:flex; align-items:flex-start; gap:1.1rem; background:#fff;
      border:1px solid #E6ECF5; border-radius:1.1rem;
      padding:clamp(1rem,2.2vw,1.4rem) clamp(1.1rem,2.5vw,1.5rem);
      box-shadow:0 14px 34px -18px rgba(106,88,228,.18); animation:wlsRise .55s ease-out both;
    }
    .wls-step-icon {
      flex-shrink:0; width:46px; height:46px; border-radius:.85rem;
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg,#6A58E4,#4A86F5); color:#fff;
    }
    .wls-step-bar { height:5px; border-radius:9999px; background:#EEF1F8; overflow:hidden; margin-top:.45rem; }
    .wls-step-bar span { display:block; height:100%; background:linear-gradient(90deg,#6A58E4,#4A86F5); transform-origin:left; animation:wlsCountBar 1.1s ease-out both; }

    /* ---- agency-brand orbit visual (hero / brand sections) ---- */
    .wls-orbit-wrap {
      position:relative; width:clamp(180px,36vw,220px); height:clamp(180px,36vw,220px);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .wls-orbit-center {
      width:72px; height:72px; border-radius:50%; z-index:2;
      background:linear-gradient(135deg,#6A58E4,#4A86F5);
      display:flex; align-items:center; justify-content:center; color:#fff;
      box-shadow:0 0 0 8px rgba(106,88,228,.15), 0 0 0 16px rgba(106,88,228,.07);
    }
    .wls-orbit-ring {
      position:absolute; border-radius:9999px; border:1.5px dashed rgba(106,88,228,.25);
    }
    .wls-orbit-planet {
      position:absolute; top:50%; left:50%;
      width:32px; height:32px; margin:-16px 0 0 -16px;
      border-radius:50%; display:flex; align-items:center; justify-content:center;
      color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.18);
    }
    .wls-orbit-planet.a { animation:wlsOrbit 8s linear infinite; }
    .wls-orbit-planet.b { animation:wlsOrbitRev 11s linear infinite; }
    .wls-orbit-planet.c { animation:wlsOrbit 14s linear infinite; }
    .wls-orbit-planet.d { animation:wlsOrbitRev 6s linear infinite; }

    /* ---- branding badge rows ---- */
    .wls-brand-row {
      display:flex; align-items:center; gap:.7rem; padding:.75rem .9rem;
      border-radius:.85rem; animation:wlsRise .5s ease-out both;
    }
    .wls-brand-row.light { background:#FAFBFF; border:1px solid #ECEFF6; }
    .wls-brand-row.dark  { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
    .wls-brand-icon {
      flex-shrink:0; width:34px; height:34px; border-radius:.7rem;
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg,#6A58E4,#4A86F5); color:#fff;
    }
    .wls-brand-text      { font:700 13px/1.3 'Inter',sans-serif; color:#1E293B; }
    .wls-brand-text-dark { font:700 13px/1.3 'Inter',sans-serif; color:#E2E8F0; }

    /* ---- keyword ticker strip ---- */
    .wls-kw-ticker { display:flex; flex-direction:column; gap:.5rem; }
    .wls-kw-row {
      display:flex; align-items:center; justify-content:space-between;
      padding:.6rem .85rem; border-radius:.75rem; animation:wlsFadeSlide .5s ease-out both;
    }
    .wls-kw-row.light { background:#F8FAFF; border:1px solid #ECEFF6; }
    .wls-kw-row.dark  { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
    .wls-kw-word   { font:600 13px/1 'Inter',sans-serif; color:#1E293B; }
    .wls-kw-dark   { color:#E2E8F0; }
    .wls-kw-badge  {
      flex-shrink:0; padding:.2rem .55rem; border-radius:9999px;
      font:800 11px/1 'Inter',monospace;
    }
    .wls-kw-badge.up   { background:rgba(16,185,129,.12); color:#059669; }
    .wls-kw-badge.new  { background:rgba(106,88,228,.12); color:#6A58E4; }
    .wls-kw-badge.top  { background:rgba(74,134,245,.12); color:#2563EB; }

    /* ---- comparison before/after ---- */
    .wls-compare-strip {
      display:flex; align-items:center; justify-content:space-between;
      padding:.9rem 1rem; border-radius:.9rem; background:#FAFBFF; border:1px solid #ECEFF6;
    }
    .wls-compare-col { text-align:center; flex:1; }
    .wls-compare-col b { display:block; font:800 20px/1 'Inter',sans-serif; }
    .wls-compare-col span { display:block; font:700 10px/1 'Inter',monospace; color:#475569; text-transform:uppercase; margin-top:.35rem; }

    /* ---- client card grid ---- */
    .wls-client-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
    .wls-client-card {
      padding:.75rem .85rem; border-radius:.85rem; animation:wlsRise .5s ease-out both;
    }
    .wls-client-card.light { background:#F8FAFF; border:1px solid #ECEFF6; }
    .wls-client-card.dark  { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
    .wls-client-name  { font:700 13px/1.2 'Inter',sans-serif; color:#111827; }
    .wls-client-dark  { color:#E2E8F0; }
    .wls-client-meta  { font:600 11px/1.3 'Inter',sans-serif; color:#475569; margin-top:.2rem; }
    .wls-client-meta-dark { color:#64748B; }

    /* ---- reselling funnel visual ---- */
    .wls-funnel {
      display:flex; flex-direction:column; align-items:stretch; gap:.5rem; width:100%;
    }
    .wls-funnel-step {
      display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem;
      border-radius:.9rem; animation:wlsRise .5s ease-out both;
    }
    .wls-funnel-step.light{ background:#FAFBFF; border:1px solid #ECEFF6; }
    .wls-funnel-step.dark { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
    .wls-funnel-num {
      flex-shrink:0; width:32px; height:32px; border-radius:.65rem;
      display:flex; align-items:center; justify-content:center;
      font:800 14px/1 'Inter',monospace; color:#fff;
      background:linear-gradient(135deg,#6A58E4,#4A86F5);
    }
    .wls-funnel-title { font:700 13px/1.2 'Inter',sans-serif; color:#1E293B; }
    .wls-funnel-title-dark { color:#E2E8F0; }
    .wls-funnel-sub   { font:600 11px/1.3 'Inter',sans-serif; color:#475569; margin-top:.15rem; }
    .wls-funnel-sub-dark { color:#64748B; }

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

    /* ---- overflow safety ---- */
    .grid > * { min-width:0; }
    .wls-frame, .wls-terminal { min-width:0; box-sizing:border-box; }

    /* ============================================================
       RESPONSIVE OVERRIDES
    ============================================================ */
    @media (max-width:640px) {
      .wls-visual { min-height:240px; padding:.75rem; }
      .wls-frame-body, .wls-terminal-body { padding:.9rem 1rem 1.1rem; }
      .wls-bar-label, .wls-t-bar-label { width:82px; font-size:10px; }
      .wls-stat-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .wls-ring-grid  { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .wls-client-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
      .wls-orbit-wrap { width:160px; height:160px; }
      .wls-orbit-center { width:60px; height:60px; }
    }
    @media (max-width:400px) {
      .wls-bar-label, .wls-t-bar-label { width:78px; font-size:10px; }
      .wls-orbit-wrap { width:140px; height:140px; }
    }
    @media (prefers-reduced-motion:reduce) {
      .wls-visual * { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
    }