/* BOTMAXXER landing page: page-specific styles.
   Load after global.css. Visual values come from global tokens (--bm-*) or
   from the page tokens below. Page tokens are the only place for literals here. */

:root {
  --page-color-muted: #565650;
  --page-line-subtle: #0003;
  --page-header-height: 70px;
  --page-logo-width: 120px;
  --page-logo-width-footer: 170px;
  --page-logo-max-height: 42px;
  --page-hero-columns: 1.12fr 1fr;
  --page-split-columns: 0.9fr 1.1fr;
  --page-chat-max-height: 480px;
  --page-chat-icon-size: 29px;
  --page-product-art-height: 88px;
  --page-shoe-width: 90px;
  --page-shoe-height: 44px;
  --page-flow-index-size: 48px;
  --page-intro-width: 345px;
  --page-copy-width: 490px;
  --page-faq-width: 900px;
  --page-contact-width: 850px;
  --page-text-lead: 1.125rem;
  --page-text-small: 0.875rem;
  --page-text-tiny: 0.625rem;
  --page-text-nav: 0.75rem;
  --page-text-faq: 1.125rem;
  --page-text-flow-index: 1.625rem;
  --page-text-contact: clamp(2.375rem, 5vw, 4.125rem);
  --page-text-strip: 1.0625rem;
  --page-text-chat-title: 0.9375rem;
  --page-text-mega-link: 0.875rem;
  --page-message-max: 94%;
  --page-message-user-max: 85%;
  --page-mega-columns: 4;
  --page-z-header: 10;
  --page-cta-bg: var(--bm-color-acid);   /* CTA button specific bgr color */
  --page-cta-fg: var(--bm-color-paper);   /* CTA button specific font color */
}

/* Header */
.page-header {
  position: relative;
  z-index: var(--page-z-header);
  border-bottom: var(--bm-border);
  background: var(--bm-color-ink);
}
.page-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-6);
  min-height: var(--page-header-height);
}
.page-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.page-brand img {
  width: var(--page-logo-width);
  max-height: var(--page-logo-max-height);
}
.page-footer .page-brand img {
  width: var(--page-logo-width-footer);
}
.page-brand__fallback {
  font-family: var(--bm-font-heading);
  font-size: var(--bm-text-pricing-title);
  color: var(--bm-color-paper);
}
.page-nav {
  display: flex;
  align-items: center;
  gap: var(--bm-space-5);
  color: var(--bm-color-paper);
}
.page-nav > a,
.page-nav__trigger {
  font-size: var(--page-text-nav);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
.page-nav > a:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--bm-border-width);
  text-underline-offset: var(--bm-space-2);
}
.page-menu-toggle {
  display: none;
  padding: var(--bm-space-3);
  background: var(--bm-color-paper);
  border: var(--bm-border);
}

/* nová modifikátor třída header CTA */
.page-cta {
  --bm-button-bg: var(--page-cta-bg);
  --bm-button-fg: var(--page-cta-fg);
}

