/* Hero „żywe demo” (10.10.2026): arkusz wypełnia się sam, braki robią się żółte, AI pisze maila, „Wyślij” klika człowiek.
   Kolory jak w całej stronie: iris = pracuje AI, żółty = sprawdza człowiek, lime = zatwierdzone. */
.hd { position: relative; z-index: 2; width: 100%; font-family: var(--text); color: var(--ink); }
.hd-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.hd-tabs button, .hd-tabs select { font: 500 13.5px/1 var(--text); color: var(--ink-2); background: rgba(251,251,248,.86); border: 1px solid rgba(14,27,23,.1); border-radius: 999px; padding: 9px 13px; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hd-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hd-tabs select { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2326332e' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; max-width: 150px; }
.hd-tabs select.on { background-color: var(--ink); color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fbfbf8' stroke-width='1.6'/%3E%3C/svg%3E"); }

.hd-win { position: relative; overflow: hidden; background: var(--paper); border-radius: var(--r-l); border: 1px solid rgba(14,27,23,.1); box-shadow: 0 30px 70px -30px rgba(14,27,23,.45), 0 2px 0 rgba(255,255,255,.7) inset; }
.hd-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #f5f6f2; }
.hd-bar .dots { display: flex; gap: 5px; }
.hd-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #d4d9d5; }
.hd-file { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hd-ai { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #3240d6; background: var(--iris-soft); border-radius: 999px; padding: 5px 10px; transition: background-color .3s, color .3s; }
.hd-ai i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hd.is-run .hd-ai i { animation: hd-pulse 1s ease-in-out infinite; }
.hd.is-done .hd-ai { background: #fff4c2; color: #6b5800; }

.hd-hook { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -.02em; font-variation-settings: "wdth" 92; margin: 0 0 12px; min-height: 2.3em; display: flex; align-items: flex-end; }

.hd-rows { list-style: none; margin: 0; padding: 6px 0; position: relative; }
.hd-rows li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 8px 16px; border-left: 3px solid transparent; transition: background-color .35s, border-color .35s, opacity .35s, transform .35s cubic-bezier(.16,1,.3,1); }
.hd-rows li + li { border-top: 1px solid #eef0ec; }
.hd-rows b { font-size: 13.5px; font-weight: 600; line-height: 1.3; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-rows small { grid-column: 1; font-size: 12.5px; color: var(--sage); line-height: 1.3; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-rows em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; border-radius: 999px; padding: 4px 9px; background: var(--lime-soft); color: #355a05; }
.hd-rows li.y em { background: #ffe27a; color: #4a3d00; }
.hd-rows li.y { background: #fff8d9; }
/* stany: .w = czeka (szkielet), .a = AI czyta teraz, .f = wypełniony */
.hd-rows li.w small, .hd-rows li.w em { opacity: 0; }
.hd-rows li.w small::before { content: ""; }
.hd-rows li.a { border-left-color: var(--iris); background: var(--iris-soft); }
.hd-rows li.a small, .hd-rows li.a em { opacity: 0; }
.hd-rows li.f small, .hd-rows li.f em { opacity: 1; transition: opacity .3s; }
.hd-rows li.in { opacity: 0; transform: translateY(8px); }

.hd-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--sage); min-height: 41px; }
.hd-count { font-weight: 600; color: var(--ink-2); opacity: 0; transition: opacity .3s; }
.hd.is-done .hd-count { opacity: 1; }
.hd-foot .leg { display: inline-flex; align-items: center; gap: 6px; }
.hd-foot .leg i { width: 14px; height: 10px; border-radius: 3px; background: #ffe27a; }

.hd-mail { display: none; margin: 0 10px 10px; background: var(--ink); color: var(--paper); border-radius: var(--r-m); padding: 14px 16px; }
.hd.is-mail .hd-mail { display: block; animation: hd-up .5s cubic-bezier(.16,1,.3,1) both; }
/* moment skupienia: przy szkicu maila zostają tylko braki (max 3) */
.hd-rows li { max-height: 90px; }
.hd.is-mail .hd-rows li:not(.y), .hd.is-mail .hd-rows li.y.extra { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-top-width: 0; transition: max-height .45s cubic-bezier(.16,1,.3,1), padding .45s cubic-bezier(.16,1,.3,1), opacity .25s; overflow: hidden; }
.hd.is-mail .hd-foot { border-top: 0; }
.hd-mail-to { font-size: 12px; color: #a9b5af; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-mail-txt { font-size: 13.5px; line-height: 1.45; white-space: pre-line; min-height: 4.4em; margin: 0 0 12px; }
.hd-mail-txt::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--lime); vertical-align: -2px; margin-left: 1px; animation: hd-blink 1s steps(1) infinite; }
.hd.is-ready .hd-mail-txt::after { display: none; }
.hd-act { display: flex; align-items: center; gap: 12px; }
.hd-send { font: 700 15px/1 var(--text); color: var(--ink); background: var(--lime); border: 0; border-radius: 999px; padding: 11px 20px; cursor: pointer; position: relative; opacity: .45; transition: opacity .3s, transform .15s; }
.hd.is-ready .hd-send { opacity: 1; }
.hd.is-ready .hd-send::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 2px solid var(--lime); animation: hd-ring 1.6s cubic-bezier(.16,1,.3,1) infinite; }
.hd-send:active { transform: scale(.96); }
.hd-send:disabled { cursor: default; }
.hd-act span { font-size: 13px; color: #cfd8d3; }
.hd.is-sent .hd-send { background: var(--paper); }
.hd.is-sent .hd-send::after { display: none; }

.hd-note { font-size: 12.5px; color: var(--ink-2); margin: 10px 2px 0; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hd-note a { text-decoration: underline; font-weight: 600; }

@keyframes hd-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hd-pulse { 50% { opacity: .35; } }
@keyframes hd-blink { 50% { opacity: 0; } }
@keyframes hd-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }

/* układ w hero */
@media screen and (min-width: 1200px) {
  .hero-frame.has-demo .hero-copy { max-width: calc(100% - 560px); padding-right: 0; }
  .hero-frame.has-demo .hero h1, .hero-frame.has-demo h1 { font-size: clamp(56px, 6.2vw, 104px); }
  .hero-frame.has-demo .hd { position: absolute; right: 32px; top: 104px; width: 500px; }
  .hero-frame.has-demo { min-height: 800px; }
  .hero-frame.has-demo .hero-facts { display: none; }
}
@media screen and (max-width: 1199px) {
  .hero-frame.has-demo { flex-direction: column; align-items: stretch; }
  .hero-frame.has-demo .hd { order: 2; width: auto; max-width: 620px; margin: 0 56px 28px; }
}
@media screen and (max-width: 900px) {
  .hero-frame.has-demo > picture { display: none; }
  .hero-frame.has-demo .hd { margin: 0 16px 20px; max-width: none; }
}
@media screen and (max-width: 560px) {
  .hd-hook { font-size: 18px; }
  .hd-rows li { padding: 7px 12px; }
  .hd-tabs button, .hd-tabs select { padding: 8px 11px; font-size: 13px; }
  .hd-bar .dots, .hd-foot .leg { display: none; }
  .hd-ai { font-size: 11.5px; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd *, .hd *::before, .hd *::after { animation: none !important; transition: none !important; }
}