/* --------------------------------------------------------------------------
   БАЗА — эксперимент «Голоса математики»
   Слева: лицо и культурный контекст. В центре: обещание продукта. Справа:
   пользовательский математический профиль. Ничего полезного не вытесняем.
   -------------------------------------------------------------------------- */

.hero.hero-with-math-voice{
  grid-template-columns:minmax(224px,.54fr) minmax(0,1.14fr) minmax(330px,.92fr);
  gap:30px;
  min-height:600px;
}
.hero-with-math-voice>.hero-copy{min-width:0}
.hero-with-math-voice>.hero-card{min-width:0}

.math-voice-card{
  position:relative;
  min-width:0;
  min-height:420px;
  overflow:visible;
  align-self:center;
  margin-top:18px;
  border:1px solid #e4e6f1;
  border-radius:28px;
  background:linear-gradient(180deg,#fff 0%,#fbfaff 65%,#f7f7ff 100%);
  box-shadow:0 18px 50px rgba(34,42,86,.085);
  isolation:isolate;
}
.math-voice-card:before{
  content:"";
  position:absolute;
  z-index:0;
  width:210px;
  height:210px;
  right:0;
  top:92px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,92,255,.16),rgba(77,111,255,.05) 58%,transparent 72%);
  pointer-events:none;
}

.math-voice-stage{
  position:relative;
  z-index:1;
  min-height:420px;
  display:grid;
  grid-template-rows:196px 1fr;
  border-radius:inherit;
}

