/* ============================================================
   Akdeniz — единый стиль карточек: срезанный угол, свет из него
   и свой цвет у каждой. Разметка внутри у всех своя.
   ============================================================ */

/* ---------- общая оболочка ---------- */
.card--svc,
.steps li,
.gains li{
  --svc:var(--accent);
  /* правый верхний угол срезан крупнее остальных — оттуда и бьёт свет */
  border-radius:18px 38px 18px 18px;
  background:
    /* тугое пятно прямо в срезанном углу */
    radial-gradient(58% 42% at 100% 0%, color-mix(in srgb, var(--svc) 78%, transparent) 0%, transparent 72%),
    /* и мягкий разлив от него внутрь карточки */
    radial-gradient(125% 95% at 100% 0%, color-mix(in srgb, var(--svc) 26%, transparent) 0%, transparent 60%),
    var(--glass);
  /* кайма из edge.css перекрашивается в цвет карточки */
  --edge-warm:var(--svc);
  --edge-warm-2:color-mix(in srgb, var(--svc) 55%, #eaf6fb);
  --edge-cold:rgba(143,178,198,.06);
  transition:translate .35s var(--ease-out), box-shadow .35s var(--ease-out);
}

/* запасной вариант там, где color-mix не понимают */
@supports not (color: color-mix(in srgb, red, blue)){
  .card--svc,.steps li,.gains li{
    background:linear-gradient(200deg, rgba(53,224,200,.18), transparent 55%), var(--glass);
  }
}

/* ---------- палитра ---------- */
.card--web { --svc:#35e0c8; }
.card--shop{ --svc:#5aa9e6; }
.card--care{ --svc:#e8b06b; }

.steps li:nth-child(1),
.gains li:nth-child(1){ --svc:#35e0c8; }
.steps li:nth-child(2),
.gains li:nth-child(2){ --svc:#5ad0e6; }
.steps li:nth-child(3),
.gains li:nth-child(3){ --svc:#5aa9e6; }
.steps li:nth-child(4),
.gains li:nth-child(4){ --svc:#e8b06b; }


/* ---------- наведение: свет из угла разгорается ---------- */
.card--svc:hover,
.steps li:hover,
.gains li:hover{
  translate:0 -4px;
  box-shadow:var(--glass-edge),
             0 22px 46px rgba(2,10,18,.5),
             0 0 42px -14px color-mix(in srgb, var(--svc) 60%, transparent);
}

/* ---------- карточки услуг: своя раскладка ---------- */
.card--svc{
  display:flex; flex-direction:column;
  padding:0;                       /* внутренние поля раздают части карточки */
  overflow:hidden;                 /* полка должна лечь по радиусу */
}

/* шапка: номер услуги */
.svc__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 0;
}
.svc__num{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--foam-dim);
}

/* середина: заголовок и подпись по центру */
.card--svc h3{
  margin:26px 0 8px; padding:0 20px;
  font-size:21px; font-weight:700; letter-spacing:-.025em;
  text-align:center;
}
.card--svc .svc__sub{
  margin:0 0 18px; padding:0 20px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.01em;
  text-align:center; color:var(--svc);
}
.card--svc .svc__text{
  margin:0 0 24px; padding:0 22px;
  font-size:14px; line-height:1.6; text-align:center;
  color:var(--foam-dim);
}

/* полка: срок слева, кнопка справа */
.svc__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding:12px 16px 12px 20px;
  border-top:1px solid var(--hair);
  background:rgba(3,14,24,.4);
}
.svc__meta{ display:flex; flex-direction:column; gap:2px; }
.svc__price{ font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--foam); }
.svc__term{ font-size:12px; color:var(--foam-dim); }
.card--svc .svc__go{
  padding:8px 15px; border-radius:100px;
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  color:var(--svc);
  background:color-mix(in srgb, var(--svc) 12%, transparent);
  transition:background .25s, color .25s;
}
.card--svc .svc__go::after{ content:" →"; }
.card--svc .svc__go:hover{ background:var(--svc); color:#03202b; }

/* ---------- шаги: номер остаётся слева, он ведёт по проводу ---------- */
.steps li{ padding:24px 22px 22px; }
.steps b{ color:var(--svc); }

/* ---------- цифры: по центру, как у услуг ---------- */
.gains li{ align-items:center; text-align:center; padding:26px 20px; }
.gains b{ color:var(--foam); }

@media (max-width:900px){
  .card--svc h3{ margin-top:20px; }
  .card--svc:hover,.steps li:hover,.gains li:hover{ translate:none; }
}
@media (prefers-reduced-motion:reduce){
  .card--svc:hover,.steps li:hover,.gains li:hover{ translate:none; }
}