:root {
    --bg-deep:      #060a08;   /* near-black green base            */
    --bg-teal:      #0d1f18;   /* dark teal tint over the scene    */
    --accent:       #a3f73e;   /* neon lime (links, primary CTA)   */
    --accent-soft:  #8fe649;   /* breadcrumb green                 */
    --text-primary: #ffffff;
    --text-body:    rgba(240, 245, 241, 0.88);
    --warm-glow:    #f5b26b;   /* lamp bokeh top-right             */
    --font-display: "Archivo", "Inter", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: var(--font-body);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
  }

  /* ============ HERO SECTION ============ */
  .hero {
    position: relative;
    min-height: 950px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: url("/services/hpe-nonstop-modernization/images/HPE-NonStop-Modernization-bg.webp");
    background-position: center;
background-size: cover;
background-repeat: no-repeat;
  }
  .scene {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  /* ============ CONTENT ============ */
  .hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 80px 0px 130px;
  }

  /* --- breadcrumb --- */
  .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
color: #FFF;
font-family: Manrope;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
text-transform: capitalize;
    margin-bottom: 34px;
  }

  .breadcrumb .sep     { color: rgba(255, 255, 255, 0.85); }
  .breadcrumb .current { color: var(--accent-soft); }

  /* --- headline --- */
  .hero h1 {
color: #FFF;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 70px;
font-style: normal;
font-weight: 700;
line-height: 74px; /* 105.714% */
letter-spacing: -1px;
    max-width: 1263px;
    margin-bottom: 34px;
  }

  /* --- body copy --- */
  .hero-copy {
    max-width: 952px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 44px;
  }

  .hero-copy p {
color: #FFF;
font-family: Manrope;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 150% */
  }

  /* --- CTAs --- */
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-bottom: 90px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 133.333% */
text-transform: capitalize;
    padding: 14px 26px;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    white-space: nowrap;

  }

  .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  /* animatable angle for the rotating border */
  @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  .btn-primary {
    position: relative;
    color: var(--accent);
    background: rgba(10, 18, 10, 0.75);
    border-color: rgba(163, 247, 62, 0.28); /* faint static ring underneath */
    box-shadow:
      0 0 22px rgba(163, 247, 62, 0.18),
      inset 0 0 14px rgba(163, 247, 62, 0.06);
  }

  /* bright green segment travelling around the border */
  .btn-primary::before {
    content: "";
    position: absolute;
    inset: -1px;                 /* sit exactly on the 1px border */
    border-radius: inherit;
    padding: 1.5px;              /* ring thickness */
    background: conic-gradient(
      from var(--angle),
      transparent 0deg,
      rgba(163, 247, 62, 0.15) 40deg,
      var(--accent) 85deg,
      rgba(215, 255, 150, 1) 100deg,
      var(--accent) 115deg,
      rgba(163, 247, 62, 0.15) 160deg,
      transparent 200deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
    animation: border-spin 3.2s linear infinite;
    pointer-events: none;
  }

  /* soft glow that follows the moving segment */
  .btn-primary::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    background: conic-gradient(
      from var(--angle),
      transparent 0deg,
      rgba(163, 247, 62, 0.35) 90deg,
      transparent 190deg
    );
    filter: blur(10px);
    z-index: -1;
    animation: border-spin 3.2s linear infinite;
    pointer-events: none;
  }

  @keyframes border-spin {
    to { --angle: 360deg; }
  }

  .btn-primary:hover {
    transform: translateY(-1px);
    border-color: rgba(163, 247, 62, 0.45);
    box-shadow:
      0 0 34px rgba(163, 247, 62, 0.3),
      inset 0 0 16px rgba(163, 247, 62, 0.1);
  }

  .btn-primary:hover::before,
  .btn-primary:hover::after {
    animation-duration: 1.6s;    /* spins faster on hover */
  }

  .btn-secondary {
    color: #0b0f0c;
    background: #ffffff;
  }

  .btn-secondary:hover {
    transform: translateY(-1px);
    background: #f1f4f0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover { transform: none; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1024px) {
    .hero-inner { padding: 100px 48px 90px; }
  }

  @media (max-width: 768px) {
    .hero { min-height: 1050px; }
    .hero-inner { padding: 84px 28px 72px; }

    .hero h1 {
      font-size: 30px;
      line-height: 30px;
      margin-bottom: 26px;
    }

    .hero-copy { gap: 18px; margin-bottom: 36px; }
    .hero-copy p { font-size: 14.5px; }
  }

  @media (max-width: 480px) {
    .hero-inner { padding: 72px 20px 60px; }
    .breadcrumb { font-size: 11.5px; margin-bottom: 26px; }

    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; padding: 15px 24px; }
  }


  /*  Apploicatipn section */

   .why {
    background: #ffffff;
    padding: 90px 24px 90px;
  }

  .why-inner {
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
  }

  .why-badge {
    display: inline-block;
    background: #297907;
    color: #FFF;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
text-transform: capitalize;
    padding: 10px 40px;
    border-radius: 999px;
    margin-bottom: 28px;
  }

  .why h2 {
    color: #000;
    font-family: "FONTSPRING DEMO - Roc Grotesk", "Archivo", sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;              /* 100% */
    letter-spacing: -1.44px;
    margin-bottom: 26px;
  }

  .why-lede {
    color: #444650;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;              /* 138.889% */
    letter-spacing: -0.2px;
    max-width: 1255px;
    margin: 0 auto 60px;
  }

  /* ---- timeline ---- */
  .timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 940px;
    margin: 0 auto;
  }

  /* central vertical line */
  .timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 28px;
    bottom: 0;
    width: 2px;
    background:  #297907;
    transform: translateX(-0.5px);
  }

  .tl-item {
    position: relative;
    width: 50%;
    margin-bottom: 22px;
  }

  /* left column items */
  .tl-item.left {
    align-self: flex-start;
    padding-right: 60px;
    text-align: right;
  }

  /* right column items */
  .tl-item.right {
    align-self: flex-end;
    padding-left: 60px;
    text-align: left;
  }

  .tl-icon {
    width: 48px;
    height: 48px;
    display: inline-block;
    margin-bottom: 10px;
  }

  .tl-title {
    position: relative;
    color: #000D2F;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;              /* 160% */
    margin: 10px  0px;
  }

  .tl-item.left  .tl-title { text-align: right; }
  .tl-item.right .tl-title { text-align: left; }

  /* connector from title to the center line */
  .tl-title::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 44px;
    height: 1px;
    background: #C5C6D1;
  }
  .tl-item.left  .tl-title::before { right: -54px;}
  .tl-item.right .tl-title::before { left: -54px; }

  /* green dot on the center line */
  .tl-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2f9e44;
    transform: translateY(-50%);
  }
  .tl-item.left  .tl-title::after { right: -69.5px; }
  .tl-item.right .tl-title::after { left: -66.5px; }

  .tl-desc {
    color: #62656e;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    max-width: 340px;
  }

  .tl-item.left  .tl-desc { margin-left: auto; }
  .tl-item.right .tl-desc { margin-right: auto; }

  /* ---- responsive: single column on mobile ---- */
  @media (max-width: 768px) {
    .why { padding: 72px 20px 84px; }

    .why h2 {
      font-size: 34px;
      line-height: 38px;
      letter-spacing: -1px;
    }

    .why-lede { font-size: 15.5px; line-height: 24px; margin-bottom: 56px; }

    .timeline::before { left: 12px; }

    .tl-item,
    .tl-item.left,
    .tl-item.right {
      width: 100%;
      align-self: stretch;
      padding: 0 0 0 48px;
      text-align: left;
      margin-bottom: 36px;
    }

    .tl-item.left .tl-title,
    .tl-item.left .tl-desc { text-align: left; margin-left: 0; }

    .tl-item.left .tl-title::before,
    .tl-item.right .tl-title::before {
      left: -42px; right: auto; width: 30px;
    }

    .tl-item.left .tl-title::after,
    .tl-item.right .tl-title::after {
      left: -43.5px; right: auto;
    }
  }

  /* What we preserve, what we transform */

 .split {
    background: #192400;
    padding: 90px 24px 90px;
  }

  .split-inner {
    max-width: 1361px;
    margin: 0 auto;
  }

  /* --- heading --- */
  .split h2 {
    color: #FFF;
    text-align: center;
    font-family: "FONTSPRING DEMO - Roc Grotesk", "Archivo", sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;              /* 100% */
    letter-spacing: -1.44px;
    margin-bottom: 22px;
  }

  .split h2 .accent { color: #BEFF00; }

  /* --- sub description --- */
  .split-lede {
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.1px;
    max-width: 682px;
    margin: 0 auto 56px;
  }

  /* --- two cards --- */
  .split-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }

  .split-card {
    border-radius: 18px;
    padding: 36px 40px 30px;
  }

  .split-card.preserved   { background: #F4F4F4;  padding-bottom: 86px;}
  .split-card.transformed { background: #F1FFD3; }

  /* --- card heading --- */
  .split-card h3 {
    color: #0C021D;
    font-family: "Roboto", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 50px;              /* 192.308% */
    letter-spacing: -1.44px;
    margin-bottom: 8px;
  }

  /* --- card list --- */
  .split-card ul {
    list-style: none;
  }

  .split-card li {
    position: relative;
    color: rgba(12, 2, 29, 0.60);
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;              /* 155.556% */
    letter-spacing: -0.2px;
    padding-left: 22px;
    margin-bottom: 8px;
  }

  .split-card li:last-child { margin-bottom: 0; }

  /* small dot bullet */
  .split-card li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(12, 2, 29, 0.55);
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 900px) {
    .split-cards { gap: 22px; }
    .split-card { padding: 30px 28px 34px; }
    .split-card li { font-size: 16px; line-height: 26px; }
  }

  @media (max-width: 768px) {
    .split { padding: 72px 20px 84px; }

    .split h2 {
      font-size: 34px;
      line-height: 40px;
      letter-spacing: -1px;
      margin-bottom: 18px;
    }

    .split-lede { margin-bottom: 40px; }

    /* stack cards */
    .split-cards { grid-template-columns: 1fr; }

    .split-card h3 {
      font-size: 22px;
      line-height: 36px;
      letter-spacing: -0.8px;
    }
  }

  @media (max-width: 480px) {
    .split-card { padding: 26px 22px 30px; }
    .split-card li { font-size: 15px; line-height: 24px; padding-left: 20px; }
  }

  /* Full NonStop language and platform coverage
 */

  .coverage {
            background: #ffffff;
            padding: 96px 24px 80px;
        }

        .coverage-inner {
            max-width: 1300px;
            margin: 0 auto;
            text-align: center;
            border-radius: 30px;
            border: 1px solid #000;
            padding: 70px 40px;
        }

        /* --- heading --- */
        .coverage h2 {
            color: #000;
            text-align: center;
            font-family: "FONTSPRING DEMO - Roc Grotesk", "Archivo", sans-serif;
            font-size: 50px;
            font-style: normal;
            font-weight: 700;
            line-height: 50px;
            /* 100% */
            letter-spacing: -1.44px;
            margin-bottom: 24px;
        }

        .coverage h2 .muted {
            color: #9b9b9b;
        }

        /* --- description --- */
        .coverage-lede {
            text-align: center;
            color: #000;
            text-align: center;
            font-family: Roboto;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 25px;
            /* 138.889% */
            letter-spacing: -0.2px;
            max-width: 1150px;
            margin: 0 auto 52px;
        }

        /* --- pill chips --- */
        .coverage-chips {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px 10px;
            max-width: 100%;
            margin: 0 auto 50px;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #293707;
            color: #ffffff;
            font-family: "Roboto", sans-serif;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0.01em;
            line-height: 1;
            padding: 19px 46px;
            border-radius: 999px;
            width: 180px;
            white-space: nowrap;
        }

        .chips {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #293707;
            color: #ffffff;
            font-family: "Roboto", sans-serif;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0.01em;
            line-height: 1;
            padding: 19px 46px;
            border-radius: 999px;
            width: 240px;
            white-space: nowrap;
        }


        /* --- italic footnote --- */
        .coverage-note {
            text-align: center;
            color: #000;
            text-align: center;
            font-family: Roboto;
            font-size: 18px;
            font-style: italic;
            font-weight: 400;
            line-height: 26px;
            /* 144.444% */
            max-width: 1182px;
            margin: 0 auto;
        }

        /* ============ RESPONSIVE ============ */
        @media (max-width: 768px) {
            .coverage {
                padding: 72px 20px 84px;
            }

            .coverage h2 {
                font-size: 34px;
                line-height: 40px;
                letter-spacing: -1px;
                margin-bottom: 18px;
            }

            .coverage-lede {
                margin-bottom: 40px;
            }

            .coverage-chips {
                gap: 12px 12px;
                margin-bottom: 44px;
            }

            .chip {
                padding: 15px 30px;
                font-size: 13px;
            }

            .coverage-note {
                font-size: 14px;
                line-height: 23px;
            }
        }

        @media (max-width: 480px) {
            .chip {
                padding: 13px 22px;
                font-size: 12.5px;
            }
        }


        .state{
            background-color: #fff;
            padding-bottom: 90px;
        }

        .state-inner {
            max-width: 1350px;
            margin: 0 auto;
        }


        .state-headline {
            text-align: center;
            color: #0C021D;
            font-family: "FONTSPRING DEMO - Roc Grotesk", "Archivo", sans-serif;
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 50px;
            letter-spacing: -1.44px;
            max-width: 900px;
            margin: 0 auto clamp(22px, 3.5vh, 38px);
        }

        .state-headline .pct {
            color: #8A898A;
            text-align: center;
            font-family: "FONTSPRING DEMO - Roc Grotesk", "Archivo", sans-serif;
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 50px;
            /* 100% */
            letter-spacing: -1.44px;
        }

        .state-headline .dark {
            color: #0C021D;
            font-family: "FONTSPRING DEMO - Roc Grotesk", "Archivo", sans-serif;
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 50px;
            letter-spacing: -1.44px;
        }

        .state-intro {
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .state-intro p {
            color: rgba(12, 2, 29, 0.60);
            text-align: center;
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 25px;
            /* 138.889% */
            letter-spacing: -0.2px;
        }

                .state-outro p {
  color: rgba(12, 2, 29, 0.60);
text-align: center;
text-align: center;
font-family: Roboto;
font-size: 18px;
font-style: italic;
font-weight: 400;
line-height: 25px; /* 138.889% */
letter-spacing: -0.2px;
            margin-top: 40px;
            max-width: 1050px;
            margin: 40px auto;
        }

        .state-intro p+p {
            margin-top: clamp(14px, 2vh, 22px);
        }

        .state-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(16px, 2vw, 28px);
            align-items: start;
            margin-top: 70px;
        }

        .state-card {
            border-radius: 0px;
            padding: 50px;
            background-color: #F4F4F4;
            /* fallback while the webp loads / is missing */
            background-image: url("/services/hpe-nonstop-modernization/images/38 of COBOL to Java migrations miss the budget or the deadline  bg.webp");
            background-size: cover;
            background-repeat: no-repeat;
            height: 330px;
            transition: transform 0.25s ease, background-color 0.25s ease;
        }

        .state-card:hover {
            transform: translateY(-12px);
            border-radius: 0px;
            padding: 50px;
            background-color: #192400;
            /* fallback while the webp loads / is missing */
            background-image: url("/services/hpe-nonstop-modernization/images/COBOL to Java migrations miss the budget or the deadline bg.webp");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .state-card-title {
            color: #0C021D;
            font-family: Roboto;
            font-size: 22px;
            font-style: normal;
            font-weight: 600;
            line-height: 50px;
            /* 192.308% */
            /* letter-spacing: -1.44px; */
            margin-bottom: clamp(12px, 1.6vh, 16px);
        }

        .state-card-body {
            color: rgba(12, 2, 29, 0.60);
            font-family: Roboto;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 28px;
            /* 155.556% */
            letter-spacing: -0.2px;
        }

        .state-card:hover .state-card-title,
        .state-card:hover .state-card-body {
            color: #fff;
        }

        @media (max-width: 1100px) {
            .state-card {
                height: auto;
                min-height: 330px;
            }
        }

        @media (max-width: 860px) {
            .state {
                padding: 72px 20px 84px;
            }

            .state-headline {
                font-size: 30px;
                line-height: 40px;
                letter-spacing: -1px;
            }

            .state-headline .pct,
            .state-headline .dark {
                font-size: 30px;
                line-height: 40px;
                letter-spacing: -1px;
            }

            .state-cards {
                grid-template-columns: 1fr;
                gap: 16px;
                margin-top: 48px;
            }

            .state-card.is-feature {
                margin-top: 0;
                min-height: 0;
            }

            .state-card {
                min-height: 0;
                height: auto;
            }
        }

        /* Target architectures and migration paths */


         .paths {
    background: #F5F5F5;
    padding: 96px 24px 110px;
  }

  .paths-inner {
    max-width: 1300px;
    margin: 0 auto;
  }

  /* --- heading --- */
  .paths h2 {
    color: #000;
    text-align: center;
    font-family: "FONTSPRING DEMO - Roc Grotesk", "Archivo", sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;              /* 100% */
    letter-spacing: -1.44px;
    margin-bottom: 20px;
  }

  .paths h2 .muted { color: #8A898A; }

  /* --- description --- */
  .paths-lede {
    color: rgba(12, 2, 29, 0.60);
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;              /* 138.889% */
    letter-spacing: -0.2px;
    margin: 0 auto 60px;
  }

  /* ============ RADIAL DIAGRAM ============ */
  .paths-diagram {
    position: relative;
    max-width: 1300px;
    height : 700px;
    margin: 0 auto 72px;
  }

  /* dashed connector lines (under everything) */
  .paths-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .paths-lines line {
    stroke: #c9cbc6;
    stroke-width: 1;
    stroke-dasharray: 9 8;
    stroke-linecap: round;
  }

  /* --- center circle --- */
  .paths-circle {
    position: absolute;
    left: 50%;
    top: 300px;
    transform: translate(-50%, -50%);
    width: 192px;
    height: 192px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    background: radial-gradient(circle at 35% 28%, #3a5214 0%, #263a08 55%, #162403 100%);
    background-color: #223500;
    box-shadow:
      0 18px 34px rgba(23, 38, 5, 0.35),
      inset 0 2px 6px rgba(255, 255, 255, 0.14),
      inset 0 -10px 18px rgba(0, 0, 0, 0.35);
    border: 4px solid rgba(255, 255, 255, 0.06);
  }

  .paths-circle span {
    color: #FFF;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;              /* 125% */
    letter-spacing: -0.32px;
  }

  /* --- cards --- */
  .path-card {
    position: absolute;
    width: 300px;
    z-index: 1;
    width: 250px;
    background: #ffffff;
    padding: 25px;
border-radius: 12px;
border: 1px solid #C5C6D1;
background: #FFF;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .path-card h3 {
    color: #223500;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;              /* 111.111% */
    letter-spacing: 0.14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ECECEC;   /* divider between title and description */
    margin-bottom: 14px;
  }

  .path-card p {
    color: #444650;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;              /* 150% */
  }

  /* --- desktop positions (spread out, no overlap) --- */
  .path-card { width: clamp(232px, 21.7%, 279px); }

  .card-java     { left: 15.5%; top: 0; }
  .card-csharp   { left: 67.8%; top: 0; }
  .card-cloud    { left: 2.6%;  top: 230px; }
  .card-services { left: 75.6%; top: 230px; }
  .card-phased   { left: 15.5%; top: 460px; }
  .card-like     { left: 67.8%; top: 460px; }

  /* ============ FOOTNOTE BAR ============ */
  .paths-note {
    background: #E9E9EB;
    padding: 48px;
border-radius: 12px;
border: 1px solid rgba(32, 99, 147, 0.20);
background: rgba(0, 32, 91, 0.05);
backdrop-filter: blur(2px);
    max-width: 1250px;
    margin: 0 auto;
  }

  .paths-note p {
color: #000D2F;
text-align: center;
font-family: Roboto;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 29.25px; /* 162.5% */
    max-width: 903px;
    margin: 0 auto;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1100px) {
    .paths { padding: 72px 20px 84px; }

    .paths h2 {
      font-size: 34px;
      line-height: 40px;
      letter-spacing: -1px;
    }

    .paths-lede {
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 48px;
    }

    /* collapse the radial layout into a stacked flow */
    .paths-diagram {
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-bottom: 48px;
    }

    .paths-lines { display: none; }

    .paths-circle {
      position: static;
      transform: none;
      width: 140px;
      height: 140px;
      margin-bottom: 12px;
    }

    .paths-circle span { font-size: 26px; line-height: 32px; }

    .path-card,
    .card-java, .card-csharp, .card-cloud,
    .card-services, .card-phased, .card-like {
      position: static;
      width: 100%;
      max-width: 420px;
    }

    .paths-note { padding: 22px 22px; }
    .paths-note p { font-size: 14px; line-height: 22px; }
  }


  .faq {
  position: relative;
  background: #ffffff;
  color: #16201a;
  padding: clamp(56px, 9vh, 100px) clamp(20px, 6vw, 80px) clamp(64px, 10vh, 110px);
  overflow: hidden;
}
.faq::before {
  content: '';
  position: absolute;
  left: 0%; top: 0%;
  width: 100%;
height:100%;
opacity:0.3;
  z-index: 0;
  background: url("/services/hpe-nonstop-modernization/images/bg gradient SVG.svg");
background-size:cover;
background-position:center;
background-repeat: no-repeat;
  pointer-events: none;
}
.faq-inner { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; }
.faq-badge { display: flex; justify-content: center; margin-bottom: clamp(16px, 2.4vh, 24px); }
.faq-badge span {
  display: inline-block;
  border-radius: 50px;
border: 1px solid #C7CBDB;
background: #297907;
box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 12px 25px;
color: #FFF;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
text-transform: capitalize;
}
.faq-title { color: #000;
text-align: center;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 50px; /* 100% */
letter-spacing: -1.44px;
 margin-bottom: clamp(26px, 4vh, 44px); }

.faq-label { color: #676D79;
font-family: Inter;
font-size: 15px;
font-style: normal;
text-align:center;
font-weight: 500;
line-height: 20px; /* 133.333% */
 margin-bottom: clamp(16px, 2.4vh, 22px); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border-radius: 12px;
background: #FFF;
box-shadow: 0 0 1px 0 rgba(31, 34, 41, 0.24), 0 2px 6px 0 rgba(31, 34, 41, 0.04);
 overflow: hidden; }
.faq-item.is-extra { display: none; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #1A1D23;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 155.556% */
  padding: clamp(15px, 2vh, 19px) clamp(18px, 2vw, 24px);
  
}
.faq-icon { flex-shrink: 0; width: 18px; height: 18px; position: relative; transition: transform .3s ease; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: #3a7afe; border-radius: 2px; }
.faq-icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.faq-icon::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.faq-q[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { padding: 0 clamp(18px, 2vw, 24px) clamp(16px, 2.2vh, 20px); font-size: 16px; line-height: 1.7; color: #6a766f; font-family: 'Inter'; }
.faq-q:focus-visible,
.faq-more button:focus-visible { outline: 2px solid #2f9438; outline-offset: 2px; }

/*  */

.hpe-cta{
    position:relative;
    overflow:hidden;
    border-radius:34px 34px 0 0;
    min-height:430px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:90px 20px;
    background:#020202;
}

.hpe-cta-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hpe-cta-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.38);
}

.hpe-cta-content{
    position:relative;
    z-index:2;
    width:69%;
}

.hpe-cta-heading{
    color: #FFF;
    text-align: center;
    font-family: "FONTSPRING DEMO - Roc Grotesk", Arial, sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 45px;
    letter-spacing: -0.9px;
    margin-bottom: 20px;
}

.hpe-cta-description{
    font-family: Roboto;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom:40px;
}

.hpe-cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.green-btn{
    position: relative;
    overflow: hidden;

    border-radius: 50px;
    background: #0D1100;
    padding: 20px 20px;
font-family: Inter;
    color: #BEFF00;
    box-shadow: 0 0 10px 0 rgba(190, 255, 0, 0.40);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-transform: capitalize;
    cursor: pointer;
    border: none;

    z-index: 1;
}

/* Smooth Animated Border */
.green-btn::before{
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50px;

    background: conic-gradient(
        from 00deg,
        transparent,
        #BEFF00,
        transparent,
        transparent
    );

    animation: rotateBorder 2.5s linear infinite;

    z-index: -2;
}

/* Inner Background */
.green-btn::after{
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 50px;
    background: #0D1100;
    z-index: -1;
}

/* Smooth Rotation */
@keyframes rotateBorder{
    100%{
        transform: rotate(360deg);
    }
}

/*  footer sec hide  */

.hpe-page .footer-cta {
  display: none;
}


.hpe-page .footer-section{
  border-radius: 0px !important;
}