/* СЦЕНИ ГОЛОВНОЇ — 2026-10-05, другий прохід (overhaul/HomeScenes_2026-10-05.md).

   Окремий ВІДКЛАДЕНИЙ файл (media=print → all): тільки головна, не блокує
   перше малювання. Розкладку першої сцени (hx-proof) тримає вбудований
   <style> у home.html, тож коли цей файл доїде, нічого не зсунеться.

   Колір — два голоси, а не заміна одного іншим:
     бурштин   = тепло бренду, дія, «готово / вийшло / ріст»;
     фіолетовий = система, AI, «живе / в процесі», стан.
   Зустрічаються лише у світлі: обідки, градієнтні штрихи, плями світла.

   Рух — мова промо-роликів (promo/MOTION.md): вхід .35–.6 с на
   cubic-bezier(.22,1,.36,1), сходи 60–90 мс, пружина з перельотом ≤4 %.
   Анімуємо лише transform/opacity (виняток — clip-path кривої графіка і
   stroke-dashoffset дрібних галочок: малюються в межах свого шару).
   Усі змінні — з префіксом --hx-, класи — hx-* (перевірено grep по frontend/). */

.hx-proof, .hx-vs, .hx-pos, .hx-cal, .hx-an{
  --hx-in:cubic-bezier(.22,1,.36,1);
  --hx-out:cubic-bezier(.55,0,.8,.2);
  --hx-amb:var(--brand-amber,#f0a500);
  --hx-amb-hi:var(--brand-amber-hi,#ffc861);
  --hx-amb-deep:var(--brand-amber-deep,#c97f00);
  --hx-vio:var(--brand-violet,#7c5cff);
  --hx-vio-2:var(--brand-violet-2,#b14bd8);
  --hx-rim:linear-gradient(135deg,var(--hx-amb-hi) 0%,var(--hx-amb) 26%,var(--hx-vio-2) 64%,var(--hx-vio) 100%);
}

/* ── спільне: обідок градієнтом (рамка маскою, а не border-image) ───── */
.hx-pc::before, .hx-tc::before, .hx-us::before, .hx-tile::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:var(--hx-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.0; transition:opacity .5s var(--hx-in);
}
/* Світло за курсором (.fx-spot ставить --mx/--my у site.js). */
.hx-pc::after, .hx-tc::after, .hx-us::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--hx-amb) 12%,transparent), color-mix(in srgb,var(--hx-vio) 7%,transparent) 40%, transparent 70%);
  transition:opacity .4s var(--hx-in);
}
.hx-pc:hover::after, .hx-tc:hover::after, .hx-us:hover::after{ opacity:1 }
.hx-pc:hover::before, .hx-tc:hover::before{ opacity:.55 }

/* ── одометр ─────────────────────────────────────────────────────────── */
.hx-odo{ display:inline-flex; align-items:flex-start; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap }
.hx-dg{ display:inline-block; height:1.12em; overflow:hidden; line-height:1.12;
  -webkit-mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent) }
.hx-dg > span{ display:flex; flex-direction:column; will-change:transform }
.hx-dg > span > i{ display:block; height:1.12em; font-style:normal; text-align:center }
.hx-dc{ display:inline-block; line-height:1.12 }

/* ═══ a) ДОВІРА + ЧИСЛА ═════════════════════════════════════════════════ */
.hx-proof{ position:relative; padding:88px 0 96px; overflow:hidden; isolation:isolate }
.hx-proof::before{
  content:""; position:absolute; inset:-10% -5% auto; height:120%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 46% at 12% 30%, color-mix(in srgb,var(--hx-amb) 11%,transparent), transparent 70%),
    radial-gradient(40% 50% at 92% 76%, color-mix(in srgb,var(--hx-vio) 14%,transparent), transparent 72%);
}
.hx-pc, .hx-tc{
  position:relative; border-radius:24px; overflow:hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--fg) 6.5%,transparent), color-mix(in srgb,var(--fg) 2.5%,transparent) 60%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 9%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--fg) 6%,transparent),
    0 1px 2px rgb(0 0 0/.25), 0 34px 70px -40px rgb(0 0 0/.75);
}
.hx-pc{ display:flex; flex-direction:column; justify-content:flex-end; padding:24px 26px 24px }
/* Мініатюра стоїть у потоці над числом: довгий підпис штовхає картку вниз, а не лізе під малюнок. */
.hx-pc-vis{ position:relative; flex:none; height:96px; margin:0 0 18px; pointer-events:none }
.hx-v{ display:none; position:absolute; inset:0 }
.hx-pc[data-k="1"] .hx-v-month, .hx-pc[data-k="2"] .hx-v-deck,
.hx-pc[data-k="3"] .hx-v-nets, .hx-pc[data-k="4"] .hx-v-seat{ display:block }

.hx-num{ position:relative; font-family:var(--serif); font-weight:300; letter-spacing: -.03em;
  font-size:clamp(46px,4.6vw,64px); line-height:1; color:var(--fg); margin:0 0 10px; font-variant-numeric: lining-nums tabular-nums; }
.hx-pc[data-k="1"] .hx-num{ font-size:clamp(96px,11vw,168px); letter-spacing:-.035em;
  background:none; color:var(--hx-amb-hi) }
:root[data-theme="light"] .hx-pc[data-k="1"] .hx-num{ color:var(--hx-amb-deep) }
.hx-pc-t{ position:relative; font-weight:600; font-size:15.5px; color:var(--fg); line-height:1.3 }
.hx-pc-note{ position:relative; margin-top:6px; font-size:13.5px; line-height:1.5; color:var(--dim); max-width:46ch }
.hx-pc[data-k="1"]{ padding:30px 34px 32px; justify-content:center }
.hx-pc[data-k="1"] .hx-pc-vis{ flex:none; height:auto; margin-bottom:18px }
.hx-pc[data-k="2"] .hx-pc-vis{ height:130px }.hx-pc[data-k="3"] .hx-pc-vis{ height:132px }
.hx-pc[data-k="1"] .hx-pc-t{ font-size:19px }
.hx-pc[data-k="4"]{ padding-right:44% }
.hx-pc[data-k="4"] .hx-pc-vis{ position:absolute; inset:0 0 0 auto; width:44%; height:100%; margin:0 }

/* місяць за вечір: 30 клітинок 6×5, у кожній чип формату; хвиля появи, бурштиновий «готово» пробігає й повертається */
.hx-v-month{ position:relative; inset:auto; display:block !important; width:min(100%,470px); margin:0 auto }
.hx-pc:not([data-k="1"]) .hx-v-month{ display:none !important }
.hx-v-month .hx-mcn{ display:block; margin:0 0 12px auto; width:max-content; font:400 12px/1 var(--mono); letter-spacing:.08em; color:var(--hx-amb-hi);
  padding:6px 10px; border-radius:99px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hx-amb) 45%,transparent) }
