/* WORKSSS: параметры движения карточек (CSS без JavaScript).
   --float-duration: 6s — длительность цикла: 4s быстрее, 10s медленнее.
   --float-distance: -15px — высота движения: -8px меньше, -22px больше.
   Разные фазы анимации у карточек задаются ниже в --phase и --speed-factor. */
.ws-banner {--float-duration:6s;--float-distance:-15px;--unit:0.065104166667cqw; container-type:inline-size;position:relative;width:100%;aspect-ratio:3/2;
            border-radius:28px; overflow:hidden;isolation:isolate;box-shadow:0 22px 80px #6a36b31a;
            background:#eae1ff; }
.ws-banner .ws-photo {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none;}
/* Статичный поворот карточки передаёт наклон на исходной картинке.
   ВНИМАНИЕ: transform поворота и transform анимации — в разных HTML-элементах. */
.ws-banner .ws-anchor {position:absolute;left:calc(var(--unit)*var(--x));top:calc(var(--unit)*var(--y));
            width:calc(var(--unit)*var(--w));height:calc(var(--unit)*var(--h));
            transform:rotate(var(--angle));z-index:2;}
.ws-banner .ws-float {width:100%;height:100%;animation:ws-bob calc(var(--float-duration) * var(--speed-factor,1)) ease-in-out var(--phase,0s) infinite !important;
           will-change:transform;}
@keyframes ws-bob {0%,100% {transform:translateY(0)} 50% {transform:translateY(var(--float-distance))}}
.ws-banner .ws-card {width:100%;height:100%;border-radius:calc(var(--unit)*32);background:#fff;
           box-shadow:0 calc(var(--unit)*19) calc(var(--unit)*38) rgba(94,56,164,.16), 0 0 0 1px rgba(255,255,255,.64) inset;
           overflow:hidden;position:relative;color:#10132a}
.ws-banner .ws-order {--x:80;--y:140;--w:460;--h:200;--angle:-7deg;--speed-factor:0.914;--phase:-1.5s;--rise:-10}
.ws-banner .ws-responses {--x:83;--y:376;--w:376;--h:290;--angle:-6deg;--speed-factor:1.014;--phase:-4.1s;--rise:9}
.ws-banner .ws-categories {--x:1050;--y:45;--w:365;--h:420;--angle:-6deg;--speed-factor:1.129;--phase:-2.9s;--rise:-8}
.ws-banner .ws-income {--x:963;--y:541;--w:384;--h:234;--angle:-4.4deg;--speed-factor:0.957;--phase:-3.2s;--rise:11}
.ws-banner .ws-message {--x:68;--y:698;--w:576;--h:201;--angle:-4deg;--speed-factor:1.071;--phase:-.7s;--rise:-9}
.ws-banner .ws-rating {--x:695;--y:796;--w:359;--h:171;--angle:-5deg;--speed-factor:0.886;--phase:-3.9s;--rise:10}
.ws-banner .ws-avatar {width:calc(var(--unit)*80);height:calc(var(--unit)*80);object-fit:cover;border-radius:50%;flex:none;}
/* Новый заказ */
.ws-banner .order-content {display:flex;align-items:center;gap:calc(var(--unit)*30);padding:calc(var(--unit)*32) calc(var(--unit)*30);height:100%}
.ws-banner .order-content .ws-avatar {width:calc(var(--unit)*82);height:calc(var(--unit)*82)}
.ws-banner .order-lines {display:flex;flex-direction:column;gap:calc(var(--unit)*5);white-space:nowrap}
.ws-banner .order-caption {font-weight:700;color:#596285;font-size:calc(var(--unit)*25);letter-spacing:calc(var(--unit)*-.5)}
.ws-banner .order-title {font-size:calc(var(--unit)*30);line-height:1.17;font-weight:800;letter-spacing:calc(var(--unit)*-1)}
.ws-banner .order-price {font-size:calc(var(--unit)*38);font-weight:800;letter-spacing:calc(var(--unit)*-1.4);margin-top:calc(var(--unit)*3)}
/* Отклики */
.ws-banner .responses-content {padding:calc(var(--unit)*29) calc(var(--unit)*36)}
.ws-banner .responses-title {font-size:calc(var(--unit)*35);line-height:1.1;font-weight:700;letter-spacing:calc(var(--unit)*-1.5)}
.ws-banner .responses-count {font-size:calc(var(--unit)*63);line-height:1.07;font-weight:800;letter-spacing:calc(var(--unit)*-3);margin-top:calc(var(--unit)*9)}
.ws-banner .responses-caption {font-size:calc(var(--unit)*22);font-weight:700;line-height:1.2;text-transform:uppercase;color:#4d587b;white-space:nowrap}
.ws-banner .responses-people {display:flex;align-items:center;margin-top:calc(var(--unit)*14);padding-left:calc(var(--unit)*2)}
.ws-banner .responses-people img {width:calc(var(--unit)*64);height:calc(var(--unit)*64);border-radius:50%;object-fit:cover;border:calc(var(--unit)*2) solid #fff;margin-right:calc(var(--unit)*-5)}
.ws-banner .more-people {width:calc(var(--unit)*76);height:calc(var(--unit)*76);display:grid;place-items:center;margin-left:calc(var(--unit)*7);
              border-radius:50%;background:#eeeaff;font-size:calc(var(--unit)*28);font-weight:800}
/* Категории */
.ws-banner .categories-content {display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--unit)*39) calc(var(--unit)*30);height:100%}
.ws-banner .category-row {display:flex;align-items:center;gap:calc(var(--unit)*27);white-space:nowrap;font-weight:700;font-size:calc(var(--unit)*27);line-height:1}
.ws-banner .category-row:last-child {color:#7079a5;font-weight:600}
.ws-banner .category-icon {height:calc(var(--unit)*53);width:calc(var(--unit)*53);border-radius:calc(var(--unit)*13);
               display:grid;place-items:center;flex:none;color:white}
.ws-banner .category-icon svg {height:65%;width:65%;stroke:currentColor;fill:none;stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round}
.ws-banner .category-icon.blue {background:linear-gradient(145deg,#33b0ff,#0070ff)}
.ws-banner .category-icon.violet {background:linear-gradient(135deg,#a75dff,#651cff)}
.ws-banner .category-icon.pink {background:linear-gradient(135deg,#ff6acd,#f4009e)}
.ws-banner .category-icon.amber {background:linear-gradient(135deg,#ffc329,#ff9200)}
.ws-banner .category-icon.lilac {background:#eeebff;color:#8576dc}
/* Доход */
.ws-banner .income-content {padding:calc(var(--unit)*30) calc(var(--unit)*40);height:100%}
.ws-banner .income-label {font-size:calc(var(--unit)*29);font-weight:600;color:#344160;white-space:nowrap}
.ws-banner .income-value {font-size:calc(var(--unit)*53);font-weight:800;letter-spacing:calc(var(--unit)*-2);line-height:1.15;margin-top:calc(var(--unit)*5);white-space:nowrap}
.ws-banner .income-bottom {display:flex;align-items:end;justify-content:space-between;margin-top:calc(var(--unit)*6);}
.ws-banner .income-gain {display:inline-flex;align-items:center;justify-content:center;min-width:calc(var(--unit)*115);
              height:calc(var(--unit)*56);padding:0 calc(var(--unit)*17);border-radius:calc(var(--unit)*30);
              background:#dcf8ec;color:#078b42;font-weight:800;font-size:calc(var(--unit)*27);white-space:nowrap}
.ws-banner .income-bars {height:calc(var(--unit)*94);display:flex;gap:calc(var(--unit)*10);align-items:end;padding-bottom:calc(var(--unit)*5)}
.ws-banner .income-bars span {width:calc(var(--unit)*20);border-radius:calc(var(--unit)*6) calc(var(--unit)*6) calc(var(--unit)*3) calc(var(--unit)*3);
                   background:linear-gradient(180deg,#a674ff,#6331ef)}
.ws-banner .income-bars span:nth-child(1) {height:11%}.ws-banner .income-bars span:nth-child(2) {height:38%}
.ws-banner .income-bars span:nth-child(3) {height:55%}.ws-banner .income-bars span:nth-child(4) {height:76%}
.ws-banner .income-bars span:nth-child(5) {height:100%;background:linear-gradient(180deg,#8e40ff,#5412ef)}
/* Сообщение */
.ws-banner .message-content {display:flex;align-items:flex-start;gap:calc(var(--unit)*26);height:100%;padding:calc(var(--unit)*32) calc(var(--unit)*31)}
.ws-banner .message-content .ws-avatar {width:calc(var(--unit)*89);height:calc(var(--unit)*89)}
.ws-banner .message-copy {flex:1;min-width:0}
.ws-banner .message-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(var(--unit)*9);gap:calc(var(--unit)*10)}
.ws-banner .message-head strong {font-size:calc(var(--unit)*28);font-weight:800}
.ws-banner .message-head time {font-size:calc(var(--unit)*19);font-weight:500;color:#7b81a7}
.ws-banner .message-text {font-size:calc(var(--unit)*25);line-height:1.25;font-weight:500;color:#334064}
/* Рейтинг */
.ws-banner .rating-content {height:100%;display:flex;align-items:center;gap:calc(var(--unit)*27);padding:calc(var(--unit)*33) calc(var(--unit)*39)}
.ws-banner .rating-star {color:#ffa500;flex:none;width:calc(var(--unit)*83);height:calc(var(--unit)*83)}
.ws-banner .rating-value {font-size:calc(var(--unit)*61);font-weight:800;line-height:1.02;letter-spacing:calc(var(--unit)*-2.4)}
.ws-banner .rating-label {font-size:calc(var(--unit)*23);color:#344160;white-space:nowrap;margin-top:calc(var(--unit)*5)}
/* Маленькие элементы поверх фона — тоже HTML, а не фрагменты изображения */
.ws-banner .ws-sticker {position:absolute;z-index:4;left:calc(var(--unit)*var(--x));top:calc(var(--unit)*var(--y));
             width:calc(var(--unit)*var(--w));height:calc(var(--unit)*var(--h));transform:rotate(var(--angle));}
.ws-banner .ws-sticker .ws-float {display:grid;place-items:center;filter:drop-shadow(0 calc(var(--unit)*9) calc(var(--unit)*10) #682de84a)}
.ws-banner .ws-sticker .sticker-bg {width:100%;height:100%;border-radius:23%;background:linear-gradient(145deg,#d296ff 0%,#984aff 45%,#5723fa 100%);
                        border:1px solid #a672f4;display:grid;place-items:center;color:#fff;box-shadow:inset 0 1px 5px #fff7,0 3px 1px #4d1cb9}
.ws-banner .ws-sticker .sticker-bg svg {width:66%;height:66%;fill:currentColor;stroke:none}
.ws-banner .ws-plane {--x:458;--y:40;--w:104;--h:105;--angle:-8deg;--speed-factor:0.986;--phase:-2.4s;--rise:-8}
.ws-banner .ws-heart {--x:1372;--y:414;--w:75;--h:75;--angle:-19deg;--speed-factor:1.071;--phase:-.7s;--rise:7}
.ws-banner .ws-heart .sticker-bg {background:linear-gradient(135deg,#ddbbff,#9d59fb);color:#8337f0;border-radius:28%}
/* Placement inside the existing homepage hero. */
.hero-visual .ws-banner {max-width:760px;flex:1;min-width:0;border-radius:0;box-shadow:none;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);}
/* Keep avatar images untouched by broad site image styling. */
.hero-visual .ws-banner img {mix-blend-mode:normal;mask-image:none;max-width:none;}
@media(max-width:580px){.hero-visual{width:calc(100% + 32px);}.hero-visual .ws-banner{mask-image:none;}}
/* Анимация баннера явным образом включена: не гасится общим правилом index.html
   для prefers-reduced-motion:reduce. Чтобы отключить, используйте animation:none!important. */
@media print{.ws-banner .ws-float{animation:none;}}