/* =========================================================
   DESIGN TOKENS — Granma brand
   ========================================================= */
:root {
  --color-primary: #dd0c15;      /* Granma červená */
  --color-primary-dark: #b8090f;
  --color-ink: #2c348b;          /* Tmavo-modrá (text) */
  --color-accent: #37409d;       /* Fialovo-modrá (bloky) */
  --color-accent-dark: #2c348b;
  --color-dark: #232323;         /* Tmavý gradient (hero/stats) */
  --color-border: #e5e5e5;

  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-body: 1rem;
  --fs-label: 0.85rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 1024px) {
  .container { padding-left: 40px; padding-right: 40px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 26px;
  border-radius: 8px;
  white-space: nowrap;
  transition: all .2s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.eyebrow {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  font-size: 15px;
}

/* =========================================================
   MOBILE NAV
   ========================================================= */
#mob-nav { transition: max-height .25s ease; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   CARDS / SHADOW
   ========================================================= */
.card-shadow {
  box-shadow: 0 10px 30px rgba(35, 35, 35, 0.12);
}