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

.section {
  background:
    radial-gradient(circle at top, rgba(247,147,26,0.1), transparent 45%),
    #0a0a0a;
  color: #fff;
  padding: 6rem 2rem;
  font-family: $font-onest, sans-serif;

  .container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 3rem;

    @media (min-width: 1024px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    .badge {
      width: fit-content;
      padding: 0.45rem 0.85rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      background: rgba(247,147,26,0.14);
      color: #fbbf24;
    }

    h3 {
      font-size: 1.9rem;
      font-weight: 800;
    }

    p {
      font-size: 1rem;
      line-height: 1.6;
      color: #cbd5e1;
    }
  }

  .right {
    .stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }

      .card {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        backdrop-filter: blur(18px);
        border-radius: 24px;
        padding: 2rem 1.8rem;
        text-align: center;
        cursor: default;
        transition: all 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
        animation: float 6s ease-in-out infinite;

        &:hover {
          transform: translateY(-8px) scale(1.02);
          box-shadow: 0 20px 60px rgba(255, 183, 3, 0.3);
        }

        .icon {
          width: 65px;
          height: 65px;
          margin: 0 auto 1rem;
          border-radius: 50%;
          background: rgba(247,147,26,0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #f7931a;
          font-size: 1.6rem;
        }

        .value {
          font-size: 1.9rem;
          font-weight: 800;
          color: #fbbf24;
          margin-bottom: 0.5rem;
        }

        .label {
          font-size: 1rem;
          color: #cbd5e1;
        }

        &:nth-child(2) { animation-delay: 0.8s; }
        &:nth-child(3) { animation-delay: 1.6s; }
        &:nth-child(4) { animation-delay: 2.4s; }
      }
    }
  }

  @keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }

  @media (max-width: 640px) {
    .container {
      grid-template-columns: 1fr;
    }

    .right .stats {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }
}