* { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
      background: #06070b;
      color: #eef2f8;
    }

    .ni-process-section {
      position: relative;
      overflow: hidden;
      padding: 92px 0 105px;
      background:
        radial-gradient(circle at 18% 18%, rgba(25,181,241,0.06), transparent 22%),
        radial-gradient(circle at 82% 80%, rgba(235,75,63,0.05), transparent 20%),
        linear-gradient(180deg, #070910 0%, #0b0f18 55%, #101522 100%);
    }

    .ni-process-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.03), transparent 48%);
      pointer-events: none;
    }

    .ni-process-container {
      width: min(1280px, calc(100% - 48px));
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .ni-process-header {
      max-width: 940px;
      margin-bottom: 34px;
      position: relative;
      z-index: 3;
    }

    .ni-process-eyebrow {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.28em;
      color: #19b5f1;
      margin-bottom: 12px;
    }

    .ni-process-title {
      font-size: clamp(24px, 2.1vw, 38px);
      line-height: 1.14;
      margin: 0;
      color: #eef2f8;
      text-wrap: balance;
    }

    .ni-process-stageword {
      position: absolute;
      left: 50%;
      top: 54%;
      transform: translate(-50%, -50%);
      font-size: clamp(90px, 17vw, 220px);
      line-height: 0.85;
      font-weight: 800;
      letter-spacing: -0.06em;
      color: rgba(255,255,255,0.02);
      -webkit-text-stroke: 1px rgba(14, 19, 34, 0.82);
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
      transition: opacity .35s ease, transform .35s ease;
      z-index: 1;
      text-transform: uppercase;
    }

    .ni-process-grid {
      display: grid;
      grid-template-columns: 0.9fr 1fr 0.95fr;
      gap: 34px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .ni-process-list {
      display: grid;
      gap: 12px;
      position: relative;
      z-index: 3;
    }

    .ni-process-item {
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.018));
      color: rgba(236,241,248,0.88);
      padding: 15px 18px;
      text-align: left;
      border-radius: 16px;
      transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
      position: relative;
    }

    .ni-process-item small {
      display: block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: #19b5f1;
      margin-bottom: 6px;
    }

    .ni-process-item strong {
      display: block;
      font-size: 16px;
      line-height: 1.35;
    }

    .ni-process-item:hover,
    .ni-process-item.active {
      transform: translateY(-1px);
      color: #fff;
      background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.03));
      border-color: rgba(25,181,241,0.26);
      box-shadow: 0 12px 28px rgba(0,0,0,0.16), 0 0 0 1px rgba(25,181,241,0.05) inset;
    }

    .ni-process-visual-wrap {
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: center;
    }

    .ni-process-visual {
      width: min(520px, 100%);
      aspect-ratio: 1 / 1.18;
      border-radius: 30px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
      box-shadow: 0 22px 44px rgba(0,0,0,0.16);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .ni-process-canvas {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.7;
    }

    .ni-growth-stage {
      position: absolute;
      inset: 18px;
      border-radius: 22px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.06);
    }

    .ni-growth-ground {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 38%;
      background:
        radial-gradient(circle at 20% 40%, rgba(255,255,255,0.04), transparent 18%),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.035), transparent 18%),
        linear-gradient(180deg, #181419 0%, #120f14 100%);
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    .ni-growth-path {
      position: absolute;
      left: 50%;
      bottom: 20%;
      width: 6px;
      height: 56%;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(25,181,241,0.08), rgba(25,181,241,0.2), rgba(235,75,63,0.18));
      overflow: visible;
      box-shadow: 0 0 20px rgba(25,181,241,0.08);
    }

    .ni-growth-fill {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 12%;
      border-radius: inherit;
      background: linear-gradient(180deg, #19b5f1, #eb4b3f);
      transition: height .7s cubic-bezier(.22,.61,.36,1);
      box-shadow: 0 0 18px rgba(25,181,241,0.22);
    }

    .ni-growth-node {
      position: absolute;
      left: 50%;
      width: 16px;
      height: 16px;
      transform: translateX(-50%) scale(0.9);
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.16);
      transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
    }

    .ni-growth-node.active {
      background: #19b5f1;
      box-shadow: 0 0 18px rgba(25,181,241,0.45);
      transform: translateX(-50%) scale(1);
    }

    .ni-growth-node.n1 { bottom: 4%; }
    .ni-growth-node.n2 { bottom: 16%; }
    .ni-growth-node.n3 { bottom: 28%; }
    .ni-growth-node.n4 { bottom: 40%; }
    .ni-growth-node.n5 { bottom: 52%; }
    .ni-growth-node.n6 { bottom: 66%; }
    .ni-growth-node.n7 { bottom: 82%; }

    .ni-seed {
      position: absolute;
      left: 50%;
      bottom: 16%;
      width: 28px;
      height: 36px;
      transform: translateX(-50%);
      border-radius: 50% 50% 45% 45%;
      background: linear-gradient(180deg, #6d4c41, #3a2a23);
      box-shadow: 0 10px 24px rgba(0,0,0,0.22);
      transition: transform .55s ease, opacity .55s ease;
    }

    .ni-roots {
      position: absolute;
      left: 50%;
      bottom: 15%;
      width: 220px;
      height: 130px;
      transform: translateX(-50%);
      opacity: 0.12;
      transition: opacity .5s ease;
    }

    .ni-root-line {
      position: absolute;
      width: 2px;
      background: linear-gradient(180deg, rgba(235,75,63,0.42), rgba(255,255,255,0.04));
      border-radius: 999px;
      transform-origin: top center;
    }

    .ni-root-line.r1 { height: 86px; left: 108px; top: 10px; transform: rotate(-18deg); }
    .ni-root-line.r2 { height: 76px; left: 108px; top: 16px; transform: rotate(18deg); }
    .ni-root-line.r3 { height: 72px; left: 108px; top: 16px; transform: rotate(-38deg); }
    .ni-root-line.r4 { height: 72px; left: 108px; top: 16px; transform: rotate(38deg); }
    .ni-root-line.r5 { height: 64px; left: 108px; top: 22px; transform: rotate(-60deg); }
    .ni-root-line.r6 { height: 64px; left: 108px; top: 22px; transform: rotate(60deg); }

    .ni-sprout {
      position: absolute;
      left: 50%;
      bottom: 32%;
      width: 8px;
      height: 0;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(180deg, #34d399, #2aa870);
      transition: height .65s cubic-bezier(.22,.61,.36,1);
    }

    .ni-leaf {
      position: absolute;
      border-radius: 100% 0 100% 0;
      background: linear-gradient(145deg, #34d399, #209a63);
      opacity: 0;
      transition: opacity .45s ease, transform .45s ease;
      box-shadow: 0 10px 18px rgba(0,0,0,0.12);
    }

    .ni-leaf.l1 { width: 36px; height: 18px; left: calc(50% - 36px); bottom: 48%; transform: rotate(-22deg) scale(0.7); }
    .ni-leaf.l2 { width: 42px; height: 20px; left: calc(50% + 2px); bottom: 54%; transform: rotate(158deg) scale(0.7); }
    .ni-leaf.l3 { width: 34px; height: 16px; left: calc(50% - 34px); bottom: 61%; transform: rotate(-32deg) scale(0.7); }
    .ni-leaf.l4 { width: 38px; height: 18px; left: calc(50% + 4px); bottom: 68%; transform: rotate(148deg) scale(0.7); }

    .ni-bloom {
      position: absolute;
      left: 50%;
      bottom: 76%;
      width: 70px;
      height: 70px;
      transform: translateX(-50%) scale(0.6);
      opacity: 0;
      transition: opacity .55s ease, transform .55s ease;
      filter: drop-shadow(0 10px 18px rgba(235,75,63,0.16));
    }

    .ni-bloom::before,
    .ni-bloom::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,210,120,0.96) 0 18%, rgba(235,75,63,0.92) 20% 52%, rgba(255,255,255,0) 54%);
    }

    .ni-bloom::after {
      transform: rotate(45deg);
    }

    .ni-stage-glow {
      position: absolute;
      left: 50%;
      bottom: 11%;
      width: 220px;
      height: 56px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(235,75,63,0.18), rgba(25,181,241,0.06), transparent 72%);
      filter: blur(22px);
    }

    .ni-process-detail {
      position: relative;
      z-index: 3;
      padding: 28px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 20px 42px rgba(0,0,0,0.14);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .ni-process-detail-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.24em;
      color: #19b5f1;
      margin-bottom: 12px;
    }

    .ni-process-detail h3 {
      margin: 0 0 10px;
      font-size: clamp(24px, 2vw, 34px);
      line-height: 1.06;
      color: #f4f7fb;
    }

    .ni-process-detail p {
      margin: 0;
      color: rgba(235,241,248,0.78);
      font-size: 15px;
      line-height: 1.78;
    }

    .ni-process-subtext {
      margin-top: 14px;
      font-size: 13px;
      line-height: 1.7;
      color: rgba(235,241,248,0.58);
    }

    .ni-process-mini-title {
      margin-top: 20px;
      margin-bottom: 10px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: #19b5f1;
    }

    .ni-process-notes {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .ni-process-notes span {
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      font-size: 13px;
      color: rgba(245,247,251,0.9);
    }

    @media (max-width: 1100px) {
      .ni-process-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .ni-process-stageword {
        top: 26%;
        font-size: clamp(70px, 16vw, 180px);
      }

      .ni-process-visual-wrap {
        order: 2;
      }

      .ni-process-detail {
        order: 3;
      }
    }

    @media (max-width: 767px) {
      .ni-process-section {
        padding: 64px 0 72px;
      }

      .ni-process-container {
        width: min(100% - 32px, 1280px);
      }

      .ni-process-title {
        font-size: clamp(22px, 7vw, 32px);
        line-height: 1.16;
      }

      .ni-process-stageword {
        top: 22%;
      }

      .ni-process-detail {
        padding: 24px;
      }
    }

    .ni-process-hotspots {
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
    }

    .ni-process-hotspot {
      position: absolute;
      pointer-events: auto;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
    }

    .ni-process-hotspot.seed { left: calc(50% - 22px); bottom: 13.5%; width: 44px; height: 48px; }
    .ni-process-hotspot.roots { left: calc(50% - 118px); bottom: 12%; width: 236px; height: 118px; }
    .ni-process-hotspot.sprout { left: calc(50% - 24px); bottom: 30%; width: 48px; height: 122px; }
    .ni-process-hotspot.leaf1 { left: calc(50% - 74px); bottom: 45%; width: 78px; height: 40px; }
    .ni-process-hotspot.leaf2 { left: calc(50% + 2px); bottom: 51.5%; width: 84px; height: 44px; }
    .ni-process-hotspot.leaf3 { left: calc(50% - 70px); bottom: 58.5%; width: 72px; height: 36px; }
    .ni-process-hotspot.leaf4 { left: calc(50% + 4px); bottom: 65.5%; width: 78px; height: 40px; }
    .ni-process-hotspot.bloom { left: calc(50% - 42px); bottom: 73.5%; width: 84px; height: 84px; }

    @media (max-width: 767px) {
      .ni-process-hotspot.seed { left: calc(50% - 20px); width: 40px; height: 44px; }
      .ni-process-hotspot.roots { left: calc(50% - 104px); width: 208px; height: 108px; }
      .ni-process-hotspot.sprout { left: calc(50% - 22px); width: 44px; }
      .ni-process-hotspot.leaf1 { left: calc(50% - 68px); width: 70px; }
      .ni-process-hotspot.leaf2 { width: 74px; }
      .ni-process-hotspot.leaf3 { width: 66px; }
      .ni-process-hotspot.leaf4 { width: 70px; }
      .ni-process-hotspot.bloom { left: calc(50% - 38px); width: 76px; height: 76px; }
    }