/* Pas pod hero: liczby z przewijanymi cyframi · okno pomocy · cytat (układ jak w szablonie AlphaOS) */
.hs-section { padding: 40px 20px 20px; background: #ffffff; font-family: 'Inter', 'Inter Fallback', Arial, sans-serif; }
.hs-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.65fr) minmax(0, .8fr); gap: 20px; height: 346px; }

.hs-stats { display: flex; flex-direction: column; justify-content: space-between; padding: 44px 34px; border-radius: 22px; background: #f1f5ed; }
.hs-num { margin: 0; display: flex; align-items: flex-end; height: 32px; font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -.5px; color: #101c19; font-variant-numeric: tabular-nums; }
.hs-roll { display: inline-block; height: 32px; overflow: hidden; }
.hs-col { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -32px)); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--dl, 0s); }
.hs-col > span { display: block; height: 32px; }
.hs-unit { font-size: 18px; color: #5f6b66; margin-left: 2px; }
.hs-lbl { margin: 10px 0 0; max-width: 200px; font-size: 15px; line-height: 23px; color: #4b5552; }

.hs-visual { position: relative; overflow: hidden; border-radius: 22px; display: flex; justify-content: center; padding-top: 38px;
    background:
        radial-gradient(circle at 15% 90%, #7fd4a5 0%, transparent 45%),
        radial-gradient(circle at 90% 10%, #0c9256 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, #c6f0b8 0%, transparent 55%),
        #a7dfc1; }
.hs-visual::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.2px); background-size: 4px 4px; opacity: .6; }

.hs-win { position: relative; width: min(340px, 82%); border-radius: 12px 12px 0 0; background: #ffffff; box-shadow: 0 24px 50px rgba(8, 60, 36, .25); overflow: hidden; }
.hs-win-bar { display: flex; align-items: center; gap: 5px; padding: 10px 12px; background: #101c19; color: #ffffff; }
.hs-win-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.hs-win-bar i:nth-child(2) { background: #febc2e; }
.hs-win-bar i:nth-child(3) { background: #28c840; }
.hs-win-bar b { margin-left: 8px; font-size: 13px; font-weight: 500; }
.hs-win-tools { display: flex; justify-content: space-between; padding: 12px 12px 0; }
.hs-ico { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #e5ece7; color: #5f6b66; }
.hs-ico svg { width: 15px; height: 15px; }
.hs-ico-r { width: auto; padding: 0 10px; border-radius: 999px; }
.hs-chat { padding: 14px 12px 40px; height: 230px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.hs-q { margin: 0 0 0 auto; max-width: 75%; padding: 10px 12px; border-radius: 10px; background: #f1f5f2; font-size: 13px; line-height: 20px; color: #3f4a46; }
.hs-a { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: #4b5552; min-height: 120px; }
.hs-a .hs-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: #0c9256; animation: hs-blink 1s steps(1) infinite; }
@keyframes hs-blink { 50% { opacity: 0; } }
.hs-q.is-in { animation: hs-in .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes hs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hs-quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 34px 30px 30px; border-radius: 22px; background: #101c19; color: #ffffff; }
.hs-quote blockquote { margin: 0; font-size: 17px; line-height: 25px; font-weight: 600; letter-spacing: -.2px; }
.hs-quote figcaption { display: flex; align-items: center; gap: 12px; }
.hs-av { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffffff; }
.hs-av img { width: 26px; height: 26px; }
.hs-quote b { display: block; font-size: 14px; font-weight: 600; }
.hs-quote small { display: block; margin-top: 2px; font-size: 12.5px; color: #a9b8b1; }

/* Wejście */
.hs-grid.is-ready > * { opacity: 0; translate: 0 20px; transition: opacity .7s ease, translate .8s cubic-bezier(.22, 1, .36, 1); }
.hs-grid.is-ready > *:nth-child(2) { transition-delay: .1s; }
.hs-grid.is-ready > *:nth-child(3) { transition-delay: .2s; }
.hs-grid.is-in > * { opacity: 1; translate: 0 0; }

@media (max-width: 1024px) {
    .hs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; }
    .hs-visual { grid-column: 1 / -1; grid-row: 1; height: 330px; }
    .hs-stats { gap: 36px; }
}
@media (max-width: 640px) {
    .hs-section { padding: 28px 16px 8px; }
    .hs-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hs-visual { height: 310px; padding-top: 26px; }
    .hs-win { width: 88%; }
    .hs-stats { flex-direction: row; gap: 18px; padding: 26px 22px; }
    .hs-stat { flex: 1; }
    .hs-lbl { font-size: 13px; line-height: 19px; }
    .hs-quote { gap: 26px; padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .hs-col { transition: none; }
    .hs-grid.is-ready > * { opacity: 1; translate: none; transition: none; }
    .hs-a .hs-caret { animation: none; }
}