@charset "UTF-8";
/* Společné proměnné, typografie a vzhled tlačítek.
   Rozložení a zarovnání doplňují utility Bootstrap 5.3.5 v HTML a app.js. */

/* Proměnné */
:root {
  /* Barvy */
  --bg: #11110f;
  --surface: #191a16;
  --surface2: #22231d;
  --ink: #fffdf6;
  --muted: #a5a69a;
  --yellow: #ffee00;
  --red: #e83b31;
  --line: #ffffff1b;
  --color-button-text: #16170f;
  --color-button-hover: #ffee00;
  --color-eyebrow: #d4d5c6;
  --color-description: #acb19f;
  --color-note: #808a73;
  /* Písma a typografie */
  --heading: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --body: Arial, Helvetica, sans-serif;
  --font-size-body: 14px;
  --line-height-body: 1.6;
  --font-size-h1: clamp(76.5px, 8.33vw, 120.7px);
  --font-size-h2: 76px;
  --font-weight-heading: 800;
  --line-height-h1: .84;
  --line-height-h2: .95;
  --letter-spacing-h1: -1px;
  --letter-spacing-h2: -.5px;
  /* Odsazení a šířka obsahu */
  --heading-margin-bottom: 26px;
  --eyebrow-margin-bottom: 24px;
  --description-margin-top: 23px;
  --description-margin-bottom: 24px;
  --content-width: 1200px;
  --page-gutter: 48px;
  --scroll-offset: 115px;
  /* Společná tlačítka */
  --button-radius: 4px;
  --button-padding-y: 15px;
  --button-padding-x: 23px;
  --transition-duration: .18s;
}

/* Společné styly */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--scroll-offset); }
body { margin: 0px; background: var(--bg); color: var(--ink); font: var(--font-size-body)/var(--line-height-body) var(--body); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
button { border: 0px; }
button:hover, a:hover { transition: background var(--transition-duration),color var(--transition-duration),transform var(--transition-duration); }
[hidden] { display: none !important; }
.wrap { width: min(var(--content-width),calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
/* Typografie a textové odsazení */
.eyebrow { margin: 0 0 var(--eyebrow-margin-bottom); color: var(--color-eyebrow); letter-spacing: 2px; font-size: 9px; gap: 9px; }
.eyebrow > span { width: 7px; height: 7px; background: var(--red); border-radius: 50%; }
h1, h2, h3, h4, p { margin-top: 0px; }
h1 { font: var(--font-weight-heading) var(--font-size-h1)/var(--line-height-h1) var(--heading); letter-spacing: var(--letter-spacing-h1); margin: 0 0 var(--heading-margin-bottom); }
h1 > span { color: var(--yellow); }
h2 { font: var(--font-weight-heading) var(--font-size-h2)/var(--line-height-h2) var(--heading); letter-spacing: var(--letter-spacing-h2); margin: 0px; }
h2 span { color: var(--yellow); }
.section-description { font-size: 12px; color: var(--color-description); line-height: 1.9; margin: var(--description-margin-top) 0 var(--description-margin-bottom); max-width: 410px; }
.small-note { line-height: 1.7; font-size: 8px !important; color: var(--color-note) !important; margin: 8px 0px 0px !important; }
/* Společný vzhled tlačítek */
.button { gap: 25px; min-height: 51px; padding: var(--button-padding-y) var(--button-padding-x); border-radius: var(--button-radius); font-size: 12px; font-weight: bold; line-height: 1.4; }
.button-yellow { background: var(--yellow); color: var(--color-button-text); }
.button-yellow:hover { background: var(--color-button-hover); transform: translateY(-2px); }
.button > span { font-size: 23px; line-height: 0.8; }
.button-outline { border: 1px solid rgb(140, 148, 123); color: rgb(245, 246, 232); background: none; font-size: 11px; }
.button-outline:hover { background: rgb(36, 39, 30); border-color: var(--yellow); color: var(--yellow); }

@media (min-width: 1500px) {
  h1 { font-size: 127.5px; }
}

@media (max-width: 1150px) {
  .wrap { width: calc(100% - 64px); }
  h1 { font-size: 97.75px; }
  .button { padding-inline: 18px; }
}

@media (max-width: 920px) {
  h1 { font-size: 83.3px; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 90px; }
  .wrap { width: calc(100% - 40px); }
  .eyebrow { font-size: 8px; letter-spacing: 1.5px; gap: 7px; margin-bottom: 22px; }
  .eyebrow > span { width: 5px; height: 5px; }
  h1 { font-size: clamp(80.75px, 20.145vw, 129.2px); line-height: 0.85; letter-spacing: -1px; margin-bottom: 22px; }
  h2 { font-size: 61px; line-height: 0.96; }
  .section-description { font-size: 12px; margin-top: 20px; margin-bottom: 24px; max-width: 440px; }
  .small-note { font-size: 9px !important; }
}

@media (max-width: 370px) {
  .wrap { width: calc(100% - 32px); }
  .eyebrow { font-size: 7px; letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}