/* Блок «Ваш менеджер» с видео */
.mgr-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: .75fr 1.25fr; gap: 56px; align-items: center;
  padding: 48px 56px;
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(520px 320px at 18% 30%, rgba(216, 190, 138, .16), transparent 62%),
    linear-gradient(160deg, #0F1626 0%, #151D30 100%);
  box-shadow: 0 30px 60px rgba(8, 12, 22, .25);
}
.mgr-card .shape-draw { opacity: .07 !important; }
.mgr-card > *:not(.shape-draw) { position: relative; z-index: 1; }

/* Видео в золотой арке */
.mgr-media { position: relative; justify-self: center; width: min(100%, 290px); }
.mgr-ring {
  position: absolute; inset: -10px; border-radius: 200px 200px 34px 34px;
  background: conic-gradient(from var(--a, 0deg), rgba(216,190,138,0) 0deg, #D8BE8A 70deg, rgba(216,190,138,0) 150deg, rgba(216,190,138,0) 360deg);
  animation: mgr-spin 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1.5px; opacity: .9;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mgr-spin { to { --a: 360deg; } }
.mgr-frame {
  position: relative; aspect-ratio: 470 / 680; overflow: hidden;
  border-radius: 190px 190px 26px 26px;
  box-shadow: inset 0 0 0 1px rgba(216, 190, 138, .35), 0 30px 60px rgba(0, 0, 0, .45);
  background: #121A2C;
}
.mgr-frame video { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; filter: contrast(1.03) saturate(1.02); }
.mgr-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(11, 17, 30, .85) 100%);
}
.mgr-live {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(11, 17, 30, .72); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(216, 190, 138, .35); color: #F1E7D2;
}
.mgr-live i { width: 8px; height: 8px; border-radius: 50%; background: #5BD08A; box-shadow: 0 0 0 0 rgba(91, 208, 138, .6); animation: mgr-pulse 1.8s infinite; }
@keyframes mgr-pulse { 70% { box-shadow: 0 0 0 8px rgba(91, 208, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 208, 138, 0); } }

/* Сообщение от менеджера */
.mgr-bubble {
  position: absolute; z-index: 3; right: -22px; bottom: 22%;
  max-width: 196px; padding: 10px 12px; border-radius: 18px 18px 18px 6px;
  background: #fff; color: #151821; font-size: 13px; line-height: 1.35; font-weight: 500;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .3);
  animation: mgr-float 5s ease-in-out infinite;
}
.mgr-bubble small { display: block; font-size: 11px; color: #8A6C3A; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.mgr-bubble .typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.mgr-bubble .typing i { width: 6px; height: 6px; border-radius: 50%; background: #B8975B; animation: mgr-dot 1s infinite; }
.mgr-bubble .typing i:nth-child(2) { animation-delay: .15s; }
.mgr-bubble .typing i:nth-child(3) { animation-delay: .3s; }
.mgr-bubble .msg-text { display: none; }
.mgr-bubble.ready .typing { display: none; }
.mgr-bubble.ready .msg-text { display: inline; animation: mgr-in .4s ease; }
@keyframes mgr-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes mgr-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mgr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.mgr-chip {
  position: absolute; z-index: 3; left: -44px; top: 7%;
  padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 600;
  background: linear-gradient(180deg, #DCC392, #B8975B); color: #14110B;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
  animation: mgr-float 5s ease-in-out -2.5s infinite;
}

/* Текст */
.mgr-text .eyebrow { color: #D8BE8A; }
.mgr-text h2 { color: #fff; margin: 0 0 14px; }
.mgr-text > p { margin: 0 0 22px; color: rgba(255, 255, 255, .72); font-size: 17px; max-width: 520px; }
.mgr-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.mgr-list li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, .86); }
.mgr-list li b { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-family: "Unbounded", sans-serif; font-size: 12px; color: #D8BE8A; box-shadow: inset 0 0 0 1px rgba(216, 190, 138, .4); }
.mgr-who { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding-top: 20px; border-top: 1px solid rgba(216, 190, 138, .18); }
.mgr-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 2px #B8975B; }
.mgr-who strong { display: block; font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 15px; }
.mgr-who span { font-size: 13px; color: rgba(255, 255, 255, .6); }
.mgr-text .soc { display: flex; flex-wrap: wrap; gap: 12px; }
.mgr-text .soc a { flex: 1; min-width: 170px; gap: 8px; }

@media (max-width: 960px) {
  .mgr-card { grid-template-columns: 1fr; padding: 36px 22px; gap: 36px; }
  .mgr-media { width: min(72%, 280px); }
  .mgr-bubble { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 16px auto 0; max-width: 280px; width: auto; font-size: 13px; border-radius: 6px 18px 18px 18px; animation: none; }
  .mgr-chip { display: none; }
}
@media (max-width: 480px) {
  .mgr-media { width: 74%; }
  .mgr-bubble { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mgr-ring, .mgr-bubble, .mgr-chip, .mgr-live i { animation: none; }
}