/* ============================== */
/* HOW-IT-WORK — Neon restyle     */
/* ============================== */

.hiw{
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
 border: none;
  border-radius: var(--brad);
  /* overflow: hidden; */

  /* неоновый фон секции */
 
 
}

/* левая колонка (контент) */
.hiw > div:first-child{
  z-index: 2;
}

.hiw h2{
  color: var(--textMain);
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 0 24px rgba(143,96,255,.24);
}

.hiw p{
  color: var(--textP);
  margin-bottom: 18px;
  line-height: 1.75;
  max-width: 60ch;
}



/* правая колонка (медиа) */
.hiw__media{
  position: relative;
  z-index: 1;
  border-radius: calc(var(--brad) - 8px);
  overflow: hidden;
  /* стекло + рамка */
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 12px 32px rgba(0,0,0,.45),
    0 0 36px rgba(134,139,255,.22);
  transition: transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.hiw__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  max-height: 600px;
}

/* неоновая дуга/свечение за картинкой */
.hiw__media::before{
  content: "";
  position: absolute; inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 50%,
    rgba(134,139,255,.28), rgba(143,96,255,.18), transparent 70%);
  filter: blur(18px);
  z-index: -1;
}
.hiw__media:hover{
  transform: translateY(-4px);
  border-color: rgba(134,139,255,.45);
  box-shadow:
    0 0 22px rgba(134,139,255,.35),
    0 0 48px rgba(143,96,255,.28),
    0 16px 40px rgba(0,0,0,.55);
}


/* ============================== */
/* Адаптив                        */
/* ============================== */
@media (max-width: 1024px){
  .hiw{ grid-template-columns: 1fr; }
  .hiw__media{ order: 2; }
  .hiw > div:first-child{ order: 1; }
}
@media (max-width: 768px){
  .hiw{
    padding: 28px 20px;
    border-radius: calc(var(--brad) - 8px);
  }
  .hiw h2{ font-size: clamp(28px, 7vw, 40px); }
  .hiw__labels li{ font-size: 12px; padding: 7px 12px; }
}