.wf8{ background:#fff; padding:clamp(44px,5vw,70px) 0; font-family:var(--font-body); position:relative; }
      .wf8__inner{ max-width:1180px; margin:0 auto; padding:0 24px; }

      .wf8__head{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
      .wf8__title{ font-family:var(--font-heading); font-weight:800; color:var(--dark-bg);
        font-size:clamp(23px,2.9vw,32px); line-height:1.15; letter-spacing:-0.025em; margin:0; }
      .wf8__title em{ font-style:normal; color:var(--primary); }
      .wf8__sub{ font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0; }
      .wf8__clock{ display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bi-teal);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    padding: 7px 13px;
    background: var(--section-tint);
    white-space: nowrap;
    width: 197px;
    font-family: 'JetBrains Mono', monospace; }
      .wf8__clock i{ color:var(--primary); font-size:11px; }

      /* ---- track ---- */
      .wf8__track{ position:relative; padding:26px 0 4px; }
      .wf8__line{ position:absolute; left:0; right:0; top:44px; height:2px; background:var(--border-light); border-radius:2px; }
      .wf8__line::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:0;
        background:linear-gradient(90deg,var(--primary),#00c8ff); border-radius:2px;
        transition:width .55s cubic-bezier(.22,.9,.28,1); }

      .wf8__nodes{ position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
      .wf8__node{ position:relative; background:none; border:0; padding:0 6px; cursor:pointer; text-align:left;
        font-family:inherit; display:flex; flex-direction:column; gap:9px; }
      .wf8__phase{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:0.12em;
        text-transform:uppercase; color:#334155; height:14px; }
      .wf8__dot{ width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--border-light);
        display:grid; place-items:center; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
      .wf8__dot::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--border-light);
        transition:background .25s ease, transform .25s ease; }
      .wf8__node:hover .wf8__dot{ border-color:var(--primary); }
      .wf8__node.is-done .wf8__dot{ border-color:var(--primary); }
      .wf8__node.is-done .wf8__dot::after{ background:var(--primary); }
      .wf8__node.is-active .wf8__dot{ border-color:var(--primary); transform:scale(1.18);
        box-shadow:0 0 0 6px rgba(0,102,255,0.12); }
      .wf8__node.is-active .wf8__dot::after{ background:var(--primary); transform:scale(1.15); }
      .wf8__nlabel{ display:flex; flex-direction:column; gap:2px; }
      .wf8__nn{ font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.1em; color:#334155; }
      .wf8__nt{ font-size:13px; font-weight:600; line-height:1.35; color:#0e0e0; transition:color .2s ease; }
      .wf8__node.is-active .wf8__nt, .wf8__node:hover .wf8__nt{ color:var(--dark-bg); }
      .wf8__node.is-active .wf8__nn{ color:var(--primary); }

      /* ---- detail panel ---- */
      .wf8__panel{ margin-top:22px; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
        border:1px solid var(--border-light); border-radius:18px; overflow:hidden; background:var(--light-card); }
      .wf8__main{ padding:24px 26px; }
      .wf8__ptag{ display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace;
        font-size:9.8px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#333333;
        background:var(--primary-light); border:1px solid rgba(0,102,255,0.14); border-radius:999px; padding:4px 10px; margin-bottom:12px; }
      .wf8__pt{ font-family:var(--font-heading); font-weight:800; font-size:clamp(19px,2.1vw,23px); letter-spacing:-0.02em;
        color:var(--dark-bg); margin:0 0 9px; }
      .wf8__pd{ font-size:14.2px; line-height:1.68; color:var(--text-muted); margin:0 0 16px; max-width:560px; }
      .wf8__pl{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
      .wf8__pl li{ display:flex; gap:9px; align-items:flex-start; font-size:13.4px; line-height:1.55; color:var(--dark-bg); }
      .wf8__pl i{ color:var(--primary); font-size:11px; margin-top:4px; flex:none; }

      .wf8__side{ padding:24px 24px; background:var(--section-tint); border-left:1px solid var(--border-light);
        display:flex; flex-direction:column; gap:14px; }
      .wf8__deliv{ display:flex; gap:12px; align-items:flex-start; }
      .wf8__delivicon{ width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
        background:#fff; border:1px solid var(--border-light); color:var(--primary); font-size:15px; }
      .wf8__deliv small{ display:block; font-family:'Inter', sans-serif !important; font-size:9.5px; font-weight:600;
        letter-spacing:0.12em; text-transform:uppercase; color:#005de0; margin-bottom:3px; }
      .wf8__deliv b{ font-family:var(--font-heading); font-size:14.6px; font-weight:700; color:var(--dark-bg); line-height:1.35; }
      .wf8__meta{ display:grid; gap:10px; margin-top:auto; }
      .wf8__mrow{ display:flex; justify-content:space-between; align-items:center; gap:10px;
        font-size:12.8px; color:#000e21; padding-top:10px; border-top:1px solid var(--border-light); }
      .wf8__mrow b{ color:var(--dark-bg); font-weight:700; }
      .wf8__nav{ display:flex; gap:8px; }
      .wf8__nav button{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
        font-family:inherit; font-size:12.6px; font-weight:700; color:var(--dark-bg); background:#fff; cursor:pointer;
        border:1px solid var(--border-light); border-radius:10px; padding:9px 10px;
        transition:border-color .18s ease, color .18s ease, background .18s ease; }
      .wf8__nav button:hover{ border-color:var(--primary); color:var(--primary); }

      .wf8__fade{ animation:wf8fade .38s cubic-bezier(.22,.9,.28,1) both; }
      @keyframes wf8fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

      @media (max-width:1000px){
        .wf8__panel{ grid-template-columns:1fr; }
        .wf8__side{ border-left:0; border-top:1px solid var(--border-light); }
      }
     @media (max-width:760px){

  .wf8 {
    padding: 38px 0 45px !important;
    overflow: hidden !important;
  }

  .wf8__inner {
    width: 100% !important;
    padding: 0 16px !important;
  }

  .wf8__head {
    gap: 12px !important;
    margin-bottom: 22px !important;
  }

  .wf8__title {
    font-size: 27px !important;
    line-height: 1.18 !important;
  }

  .wf8__sub {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .wf8__clock {
    width: fit-content !important;
    font-size: 10.5px !important;
    padding: 7px 11px !important;
  }

  /* 6 steps → 2 columns */
  .wf8__nodes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .wf8__line {
    display: none !important;
  }

  .wf8__node {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 78px !important;
    padding: 12px 10px !important;

    display: grid !important;
    grid-template-columns: 30px 1fr !important;
    grid-template-rows: auto auto !important;

    column-gap: 10px !important;
    row-gap: 3px !important;

    background: #f7f9fd !important;
    border: 1px solid #e2e8f5 !important;
    border-radius: 12px !important;

    text-align: left !important;
  }

  .wf8__phase {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    height: auto !important;
    min-height: 11px !important;
    font-size: 8px !important;
  }

  .wf8__dot {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 22px !important;
    height: 22px !important;
  }

  .wf8__nlabel {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  .wf8__nn {
    font-size: 9px !important;
  }

  .wf8__nt {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }

  /* Active step */
  .wf8__node.is-active {
    background: #eef4ff !important;
    border-color: #2454ff !important;
    box-shadow: 0 5px 16px rgba(36,84,255,.12) !important;
  }

  .wf8__node.is-active .wf8__nt {
    color: #0b132b !important;
  }

  /* Detail panel */
  .wf8__panel {
    margin-top: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    border-radius: 16px !important;
  }

  .wf8__main {
    padding: 20px 18px !important;
  }

  .wf8__pt {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  .wf8__pd {
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .wf8__pl li {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* Delivery section */
  .wf8__side {
    padding: 18px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--border-light) !important;
  }

  .wf8__deliv b {
    font-size: 13px !important;
  }

  .wf8__mrow {
    min-height: 42px !important;
    font-size: 11.5px !important;
  }

  /* Previous / Next */
  .wf8__nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .wf8__nav button {
    min-height: 40px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width:420px){

  .wf8__inner {
    padding: 0 14px !important;
  }

  .wf8__title {
    font-size: 24px !important;
  }

  .wf8__nodes {
    gap: 8px !important;
  }

  .wf8__node {
    min-height: 74px !important;
    padding: 10px 8px !important;
  }

  .wf8__nt {
    font-size: 10.5px !important;
  }

  .wf8__pt {
    font-size: 19px !important;
  }
}
      @media (prefers-reduced-motion: reduce){ .wf8__fade{ animation:none; } }