/* ============================================================
   COMPONENTS — znovupoužitelné UI prvky.
   Obsah: eyebrow · tlačítka · terminálové okno · pruh „pro koho" ·
          pruh výsledků · FAQ
   ============================================================ */

/* ---- eyebrow (štítek nad nadpisem) ---- */
.eyebrow{
  font-family:"JetBrains Mono", monospace;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim);
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 14px; border:1px solid var(--line-2); border-radius:999px;
  background:linear-gradient(180deg, rgba(15,18,20,.7), rgba(10,12,14,.5));
  backdrop-filter:blur(6px);
}
.eyebrow .d{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent) }

/* ---- tlačítka ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 26px;
  border-radius:999px;
  font-size:15px; font-weight:500; letter-spacing:-.005em;
  transition: transform .15s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
  position:relative; min-height:var(--tap);
}
.btn:active{ transform:translateY(1px) }
.btn-primary{
  background:linear-gradient(180deg, #c8ff5e 0%, var(--accent) 100%);
  color:#0a0a0a;
  border:1px solid var(--accent);
  box-shadow:
    0 0 0 1px rgba(182,255,60,.18),
    0 14px 40px -10px rgba(182,255,60,.55),
    inset 0 -2px 0 rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.35);
  font-weight:600;
}
.btn-primary:hover{ box-shadow: 0 0 0 1px rgba(182,255,60,.3), 0 18px 50px -10px rgba(182,255,60,.7), inset 0 -2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.45); transform:translateY(-1px) }
.btn-primary svg{ transition:transform .25s var(--ease) }
.btn-primary:hover svg{ transform:translateX(4px) }
.btn-ghost{
  background:linear-gradient(180deg, rgba(20,23,26,.6), rgba(15,18,20,.4));
  color:var(--ink);
  border:1px solid var(--line-2);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:var(--line-3); background:linear-gradient(180deg, rgba(26,30,34,.8), rgba(20,23,26,.6)); color:var(--ink-2) }

/* ---- terminálové okno v hero ---- */
.term-wrap{ position:relative }
.term{
  background:linear-gradient(180deg, rgba(20,23,26,.7) 0%, rgba(10,12,14,.85) 100%);
  border:1px solid var(--line-2);
  border-radius:12px; overflow:hidden;
  font-family:"JetBrains Mono", monospace; font-size:13px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative; backdrop-filter:blur(8px);
}
.term::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 80% at 0% 0%, rgba(182,255,60,.08), transparent 60%) }
.term .bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.3); font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; position:relative; z-index:1 }
.term .bar i{ width:10px; height:10px; border-radius:50% }
.term .bar i:nth-child(1){ background:#ff5f57 } .term .bar i:nth-child(2){ background:#febc2e } .term .bar i:nth-child(3){ background:#28c840 }
.term .bar .t{ margin-left:10px }
.term .bar .right{ margin-left:auto; color:var(--mute-2) }
.term .body{ padding:20px 22px 24px; line-height:1.85; position:relative; z-index:1 }
.term .l{ color:var(--ink-dim) } .term .k{ color:var(--ink) } .term .ok{ color:var(--accent) } .term .warn{ color:var(--warn) }
.term .row{ display:flex; justify-content:space-between; gap:16px }
.term .row .v{ color:var(--accent) }

/* ---- pruh „pro koho" ---- */
.who-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: 20px 0;
  background:linear-gradient(180deg, rgba(15,18,20,.4), transparent);
}
.who-strip .row{
  display:flex; align-items:stretch; gap: 0; flex-wrap:nowrap;
  overflow-x:auto; scrollbar-width:none;
}
.who-strip .row::-webkit-scrollbar{ display:none }
.who-strip .row .item{
  display:flex; align-items:center; gap:12px;
  padding: 8px 28px 8px 0; margin-right:28px;
  border-right:1px solid var(--line);
  font-family:"JetBrains Mono", monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim);
  white-space:nowrap;
}
.who-strip .row .item:last-child{ border-right:0 }
.who-strip .row .item .g{ color:var(--accent); font-size:14px }
.who-strip .row .item b{ color:var(--ink-2); font-weight:500 }

/* ---- pruh výsledků ---- */
.proofband{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2) }
/* Pruh drží stejnou šířku jako zbytek stránky: linka nahoře a dole jde
   přes celou obrazovku, obsah se zarovnává na .wrap. */
.proofband .grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
}
.proofband .cell{ padding: clamp(20px,2.4vw,30px) clamp(16px,1.8vw,28px); border-left:1px solid var(--line); display:flex; flex-direction:column; gap:6px }
/* krajní buňky lícují s okrajem obsahu */
.proofband .cell:first-child{ border-left:0; padding-left:0 }
.proofband .cell:last-child{ padding-right:0 }
.proofband .v{ font-family:"JetBrains Mono", monospace; font-size: clamp(28px,3.4vw,40px); font-weight:500; color:var(--accent); letter-spacing:-.028em; text-shadow:0 0 24px rgba(182,255,60,.28) }
.proofband .k{ font-size:14px; color:var(--ink); font-weight:500 }
.proofband .src{ font-size:12.5px; color:var(--ink-dim) }
@media (max-width:720px){
  .proofband .grid{ grid-template-columns:repeat(2,1fr) }
  .proofband .cell:nth-child(odd){ border-left:0; padding-left:0 }
  .proofband .cell:nth-child(even){ padding-right:0 }
  .proofband .cell:nth-child(n+3){ border-top:1px solid var(--line) }
}

/* ---- FAQ ---- */
.faq{ border-top:1px solid var(--line) }
.qitem{ border-bottom:1px solid var(--line) }
.qitem summary{ list-style:none } .qitem summary::-webkit-details-marker{ display:none }
.qitem .qrow{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 16px 0;
  font-size: 17.5px; font-weight:500; letter-spacing:-.012em;
  color:var(--ink-2); cursor:pointer;
  transition:color .2s; min-height:var(--tap);
}
.qitem .qrow:hover{ color:var(--accent) }
.qitem .plus{ width:30px; height:30px; flex-shrink:0; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; font-family:"JetBrains Mono", monospace; font-size:16px; color:var(--ink-dim); transition: transform .35s var(--ease), color .2s, border-color .2s, background .25s }
.qitem[open] .plus{ transform:rotate(45deg); color:var(--accent); border-color:var(--accent-dim); background:rgba(182,255,60,.08) }
.qitem .ans{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease) }
.qitem .ans-inner{ padding: 0 60px 18px 0; color:var(--ink-dim); font-size:15px; line-height:1.65; max-width: 72ch }