/* страховка: светлая тема всегда перекрывает фон/цвет */
html[data-theme="light"] body{
  background: var(--bg-light);
  color: var(--text-light);
}

/* ===== BENEFITS ===== */
.benefits{
  padding: 120px 24px;
  background:
  #0b1a33;

}

.benefits__wrap{
  max-width: 1200px;
  margin: 0 auto;
}

.benefits__title{
  text-align:center;
  font-size: clamp(36px, 3vw, 52px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 70px;
}

/* 4 items */
.benefits__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: start;
}

/* item */
.benefit{
  text-align:center;
}

/* circle icon */
.benefit__icon{
  width: 112px;
  height: 112px;
  margin: 0 auto 22px;
  border-radius: 999px;

  display:grid;
  place-items:center;

  color: #6fa0ff;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);

  box-shadow:
    0 35px 90px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    0 -12px 32px rgba(120,160,255,.12);

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

.benefit__icon svg{
  width: 60px;
  height: 60px;
}

.benefit:hover .benefit__icon{
  transform: translateY(-6px);
  box-shadow:
    0 50px 120px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.06),
    0 -16px 44px rgba(120,160,255,.18);
}

/* label */
.benefit__label{
  font-size: 18px;
  font-weight: 700;
  color: rgba(234,241,255,.92);
}

/* ===== LIGHT THEME ===== */
html[data-theme="light"] .benefits{
  background:
    radial-gradient(1200px 600px at 50% 10%, rgba(59,130,246,.08), transparent),
    linear-gradient(180deg, #f7f9fc, #eef2f7);
}

html[data-theme="light"] .benefits__title{
  color: #111827;
}

html[data-theme="light"] .benefit__label{
  color: rgba(17,24,39,.88);
}

html[data-theme="light"] .benefit__icon{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.08);

  box-shadow:
    0 22px 60px rgba(0,0,0,.12),
    0 10px 24px rgba(0,0,0,.08),
    0 14px 28px rgba(59,130,246,.14);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
  .benefits__grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 520px){
  .benefits__grid{grid-template-columns: 1fr;}
  .benefit__icon{width: 96px;height: 96px;}
}