/* Mega menu */
.page-nav__item {
  display: flex;
  align-items: center;
}
.page-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-space-2);
  padding: var(--bm-space-2) var(--bm-space-3);
  border: var(--bm-border-width) solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
}
.page-nav__trigger::after {
  content: "";
  font-family: var(--bm-font-mono);
}
.page-nav__trigger:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--bm-border-width);
  text-underline-offset: var(--bm-space-2);
}
.page-nav__trigger[aria-expanded="true"] {
  background: var(--bm-color-ink);
  border-color: var(--bm-color-ink);
  text-decoration: underline;
  text-decoration-thickness: var(--bm-border-width);
  text-underline-offset: var(--bm-space-2);
}
.page-nav__trigger[aria-expanded="true"]::after {
  content: "";
}
.page-mega {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--bm-border-width));
  background: var(--bm-color-paper);
  border-bottom: var(--bm-border);
  box-shadow: none;
}
.page-mega__columns {
  display: grid;
  grid-template-columns: repeat(var(--page-mega-columns), minmax(0, 1fr));
  padding-block: var(--bm-space-6);
}
.page-mega__column {
  min-width: 0;
  padding-inline: var(--bm-space-5);
}
.page-mega__column:first-child {
  padding-left: 0;
}
.page-mega__column:last-child {
  padding-right: 0;
}
.page-mega__column + .page-mega__column {
  border-left: var(--bm-border);
}
.page-mega__heading {
  display: block;
  margin-bottom: var(--bm-space-4);
  color: var(--bm-color-ink);
}
.page-mega__list {
  display: grid;
  gap: var(--bm-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-mega__link {
  display: block;
  font-family: var(--bm-font-body);
  font-size: var(--page-text-mega-link);
  font-weight: var(--bm-weight-semibold);
  line-height: var(--bm-line-body);
  color: var(--bm-color-ink);
  text-transform: uppercase;
  text-decoration: none;
}
.page-mega__link:hover,
.page-mega__link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: var(--bm-border-width);
  text-underline-offset: var(--bm-space-1);
}

/* Hero */
.page-hero {
  padding-block: var(--bm-space-8);
  border-bottom: var(--bm-border);
}
.page-hero__grid {
  display: grid;
  grid-template-columns: var(--page-hero-columns);
  gap: var(--bm-space-7);
  align-items: center;
}
.page-hero__tag {
  margin-bottom: var(--bm-space-5);
  box-shadow: var(--bm-shadow-compact);
}
.page-hero__square {
  width: var(--bm-space-2);
  height: var(--bm-space-2);
  background: var(--bm-color-ink);
}
.page-hero__copy {
  max-width: var(--page-copy-width);
  margin-top: var(--bm-space-5);
  font-size: var(--page-text-lead);
  line-height: var(--bm-line-body);
}
.page-hero__actions {
  margin-top: var(--bm-space-6);
  gap: var(--bm-space-5);
}
.page-hero__notes {
  margin-top: var(--bm-space-6);
  gap: var(--bm-space-5);
  color: var(--page-color-muted);
}
.page-hero__bot {
  display: block;
  width: 100%;
  height: auto;
}

/* Chat demo */
.page-demo {
  min-width: 0;
}
.page-demo__label {
  display: flex;
  justify-content: space-between;
  gap: var(--bm-space-4);
  margin-bottom: var(--bm-space-3);
}
.page-chat {
  border: var(--bm-border);
  box-shadow: var(--bm-shadow);
  background: var(--bm-color-paper);
}
.page-chat__top {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  padding: var(--bm-space-4) var(--bm-space-5);
  background: var(--bm-color-ink);
  color: var(--bm-color-paper);
}
.page-chat__icon {
  width: var(--page-chat-icon-size);
  height: var(--page-chat-icon-size);
  padding: var(--bm-space-1);
  background: var(--bm-color-acid);
}
.page-chat__icon img {
  width: 100%;
  height: 100%;
}
.page-chat__title {
  font-family: var(--bm-font-heading);
  font-size: var(--page-text-chat-title);
}
.page-chat__sub {
  font-size: var(--page-text-tiny);
}
.page-chat__messages {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
  max-height: var(--page-chat-max-height);
  padding: var(--bm-space-5);
  overflow: auto;
}
.page-message {
  align-self: flex-start;
  max-width: var(--page-message-max);
  padding: var(--bm-space-3) var(--bm-space-4);
  border: var(--bm-border-thin);
  background: var(--bm-color-paper);
  font-size: var(--page-text-small);
}
.page-message--user {
  align-self: flex-end;
  max-width: var(--page-message-user-max);
  background: var(--bm-color-acid);
}
.page-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bm-space-3);
}
.page-product {
  min-width: 0;
  border: var(--bm-border-thin);
}
.page-product__art {
  display: grid;
  place-items: center;
  height: var(--page-product-art-height);
  background: var(--bm-color-acid);
  border-bottom: var(--bm-border-thin);
}
.page-product__art--ink {
  background: var(--bm-color-ink);
  color: var(--bm-color-acid);
}
.page-product__shoe {
  width: var(--page-shoe-width);
  height: var(--page-shoe-height);
}
.page-product__info {
  padding: var(--bm-space-3);
}
.page-product__name {
  display: block;
  font-size: var(--bm-text-card-body);
  line-height: var(--bm-line-button);
  font-weight: 700;
}
.page-product__price {
  display: block;
  margin-top: var(--bm-space-2);
}
.page-product__action {
  width: 100%;
  margin-top: var(--bm-space-3);
  padding: var(--bm-space-2);
  border: var(--bm-border-thin);
  background: var(--bm-color-paper);
  font-size: var(--bm-text-label);
  font-weight: 700;
}
.page-product__action:hover {
  background: var(--bm-color-acid);
}
.page-chat__form {
  display: flex;
  gap: var(--bm-space-2);
  padding: var(--bm-space-3);
  border-top: var(--bm-border);
}
.page-chat__input {
  width: 100%;
  min-width: 0;
  padding: var(--bm-space-3);
  border: var(--bm-border-thin);
  border-radius: 0;
  background: var(--bm-color-paper);
  font-size: var(--page-text-small);
}
.page-chat__send {
  flex-shrink: 0;
  width: var(--page-flow-index-size);
  border: var(--bm-border-thin);
  background: var(--bm-color-ink);
  color: var(--bm-color-acid);
  font-size: var(--bm-text-card-title);
}
.page-demo__disclaimer {
  margin-top: var(--bm-space-4);
  color: var(--page-color-muted);
}

