:root{
  --gold:#FFD700; --gold-2:#e0bc00;
  --ink:#111; --panel:#171717; --line:#262626; --muted:#cfcfcf;
}

/* Секция */
#services.svc-tiles{
  position:relative; z-index:20;
  background:#111; color:#fff; padding:84px 0;
}

/* Шапка */
#services.svc-tiles .tiles-head{ text-align:center; margin-bottom:22px; }
#services.svc-tiles .tiles-eyebrow{
  display:inline-block; font-weight:800; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); background:rgba(255,215,0,.14);
  padding:6px 10px; border-radius:999px; margin-bottom:10px;
}
#services.svc-tiles .tiles-title{ margin:6px 0 0; color:var(--gold); font-size:36px; line-height:1.2; }

/* Сетка */
#services.svc-tiles .tiles-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap:22px;
  margin-top:22px;
}

/* Карточка */
#services.svc-tiles .tile{
  grid-column: span 6;
  background:linear-gradient(180deg,#1a1a1a,#141414);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  position:relative; isolation:isolate;
  cursor:pointer; outline:none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, grid-column .25s ease;
  box-shadow:0 12px 26px rgba(0,0,0,.35);
}
#services.svc-tiles .tile:hover{ transform: translateY(-4px); }
#services.svc-tiles .tile:focus-visible{ box-shadow:0 0 0 3px rgba(255,215,0,.35); }
#services.svc-tiles .tile::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, rgba(255,215,0,0), rgba(255,215,0,.75), rgba(255,215,0,0));
  opacity:.9;
}

/* Активная плитка — шире и «подсвечена» */
#services.svc-tiles .tile.is-active{
  grid-column: span 12;
  border-color:#2b2b2b;
  box-shadow:0 22px 46px rgba(0,0,0,.5), 0 0 0 2px rgba(255,215,0,.10) inset;
}

/* Иконка/заголовок/текст */
#services.svc-tiles .tile-icon{
  width:64px; height:64px; border-radius:16px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,215,0,.11); border:1px solid rgba(255,215,0,.25);
  color:var(--gold); font-size:28px; box-shadow: inset 0 0 0 1px rgba(255,215,0,.18);
}
#services.svc-tiles .tile-title{ margin:2px 0 8px; font-size:22px; color:#fff; }

/* Текст: скрыт по умолчанию, виден в активной плитке */
#services.svc-tiles .tile-text{
  margin:0; color:#d7d7d7; line-height:1.75; font-size:16px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .25s ease, opacity .25s ease;
}
#services.svc-tiles .tile.is-active .tile-text{
  max-height: 2000px; /* заведомо большое значение */
  opacity: 1;
}

/* Адаптив */
@media (max-width: 1024px){
  #services.svc-tiles .tile{ grid-column: span 12; }
  #services.svc-tiles .tiles-title{ font-size:30px; }
}
@media (max-width: 560px){
  #services.svc-tiles{ padding:64px 0; }
  #services.svc-tiles .tile-text{ font-size:15px; }
}