/* ============================================================
   HERO (video bg, h1, panel, ribbon)
   Auto-extracted from index.html (single source of truth).
   Edit here; index.html only links these files.
   ============================================================ */
.hero {
    /* Nav jest position: fixed więc nie zajmuje miejsca w flow.
       Hero startuje od top: 0 viewport NATYWNIE w CSS (żadne margin-top tricks,
       żadne JS measure - eliminuje flash białego paska przy F5).
       padding-top rezerwuje miejsce na transparent nav nad zawartością. */
    padding: calc(var(--nav-h) + 56px) 0 56px;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: var(--paper);
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(187, 13, 41, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(20, 49, 91, 0.18) 0%, transparent 60%),
        linear-gradient(135deg, #1B1714 0%, #2a221d 100%);
}

.hero_video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 400ms ease;
}
.hero_video_dimm {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(27,23,20,0.45) 0%, rgba(27,23,20,0.78) 70%, rgba(27,23,20,0.92) 100%),
        linear-gradient(180deg, rgba(27,23,20,0.55) 0%, rgba(27,23,20,0.30) 40%, rgba(27,23,20,0.65) 100%);
    transition: opacity 400ms ease;
}

.hero_grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 64px;
    align-items: center;
    width: 100%;
}

.hero_eyebrow {
    margin: 0 0 28px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.hero_eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: #E89882;
    display: inline-block;
}

.hero_h1 {
    margin: 0 0 28px;
    font-family: var(--serif);
    font-style: normal;
    font-variation-settings: "opsz" 144;
    font-weight: 400;
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--paper);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.35),
        0 14px 44px rgba(0, 0, 0, 0.32);
}
.hero_h1 .l1, .hero_h1 .l2, .hero_h1 .l3 { display: block; }
.hero_h1 .l1, .hero_h1 .l2 {
    font-size: clamp(40px, 4.4vw, 62px);
}
.hero_h1 .l3 {
    font-size: clamp(46px, 5.1vw, 72px);
    color: #ba0d29;
    font-weight: 500;
    font-style: normal;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.4),
        0 0 28px rgba(186, 13, 41, 0.28),
        0 14px 50px rgba(186, 13, 41, 0.18);
    animation: hero_l3_glow 5.6s ease-in-out 1.2s infinite;
}
.hero_h1 .l3_num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    min-width: 1.3ch;
    text-align: right;
    will-change: transform, filter;
}
.hero_h1 .l3_num.is_counting {
    animation: hero_num_pulse 1.2s ease-out;
}

@keyframes hero_l3_glow {
    0%, 100% {
        text-shadow:
            0 1px 0 rgba(0, 0, 0, 0.4),
            0 0 28px rgba(186, 13, 41, 0.28),
            0 14px 50px rgba(186, 13, 41, 0.18);
    }
    50% {
        text-shadow:
            0 1px 0 rgba(0, 0, 0, 0.4),
            0 0 40px rgba(186, 13, 41, 0.42),
            0 18px 60px rgba(186, 13, 41, 0.26);
    }
}
@keyframes hero_num_pulse {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(186,13,41,0)); }
    35%  { transform: scale(1.18); filter: drop-shadow(0 0 16px rgba(186,13,41,0.55)); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(186,13,41,0)); }
}
@media (prefers-reduced-motion: reduce) {
    .hero_h1 .l3 { animation: none; }
    .hero_h1 .l3_num.is_counting { animation: none; }
}

.hero_sub {
    margin: 0 0 32px;
    max-width: 520px;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(245, 241, 237, 0.78);
    font-weight: 400;
}

.hero_cta_row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.btn_primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: var(--paper);
    color: var(--ink);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background 200ms ease, transform 180ms ease, box-shadow 200ms ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.40);
}
.btn_primary:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 12px 28px -10px rgba(0, 0, 0, 0.50);
}
.btn_primary:active { transform: translateY(0); }

.btn_secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 8px;
    color: #E89882;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    border-bottom: 1px solid transparent;
    transition: color 180ms ease, border-color 180ms ease;
}
.btn_secondary:hover {
    color: #fff;
    border-bottom-color: #E89882;
}
.btn_secondary .arrow {
    display: inline-block;
    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn_secondary:hover .arrow { transform: translateX(4px); }

.hero_panel {
    position: relative;
    background: var(--paper-card);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 24px 48px -28px rgba(27, 23, 20, 0.20),
        0 6px 16px -10px rgba(27, 23, 20, 0.10);
}
.panel_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
}
.panel_title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
}
.panel_title .pt_logo { width: 24px; height: 24px; color: var(--ink); }
.panel_status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.status_dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.16);
    animation: status_pulse 2.4s ease-in-out infinite;
}
@keyframes status_pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.10); }
    50%      { box-shadow: 0 0 0 5px rgba(46, 125, 50, 0.22); }
}
.panel_kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
.panel_kv .kv_label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.panel_kv .kv_val {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-align: right;
}
.panel_kv .kv_val.mono { font-family: var(--mono); font-weight: 500; }
.panel_kv .kv_val.pii {
    filter: blur(3px);
    user-select: none;
    pointer-events: none;
    transition: filter 220ms ease;
}
.panel_kv .kv_val.pii::after {
    content: "";
}
.kv_val_wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.pii_tag {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border: 1px solid var(--hairline-2);
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.panel_steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 4px -4px;
}
.pstep {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    position: relative;
}
.pstep_meta { margin-left: auto; }
.pstep + .pstep::before {
    content: "";
    position: absolute;
    left: 9px;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    top: -8px;
    width: 1px;
    height: 16px;
    background: var(--navy);
    opacity: 0;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 80ms,
                opacity 500ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}