/* Strip */
.page-strip {
  padding-block: var(--bm-space-4);
  border-bottom: var(--bm-border);
  background: var(--bm-color-ink);
  color: var(--bm-color-paper);
}
.page-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bm-space-5);
  font-family: var(--bm-font-heading);
  font-size: var(--page-text-strip);
  text-transform: uppercase;
}

/* Sections */
.page-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bm-space-6);
  margin-bottom: var(--bm-space-6);
}
.page-section-head .bm-label {
  margin-bottom: var(--bm-space-3);
}
.page-section-intro {
  max-width: var(--page-intro-width);
}
.page-split {
  display: grid;
  grid-template-columns: var(--page-split-columns);
  gap: var(--bm-space-7);
  align-items: center;
}
.page-split__copy {
  max-width: var(--page-copy-width);
  margin-top: var(--bm-space-5);
  font-size: var(--page-text-lead);
}
.page-terminal {
  border: var(--bm-border);
  box-shadow: var(--bm-shadow);
}
.page-terminal__top {
  display: flex;
  justify-content: space-between;
  padding: var(--bm-space-3) var(--bm-space-4);
  background: var(--bm-color-ink);
  color: var(--bm-color-paper);
}
.page-terminal__body {
  padding: var(--bm-space-5);
}
.page-flow {
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  padding-block: var(--bm-space-4);
  border-bottom: var(--bm-border-width-thin) solid var(--page-line-subtle);
}
.page-flow:last-child {
  border-bottom: 0;
}
.page-flow__index {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--page-flow-index-size);
  height: var(--page-flow-index-size);
  background: var(--bm-color-ink);
  font-family: var(--bm-font-heading);
  font-size: var(--page-text-flow-index);
  color: var(--bm-color-paper);
}
.page-flow p {
  margin-top: var(--bm-space-1);
  font-size: var(--page-text-small);
}
.page-steps {
  display: grid;
  grid-template-columns: repeat(var(--bm-grid-columns), minmax(0, 1fr));
  gap: var(--bm-space-6);
}
.page-step {
  padding-top: var(--bm-space-5);
  border-top: var(--bm-border);
}
.page-step .bm-label {
  display: block;
  margin-bottom: var(--bm-space-5);
}
.page-step p {
  margin-top: var(--bm-space-3);
}
.page-faq {
  max-width: var(--page-faq-width);
  margin-top: var(--bm-space-6);
}
.page-faq details {
  padding-block: var(--bm-space-5);
  border-top: var(--bm-border);
}
.page-faq details:last-child {
  border-bottom: var(--bm-border);
}
.page-faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--bm-space-5);
  font-size: var(--page-text-faq);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.page-faq summary::after {
  content: "+";
  font-family: var(--bm-font-mono);
}
.page-faq details[open] summary::after {
  content: "\2212";
}
.page-faq p {
  max-width: var(--page-copy-width);
  margin-top: var(--bm-space-3);
  color: var(--page-color-muted);
}

