.why-advanced {
  position: relative;
  padding: 140px clamp(6%, 8vw, 10%);
  background: #020409;
  overflow: hidden;
}

.why-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}

/* LEFT */
.why-left h2 {
  font-size: clamp(2.6rem, 4vw, 3.2rem);
  margin-bottom: 16px;
}

.why-sub {
  max-width: 520px;
  color: rgba(229,231,235,0.65);
  margin-bottom: 48px;
}

.why-points {
  list-style: none;
  padding: 0;
}

.why-points li {
  font-size: 1.05rem;
  padding: 14px 0;
  cursor: pointer;
  color: rgba(229,231,235,0.6);
  border-left: 2px solid transparent;
  padding-left: 16px;
  transition: all .25s ease;
}

.why-points li:hover {
  color: #fff;
  border-color: #7dd3fc;
}

/* RIGHT PANEL */
.why-panel {
  padding: 42px;
  border-radius: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  min-height: 220px;
  transition: transform .3s ease, background .3s ease;
}

.why-panel h3 {
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.why-panel p {
  color: rgba(229,231,235,0.7);
}


#why-us-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.45;       
  pointer-events: none;
}


.why-advanced {
  position: relative;
  padding: 140px clamp(6%, 8vw, 10%);
  background: #020409;
  overflow: hidden;
}

/* shader container */
#why-us-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.45;          /* 🔥 control intensity */
  pointer-events: none;
}

/* content above shader */
.why-wrap {
  position: relative;
  z-index: 2;
}

.why-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 28px;
  padding: 14px 26px;
  border-radius: 14px;

  background: linear-gradient(
    135deg,
    #c9bfbf,
    #222425
  );

  color: #020409;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.why-contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(228, 87, 87, 0.35);
}
@media (max-width: 768px) {

  .why-advanced {
    padding: 80px 20px;
  }

  .why-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .why-left h2 {
    font-size: 2.1rem;
  }

  .why-sub {
    max-width: 100%;
    margin-bottom: 32px;
  }

  .why-points li {
    font-size: 1rem;
    padding: 12px 0;
  }

  .why-panel {
    padding: 28px;
    min-height: auto;
  }

  #why-us-bg {
    opacity: 0.28; /* softer on mobile */
  }

  .why-contact-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {

  .why-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  .why-left h2 {
    font-size: 2.6rem;
  }

  .why-panel {
    padding: 34px;
  }
}

@media (min-width: 1600px) {

  .why-advanced {
    padding: 160px 10%;
  }

  .why-left h2 {
    font-size: 3.6rem;
  }

  .why-panel {
    padding: 52px;
  }
}