/* Короткие карточки и подробности по «+» (пульсирующий круг). Услуги — в окне, кейсы и команда — на месте. */

/* ---------- подробности: свёрнуты, плавно раскрываются на месте */
.xc .det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.xc .det-in{overflow:hidden;min-height:0}
.xc.open .det{grid-template-rows:1fr}
.xc .det-in>*:first-child{margin-top:12px}
.svc .xc .price{margin-top:auto}
.xc{cursor:pointer}
.det-list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.det-list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.45;color:var(--fg);opacity:.88}
.det-list li::before{content:"✓";position:absolute;left:0;color:var(--acc);font-weight:700}
.det-term{margin:12px 0 0;font:500 13px var(--mono);color:var(--muted)}.det-term b{color:var(--fg);font-weight:600}
.det-acts{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.det-acts .svc-cta,.det-acts .kp-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 18px;border-radius:999px;font:700 14.5px var(--display);text-decoration:none;transition:filter .2s,background .2s}
.det-acts .svc-cta{background:var(--acc);color:var(--acc-ink)}
.det-acts .kp-btn{border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);color:var(--fg)}
.det-acts .svc-cta:hover{filter:brightness(1.08)}.det-acts .kp-btn:hover{background:color-mix(in srgb,var(--acc) 14%,transparent)}

/* ---------- кнопка: общая часть */
.more-btn{appearance:none;border:0;background:none;color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:0;font:600 14px var(--display);align-self:flex-start;position:relative}
.more-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:transform .3s}
.more-btn .mb-ic{display:grid;place-items:center;color:var(--acc)}
.more-btn[aria-expanded="true"] svg{transform:rotate(45deg)}
.more-btn:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:999px}

/* кнопка: пульсирующий круг */
.more-btn .mb-ic{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--acc);position:relative}
.more-btn .mb-ic::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid var(--acc);animation:mbPulse 2s ease-out infinite}
.more-btn[aria-expanded="true"] .mb-ic::after{animation:none;opacity:0}
.more-btn .mb-t{color:var(--muted);font-weight:500}
.xc:hover .more-btn .mb-ic{background:var(--acc);color:var(--acc-ink)}
@keyframes mbPulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}

/* ---------- услуги: окно по центру */
.xd{border:0;padding:0;background:transparent;color:var(--fg);width:min(760px,92vw);max-height:88vh;overflow:visible}
.xd::backdrop{background:rgba(10,10,9,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.xd[open]{animation:xdIn .3s cubic-bezier(.2,.7,.2,1)}
.xd .xd-body{max-height:88vh;overflow:auto;border-radius:22px;overscroll-behavior:contain}
.xd .xd-wrap{display:block;margin:0;max-width:none;padding:0}
.xd .xd-wrap>*{margin:0;height:auto}
.xd .xd-wrap .case{grid-template-columns:1fr}
.xd-close{position:absolute;right:-12px;top:-12px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff22;background:var(--card-2);color:var(--fg);font-size:24px;line-height:1;cursor:pointer}
.xd-close:hover{background:var(--acc);color:var(--acc-ink)}
@keyframes xdIn{from{opacity:0;transform:translateY(16px) scale(.98)}}

/* ---------- телефон: всё раскрывается на месте; услуга свёрнута в строку «название — цена» */
@media (max-width:600px){
  .svc .xc{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline}
  .svc .xc>*{grid-column:1/-1}
  .svc .xc:not(.open) .pain{display:none}
  .svc .xc h3{grid-column:1;grid-row:2;margin:0}
  .svc .xc .price{grid-column:2;grid-row:2;border:0;padding:0;margin:0;font-size:15px}
  .svc .xc .price small{display:none}
  .svc .xc .det{grid-row:auto}
  .more-btn{margin-top:12px}
  .det-acts a{flex:1;justify-content:center;padding:12px 10px;font-size:14px;white-space:nowrap}
}
.team .teaser{margin:8px 0 0}

/* ---------- окно при уходе: чек-лист через Telegram-бота (exit.js) */
.ex{width:min(720px,92vw)}
.ex-in{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center;max-height:88vh;overflow:auto;padding:36px;border-radius:22px;border:1px solid var(--card-line);background:radial-gradient(ellipse 70% 60% at 100% 0,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),linear-gradient(180deg,var(--card-2),var(--card))}
.ex-in img{width:100%;height:auto;border-radius:6px;transform:rotate(-4deg);box-shadow:0 30px 60px -20px #000,0 0 0 1px #ffffff14}
.ex-k{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.ex h3{margin:10px 0 12px;font:800 clamp(26px,3vw,34px)/1.08 var(--display);letter-spacing:-.03em}
.ex p{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}.ex p b{color:var(--fg);font-weight:600}
.ex-go{display:inline-flex;align-items:center;gap:6px;margin-top:22px;padding:15px 24px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font:700 16px var(--display);text-decoration:none;transition:filter .2s}
.ex-go:hover{filter:brightness(1.08)}
.ex-no{appearance:none;border:0;background:none;margin-left:16px;padding:0;color:var(--muted);font:500 14px var(--display);text-decoration:underline;cursor:pointer}
@media (max-width:600px){
  .ex-in{grid-template-columns:1fr;gap:18px;padding:28px 20px}
  .ex-in img{width:120px;margin:0 auto}
  .ex-go{width:100%;justify-content:center}
  .ex-no{display:block;margin:14px auto 0}
}