/* Contact */
.page-contact {
  padding-block: var(--bm-space-8);
  border-bottom: var(--bm-border);
  background: var(--bm-color-ink);
  background-image: url("assets/images/shapes_background.svg");
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--bm-color-paper);
  text-align: center;
}
.page-contact__title {
  max-width: var(--page-contact-width);
  margin: var(--bm-space-4) auto 0;
  font-size: var(--page-text-contact);
  color: var(--bm-color-paper);
}
.page-contact__copy {
  max-width: var(--page-copy-width);
  margin: var(--bm-space-5) auto var(--bm-space-6);
  font-size: var(--page-text-lead);
}
.page-contact__action {
  display: flex;
  justify-content: center;
}
.page-contact__status {
  min-height: var(--bm-space-5);
  margin-top: var(--bm-space-5);
}
.page-contact__note {
  margin-top: var(--bm-space-3);
}
.page-contact .bm-button {
  --bm-button-bg: var(--bm-color-acid);
}

/* Footer */
.page-footer {
  padding-block: var(--bm-space-6);
}
.page-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-5);
}
.page-footer .bm-label {
  color: var(--page-color-muted);
}

.bm-highlight {
  background: var(--bm-color-acid);
  color: var(--bm-color-paper);
}

/* Responsive. Media queries cannot read custom properties; 52rem matches global.css. */
@media (max-width: 68rem) {
  .page-nav {
    gap: var(--bm-space-3);
  }
  .page-hero__grid {
    gap: var(--bm-space-6);
  }
  .page-mega__column {
    padding-inline: var(--bm-space-4);
  }
}
@media (max-width: 52rem) {
  .page-header__inner {
    flex-wrap: wrap;
    padding-block: var(--bm-space-4);
  }
  .page-menu-toggle {
    display: block;
    margin-left: auto;
  }
  .page-nav {
    display: none;
    order: 4;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: var(--bm-space-4);
    gap: var(--bm-space-4);
  }
  .page-nav.is-open {
    display: flex;
  }
  .page-nav__item {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .page-nav__trigger {
    padding-left: 0;
  }
  .page-mega {
    position: static;
    width: 100%;
    margin-top: var(--bm-space-3);
    border: var(--bm-border);
    box-shadow: none;
  }
  .page-mega__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bm-space-5);
    padding: var(--bm-space-4);
  }
  .page-mega__column,
  .page-mega__column:first-child,
  .page-mega__column:last-child {
    padding-inline: 0;
  }
  .page-mega__column + .page-mega__column {
    border-left: 0;
    border-top: var(--bm-border);
    padding-top: var(--bm-space-5);
  }
  .page-hero__grid,
  .page-split,
  .page-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-section-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-strip__inner {
    justify-content: flex-start;
    gap: var(--bm-space-3);
  }
  .page-footer__inner {
    flex-wrap: wrap;
  }
}
@media (max-width: 30rem) {
  .page-brand img {
    width: calc(var(--page-logo-width) * 0.66);
  }
  .page-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}