.hx-mg{ display:grid; grid-template-columns:repeat(6,1fr); gap:7px }
.hx-mg i{ position:relative; aspect-ratio:1; border-radius:10px; background:color-mix(in srgb,var(--fg) 6%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 7%,transparent) }
.hx-mg i::before,.hx-mg i::after{ content:""; position:absolute; inset:5px; border-radius:7px; opacity:0 }
.hx-mg i::after{ background:var(--g) center/54% no-repeat, linear-gradient(150deg,color-mix(in srgb,var(--hx-vio-2) 52%,#17131f),color-mix(in srgb,var(--hx-vio) 44%,#17131f)); transform:scale(.25) }
.hx-mg i::before{ background:var(--g) center/54% no-repeat, linear-gradient(150deg,var(--hx-amb-hi),var(--hx-amb)); z-index:1; box-shadow:0 0 14px color-mix(in srgb,var(--hx-amb) 60%,transparent) }
.hx-mg i:nth-child(4n+1){ --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5l9 5.5-9 5.5z' fill='%23fff'/%3E%3C/svg%3E") }
.hx-mg i:nth-child(4n+2){ --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='7' width='12' height='10' rx='2' fill='%23fff'/%3E%3Crect x='17' y='8' width='4' height='8' rx='1.5' fill='%23fff' opacity='.6'/%3E%3C/svg%3E") }
.hx-mg i:nth-child(4n+3){ --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14' rx='3' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M8 15l3-4 2 2.5 2-3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") }
.hx-mg i:nth-child(4n){ --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6h14v9h-8l-4 3v-3H5z' fill='%23fff'/%3E%3C/svg%3E") }
.hx-v-month.is-on .hx-mg i::after{ opacity:.95; transform:none;
  transition:transform .42s var(--hx-in) calc(var(--i)*32ms), opacity .3s var(--hx-in) calc(var(--i)*32ms) }
.hx-v-month.is-on .hx-mg i::before{ animation:hx-mdone 6s ease-in-out infinite; animation-delay:calc(1.6s + var(--i)*70ms) }
.hx-v-month.is-on .hx-mg i:nth-child(17){ animation:hx-mpop 6s cubic-bezier(.34,1.56,.64,1) infinite 4.6s }
@keyframes hx-mdone{ 0%{opacity:0;transform:scale(.9)} 3%{opacity:1;transform:scale(1)} 9%,100%{opacity:0;transform:scale(1)} }
@keyframes hx-mpop{ 0%,8%,100%{transform:scale(1)} 3%{transform:scale(1.16)} }
.hx-off *{ animation-play-state:paused !important }
@media (prefers-reduced-motion:reduce){ .hx-mg i::before{ animation:none !important }
  .hx-mg i:nth-child(-n+6)::before{ opacity:1 } .hx-mg i::after{ opacity:.95; transform:none } }

/* колода форматів: сім карток розкриваються віялом */
.hx-v-deck{ inset:0 }
.hx-v-deck i{ position:absolute; left:50%; top:8%; width:clamp(58px,6.4vw,92px); aspect-ratio:9/16; margin-left:calc(clamp(58px,6.4vw,92px)/-2);
  border-radius:12px; transform-origin:50% 120%;
  background:linear-gradient(170deg, color-mix(in srgb,var(--fg) 14%,transparent), color-mix(in srgb,var(--fg) 4%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent), 0 18px 30px -18px rgb(0 0 0/.8);
  transform:rotate(0) translateY(10px); transition:transform .9s var(--hx-in) calc(var(--d,0)*55ms) }
.hx-v-deck i::before, .hx-v-deck i::after{ content:""; position:absolute; left:14%; right:14%; height:5px; border-radius:3px;
  background:color-mix(in srgb,var(--fg) 22%,transparent) }
.hx-v-deck i::before{ bottom:22% } .hx-v-deck i::after{ bottom:13%; right:38% }
.hx-v-deck i:nth-child(1){ --r:-33deg; --d:3 } .hx-v-deck i:nth-child(2){ --r:-22deg; --d:2 }
.hx-v-deck i:nth-child(3){ --r:-11deg; --d:1 } .hx-v-deck i:nth-child(5){ --r:11deg; --d:1 }
.hx-v-deck i:nth-child(6){ --r:22deg; --d:2 } .hx-v-deck i:nth-child(7){ --r:33deg; --d:3 }
.hx-v-deck i:nth-child(4){ z-index:2; --r:0deg;
  background:linear-gradient(165deg,var(--hx-amb-hi),var(--hx-amb) 45%,var(--hx-vio-2) 120%);
  box-shadow:0 0 0 1px rgb(255 255 255/.25) inset, 0 22px 40px -16px color-mix(in srgb,var(--hx-amb) 60%,transparent) }
.hx-v-deck i:nth-child(4)::before, .hx-v-deck i:nth-child(4)::after{ background:rgb(23 20 12/.35) }
.hx-v-deck i:nth-child(3), .hx-v-deck i:nth-child(5){ z-index:1 }
.hx-v-deck i:nth-child(1), .hx-v-deck i:nth-child(7){ box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hx-vio) 45%,transparent) }
.hx-v-deck.is-on i{ transform:rotate(var(--r)) translateY(0) }

/* три мережі з одного вузла: однакові плитки на одній лінії, лінії з реальних центрів */
.hx-v-nets{ position:relative; inset:auto; display:block !important; height:100% }
.hx-v-nets svg{ display:block; width:min(100%,260px); height:auto; margin:0 auto; overflow:visible }
.hx-nl path{ stroke:color-mix(in srgb,var(--hx-vio) 70%,var(--fg)); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:3 6; opacity:.6 }
.hx-np path{ stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:9 91; stroke-dashoffset:9; opacity:0 }
.hx-v-nets.is-on .hx-np path{ animation:hx-pulse 3.2s ease-in-out infinite; animation-delay:calc(var(--n)*.2s) }
@keyframes hx-pulse{ 0%{stroke-dashoffset:9;opacity:0} 8%{opacity:1} 45%{stroke-dashoffset:-100;opacity:1} 50%,100%{stroke-dashoffset:-100;opacity:0} }
.hx-nh{ fill:var(--hx-vio); transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 6px var(--hx-vio)) }
.hx-v-nets.is-on .hx-nh{ animation:hx-breath 3.2s ease-in-out infinite }
@keyframes hx-breath{ 0%,40%,100%{transform:scale(1)} 52%{transform:scale(1.4)} }
.hx-nt{ color:var(--fg); transition:transform .3s var(--hx-in) }
.hx-nt rect{ fill:color-mix(in srgb,var(--fg) 9%,transparent); stroke:color-mix(in srgb,var(--fg) 12%,transparent) }
.hx-nt:hover{ transform:translateY(-2px) }
@media (prefers-reduced-motion:reduce){ .hx-np{ display:none } .hx-nh,.hx-nt{ animation:none !important } }

/* порожнє місце в штаті */
.hx-v-seat svg{ position:absolute; inset:0; margin:auto; width:min(70%,170px); height:auto; overflow:visible }
.hx-st{ stroke:color-mix(in srgb,var(--fg) 34%,transparent); stroke-width:2; stroke-dasharray:4 5; fill:none }
.hx-sx{ stroke:var(--hx-amb); stroke-width:3; stroke-linecap:round; fill:none;
  stroke-dasharray:90; stroke-dashoffset:90; transition:stroke-dashoffset .7s var(--hx-in) .35s;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--hx-amb) 70%,transparent)) }
.hx-v-seat.is-on .hx-sx{ stroke-dashoffset:0 }

/* чипи довіри */
.hx-tc{ display:grid; grid-template-columns:44px 1fr; column-gap:14px; row-gap:4px; padding:20px 20px 20px 18px; align-content:start }
.hx-ti{ grid-row:1/3; width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  color:var(--hx-amb-hi);
  background:radial-gradient(120% 120% at 20% 10%, color-mix(in srgb,var(--hx-amb) 26%,transparent), color-mix(in srgb,var(--hx-vio) 22%,transparent) 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hx-amb) 30%,transparent), 0 10px 24px -12px color-mix(in srgb,var(--hx-vio) 70%,transparent) }
.hx-ti svg{ width:22px; height:22px }
.hx-tc b{ font-weight:600; font-size:14.5px; color:var(--fg); line-height:1.3; align-self:end }
.hx-tc span:not(.hx-ti){ font-size:13px; line-height:1.5; color:var(--dim) }

/* поява сцени */
.hx-on .hx-proof .hx-pc, .hx-on .hx-proof .hx-tc{ opacity:0; transform:translateY(18px) scale(.985) }
.hx-on .hx-proof.hx-go .hx-pc, .hx-on .hx-proof.hx-go .hx-tc{ opacity:1; transform:none;
  transition:opacity .6s var(--hx-in) var(--dl,0s), transform .8s var(--hx-in) var(--dl,0s) }
.hx-proof .hx-pc[data-k="2"]{ --dl:0s } .hx-proof .hx-pc[data-k="1"]{ --dl:.08s }
.hx-proof .hx-pc[data-k="3"]{ --dl:.16s } .hx-proof .hx-pc[data-k="4"]{ --dl:.24s }
.hx-proof .hx-tc{ --dl:calc(.3s + var(--n)*70ms) }

@media (max-width:899px){
  .hx-proof{ padding:56px 0 64px }
  .hx-pc{ padding:16px 16px 16px; min-height:0; border-radius:20px }
  .hx-pc[data-k="2"]{ order:-1; min-height:0; padding:20px 20px 20px }
  .hx-pc[data-k="2"] .hx-pc-vis{ min-height:170px }
  .hx-pc-vis{ height:66px; margin-bottom:12px }
  .hx-pc[data-k="2"] .hx-num{ font-size:96px }
  .hx-pc[data-k="4"]{ grid-column:1/3; padding-right:38%; min-height:140px }
  .hx-pc[data-k="4"] .hx-pc-vis{ width:38% }
  .hx-num{ font-size:46px }
  .hx-pc-t{ font-size:14px }
  .hx-pc-note{ font-size:12.5px }
  .hx-v-month{ inset:0 auto auto 0; width:74%; gap:3px }
  .hx-v-nets{ transform:scale(.52) }
  .hx-tc{ grid-template-columns:40px 1fr; padding:16px; border-radius:18px }
  .hx-ti{ width:40px; height:40px; border-radius:12px }
}
@media (max-width:559px){ .hx-trust{ grid-template-columns:1fr !important } }

/* ═══ b) ПОРІВНЯННЯ ═════════════════════════════════════════════════════ */
.hx-vs{ margin-top:34px }
.hx-vs-pick{ display:none }
.hx-vs-frame{ position:relative; border-radius:26px; padding:14px 14px 10px;
  background:linear-gradient(180deg, var(--card-2,#fff), var(--card));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.7), 0 0 0 1px var(--line), 0 2px 4px -2px rgb(40 30 10/.12), 0 40px 80px -48px rgb(40 30 10/.45) }
.hx-vs-tbl{ position:relative; z-index:1; width:100%; min-width:0; border-collapse:separate; border-spacing:0; table-layout:fixed;
  font-size:14.5px; line-height:1.4 }
.hx-vs-tbl th, .hx-vs-tbl td{ padding:15px 16px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line) }
.hx-vs-tbl tbody tr:last-child > *{ border-bottom:0 }
.hx-vs-tbl thead th{ font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color:var(--faint); padding-top:18px; padding-bottom:18px }
.hx-vs-tbl tbody th{ font-weight:600; color:var(--fg); white-space:normal; font-size:inherit }
.hx-vs-tbl th{ white-space:normal }
.hx-vs-tbl td{ color:var(--dim) }
.hx-vs-tbl th:first-child{ width:24% }
.hx-vs-tbl .c4{ width:24% }
/* Стовпчик SocialOS: тексти поверх темної плити */
.hx-vs-tbl .on{ color:#f6f4f1; border-bottom-color:rgb(255 255 255/.08); font-weight:600 }
.hx-vs-tbl thead .on{ color:#f6f4f1; letter-spacing:.14em; display:table-cell }
.hx-vs-mark{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:9px; vertical-align:1px;
  background:linear-gradient(135deg,var(--hx-amb),var(--hx-vio)); box-shadow:0 0 10px color-mix(in srgb,var(--hx-amb) 70%,transparent) }
.hx-ck{ width:18px; height:18px; flex:none; vertical-align:-4px; margin-right:9px; overflow:visible }
.hx-ck circle{ fill:none; stroke:var(--hx-amb); stroke-width:1.6; opacity:.55 }
.hx-ck path{ fill:none; stroke:var(--hx-amb-hi); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:14; stroke-dashoffset:0 }
.hx-vs-slab{ position:absolute; z-index:0; top:2px; bottom:2px; left:var(--sx,74%); width:var(--sw,24%);
  border-radius:20px; overflow:hidden;
  background:radial-gradient(120% 60% at 50% 0%, #2a2118, #15110d 60%, #100d0a);
  box-shadow:0 30px 60px -24px rgb(20 12 4/.7), 0 10px 24px -12px color-mix(in srgb,var(--hx-vio) 55%,transparent),
             0 -8px 30px -18px color-mix(in srgb,var(--hx-amb) 55%,transparent) }
.hx-vs-slab::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:var(--hx-rim); opacity:.9;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude }
/* Комета по обідку (ідея glow-border з OriginKit, своїм кодом): великий
   конічний градієнт обертається transform'ом за маскою-рамкою. */
.hx-vs-rim{ position:absolute; inset:0; border-radius:inherit; padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude }
.hx-vs-rim::before{ content:""; position:absolute; left:50%; top:50%; width:260%; aspect-ratio:1; translate:-50% -50%;
  background:conic-gradient(from 0deg, transparent 0 78%, var(--hx-vio) 86%, #fff 92%, var(--hx-amb-hi) 96%, transparent 100%);
  opacity:0 }
.hx-vs.hx-go .hx-vs-rim::before{ animation:hx-spin 2.4s var(--hx-in) .35s 1 both }
@keyframes hx-spin{ 0%{ opacity:0; transform:rotate(0) } 12%{ opacity:1 } 85%{ opacity:1 } 100%{ opacity:0; transform:rotate(360deg) } }
.hx-vs-slab::after{ content:""; position:absolute; inset:auto 0 0; height:40%;
  background:radial-gradient(80% 100% at 50% 100%, color-mix(in srgb,var(--hx-vio) 30%,transparent), transparent 70%) }

/* поява: плита підводиться, ряди загоряються по черзі, галочки малюються */
.hx-on .hx-vs .hx-vs-slab{ opacity:0; transform:translateY(26px) scaleY(.94); transform-origin:50% 0 }
.hx-on .hx-vs.hx-go .hx-vs-slab{ opacity:1; transform:none; transition:opacity .5s var(--hx-in), transform .9s var(--hx-in) }
.hx-on .hx-vs tbody tr > *{ opacity:0; transform:translateY(8px) }
.hx-on .hx-vs.hx-go tbody tr > *{ opacity:1; transform:none;
  transition:opacity .5s var(--hx-in) calc(.35s + var(--r)*110ms), transform .6s var(--hx-in) calc(.35s + var(--r)*110ms) }
.hx-on .hx-vs.hx-go tbody tr > .on{ transition-delay:calc(.5s + var(--r)*110ms) }
.hx-on .hx-vs .hx-ck path{ stroke-dashoffset:14 }
.hx-on .hx-vs.hx-go .hx-ck path{ stroke-dashoffset:0; transition:stroke-dashoffset .45s var(--hx-in) calc(.7s + var(--r)*110ms) }
.hx-on .hx-vs .hx-ck circle{ transform:scale(.4); transform-origin:50% 50%; transform-box:fill-box; opacity:0 }
.hx-on .hx-vs.hx-go .hx-ck circle{ transform:none; opacity:.55; transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(.62s + var(--r)*110ms), opacity .3s calc(.62s + var(--r)*110ms) }
/* рядок, що щойно загорівся, світиться мить довше */
.hx-vs-tbl tbody tr:hover > *{ background:color-mix(in srgb,var(--hx-vio) 5%,transparent) }
.hx-vs-tbl tbody tr:hover > .on{ background:transparent }

@media (max-width:759px){
  .hx-vs{ margin-top:22px }
  .hx-vs-pick{ display:flex; gap:6px; padding:5px; margin:0 0 12px; border-radius:999px; width:max-content; max-width:100%;
    background:color-mix(in srgb,var(--fg) 6%,transparent); overflow-x:auto }
  .hx-vs-b{ appearance:none; border:0; background:none; font:inherit; font-size:13px; font-weight:600; color:var(--dim);
    padding:8px 13px; border-radius:999px; white-space:nowrap; cursor:pointer; transition:background .25s, color .25s }
  .hx-vs-b[aria-pressed="true"]{ background:var(--violet-grad); color:#fff; box-shadow:0 6px 16px -8px var(--hx-vio) }
  .hx-vs-b:focus-visible{ outline:2px solid var(--hx-vio); outline-offset:2px }
  .hx-vs-frame{ padding:8px 6px 4px; border-radius:20px }
  .hx-vs-tbl{ font-size:13px }
  .hx-vs-tbl th, .hx-vs-tbl td{ padding:12px 9px }
  .hx-vs-tbl thead th{ font-size:9.5px; letter-spacing:.08em }
  .hx-vs-tbl th:first-child{ width:34% }
  .hx-vs-tbl .c4{ width:36% }
  .hx-vs[data-alt="1"] .c2, .hx-vs[data-alt="1"] .c3,
  .hx-vs[data-alt="2"] .c1, .hx-vs[data-alt="2"] .c3,
  .hx-vs[data-alt="3"] .c1, .hx-vs[data-alt="3"] .c2{ display:none }
  .hx-ck{ width:15px; height:15px; margin-right:6px; vertical-align:-3px }
  .hx-vs-slab{ border-radius:16px }
}

/* ═══ c) ХАБ «ОДНА СИСТЕМА» ═════════════════════════════════════════════ */
.hx-pos .wrap{ position:relative }
.hx-pos-lead{ max-width:640px }
.hx-hub{ position:relative; margin-top:44px; display:grid;
  grid-template-columns:minmax(0,1fr) 200px minmax(0,1.22fr); grid-auto-rows:auto; row-gap:18px; align-items:center }
.hx-pair{ display:contents }
.hx-them{ grid-column:1; position:relative; padding:18px 20px; border-radius:18px;
  border:1px dashed color-mix(in srgb,var(--fg) 22%,transparent); background:color-mix(in srgb,var(--fg) 2.5%,transparent) }
.hx-pair > *{ grid-row:var(--n) }
.hx-k{ display:flex; align-items:center; font-family:var(--sans); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:500; color:var(--faint); margin-bottom:8px }
.hx-them p{ margin:0; font-size:14px; line-height:1.5; color:var(--dim) }
.hx-us{ grid-column:3; position:relative; padding:20px 22px 21px; border-radius:20px; isolation:isolate;
  background:linear-gradient(180deg,var(--card-2,#fff),var(--card));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.75), 0 0 0 1px var(--line), 0 1px 2px rgb(40 30 10/.08), 0 28px 50px -34px rgb(40 30 10/.45);
  transition:transform .6s var(--hx-in), box-shadow .6s var(--hx-in) }
.hx-us .hx-k{ color:var(--violet-ink) }
.hx-us p{ margin:0; font-size:15px; line-height:1.52; color:var(--fg) }
.hx-us .hx-ck{ width:16px; height:16px; margin-right:8px; vertical-align:0 }
.hx-us .hx-ck circle{ opacity:.0 } .hx-us .hx-ck path{ stroke:var(--hx-amb-deep); stroke-dashoffset:14 }
.hx-us.lit{ transform:translateX(4px);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.75), 0 1px 2px rgb(40 30 10/.08), 0 30px 60px -30px color-mix(in srgb,var(--hx-vio) 45%,transparent),
             -10px 0 40px -24px color-mix(in srgb,var(--hx-amb) 70%,transparent) }
.hx-us.lit::before{ opacity:1 }
.hx-us.lit .hx-ck circle{ opacity:.6; transition:opacity .3s }
.hx-us.lit .hx-ck path{ stroke-dashoffset:0; transition:stroke-dashoffset .45s var(--hx-in) .1s }
.hx-wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0 }
.hx-wires .w{ fill:none; stroke:color-mix(in srgb,var(--fg) 16%,transparent); stroke-width:1.5 }
.hx-wires .w.lit{ stroke:url(#hxWireG); stroke-width:1.8 }
.hx-wires .cm{ mix-blend-mode:normal }
.hx-node{ grid-column:2; grid-row:1/4; position:relative; justify-self:center; width:112px; height:112px; z-index:1 }
.hx-node-core{ position:absolute; inset:18px; border-radius:24px; display:grid; place-items:center;
  background:radial-gradient(100% 100% at 30% 20%, #2c231a, #120f0c 70%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.12), 0 0 0 1px rgb(255 255 255/.06), 0 24px 44px -18px rgb(20 10 0/.65),
             0 0 0 6px color-mix(in srgb,var(--card) 80%,transparent) }
.hx-node-core img{ width:40px; height:40px }
.hx-node-ring{ position:absolute; inset:0; border-radius:34px; border:1.5px solid color-mix(in srgb,var(--hx-vio) 55%,transparent); opacity:0 }
.hx-node.pulse .hx-node-ring{ animation:hx-ring 1s var(--hx-in) both }
.hx-node.pulse .hx-node-ring.r2{ animation-delay:.16s; border-color:color-mix(in srgb,var(--hx-amb) 60%,transparent) }
@keyframes hx-ring{ 0%{ opacity:.9; transform:scale(.7) } 100%{ opacity:0; transform:scale(1.45) } }
.hx-node .hx-m-slot{ position:absolute; left:50%; bottom:calc(100% - 14px); width:84px; height:84px; margin-left:-42px }

@media (max-width:899px){
  .hx-hub{ display:block; margin-top:28px }
  .hx-node, .hx-wires{ display:none }
  .hx-pair{ display:block; margin-bottom:22px }
  .hx-us{ margin-top:-1px }
  .hx-them{ border-radius:18px 18px 18px 18px; padding:14px 16px 26px }
  .hx-us{ margin:-14px 0 0 14px; padding:16px 18px }
  .hx-us::after{ display:none }
  .hx-us p{ font-size:14.5px }
}

/* ═══ d) ЖИВИЙ ТИЖДЕНЬ ══════════════════════════════════════════════════ */
.hx-cal{ position:relative; margin-top:34px; border-radius:28px; padding:20px 24px 18px; isolation:isolate; overflow:hidden;
  --fg:#f6f4f1; --dim:#b8b2aa; --faint:#8a847c; --ln:rgb(255 255 255/.075);
  color:var(--fg);
  background:
    radial-gradient(60% 80% at 0% 0%, color-mix(in srgb,var(--hx-amb) 12%,transparent), transparent 60%),
    radial-gradient(50% 70% at 100% 100%, color-mix(in srgb,var(--hx-vio) 20%,transparent), transparent 65%),
    linear-gradient(180deg,#1d1814,#120f0c);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.08), 0 0 0 1px rgb(0 0 0/.3), 0 50px 90px -46px rgb(30 18 6/.85), 0 18px 34px -24px rgb(30 18 6/.5) }
.hx-cal-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px }
.hx-sw{ appearance:none; display:inline-flex; align-items:center; gap:11px; border:0; background:none; color:var(--fg);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:6px 10px 6px 6px; border-radius:999px; transition:background .25s }
.hx-sw:hover{ background:rgb(255 255 255/.05) }
.hx-sw:focus-visible{ outline:2px solid var(--hx-vio); outline-offset:2px }
.hx-sw-t{ position:relative; width:44px; height:24px; border-radius:999px; background:rgb(255 255 255/.14);
  box-shadow:inset 0 1px 2px rgb(0 0 0/.4); transition:background .35s var(--hx-in), box-shadow .35s }
.hx-sw-t i{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#f6f4f1;
  box-shadow:0 2px 6px rgb(0 0 0/.45); transition:transform .45s cubic-bezier(.34,1.4,.64,1) }
.hx-sw[aria-checked="true"] .hx-sw-t{ background:var(--violet-grad); box-shadow:inset 0 1px 2px rgb(0 0 0/.25), 0 0 18px -2px var(--hx-vio) }
.hx-sw[aria-checked="true"] .hx-sw-t i{ transform:translateX(20px) }
.hx-sw-l::after{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:9px; vertical-align:1px;
  background:#6f6a63 }
.hx-sw[aria-checked="true"] .hx-sw-l::after{ background:var(--hx-vio); box-shadow:0 0 0 0 var(--hx-vio); animation:hx-live 1.8s ease-out infinite }
@keyframes hx-live{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--hx-vio) 70%,transparent) } 100%{ box-shadow:0 0 0 9px transparent } }
.hx-cal-out{ display:inline-flex; align-items:baseline; gap:8px; font-size:13px; color:var(--dim) }
.hx-cal-out em{ font-style:normal }
.hx-cnt{ font-family:var(--serif); font-weight:400; font-size:30px; color:var(--hx-amb-hi); line-height:1;
  text-shadow:0 0 22px color-mix(in srgb,var(--hx-amb) 45%,transparent); font-variant-numeric: lining-nums tabular-nums; }

.hx-cal-grid{ position:relative; display:grid; gap:8px }
.hx-days{ display:grid; grid-template-columns:96px repeat(7,1fr); font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--faint); text-align:center }
.hx-days span{ padding:2px 0 4px; transition:color .3s }
.hx-days span.on{ color:var(--fg) }
.hx-lane{ display:grid; grid-template-columns:96px 1fr; align-items:center }
.hx-lane-t{ font-size:12.5px; font-weight:600; color:var(--dim) }
.hx-track{ position:relative; display:grid; grid-template-columns:repeat(7,1fr); height:52px }
.hx-track > i{ margin:0 2px; border-radius:12px; background:rgb(255 255 255/.035); box-shadow:inset 0 0 0 1px var(--ln) }
.hx-post{ position:absolute; top:9px; bottom:9px; left:calc(var(--x)*1%); width:11.4%; border-radius:10px;
  display:flex; align-items:center; justify-content:center; gap:4px; padding:0 6px; z-index:2;
  font-size:11.5px; font-weight:600; letter-spacing:-.005em; white-space:nowrap; overflow:hidden;
  color:#d9d4cd; background:linear-gradient(180deg,#3a3530,#2c2824);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.1), 0 0 0 1px rgb(255 255 255/.06), 0 8px 16px -10px rgb(0 0 0/.9);
  will-change:transform }
.hx-post b{ font-weight:600; overflow:hidden; text-overflow:ellipsis }
.hx-post svg{ width:11px; height:11px; flex:none; display:none }
.hx-post svg path{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.hx-post.pub{ color:#1c1408; background:linear-gradient(180deg,var(--hx-amb-hi),var(--hx-amb));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.45), 0 0 0 1px rgb(255 200 97/.4), 0 10px 22px -10px color-mix(in srgb,var(--hx-amb) 80%,transparent) }
.hx-post.pub svg{ display:block }
.hx-post.new{ box-shadow:inset 0 1px 0 rgb(255 255 255/.1), 0 0 0 1px color-mix(in srgb,var(--hx-vio) 70%,transparent), 0 0 18px -4px var(--hx-vio) }
.hx-now{ position:absolute; z-index:3; top:22px; bottom:-4px; left:96px; width:2px; margin-left:-1px; border-radius:2px; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--hx-vio) 12%, var(--hx-vio-2) 88%, transparent);
  box-shadow:0 0 14px 1px color-mix(in srgb,var(--hx-vio) 70%,transparent); opacity:0 }
.hx-now::before{ content:""; position:absolute; top:6%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:#fff; box-shadow:0 0 10px 2px var(--hx-vio) }
.hx-cal.off .hx-now{ filter:grayscale(1) brightness(.7) }
.hx-cal.off .hx-post:not(.pub){ opacity:.55 }
.hx-cal .hx-m-slot{ position:absolute; z-index:5; left:0; top:0; width:64px; height:64px; pointer-events:none; will-change:transform }
.hx-legend{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:16px 0 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.02em; color:var(--faint) }
.hx-lg{ display:inline-block; width:22px; height:12px; border-radius:4px; background:linear-gradient(180deg,#3a3530,#2c2824);
  box-shadow:0 0 0 1px rgb(255 255 255/.12) }
.hx-lg-p{ background:linear-gradient(180deg,var(--hx-amb-hi),var(--hx-amb)); margin-right:6px }

@media (max-width:759px){
  .hx-cal{ padding:16px 12px 14px; border-radius:22px; margin-top:24px }
  .hx-cal-top{ margin-bottom:12px }
  .hx-sw{ font-size:13px; gap:9px }
  .hx-cnt{ font-size:26px }
  .hx-cal-out em{ max-width:92px; line-height:1.25; text-align:right }
  /* Тиждень набік: дні — рядки, мережі — стовпчики. */
  .hx-cal-grid{ grid-template-columns:34px repeat(3,minmax(0,1fr)); gap:0 5px; align-items:start }
  .hx-days{ grid-row:1/2; grid-column:1; display:grid; grid-template-columns:none; grid-template-rows:30px repeat(7,46px);
    text-align:left; font-size:10.5px; letter-spacing:0 }
  .hx-days span{ display:flex; align-items:center; padding:0 }
  .hx-lane{ grid-row:1/2; display:grid; grid-template-columns:none; grid-template-rows:30px auto }
  .hx-lane-t{ font-size:11px; text-align:center; align-self:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .hx-track{ grid-template-columns:none; grid-template-rows:repeat(7,1fr); height:322px }
  .hx-track > i{ margin:2px 0 }
  .hx-post{ top:calc(var(--x)*1%); bottom:auto; left:4px; right:4px; width:auto; height:11.4%; padding:0 5px; font-size:10.5px; border-radius:9px }
  .hx-post svg{ display:none !important }
  .hx-now{ top:30px; left:34px; right:-2px; bottom:auto; width:auto; height:2px; margin:-1px 0 0;
    background:linear-gradient(90deg, transparent, var(--hx-vio) 10%, var(--hx-vio-2) 90%, transparent) }
  .hx-now::before{ top:50%; left:4px }
  .hx-cal .hx-m-slot{ width:44px; height:44px }
  .hx-legend{ font-size:10px }
}

/* ═══ e) ДАШБОРД ════════════════════════════════════════════════════════ */
.hx-an{ position:relative; margin-top:16px; border-radius:28px; padding:8px; isolation:isolate;
  background:linear-gradient(180deg, color-mix(in srgb,var(--card-2,#fff) 70%,transparent), color-mix(in srgb,var(--fg) 4%,transparent));
  box-shadow:inset 0 0 0 1px var(--line), 0 50px 100px -60px rgb(40 30 10/.55) }
.hx-an::before{ content:""; position:absolute; inset:-30px -40px auto; height:70%; z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(50% 60% at 80% 40%, color-mix(in srgb,var(--hx-vio) 16%,transparent), transparent 70%),
             radial-gradient(40% 50% at 15% 20%, color-mix(in srgb,var(--hx-amb) 14%,transparent), transparent 70%);
  filter:blur(10px) }
.hx-an-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-radius:22px 22px 0 0; overflow:hidden;
  background:var(--card-2,#fff); box-shadow:inset 0 0 0 1px var(--line) }
.hx-tile{ position:relative; padding:18px 20px 18px; display:flex; flex-direction:column; gap:6px }
.hx-tile + .hx-tile{ box-shadow:inset 1px 0 0 var(--line) }
.hx-tile::before{ border-radius:0 }
.hx-tile-t{ font-size:12.5px; color:var(--dim); font-weight:500 }
.hx-tile-n{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,2.7vw,36px); line-height:1; color:var(--fg); letter-spacing:-.015em; font-variant-numeric: lining-nums tabular-nums; }
.hx-tile-d{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--faint) }
.hx-tile-d em, .hx-an-delta{ font-style:normal; font-weight:600; font-size:11.5px; padding:3px 8px 3px 7px; border-radius:999px;
  color:color-mix(in oklab,var(--hx-amb-deep) 62%,var(--fg)); background:color-mix(in srgb,var(--hx-amb) 18%,transparent); white-space:nowrap }
.hx-tile-d em::before, .hx-an-delta::before{ content:""; display:inline-block; width:0; height:0; margin-right:5px; vertical-align:1px;
  border:4px solid transparent; border-bottom:5px solid currentColor; border-top:0 }
.hx-tile-d i{ font-style:normal }
.hx-an-main{ padding:22px 24px 22px; border-radius:0 0 22px 22px; background:var(--card-2,#fff); margin-top:1px;
  box-shadow:inset 0 0 0 1px var(--line) }
.hx-an-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.hx-an-tabs{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:color-mix(in srgb,var(--fg) 6%,transparent) }
.hx-an-tab{ appearance:none; border:0; background:none; font:inherit; font-size:13px; font-weight:600; color:var(--dim);
  padding:7px 14px; border-radius:999px; cursor:pointer; transition:color .25s, background .25s }
.hx-an-tab:hover{ color:var(--fg) }
.hx-an-tab.on{ background:var(--violet-grad); color:#fff; box-shadow:0 6px 16px -8px var(--hx-vio) }
.hx-an-tab:focus-visible{ outline:2px solid var(--hx-vio); outline-offset:2px }
.hx-an-per{ font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.04em }
.hx-an-read{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:18px 0 10px }
.hx-an-n{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,4.4vw,56px); line-height:1; letter-spacing: -.03em; color:var(--fg); font-variant-numeric: lining-nums tabular-nums; }
.hx-an-sub{ font-size:13px; color:var(--dim) }
.hx-an-plot{ display:grid; grid-template-columns:auto 1fr; gap:10px }
.hx-an-y{ width:46px; display:flex; flex-direction:column; justify-content:space-between; height:220px; padding:calc(16/190*220px - 7px) 0 calc(26/190*220px - 7px);
  font-family:var(--mono); font-size:10.5px; color:var(--faint); text-align:right; line-height:14px }
.hx-an-cv{ position:relative; height:220px }
.hx-an-cv svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.hx-an-grid line{ stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke }
.hx-an-area{ fill:url(#hxAnFill) }
.hx-an-line{ fill:none; stroke:url(#hxAnStroke); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke }
.hx-an-wipe{ position:absolute; inset:0; clip-path:inset(-24px calc((1 - var(--p,1))*100%) -24px -4px) }
.hx-an-dot{ position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; z-index:2;
  background:var(--hx-amb); box-shadow:0 0 0 3px var(--card-2,#fff), 0 0 0 7px color-mix(in srgb,var(--hx-vio) 30%,transparent), 0 0 18px var(--hx-amb);
  transition:opacity .3s }
.hx-an-dot::after{ content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid var(--hx-vio); animation:hx-ping 2.2s var(--hx-in) infinite }
@keyframes hx-ping{ 0%{ opacity:.8; transform:scale(.5) } 100%{ opacity:0; transform:scale(1.6) } }
.hx-an .hx-m-slot{ position:absolute; left:0; top:0; width:78px; height:78px; z-index:3; pointer-events:none; will-change:transform }
.hx-an-x{ display:flex; justify-content:space-between; margin:8px 0 0 56px;
  font-family:var(--mono); font-size:10.5px; color:var(--faint) }
.hx-an-split{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line) }
.hx-an-bar{ display:flex; gap:3px; height:10px }
.hx-an-bar i{ flex:0 0 calc(var(--s)*1% - 2px); border-radius:6px; transform-origin:0 50%;
  background:linear-gradient(90deg,var(--hx-amb-hi),var(--hx-amb)) }
.hx-an-bar i:nth-child(2){ background:linear-gradient(90deg,#e58a5f,var(--hx-vio-2)) }
.hx-an-bar i:nth-child(3){ background:linear-gradient(90deg,var(--hx-vio-2),var(--hx-vio)) }
.hx-an-keys{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:12px; font-size:13px }
.hx-an-key{ display:inline-flex; align-items:baseline; gap:7px }
.hx-an-key::before{ content:""; width:9px; height:9px; border-radius:3px; align-self:center; background:var(--hx-amb) }
.hx-an-key:nth-child(2)::before{ background:#d26e86 } .hx-an-key:nth-child(3)::before{ background:var(--hx-vio) }
.hx-an-key b{ font-weight:600; color:var(--fg) }
.hx-an-key i{ font-style:normal; font-family:var(--mono); font-size:12px; color:var(--dim) }
.hx-an-key em{ font-style:normal; font-weight:600; font-size:11.5px; color:color-mix(in oklab,var(--hx-amb-deep) 62%,var(--fg)) }

.hx-on .hx-an .hx-tile{ opacity:0; transform:translateY(14px) }
.hx-on .hx-an.hx-go .hx-tile{ opacity:1; transform:none; transition:opacity .5s var(--hx-in) calc(var(--n)*80ms), transform .7s var(--hx-in) calc(var(--n)*80ms) }
.hx-on .hx-an .hx-an-bar i{ transform:scaleX(0) }
.hx-on .hx-an.hx-split .hx-an-bar i{ transform:none; transition:transform .9s var(--hx-in) calc(var(--n)*140ms) }
.hx-on .hx-an .hx-an-key{ opacity:0 }
.hx-on .hx-an.hx-split .hx-an-key{ opacity:1; transition:opacity .5s var(--hx-in) calc(.3s + var(--n)*120ms) }
.hx-an-y span, .hx-an-read > *{ transition:opacity .25s }
.hx-an.swap .hx-an-y span, .hx-an.swap .hx-an-sub{ opacity:0 }

@media (max-width:899px){
  .hx-an{ padding:6px; border-radius:22px }
  .hx-an-tiles{ grid-template-columns:1fr 1fr; border-radius:17px 17px 0 0 }
  .hx-tile{ padding:14px 14px 15px }
  .hx-tile:nth-child(3){ box-shadow:inset 0 1px 0 var(--line) }
  .hx-tile:nth-child(4){ box-shadow:inset 1px 0 0 var(--line), inset 0 1px 0 var(--line) }
  .hx-tile-n{ font-size:27px }
  .hx-an-main{ padding:16px 14px 16px; border-radius:0 0 17px 17px }
  .hx-an-tabs{ width:100%; justify-content:space-between }
  .hx-an-tab{ padding:7px 11px; font-size:12.5px; flex:1 }
  .hx-an-y, .hx-an-cv{ height:170px }
  .hx-an-y{ width:38px }
  .hx-an-x{ margin-left:48px }
  .hx-an-y{ padding:calc(16/190*170px - 7px) 0 calc(26/190*170px - 7px); font-size:9.5px }
  .hx-an .hx-m-slot{ width:46px; height:46px }
  .hx-an-keys{ gap:6px 16px; font-size:12px }
}

/* ── маскоти сцен (свій міні-риг; crew.js/crew.css не чіпаємо) ──────── */
.hx-m-slot{ display:block }
.hx-mb{ display:block; width:100%; height:100%; transform-origin:50% 100% }
.hx-mb svg{ display:block; width:100%; height:100%; overflow:visible }
.hx-m-slot.live .hx-mb{ animation:hx-breathe 3.2s ease-in-out infinite }
@keyframes hx-breathe{ 0%,100%{ transform:scale(1,1) } 50%{ transform:scale(1.025,.975) } }
.hx-m-slot .crew-svg .arm{ transition:none }
.hx-m-slot.blink .crew-svg .eye{ transform:scaleY(.08) }
.hx-m-slot.talk .crew-svg .m-s{ opacity:0 }
.hx-m-slot.talk .crew-svg .m-o{ opacity:1 }
.hx-m-slot.fly .crew-svg .ly-wing_l{ animation:hx-wing-l .12s linear infinite alternate }
.hx-m-slot.fly .crew-svg .ly-wing_r{ animation:hx-wing-r .12s linear infinite alternate }
@keyframes hx-wing-l{ to{ transform:rotate(-26deg) } }
@keyframes hx-wing-r{ to{ transform:rotate(26deg) } }
.hx-m-slot .crew-svg .pp{ transform:translate(calc(var(--gx,0)*5px), calc(var(--gy,0)*6px)) }
html.hx-hidden .hx-m-slot .hx-mb, html.hx-hidden .hx-m-slot .crew-svg *{ animation-play-state:paused !important }

/* Герої crew.js, яких ці сцени замінюють (Мел у тижні, Глім у дашборді): у
   сцені свій герой ГРАЄ функцію, другий над заголовком був би дублем. */
.hx-cal-sec .crew[data-crew="mel"], .hx-an-sec .crew[data-crew="glim"]{ display:none !important }

/* ── зменшений рух: кінцевий стан, без руху ──────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hx-on .hx-proof .hx-pc, .hx-on .hx-proof .hx-tc, .hx-on .hx-vs tbody tr > *, .hx-on .hx-vs .hx-vs-slab,
  .hx-on .hx-an .hx-tile, .hx-on .hx-an .hx-an-key{ opacity:1 !important; transform:none !important; transition:none !important }
  .hx-on .hx-an .hx-an-bar i{ transform:none !important; transition:none !important }
  .hx-on .hx-vs .hx-ck path, .hx-us .hx-ck path{ stroke-dashoffset:0 !important; transition:none !important }
  .hx-on .hx-vs .hx-ck circle{ transform:none !important; opacity:.55 !important }
  .hx-v-month i::after{ opacity:.9 !important; transform:none !important; transition:none !important }
  .hx-v-deck i{ transform:rotate(var(--r)) !important; transition:none !important }
  .hx-ng{ opacity:1 !important; transition:none !important }
  .hx-sx{ stroke-dashoffset:0 !important; transition:none !important }
  .hx-vs-rim::before, .hx-an-dot::after, .hx-sw-l::after, .hx-m-slot .hx-mb, .hx-node-ring, .hx-nb{ animation:none !important }
  .hx-us, .hx-sw-t i{ transition:none !important }
}

/* ═══ «Одна година» · вкладка «Магазин одягу»: картка процесу (Direction_H6v2 §4.3) ═══
   Стан без скрипта / reduced-motion = кінцевий кадр: готовий кадр, субтитр, бурштиновий скраб, «готово».
   Граматика (плитки, сканер, пілюля) — pk.css. Рух: transform / opacity. */
.hour-clip.hc{ width:300px; max-width:100% }
.hc-scene{ --pk-pw:240px; position:relative; aspect-ratio:9/16; overflow:hidden; background:linear-gradient(170deg, #1b1712, #0e0c09); color:#f6f4f1 }
.hc-scene::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 45% at 50% 105%, rgba(124,92,255,.22), transparent 70%), radial-gradient(50% 40% at 100% 110%, rgba(240,165,0,.14), transparent 70%) }
.hc-prod{ position:absolute; left:14px; top:14px; width:52px; height:66px; border-radius:12px; z-index:3; opacity:0; transform-origin:50% 50% }
.hc-prod .pk-prod-l{ opacity:0 }
.hc-grid{ position:absolute; left:calc(50% - 104px); top:100px; width:208px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; opacity:0; z-index:1; --pk-r:12px }
.hc-grid .pk-ok{ right:-6px; top:-6px; width:20px; height:20px }
.hc-grid .pk-ok::after{ left:6.5px; top:3.5px }
.hc-scene .hc-play{ position:absolute; inset:0; z-index:2; aspect-ratio:auto; border-radius:var(--hc-r, 0); transform-origin:0 0 }
.hc-scene .hc-play .pk-sub{ bottom:52px }
.hc-pill{ position:absolute; right:12px; top:14px; z-index:6; opacity:0 }
.hc-bar{ position:absolute; left:16px; right:16px; bottom:20px; height:4px; z-index:4; opacity:0 }
.hc-scene .hc-bar i{ background:var(--pk-vio-ink) }
.hc-scene .hc-bar.is-done i{ background:var(--pk-amber) }
.hc-scene .pk-pbar{ background:rgba(255,255,255,.22) }
@media (prefers-reduced-motion:reduce){
  .hc-prod, .hc-grid{ display:none }
  .hc-play, .hc-pill, .hc-bar{ opacity:1 }
  .hc-scene .hc-bar i{ background:var(--pk-amber) }
}
@media (max-width:900px){ .hour-clip.hc{ width:min(320px, 100%) } }

/* H-proof: гачок для ЦА, сильніше число, об'єкт «ворота схвалення» */
.hx-pc-h{position:relative;display:block;margin:6px 0 10px;font:italic 350 clamp(17px,1.5vw,21px)/1.25 var(--serif);color:var(--hx-amb-hi,#ffc861)}
.hx-pc .hx-num{font-size:clamp(64px,7.4vw,112px)}
.hx-pc[data-k="2"] .hx-num{font-size:clamp(96px,11.5vw,168px)}
.hx-v-seat svg{width:min(78%,190px);height:auto}
.hx-v-seat .hx-tk{stroke:rgba(255,255,255,.18);stroke-width:2;stroke-dasharray:3 5}
.hx-v-seat .hx-gt rect{fill:var(--hx-vio,#7c5cff);opacity:.9}
.hx-v-seat .hx-gt,.hx-v-seat .hx-cd{transform-box:fill-box}
.hx-v-seat .hx-c1{fill:rgba(124,92,255,.22);stroke:var(--hx-vio,#7c5cff);stroke-width:2}
.hx-v-seat .hx-c2{fill:var(--hx-amb,#f0a500);opacity:0}
.hx-v-seat .hx-ln{stroke:#fff;stroke-opacity:.6;stroke-width:3;stroke-linecap:round}
.hx-v-seat .hx-ck{stroke:#1b1408;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hx-v-seat.is-on .hx-cd{animation:hx-gcd 4.2s var(--so-ease-io,ease-in-out) infinite}
.hx-v-seat.is-on .hx-gt{animation:hx-ggt 4.2s var(--so-ease-io,ease-in-out) infinite}
.hx-v-seat.is-on .hx-c2,.hx-v-seat.is-on .hx-ck{animation:hx-gck 4.2s linear infinite}
.hx-v-seat.is-on .hx-ln{animation:hx-gln 4.2s linear infinite}
@keyframes hx-gcd{0%{transform:translateX(0)}28%,44%{transform:translateX(52px)}74%,92%{transform:translateX(104px)}100%{transform:translateX(104px)}}
@keyframes hx-ggt{0%,30%{transform:translateY(0)}38%,60%{transform:translateY(-24px)}72%,100%{transform:translateY(0)}}
@keyframes hx-gck{0%,50%{opacity:0}60%,92%{opacity:1}100%{opacity:0}}
@keyframes hx-gln{0%,50%{opacity:1}60%,92%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hx-v-seat .hx-cd,.hx-v-seat .hx-gt,.hx-v-seat .hx-c2,.hx-v-seat .hx-ck,.hx-v-seat .hx-ln{animation:none!important}.hx-v-seat .hx-cd{transform:translateX(104px)}.hx-v-seat .hx-c2,.hx-v-seat .hx-ck{opacity:1}.hx-v-seat .hx-ln{opacity:0}}
.hx-v-seat svg{width:min(92%,300px)}

.hx-pc[data-k="2"] .hx-v-deck i{ width:44px; margin-left:-22px; top:14% }
.hx-pc[data-k="2"] .hx-pc-vis{ margin-bottom:14px }
.hx-pc:not([data-k="3"]) .hx-v-nets{display:none !important}
@media (max-width:559px){.hx-proof .hx-pc:nth-child(2),.hx-proof .hx-pc:nth-child(3){grid-column:1/3}}

/* bento-v3: банер «місяць за вечір» на всю ширину, під ним три рівні плитки (довіра → мережі → формати) */
.hx-pc[data-k="2"] .hx-v-seat,.hx-pc[data-k="4"] .hx-v-deck{display:block}
.hx-pc[data-k="4"] .hx-v-seat,.hx-pc[data-k="2"] .hx-v-deck{display:none}
.hx-pc[data-k="2"],.hx-pc[data-k="3"],.hx-pc[data-k="4"]{padding:24px 26px;justify-content:flex-end}
.hx-pc[data-k="2"] .hx-pc-vis,.hx-pc[data-k="3"] .hx-pc-vis,.hx-pc[data-k="4"] .hx-pc-vis{position:relative;inset:auto;width:auto;height:120px;margin:0 0 14px}
.hx-pc .hx-num{font-size:clamp(56px,5.6vw,80px)}
.hx-pc[data-k="2"] .hx-num{font-size:clamp(56px,5.6vw,80px)}
.hx-pc[data-k="4"] .hx-v-deck i{width:40px;margin-left:-20px;top:12%}
.hx-pc[data-k="2"] .hx-v-deck i{width:auto}
.hx-v-seat svg{width:min(92%,260px)}
.hx-pc[data-k="1"]{display:grid;grid-template-columns:minmax(250px,330px) 1fr;column-gap:56px;align-content:center;align-items:center;padding:28px 38px;justify-content:stretch}
.hx-pc[data-k="1"] .hx-pc-vis{grid-column:1;grid-row:1/6;margin:0}
.hx-pc[data-k="1"] .hx-num,.hx-pc[data-k="1"] .hx-pc-h,.hx-pc[data-k="1"] .hx-pc-t,.hx-pc[data-k="1"] .hx-pc-note{grid-column:2}
.hx-pc[data-k="1"] .hx-num{font-size:clamp(88px,8vw,124px);margin:0 0 4px}
.hx-pc[data-k="1"] .hx-pc-h{font-size:clamp(20px,1.9vw,26px);margin:0 0 10px}
.hx-v-month{width:100%}
.hx-mg{gap:5px}.hx-mg i{border-radius:8px}.hx-mg i::before,.hx-mg i::after{inset:4px;border-radius:6px}
.hx-v-month .hx-mcn{margin:0 0 10px auto}
@media (max-width:899px){
  .hx-pc[data-k="1"]{display:flex;flex-direction:column;padding:20px;align-items:stretch}
  .hx-pc[data-k="1"] .hx-pc-vis{margin-bottom:14px}
  .hx-pc[data-k="1"] .hx-num{font-size:84px}
  .hx-pc[data-k="2"],.hx-pc[data-k="3"],.hx-pc[data-k="4"]{padding:16px;order:0;min-height:0}
  .hx-pc[data-k="4"]{grid-column:1/3;padding-right:16px}
  .hx-pc[data-k="2"] .hx-pc-vis,.hx-pc[data-k="3"] .hx-pc-vis,.hx-pc[data-k="4"] .hx-pc-vis{height:96px;min-height:0}
  .hx-pc .hx-num{font-size:48px}
  .hx-v-nets{transform:none}
}

/* Готовий ролик в кінці циклу: поверх кадрів і скраба, під чипом «готово». Згасання перед повтором — 600 мс. */
.hc-scene{ transition:opacity .3s ease }
.hc-scene.is-fading{ opacity:0 }
.hc-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:5; opacity:0; background:#000; transition:opacity .25s ease }
.hc-vid.on, .hc-scene.is-poster .hc-vid{ opacity:1 }
.hour-tl{ transition:opacity .3s ease }
.hour-tl.is-fading{ opacity:0 }
@media (prefers-reduced-motion:reduce){ .hc-scene, .hour-tl{ transition:none } }