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

.services{
  padding: 120px 24px;
  background:
    radial-gradient(1200px 600px at 50% 10%, rgba(18, 59, 124, 0.12), transparent),
    linear-gradient(180deg, #0a183a, #09142c);
}

.services__wrap{max-width:1360px;margin:0 auto}
.services__title{
  text-align:center;
  font-size:clamp(36px,3vw,52px);
  font-weight:800;
  color:#fff;
  margin-bottom:64px;
}

.services__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 3fr));
  gap:32px;
}

/* card */
.service-card{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 32px;
  min-height: 280px;

  background: linear-gradient(
    180deg,
    rgba(18,30,58,.98),
    rgba(12,22,40,.98)
  );

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

  box-shadow:
    /* нижняя чёрная тень (основная) */
    0 45px 90px rgba(0,0,0,.65),

    /* чёткий низ карточки */
    0 18px 36px rgba(0,0,0,.45),

    /* тонкий светлый контур */
    0 0 0 1px rgba(255,255,255,.04),

    /* мягкий свет сверху */
    0 -10px 28px rgba(120,160,255,.10);

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


.service-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 55px 120px rgba(70, 70, 70, 0.65),
    0 0 0 1px rgba(212, 209, 209, 0.06),
    0 -18px 44px rgba(74, 75, 77, 0.18);
}


/* icon */
.service-card__icon{
  width:80px;height:80px;border-radius:16px;
  display:grid;place-items:center;
  margin-bottom:18px;
  color:#6fa0ff;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.service-card__icon svg{
  width: 40px;   /* было ~24 */
  height: 50px;
}


.service-card__title{
  font-size:25px;
  font-weight:700;
  color:#fff;
  line-height:1.35;
  max-width: 90%;
}

/* overlay (hidden by default) */
.service-card__overlay{
  position:absolute;
  inset:0;
  padding:28px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;

  background: rgba(15,25,45,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
}

/* show only for hovered card */
.service-card:hover .service-card__overlay{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.service-card__overlay-text{
  font-size:16px;
  line-height:1.7;
  color: rgba(234,241,255,.72);
  margin: 0 auto 18px;
  max-width: 360px;
}

.service-card__overlay-link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  color:#6fa0ff;
  font-weight:700;
  text-decoration:none;
}

.service-card__overlay-link:hover{
  text-decoration: underline;
}

/* ===== LIGHT THEME ===== */
html[data-theme="light"] .services{
  background:
    radial-gradient(1200px 600px at 50% 10%, rgb(245, 242, 242), transparent),
    linear-gradient(180deg, #ffffff, #fcfcfc);
}
html[data-theme="dark"] .service-card__icon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 28px rgba(120,160,255,.22);
}


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

html[data-theme="light"] .service-card{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}

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

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

html[data-theme="light"] .service-card__overlay-text{
  color: rgba(17,24,39,.65);
}

html[data-theme="light"] .service-card__overlay-link{
  color:#3b82f6;
}
/* ===== LIGHT THEME: BLUE SHADOW FOR SERVICE ICONS ===== */
html[data-theme="light"] .service-card__icon{
  background: #ffffff;

  box-shadow:
    0 14px 30px rgba(34, 42, 56, 0.18),   /* основная синяя тень */
    0 6px 14px rgba(36, 38, 41, 0.12),    /* мягкая глубина */
    inset 0 1px 0 rgba(255,255,255,.95);

  color: #3b82f6; /* иконка остаётся синей */
}

/* при hover карточки — тень усиливается */
html[data-theme="light"] .service-card:hover .service-card__icon{
  transform: translateY(-3px);
  box-shadow:
    0 22px 48px rgba(59,130,246,.28),
    0 10px 22px rgba(59,130,246,.18),
    inset 0 1px 0 rgba(255,255,255,1);
}