@use "../../../../styles/abstracts/variables" as *;

.how {
  position: relative;
  padding: 8rem 2rem;
  background: #0a0a0a;
  color: #fff;
  font-family: $font-onest, sans-serif;
  overflow: hidden;

  .bgGlow {
    position: absolute;
    inset: -20%;
    background:
      radial-gradient(circle at top right, rgba(247,147,26,0.08), transparent 45%),
      radial-gradient(circle at bottom left, rgba(247,147,26,0.05), transparent 60%);
    z-index: 0;
    filter: blur(120px);
  }

  .bgPattern {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: linear-gradient(to bottom, black, transparent 70%);
    z-index: 0;
  }

  .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Header */
  .header {
    text-align: center;
    margin-bottom: 5rem;

    h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      color: #fbbf24;
      margin-bottom: 1rem;
      text-shadow: 0 0 10px rgba(247,147,26,0.5);
    }

    p {
      font-size: 1rem;
      line-height: 1.6;
      color: #cbd5e1;
      max-width: 650px;
      margin: 0 auto;
    }
  }

  /* Steps Grid */
  .steps {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    flex-wrap: wrap;

    .card {
      position: relative;
      background: rgba(255,255,255,0.03);
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(18px);
      padding: 2.5rem 2rem;
      text-align: center;
      flex: 1 1 30%;
      min-width: 280px;
      transition: all 0.35s ease;

      &:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 15px 45px rgba(247,147,26,0.25);
      }

      .stepNumber {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 50px;
        background: #f7931a;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        color: #0a0a0a;
        font-size: 1.1rem;
        box-shadow: 0 10px 25px rgba(247,147,26,0.4);
        z-index: 2;
      }

      .icon {
        font-size: 2.5rem;
        color: #f7931a;
        width: 70px;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem auto;
        border-radius: 50%;
        background: rgba(247,147,26,0.12);
        box-shadow: 0 6px 18px rgba(247,147,26,0.15);
      }

      h3 {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 0.6rem;
      }

      p {
        font-size: 0.95rem;
        color: #cbd5e1;
        line-height: 1.5;
      }

      .connector {
        position: absolute;
        bottom: -2.5rem;
        left: 50%;
        width: 4px;
        height: 60px;
        background: linear-gradient(to bottom, #f7931a, rgba(247,147,26,0.2));
        transform: translateX(-50%);
        border-radius: 2px;
        z-index: 0;
      }
    }
  }

  @media (max-width: 1024px) {
    .steps {
      flex-direction: column;
      align-items: center;

      .card {
        width: 100%;
        min-width: 0;

        .connector {
          bottom: -2.5rem;
          left: 50%;
        }
      }
    }
  }

  @media (max-width: 640px) {
    padding: 6rem 1.5rem;

    .header h2 {
      font-size: clamp(1.8rem, 7vw, 2.5rem);
    }

    .card .icon {
      width: 60px;
      height: 60px;
      font-size: 2rem;
    }

    .card .stepNumber {
      width: 40px;
      height: 40px;
      font-size: 1rem;
    }

    .card .connector {
      height: 50px;
    }
  }
}