.math-voice-portrait-zone{
  position:relative;
  min-width:0;
  overflow:visible;
  border-radius:27px 27px 0 0;
  background:
    radial-gradient(circle at 28% 22%,rgba(111,92,255,.16),transparent 44%),
    linear-gradient(145deg,#f3f0ff,#edf2ff 58%,#f8f8ff);
}
.math-voice-portrait-zone:after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(to bottom,transparent 61%,rgba(250,250,255,.045) 73%,#fff 100%),
    linear-gradient(135deg,rgba(111,92,255,.10),rgba(77,111,255,.025));
  pointer-events:none;
}
.math-voice-halo{
  position:absolute;
  z-index:0;
  width:190px;
  height:190px;
  left:50%;
  bottom:-78px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,92,255,.26),rgba(77,111,255,.08) 58%,transparent 74%);
}
.math-voice-portrait{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  filter:grayscale(1) contrast(1.055) brightness(1.065) sepia(.075) hue-rotate(205deg) saturate(1.22);
  opacity:0;
  transform:none;
  transition:opacity .22s ease;
}
.math-voice-badge{
  position:absolute;
  z-index:6;
  left:14px;
  top:-18px;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:7px 11px;
  border:1px solid #e3e0ff;
  border-radius:999px;
  background:#fff;
  color:#5f55cf;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  box-shadow:0 8px 22px rgba(34,42,86,.09);
}
.math-voice-fallback{
  position:absolute;
  z-index:1;
  left:50%;
  top:52%;
  width:112px;
  height:112px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:34px;
  background:linear-gradient(145deg,#e9e5ff,#e6edff);
  color:#6257d1;
  font-size:34px;
  font-weight:950;
  letter-spacing:-2px;
  opacity:1;
  transition:opacity .18s ease;
}
.portrait-loaded .math-voice-portrait{opacity:.90}
.portrait-loaded .math-voice-fallback{opacity:0}
.portrait-fallback .math-voice-portrait{opacity:0}
.portrait-fallback .math-voice-fallback{opacity:1}

.math-voice-copy{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:19px 18px 16px;
  transition:opacity .17s ease,transform .17s ease;
}
.math-voice-quote-mark{
  position:absolute;
  z-index:-1;
  left:12px;
  top:1px;
  color:rgba(111,92,255,.095);
  font:900 86px/.95 Georgia,serif;
}
.math-voice-quote{
  margin:6px 0 16px;
  color:#191c31;
  font-size:19px;
  line-height:1.22;
  letter-spacing:-.35px;
  font-weight:850;
}
.math-voice-person{
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
  margin-top:auto;
}
.math-voice-name{font-size:13px;line-height:1.2;font-weight:900;color:#26293d}
.math-voice-years{font-size:10px;font-weight:750;color:#858ca4}
.math-voice-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
}
.math-voice-source-button,
.math-voice-next{
  border:0;
  background:transparent;
  color:#6459cf;
  cursor:pointer;
}
.math-voice-source-button{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 6px 5px 0;
  font-size:10px;
  font-weight:850;
}
.math-voice-source-button i{
  width:15px;
  height:15px;
  display:inline-grid;
  place-items:center;
  border:1px solid currentColor;
  border-radius:50%;
  font:900 9px/1 Arial,sans-serif;
  font-style:normal;
}
.math-voice-next{
  width:34px;
  height:34px;
  min-height:34px;
  display:grid;
  place-items:center;
  border:1px solid #e1e3ef;
  border-radius:11px;
  background:#fff;
  font-size:16px;
  font-weight:900;
  box-shadow:0 5px 14px rgba(34,42,86,.045);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.math-voice-next:hover{transform:rotate(-9deg);border-color:#cfc9ff;background:#faf9ff}
.math-voice-next:focus-visible,.math-voice-source-button:focus-visible{outline:3px solid rgba(111,92,255,.22);outline-offset:2px}
.math-voice-source{
  margin-top:6px;
  padding-top:8px;
  border-top:1px solid #eceef5;
  color:#7d8399;
  font-size:9px;
  line-height:1.42;
}

.math-voice-stage.math-voice-changing .math-voice-copy{opacity:.18;transform:translateY(3px)}
.math-voice-stage.math-voice-changing .math-voice-portrait{opacity:.18}

@media(min-width:1001px){
  .math-voice-copy{
    display:grid;
    grid-template-rows:minmax(0,1fr) auto auto auto;
  }
  .math-voice-quote{
    align-self:center;
    margin:20px 0 18px;
  }
  .math-voice-person{margin-top:0}
}

@media(max-width:1250px) and (min-width:1001px){
  .hero.hero-with-math-voice{
    grid-template-columns:230px minmax(0,1fr);
    gap:28px 34px;
    padding-top:54px;
  }
  .hero-with-math-voice>.hero-card{grid-column:1/-1}
  .math-voice-card,.math-voice-stage{min-height:390px}
  .math-voice-stage{grid-template-rows:178px 1fr}
  .math-voice-quote{font-size:18px}
}

@media(max-width:1000px){
  .hero.hero-with-math-voice{
    grid-template-columns:1fr;
    gap:22px;
    min-height:0;
    padding-top:38px;
  }
  .math-voice-card{min-height:0;border-radius:24px}
  .math-voice-stage{
    min-height:176px;
    grid-template-columns:168px minmax(0,1fr);
    grid-template-rows:1fr;
  }
  .math-voice-portrait-zone{min-height:176px;border-radius:23px 0 0 23px}
  .math-voice-portrait-zone:after{
    background:linear-gradient(90deg,transparent 48%,rgba(255,255,255,.12) 66%,#fff 100%),linear-gradient(135deg,rgba(111,92,255,.10),rgba(77,111,255,.025));
  }
  .math-voice-copy{padding:21px 20px 17px 16px}
  .math-voice-quote{max-width:600px;font-size:20px;margin-top:8px}
  .math-voice-source{max-width:600px}
}

@media(max-width:760px){
  .hero.hero-with-math-voice{padding-top:20px;gap:18px}
  .math-voice-card{margin-top:14px;border-radius:20px;box-shadow:0 10px 28px rgba(34,42,86,.065)}
  .math-voice-stage{grid-template-columns:108px minmax(0,1fr);min-height:158px}
  .math-voice-portrait-zone{min-height:158px;border-radius:19px 0 0 19px}
  .math-voice-badge{left:10px;top:-14px;min-height:26px;padding:6px 9px;font-size:8px;letter-spacing:.04em}
  .math-voice-copy{padding:16px 14px 13px 12px}
  .math-voice-quote-mark{font-size:70px;left:7px;top:0}
  .math-voice-quote{font-size:17px;line-height:1.22;margin:4px 0 10px;letter-spacing:-.25px}
  .math-voice-name{font-size:12px}
  .math-voice-years{font-size:9px}
  .math-voice-actions{margin-top:7px}
  .math-voice-source-button{font-size:9px;min-height:28px}
  .math-voice-next{width:32px;height:32px;min-height:32px;border-radius:10px}
  .math-voice-source{font-size:8.5px;line-height:1.35}
  .math-voice-fallback{width:74px;height:74px;border-radius:24px;font-size:24px}
}

@media(max-width:390px){
  .math-voice-stage{grid-template-columns:94px minmax(0,1fr);min-height:152px}
  .math-voice-portrait-zone{min-height:152px}
  .math-voice-copy{padding-left:10px;padding-right:11px}
  .math-voice-quote{font-size:16px}
  .math-voice-source-button span{display:none}
}

@media(prefers-reduced-motion:reduce){
  .math-voice-copy,.math-voice-portrait,.math-voice-fallback,.math-voice-next{transition:none!important}
}