/* ============================================================
   BiBOX SK — doplnky nad vizuálom SERVIS PC
   tokens.css a main.css sú prevzaté zo servis-pc.sk bez zmien;
   tu je len to, čo bibox.sk potrebuje navyše.
   ============================================================ */

/* --- Logo ---------------------------------------------------- */
.site-header .logo img { width: 130px; }
.site-footer .logo img { width: 150px; }

/* --- Úvod: centrovaný nadpis a monitor ----------------------- */
/* Pôvodný bibox.sk mal v úvode fotku počítača na stole — tu ho
   nahrádza nakreslený monitor s terminálom. */
.bx-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 50% 115%, rgb(24 99 201 / 0.35), transparent 70%),
    var(--dark-surface);
  padding-top: var(--space-16);
}
.bx-hero::before {           /* jemná bodková mriežka */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}
@media (min-width: 768px) { .bx-hero { padding-top: var(--space-24); } }

.bx-hero-inner { position: relative; text-align: center; }
.bx-hero-eyebrow {
  color: #A9B4C6;
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}
.bx-hero h1 {
  color: #fff;
  font-size: clamp(2.75rem, 9vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-8);
}
.bx-hero h1 span { color: var(--blue-400); display: block; }
.bx-hero .hero-actions { justify-content: center; }

.bx-monitor {
  position: relative;
  max-width: 760px;
  margin: var(--space-16) auto 0;
  padding: 14px 14px 0;
  background: #1A202B;
  border: 1px solid var(--dark-border);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 80px rgb(24 99 201 / 0.25);
  text-align: left;
}
.bx-screen {
  background: #070A0F;
  border: 1px solid var(--dark-border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  min-height: 15rem;
}
.bx-screen-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--dark-border);
  font-size: 12px;
  color: #6B7A90;
}
.bx-screen-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2A3344; }
.bx-screen-bar span { margin-left: 8px; }
.bx-term {
  margin: 0;
  padding: var(--space-6);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(0.78rem, 2.4vw, 0.98rem);
  line-height: 1.9;
  color: #D2D9E4;
  white-space: pre-wrap;
}
.bx-term .p { color: var(--blue-400); }
.bx-term .ok { color: #4ADE80; }
.bx-typed { color: #fff; }
.bx-caret {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--blue-400);
  animation: bx-blik 1s steps(1) infinite;
}
@keyframes bx-blik { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bx-caret { animation: none; } }

/* --- O nás --------------------------------------------------- */
.bx-about-grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .bx-about-grid { grid-template-columns: 1fr 2fr; gap: var(--space-16); }
}
.bx-about .eyebrow {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.bx-about-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.bx-about-text p { color: var(--color-muted-fg); max-width: var(--measure); }
.bx-about-text p + p { margin-top: var(--space-6); }
.bx-about-text strong { color: var(--color-foreground); font-weight: var(--weight-semibold); }
.bx-lead { font-size: var(--text-xl); line-height: 1.55; color: var(--color-foreground) !important; }

.bx-qualities {
  list-style: none;
  margin: var(--space-16) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .bx-qualities { grid-template-columns: repeat(4, 1fr); } }
.bx-qualities li {
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-primary);
}
.bx-qualities strong { display: block; font-size: var(--text-lg); margin-bottom: var(--space-1); }
.bx-qualities span { color: var(--color-muted-fg); font-size: var(--text-sm); }

/* --- Služby: číslovaný zoznam -------------------------------- */
.bx-services { background: var(--color-surface); }
.bx-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-border); }
.bx-row {
  display: grid;
  grid-template-columns: 1fr auto;   /* mobil: číslo a šípka hore, text pod nimi */
  gap: var(--space-2) var(--space-6);
  align-items: center;
  padding: var(--space-8) var(--space-4);
  border-top: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}
.bx-row-num {
  font-family: var(--font-accent);
  font-weight: 700;
  color: var(--blue-300);
  font-size: var(--text-lg);
}
.bx-row h3 { grid-column: 1 / -1; font-size: clamp(1.35rem, 3vw, 2rem); }
.bx-row p { grid-column: 1 / -1; color: var(--color-muted-fg); max-width: 60ch; }
.bx-row-arrow {
  grid-column: 2;
  grid-row: 1;
  color: var(--color-primary);
  transition: transform var(--dur-base) var(--ease-out);
}
@media (min-width: 900px) {
  .bx-row { grid-template-columns: 4rem 22rem 1fr auto; }
  .bx-row h3 { grid-column: 2; }
  .bx-row p { grid-column: 3; }
  .bx-row-arrow { grid-column: 4; }
}
.bx-row:hover, .bx-row:focus-visible { background: var(--color-primary-subtle); }
.bx-row:hover .bx-row-arrow, .bx-row:focus-visible .bx-row-arrow { transform: translateX(6px); }

/* --- Tmavý pás s výzvou -------------------------------------- */
.cta-band {
  background: var(--dark-surface);
  color: #fff;
  padding-block: var(--space-16);
}
.cta-band .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-12);
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { color: #fff; font-size: var(--text-2xl); max-width: 24ch; }
.cta-band p { color: #A9B4C6; margin-top: var(--space-2); max-width: 52ch; }

/* --- Zoznam značiek pri servise ------------------------------ */
.brands { color: var(--color-muted-fg); font-size: var(--text-sm); }
.brands b { color: var(--color-foreground); font-weight: var(--weight-semibold); }

/* --- Kontaktný formulár: dve stĺpce na desktope -------------- */
.contact-page { display: grid; gap: var(--space-12); }
@media (min-width: 1024px) {
  .contact-page { grid-template-columns: 3fr 2fr; align-items: start; }
}
.contact-page .form-panel { margin: 0; }