/* v3 · слой «services» — из шаблона 02 поверх 03 */
/* ================= Разводящая «Услуги» ================= */
.hero--svc .kinetic { font-size: clamp(56px, 12vw, 176px); }
.filters { position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 20; background: rgba(3,4,2,.9); backdrop-filter: blur(12px); border-block: 1px solid var(--edge); }
.filters__in { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 12px; }
.filters__in::-webkit-scrollbar { display: none; }
.flt { flex: none; font: 500 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--text); background: var(--glass); border: 1px solid var(--edge); border-radius: 999px; padding: 12px 18px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.flt span { font: 500 12px/1 var(--mono); color: var(--accent); margin-left: 6px; }
.flt:hover { border-color: var(--accent); }
.flt.is-on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.flt.is-on span { color: var(--ink); }
@media (max-width: 560px) { .filters { top: calc(64px + env(safe-area-inset-top, 0px)); } }

.catalog { display: grid; gap: clamp(56px, 6vw, 88px); padding-block: clamp(48px, 6vw, 80px) 0; }
.grp[hidden] { display: none; }
.grp__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.grp__head img { width: 56px; height: 56px; filter: drop-shadow(0 8px 24px rgba(128,210,7,.35)); }
.grp__head h2 { font: 500 clamp(28px, 3.4vw, 48px)/1 var(--display); text-transform: uppercase; color: var(--fg); margin: 0; }
.grp__head .tag { margin-left: auto; }
.svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc { position: relative; padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 260px; transition: border-color .25s; }
.svc:hover { border-color: rgba(128,210,7,.55); }
.svc--wide { grid-column: span 2; grid-row: span var(--rows); background: radial-gradient(80% 70% at 100% 0%, rgba(128,210,7,.18), transparent 60%), var(--glass); }
.svc__n { font: 500 12px/1 var(--mono); color: var(--dim); }
.svc h3 { margin: 0; font: 500 clamp(24px, 2.2vw, 32px)/1.05 var(--display); text-transform: uppercase; }
.svc--wide h3 { font-size: clamp(30px, 3.2vw, 48px); }
.svc__link { color: var(--fg); text-decoration: none; }
.svc__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* вся карточка кликабельна */
.svc:hover .svc__link { color: var(--accent-2); }
.svc p { margin: 0; font-size: 16px; color: var(--muted); max-width: 52ch; }
.svc__subs { position: relative; z-index: 1; list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.svc__subs a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 15px; color: var(--text); text-decoration: none; transition: color .2s, padding .2s; }
.svc__subs a::after { content: "→"; color: var(--accent); opacity: 0; transition: opacity .2s; }
.svc__subs a:hover { color: var(--accent-2); padding-left: 6px; }
.svc__subs a:hover::after { opacity: 1; }
.svc__go { margin-top: auto; font: 500 12px/1 var(--mono); text-transform: uppercase; color: var(--accent); }
.svcs--even { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
@media (max-width: 1100px) { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc--wide { grid-row: auto; } .svcs:not(.svcs--even) .svc:last-child:nth-child(even) { grid-column: span 2; } }
@media (max-width: 700px) { .svcs { grid-template-columns: minmax(0, 1fr); } .svc--wide, .svcs:not(.svcs--even) .svc:last-child:nth-child(even) { grid-column: auto; } .svc__subs { grid-template-columns: minmax(0, 1fr); } .svc { min-height: 0; } }

/* Как выбрать формат */
.fmt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.fmt .glass { padding: 32px; display: grid; gap: 16px; align-content: start; }
.fmt h3 { margin: 0; font: 500 clamp(26px, 2.4vw, 36px)/1 var(--display); text-transform: uppercase; color: var(--fg); }
.fmt .q { font: 400 19px/1.4 var(--body); color: var(--fg); margin: 0; }
.fmt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fmt li { position: relative; padding-left: 26px; font-size: 16px; color: var(--muted); }
.fmt li::before { content: ""; position: absolute; left: 0; top: .75em; width: 14px; height: 2px; background: var(--accent); }
.fmt .link { margin-top: 8px; justify-self: start; }
@media (max-width: 1000px) { .fmt { grid-template-columns: minmax(0, 1fr); } }