.features-section {
    /* padding: 90px 0; */
    color: #fff;
  }
  
  .section-title {
    margin-bottom: 48px;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.04em;
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 38px;
  }
  
  .feature-card {
    position: relative;
    overflow: hidden;
    min-height: 182px;
    padding: 46px 36px;
    border-radius: 18px;
    /* background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03)), #1a1a1a; */
    background: linear-gradient(360deg,rgba(255,255,255,0.02), rgba(255,255,255,0.06) );
    border: 1px solid rgba(255,255,255,0.12);
    transition: transform 0.35s ease, border-color 0.35s ease;
  }
  
  .feature-card::before {
    content: "";
    position: absolute;
    inset: -60%;
    /* background: linear-gradient(120deg, transparent 35%, rgba(0, 224, 164, 0.18) 45%,   rgba(255, 255, 255, 0.16) 50%,  rgba(124, 60, 255, 0.18) 55%,  transparent 65%); */
    background: linear-gradient(120deg, transparent 35%, rgba(166, 166, 166, 0.092) 50%,   rgba(20, 20, 20, 0.18) 70%,  transparent 65%);

    transform: translateX(-35%) rotate(12deg);
    opacity: 0;
    transition: transform 0.7s ease, opacity 0.35s ease;
  }
  
  .feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.28);
  }
  
  .feature-card:hover::before {
    opacity: 1;
    transform: translateX(35%) rotate(12deg);
  }
  
  .feature-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    font-size: clamp(42px, 5vw, 56px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.82);
    /* text-shadow: 0 5px 0 rgba(0,0,0,0.35); */
    transition: color 0.35s ease, text-shadow 0.35s ease;

    background: linear-gradient(180deg,rgb(243 243 243) 0%, rgb(126 126 126) 85%, rgb(243 243 243) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff00;
  }
  
  .feature-card:hover h3 {
    /* color: #fff;
    text-shadow:
      0 5px 0 rgba(0,0,0,0.35),
      0 0 24px rgba(0, 183, 224, 0.35); */
  }
  
  .feature-card p {
    position: relative;
    z-index: 1;
    max-width: 230px;
    margin: 0;
    color: rgba(255,255,255,0.48);
    font-size: 16px;
    line-height: 1.25;
  }
  
  @media (max-width: 992px) {
    .features-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 576px) {
    .features-grid {
      grid-template-columns: 1fr;
      gap: 22px;
    }
  
    .feature-card {
      min-height: 160px;
      padding: 34px 28px;
    }
  }