.process-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background:
      radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 32%),
      radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.1), transparent 28%),
      linear-gradient(135deg, #0B1628 0%, #10243E 100%);
  }
  
  .process-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    pointer-events: none;
  }
  
  .process__header {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 64px;
    text-align: center;
  }
  
  .process__header .eyebrow {
    color: #38BDF8;
  }
  
  .process__header h2 {
    margin-bottom: 18px;
    color: #FFFFFF;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.08;
  }
  
  .process__header p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
  }
  
  .process__timeline {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    gap: 26px;
  }
  
  .process__timeline::before {
    content: "";
    position: absolute;
    left: 42px;
    top: 34px;
    bottom: 34px;
    width: 1px;
    background: linear-gradient(
      180deg,
      rgba(56, 189, 248, 0),
      rgba(56, 189, 248, 0.7),
      rgba(56, 189, 248, 0)
    );
  }
  
  .process-step {
    position: relative;
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 28px;
    align-items: stretch;
    padding: 8px;
    border-radius: 34px;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.035)
      );
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  }
  
  .process-step__number {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    margin: 10px 0 10px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.24);
    color: #38BDF8;
    font-weight: 900;
    letter-spacing: 0.06em;
  }
  
  .process-step__content {
    padding: 28px 28px 28px 0;
  }
  
  .process-step__content h3 {
    margin-bottom: 10px;
    color: #FFFFFF;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.15;
  }
  
  .process-step__content p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1rem;
  }
  
  .process-step {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }
  
  .process-step.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .process-step:hover {
    border-color: rgba(56, 189, 248, 0.28);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.3);
  }
  
  @media (max-width: 720px) {
    .process-section {
      padding: 76px 0;
    }
  
    .process__header {
      margin-bottom: 42px;
      text-align: left;
    }
  
    .process__timeline::before {
      left: 34px;
    }
  
    .process-step {
      grid-template-columns: 70px 1fr;
      gap: 18px;
      border-radius: 28px;
    }
  
    .process-step__number {
      width: 56px;
      height: 56px;
      margin: 10px 0 10px 8px;
      border-radius: 18px;
    }
  
    .process-step__content {
      padding: 22px 18px 22px 0;
    }
  }