.pstep.done + .pstep::before { transform: translateX(-50%) scaleY(1); opacity: 1; }
.pstep_marker {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--hairline-2);
    flex-shrink: 0;
    transform: scale(1);
    transition: background 620ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 620ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, background;
}
.pstep.done .pstep_marker { background: var(--navy); border-color: var(--navy); }
.pstep.live .pstep_marker {
    background: var(--oxblood);
    border-color: var(--oxblood);
    transform: scale(1.2);
    animation: status_pulse_red 1.6s ease-in-out infinite 300ms;
}
@keyframes status_pulse_red {
    0%, 100% { box-shadow: 0 0 0 2px rgba(187, 13, 41, 0.10); }
    50%      { box-shadow: 0 0 0 5px rgba(187, 13, 41, 0.20); }
}
.pstep_label {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-faint);
    line-height: 1.3;
    transition: color 620ms cubic-bezier(0.16, 1, 0.3, 1),
                letter-spacing 620ms cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.005em;
}
.pstep.done .pstep_label { color: var(--ink); letter-spacing: 0; }
.pstep.live .pstep_label { color: var(--ink); letter-spacing: 0; }
.pstep_meta {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateX(-8px);
    filter: blur(2px);
    transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1) 220ms,
                transform 620ms cubic-bezier(0.16, 1, 0.3, 1) 220ms,
                filter 620ms cubic-bezier(0.16, 1, 0.3, 1) 220ms;
}
.pstep_meta.show { opacity: 1; transform: translateX(0); filter: blur(0); }
.panel_footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}
.pf_cell .pf_label {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 4px;
}
.pf_cell .pf_value {
    font-family: var(--serif);
    font-style: normal;
    font-variation-settings: "opsz" 144;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.pf_cell .pf_value.accent { color: var(--oxblood); }
.pf_cell .pf_unit { font-size: 12px; color: var(--ink-soft); margin-left: 2px; font-family: var(--sans); }

.hero_ribbon {
    padding: 24px 0 28px;
    border-top: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
    align-items: baseline;
}
.hero_ribbon_label {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.hero_ribbon_items {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink-mid);
}
.hero_ribbon_items a {
    color: var(--ink-mid);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 180ms ease, border-color 180ms ease;
}
.hero_ribbon_items a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Logo + AI thinking animation - 1:1 z /memories/repo/brand-logo-animation.md - NIE MODYFIKOWAĆ */
.entropic_logo { flex-shrink: 0; opacity: 0.5; transition: opacity 0.3s; overflow: visible; }
.entropic_logo .el_line  { transition: opacity 0.3s; }
.entropic_logo .el_dot   { transition: fill 0.3s, transform 0.3s; transform-origin: center; }
.entropic_logo .el_spark { transition: fill 0.3s, opacity 0.3s; transform-origin: center; }

.entropic_logo.active { opacity: 1; }
.entropic_logo.active .el_dot:nth-child(4) { fill: var(--navy); animation: el_wave 2.4s ease-in-out infinite 0s; }
.entropic_logo.active .el_dot:nth-child(5) { fill: var(--navy); animation: el_wave 2.4s ease-in-out infinite 0.3s; }
.entropic_logo.active .el_dot:nth-child(6) { fill: var(--navy); animation: el_wave 2.4s ease-in-out infinite 0.6s; }
.entropic_logo.active .el_dot:nth-child(7) { fill: var(--navy); animation: el_wave 2.4s ease-in-out infinite 0.9s; }
.entropic_logo.active .el_spark { fill: var(--oxblood); opacity: 1; animation: el_spark_wave 2.4s ease-in-out infinite 1.2s; }
.entropic_logo.active .el_line  { opacity: 0.08; animation: el_line_fade 2.4s ease-in-out infinite alternate; }

@keyframes el_wave {
    0%, 100% { transform: translateY(0)    scale(1);    opacity: 1;   }
    25%      { transform: translateY(-3px) scale(1.15); opacity: 1;   }
    50%      { transform: translateY(0)    scale(1);    opacity: 0.5; }
    75%      { transform: translateY(1px)  scale(0.9);  opacity: 0.8; }
}
@keyframes el_spark_wave {
    0%, 100% { transform: translateY(0)      scale(1);    opacity: 0.85; }
    25%      { transform: translateY(-1.5px) scale(1.15); opacity: 1;    }
    50%      { transform: translateY(0)      scale(1);    opacity: 0.5;  }
    75%      { transform: translateY(0.4px)  scale(0.94); opacity: 0.7;  }
}
@keyframes el_line_fade { 0% { opacity: 0.03; } 100% { opacity: 0.25; } }

@media (max-width: 1080px) {
    .hero { min-height: 0; padding: calc(var(--nav-h) + 56px) 0 64px; }
    .hero_grid { grid-template-columns: 1fr; gap: 48px; }
    .hero_panel { max-width: 540px; }
}
@media (max-width: 640px) {
    .page { padding: 0 24px; }
    .hero_h1 .l1, .hero_h1 .l2 { font-size: clamp(36px, 9vw, 56px); }
    .hero_h1 .l3 { font-size: clamp(42px, 10.4vw, 64px); }
    .hero_sub { font-size: 16px; }
    .hero_eyebrow { margin-bottom: 24px; }
    .hero_ribbon { grid-template-columns: 1fr; gap: 16px; }
    .panel_footer { grid-template-columns: 1fr 1fr; }
    .pf_cell:last-child { grid-column: 1 / -1; }
}

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 80ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 280ms; }
.reveal.d4 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

}

.pipeline {
    position: relative;
    padding: 140px 0 80px;
    border-top: 1px solid var(--hairline);
}
.pipeline::before {

    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1320px, calc(100% - 96px));
    pointer-events: none;
}