:root {
    --ats-navy: #061f4f;
    --ats-navy-2: #073b82;
    --ats-blue: #075dcc;
    --ats-blue-2: #0879df;
    --ats-cyan: #2dd9c4;
    --ats-amber: #ffb454;
    --ats-ink: #0b1830;
    --ats-muted: #4a5670;
    --ats-deep: #0a1730;
    --ats-deep-2: #0e2040;
    --ats-faint: #8a93a8;
    --ats-line:rgba(7,61,130,0.14);
    --ats-paper: #ffffff;
}

    /* Hero */
.ats-article-hero {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ats-article-hero__bg {
    position: absolute;
    inset: -10px;
    z-index: 0;
    filter: blur(0);
    transform: scale(1);
    transition: filter .7s ease, transform .7s ease;
}


.article-1 {
    background: url("../images/article-one-image.png") center/cover no-repeat;
}

.article-2 {
    background: url("../images/article-two-image.png") center/cover no-repeat;
}

.article-3 {
    background: url("../images/article-three-image.png") center/cover no-repeat;
}

.article-4 {
    background: url("../images/article-four-image.png") center/cover no-repeat;
}

.article-5 {
    background: url("../images/article-five-image.png") center/cover no-repeat;
}

.article-6 {
    background: url("../images/article-six-image.png") center/cover no-repeat;
}

  .ats-article-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(0,0,0,.78), rgba(0,0,0,.45),rgba(0,0,0,.72));
    transition: background .5s ease;
  }

  .ats-article-hero__content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    color: #fff;
    transition: transform .5s ease;
  }

  .ats-article-hero:hover .ats-article-hero__bg {
    filter: blur(7px);
    transform: scale(1.06);
  }

  .ats-article-hero:hover::after {
    background: linear-gradient(135deg, rgba(0,0,0,.82),rgba(0,0,0,.55), rgba(0,0,0,.78));
  }

  .ats-article-hero:hover .ats-article-hero__content {
    transform: translateY(-3px);
  }

  .ats-article-hero__title {
    display: inline;
    color: #fff;
    font-size: 32px;
    line-height: 1.08;
    font-weight: 700;
    text-shadow: 0 3px 20px rgba(0,0,0,.7);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

.ats-article-hero__description {
    max-width: 850px;
    color: #fff;
    line-height: 1.7;
    font-weight: 500;
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
}

/* Article */
  .ats-article {
    color: #26314a;
  }

  .ats-article > p {
    font-size: 17px;
    line-height: 1.85;
  }

  .ats-article__heading {
    position: relative;
    margin-top: 52px;
    margin-bottom: 20px;
    padding-top: 6px;
    color: var(--ats-ink);
    font-family: "Space Grotesk", sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .ats-article__heading::before {
    content: "";
    display: block;
    width: 38px;
    height: 3px;
    margin-bottom: 18px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ats-blue), var(--ats-cyan));
  }

  .ats-article__heading:first-of-type {
    margin-top: 8px;
  }

  .ats-article__kicker {
    margin: 36px 0 -10px;
    color: var(--ats-muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  /* Workflow */
  .ats-workflow {
    margin: 20px 0 0px;
  }

  .ats-workflow__title {
    margin-bottom: 26px;
    color: var(--ats-ink);
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .ats-workflow__step {
    position: relative;
    z-index: 1;
    flex: 1 1 150px;
    min-width: 150px;
    padding: 18px 16px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(150deg, var(--ats-navy), var(--ats-blue));
    box-shadow: 0 10px 24px -14px rgba(7,61,130,.5);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .ats-workflow__step:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -14px rgba(7,61,130,.55);
  }

  .ats-workflow__step--final {
    background: linear-gradient(150deg, var(--ats-blue), var(--ats-cyan) 130%);
  }

  .ats-workflow__arrow {
    position: relative;
    flex: 0 0 28px;
    height: 5px;
    margin: 0 2px;
    background: linear-gradient(90deg, var(--ats-blue), var(--ats-cyan));
  }

  .ats-workflow__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--ats-cyan);
    border-right: 2px solid var(--ats-cyan);
    transform: translateY(-50%) rotate(45deg);
  }

  .ats-workflow__branch {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }

  .ats-workflow__branch-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 230px;
  }

  .ats-workflow__branch-line {
    width: 2px;
    height: 22px;
    margin-left: auto;
    background: var(--ats-amber);
  }

  .ats-workflow__branch-step {
    padding: 14px 16px;
    border: 1.5px solid var(--ats-amber);
    border-radius: 10px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
  }

  .ats-workflow__branch-step span {
    display: block;
    margin-bottom: 4px;
    color: #96143f;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* CTA */
  .ats-article-cta {
    max-width: 900px;
    margin-bottom: 44px;
    border-radius: 16px;
  }

  .ats-article-cta__card {
    position: relative;
    overflow: hidden;
    padding: 44px 38px;
    border-radius: 16px;
    background: linear-gradient(125deg,var(--ats-navy) 0%, var(--ats-navy-2) 38%, var(--ats-blue) 70%, var(--ats-blue-2) 100%);
  }

  .ats-article-cta__title {
    margin-bottom: 12px;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .ats-article-cta__description {
    margin-bottom: 26px;
    color: rgba(255,255,255,.75);
    font-size: 14.5px;
    line-height: 1.6;
  }

  .ats-article-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: end;
  }

  .ats-article-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }

  .ats-article-cta__button svg {
    width: 14px;
    height: 14px;
  }

  .ats-article-cta__button--secondary {
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    background: transparent;
  }

  .ats-article-cta__button--secondary:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255,255,255,.08);
    transform: translateY(-2px);
  }

  .ats-article-link {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    color: #1e73be;
    font-weight: 700;
    text-decoration: none;
  }

  /* Responsive */
  @media (max-width: 760px) {
    .ats-workflow__track {
      flex-direction: column;
      align-items: stretch !important;
    }
    .ats-workflow__step {
      width: 100%;
      flex: 0 0 20px;
    }
    .ats-workflow__arrow {
      width: 2px;
      height: 22px;
      flex-basis: 22px;
      margin: 2px auto;
      background: linear-gradient(180deg, var(--ats-blue), var(--ats-cyan));
    }
    .ats-workflow__arrow::after {
      top: auto;
      right: 50%;
      bottom: -1px;
      transform: translateX(50%) rotate(135deg);
    }

    .ats-workflow__branch {
      justify-content: center;
    }

    .ats-workflow__branch-inner {
      max-width: 100%;
      flex-direction: column;
    }

    .ats-workflow__branch-line {
      width: 2px;
      height: 20px;
      margin: 0 auto;
    }
  }

  @media (max-width: 768px) {
    .ats-article-hero {
      min-height: 430px;
    }
    .ats-article-hero__content {
      padding: 0 24px;
    }
    .ats-article {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }
    .ats-article-cta {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }
    .ats-article-cta__card {
      padding: 32px 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ats-article-hero__bg,
    .ats-article-hero__content,
    .ats-workflow__step,
    .ats-article-cta__button {
    transition: none !important;}
  }


  .flow-card{
        background: linear-gradient(160deg, var(--ats-deep) 0%, var(--ats-deep-2) 100%);
        border-radius:18px;
        padding:40px 32px 36px;
        margin:0 0 44px;
        position:relative;
        overflow:hidden;
    }

    .flow-card::before{
        content:"";
        position:absolute; inset:0;
        background-image:
        radial-gradient(2px 2px at 8% 15%, rgba(45,217,196,0.35), transparent),
        radial-gradient(2px 2px at 92% 20%, rgba(255,180,84,0.3), transparent),
        radial-gradient(1.5px 1.5px at 75% 85%, rgba(45,217,196,0.3), transparent),
        radial-gradient(1.5px 1.5px at 20% 90%, rgba(255,180,84,0.25), transparent);
        animation:hero-drift 15s ease-in-out infinite alternate;
        pointer-events:none;
    }
    
    .flow-eyebrow{
        font-family:'JetBrains Mono', monospace;
        font-size:11px; 
        letter-spacing:0.2em; 
        text-transform:uppercase;
        color:var(--ats-cyan);
        display:flex; 
        align-items:center; 
        gap:9px;
        margin-bottom:14px;
        position:relative; 
        z-index:1;
    }

    .flow-eyebrow .dot{
        width:6px; 
        height:6px; 
        border-radius:50%;
        background:var(--ats-cyan);
        box-shadow:0 0 0 0 rgba(45,217,196,0.6);
        animation:dotpulse 1.8s ease-out infinite;
    }

    .flow-title{
        font-family:'Space Grotesk', sans-serif;
        font-weight:700; 
        font-size:22px;
        letter-spacing:-0.01em; 
        color:#fff;
        margin-bottom:32px; 
        position:relative; 
        z-index:1;
    }
 
    .flow-track{
        display:flex; 
        align-items:flex-start; 
        gap:0;
        flex-wrap:wrap; 
        position:relative; 
        z-index:1;
    }

    .flow-item{
        display:flex; 
        flex-direction:column; 
        align-items:center;
        flex:1 1 130px; 
        min-width:120px; 
        position:relative;
    }

    .flow-badge{
        width:26px; 
        height:26px; 
        border-radius:50%;
        display:flex; 
        align-items:center; 
        justify-content:center;
        font-family:'JetBrains Mono', monospace;
        font-weight:600; 
        font-size:12px;
        color:#04261f;
        background:var(--ats-cyan);
        margin-bottom:-13px; 
        z-index:2;
        box-shadow:0 0 0 4px var(--ats-deep-2);
        animation:badge-pulse 3.6s ease-in-out infinite;
    }

    .flow-item:nth-child(1) .flow-badge{ animation-delay:0s; }
    .flow-item:nth-child(2) .flow-badge{ animation-delay:.5s; }
    .flow-item:nth-child(3) .flow-badge{ animation-delay:1s; background:var(--ats-amber); color:#3a2200; }
    .flow-item:nth-child(4) .flow-badge{ animation-delay:1.5s; }
    .flow-item:nth-child(5) .flow-badge{ animation-delay:2s; }

    @keyframes badge-pulse{
        0%, 100%{ box-shadow:0 0 0 4px var(--ats-deep-2), 0 0 0 4px var(--ats-deep-2); }
        15%{ box-shadow:0 0 0 4px var(--ats-deep-2), 0 0 0 9px rgba(45,217,196,0.25); }
    }
 
    .flow-box{
        width:100%;
        background:rgba(255,255,255,0.03);
        border:1.5px solid var(--ats-cyan);
        border-radius:12px;
        padding:22px 12px 14px;
        text-align:center;
        color:#fff;
        font-family:'Inter', sans-serif;
        font-weight:600;
        font-size:12.5px;
        line-height:1.4;
        transition:transform .25s ease, background .25s ease;
    }

    .flow-item:nth-child(3) .flow-box{ 
        border-color:var(--ats-amber); 
    }

    .flow-box:hover{ 
        transform:translateY(-3px); 
        background:rgba(255,255,255,0.06); 
    }
 
    .flow-connector{
        flex:0 0 22px;
        height:2px;
        margin-top:56px;
        background:linear-gradient(90deg, var(--ats-cyan), var(--ats-amber));
        background-size:200% 100%;
        animation:connector-flow 3s linear infinite;
        position:relative;
    }

    @keyframes connector-flow{
        0%{ background-position:200% 0; }
        100%{ background-position:-200% 0; }
    }
    
    .flow-branch{
        display:flex; 
        justify-content:flex-end;
        margin-top:22px; 
        position:relative; 
        z-index:1;
    }

    .flow-branch-inner{ 
        display:flex; 
        align-items:center; 
        gap:10px; 
        max-width:230px; 
    }

    .flow-branch-line{ 
        width:2px; height:20px; 
        background:var(--ats-cyan); 
        margin-left:auto; opacity:.6; 
    }

    .flow-branch-step{
        background:rgba(45,217,196,0.08);
        border:1.5px solid var(--ats-cyan);
        border-radius:10px;
        padding:12px 16px;
        text-align:center;
        color:#fff;
        font-family:'Inter', sans-serif;
        font-weight:600;
        font-size:12px;
        line-height:1.4;
    }
 
    @media (max-width:760px){
        .flow-track{ 
            flex-direction:column; 
            align-items:stretch; 
        }
        .flow-item{ 
            width:100%; 
        }
        .flow-connector{
        width:2px; height:22px; margin:2px auto;
        background:linear-gradient(180deg, var(--ats-cyan), var(--ats-amber));
        background-size:100% 200%;
        animation:connector-flow-v 3s linear infinite;
        }
        @keyframes connector-flow-v{
        0%{ background-position:0 200%; }
        100%{ background-position:0 -200%; }
        }
        .flow-branch{ 
            justify-content:center; 
        }
        .flow-branch-inner{ 
            max-width:100%; 
            flex-direction:column; 
        }
        .flow-branch-line{
            width:2px; 
            height:18px; 
            margin:0 auto; 
        }
    }

  /* .ats-paragraph {
    font-size: 17px;
    line-height: 1.85;
    color: #26314a;
    text-indent: 40px;
    margin-bottom: 24px;
  } */