/* ═══════════════════════════════════════════════
   VYHRAJ PRE FIRMY — Dark Theme (B2B Marketing)
   Scoped to body.vyhraj-pre-firmy only
   ═══════════════════════════════════════════════ */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,800&f[]=satoshi@400,500,700&display=swap');

body.vyhraj-pre-firmy {
  --bg:        #0c1220;
  --surface:   #141d35;
  --surface-2: #1a2540;
  --surface-3: #1f2d4f;
  --line:      rgba(255,255,255,.08);
  --text:      #e8eeff;
  --muted:     #8a9cc4;
  --blue:      #3d6df2;
  --blue-l:    #6b96ff;
  --amber:     #f5a623;
  --purple:    #7b2fbe;
  --green:     #30c48d;
  --radius:    20px;
  --shadow:    0 8px 28px rgba(0,0,0,.25);
}

body.vyhraj-pre-firmy {
  font-family: "Satoshi", sans-serif;
  background:
    radial-gradient(circle at 80% 0%, rgba(61,109,242,.13), transparent 35%),
    radial-gradient(circle at 10% 20%, rgba(123,47,190,.10), transparent 30%),
    var(--bg);
  color: var(--text);
}

/* ── Page wrapper ─────────────────────────────── */
body.vyhraj-pre-firmy .pf-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px 100px;
}

/* ════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .pf-hero {
  text-align: center;
  padding: 60px 16px 52px;
  position: relative;
}

body.vyhraj-pre-firmy .pf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(61,109,242,.18), transparent 60%);
  pointer-events: none;
}

body.vyhraj-pre-firmy .pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(61,109,242,.12);
  border: 1px solid rgba(61,109,242,.30);
  color: var(--blue-l);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

body.vyhraj-pre-firmy .pf-hero h1 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.8rem);
  color: #fff;
  line-height: 1.05;
  margin: 0 0 18px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

body.vyhraj-pre-firmy .pf-hero .pf-lead {
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 54ch;
  margin: 0 auto 32px;
  line-height: 1.65;
}

body.vyhraj-pre-firmy .pf-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
  transition: filter .15s, transform .15s;
  border: none;
}

body.vyhraj-pre-firmy .pf-hero-cta:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  color: #fff;
}

body.vyhraj-pre-firmy .pf-hero-illu {
  max-width: 240px;
  width: 100%;
  height: auto;
  margin: 0 auto 24px;
  display: block;
}

@media (min-width: 768px) {
  body.vyhraj-pre-firmy .pf-hero-illu {
    max-width: 180px;
    margin-bottom: 20px;
  }
}

/* ════════════════════════════════════════════════
   SEASON CALENDAR TEASER (SEA-6 owner review §8)
   A large card with the market's OG image, the text and a button.
   Under 768px: image on top at full width, then the text, then a full-width button.
   From 768px: image left (55 % of the card, max 560px), text and button right, centred vertically.
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .pf-season-teaser {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: 24px auto 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none !important;
  transition: border-color .15s;
}

body.vyhraj-pre-firmy .pf-season-teaser:hover {
  border-color: var(--blue);
}

body.vyhraj-pre-firmy .pf-season-teaser-img {
  display: block;
  width: 100%;
  height: auto;
}

body.vyhraj-pre-firmy .pf-season-teaser-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px;
}

body.vyhraj-pre-firmy .pf-season-teaser-text {
  color: var(--text);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  overflow-wrap: break-word;
}

body.vyhraj-pre-firmy .pf-season-teaser-cta {
  display: block;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  text-align: center;
  transition: filter .15s;
}

body.vyhraj-pre-firmy .pf-season-teaser:hover .pf-season-teaser-cta {
  filter: brightness(1.12);
}

/* NJ3: the picture and the text are links to the landing, the button its own link: the wrapper adds no box of its own */
body.vyhraj-pre-firmy .pf-season-teaser-link {
  display: contents;
}

body.vyhraj-pre-firmy a.pf-season-teaser-text,
body.vyhraj-pre-firmy a.pf-season-teaser-cta {
  text-decoration: none !important;
}

body.vyhraj-pre-firmy a.pf-season-teaser-cta {
  color: #fff;
}

/* NJ1/NJ2: the landing's hero actions and the trial block (the landing sells a free trial) */
body.vyhraj-pre-firmy .pf-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

body.vyhraj-pre-firmy .pf-hero-note {
  max-width: 560px;
  margin: 0;
  color: var(--muted, #8a8f99);
  font-size: 14px;
  text-align: center;
}

body.vyhraj-pre-firmy .pf-hero-cta-ghost {
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none !important;
}

body.vyhraj-pre-firmy .pf-hero-cta-ghost:hover {
  border-color: var(--blue);
}

body.vyhraj-pre-firmy .adv-trial-steps {
  max-width: 560px;
  margin: 16px auto;
  padding-left: 22px;
  text-align: left;
}

body.vyhraj-pre-firmy .adv-trial-steps li {
  margin-bottom: 6px;
}

body.vyhraj-pre-firmy .adv-trial-cta {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

body.vyhraj-pre-firmy .adv-contact-heading {
  margin: 8px 0 4px;
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  body.vyhraj-pre-firmy .pf-season-teaser {
    flex-direction: row;
    align-items: center;
  }

  body.vyhraj-pre-firmy .pf-season-teaser-img {
    flex: 0 0 55%;
    width: 55%;
    max-width: 560px;
  }

  body.vyhraj-pre-firmy .pf-season-teaser-body {
    flex: 1;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px;
  }

  body.vyhraj-pre-firmy .pf-season-teaser-text {
    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  }

  body.vyhraj-pre-firmy .pf-season-teaser-cta {
    display: inline-block;
  }
}

/* ════════════════════════════════════════════════
   STATS STRIP (live count-up numbers)
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 56px;
}

@media (max-width: 900px) {
  body.vyhraj-pre-firmy .stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  body.vyhraj-pre-firmy .stats-strip {
    grid-template-columns: 1fr;
  }
}

body.vyhraj-pre-firmy .stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

body.vyhraj-pre-firmy .stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
}

body.vyhraj-pre-firmy .stat-card .stat-number {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}

body.vyhraj-pre-firmy .stat-card .stat-label {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════
   RATE CARD TABLE
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .pf-rate-card-wrap {
  margin: 0 0 56px;
}

body.vyhraj-pre-firmy .pf-rate-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

body.vyhraj-pre-firmy .pf-rate-table th,
body.vyhraj-pre-firmy .pf-rate-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

body.vyhraj-pre-firmy .pf-rate-table thead th {
  font-family: "Cabinet Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
}

body.vyhraj-pre-firmy .pf-rate-table tbody tr:last-child td {
  border-bottom: none;
}

body.vyhraj-pre-firmy .pf-rate-table .pf-rate-product {
  font-weight: 700;
  color: #fff;
}

body.vyhraj-pre-firmy .pf-rate-table .pf-rate-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

body.vyhraj-pre-firmy .pf-rate-table .pf-rate-price {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
}

body.vyhraj-pre-firmy .pf-mockup-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--blue-l);
  font-weight: 600;
  text-decoration: none;
}

body.vyhraj-pre-firmy .pf-mockup-link:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 720px) {
  body.vyhraj-pre-firmy .pf-rate-table thead {
    display: none;
  }
  body.vyhraj-pre-firmy .pf-rate-table tr {
    display: block;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
  }
  body.vyhraj-pre-firmy .pf-rate-table td {
    display: block;
    padding: 4px 0;
    border: none;
  }
  body.vyhraj-pre-firmy .pf-rate-table .pf-rate-price {
    margin-top: 8px;
  }
}

/* ════════════════════════════════════════════════
   SECTION HEADING (reusable)
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .section-head {
  text-align: center;
  margin-bottom: 36px;
}

body.vyhraj-pre-firmy .section-head h2 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  margin: 0 0 10px;
}

body.vyhraj-pre-firmy .section-head p {
  color: var(--muted);
  font-size: 15px;
  max-width: 52ch;
  margin: 0 auto;
}

body.vyhraj-pre-firmy .section-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 56px 0;
}

/* ════════════════════════════════════════════════
   HOW IT WORKS — 3-step process
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

@media (max-width: 700px) {
  body.vyhraj-pre-firmy .steps-grid {
    grid-template-columns: 1fr;
  }
}

body.vyhraj-pre-firmy .step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  position: relative;
}

body.vyhraj-pre-firmy .step-card .step-icon {
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}

body.vyhraj-pre-firmy .step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(61,109,242,.15);
  border: 1px solid rgba(61,109,242,.3);
  color: var(--blue-l);
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

body.vyhraj-pre-firmy .step-card h3 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 8px;
  text-align: center;
}

body.vyhraj-pre-firmy .step-card p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.6;
  text-align: center;
}

/* ════════════════════════════════════════════════
   Results / device block
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .pf-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 56px;
}

@media (max-width: 768px) {
  body.vyhraj-pre-firmy .pf-results {
    grid-template-columns: 1fr;
  }
}

body.vyhraj-pre-firmy .pf-results-text h2 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #fff;
  margin: 0 0 16px;
}

body.vyhraj-pre-firmy .pf-results-text p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  text-align: justify;
}

body.vyhraj-pre-firmy .pf-device-wrap {
  max-width: 100%;
  overflow: hidden;
}

/* ════════════════════════════════════════════════
   PRICING CARDS
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}

body.vyhraj-pre-firmy .pricing-grid-single {
  grid-template-columns: 1fr;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

body.vyhraj-pre-firmy .pricing-card .pricing-price .pricing-price-original {
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
  align-self: flex-end;
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  body.vyhraj-pre-firmy .pricing-grid {
    grid-template-columns: 1fr;
  }
}

body.vyhraj-pre-firmy .pricing-card {
  background: linear-gradient(145deg,
    rgba(61,109,242,.12), rgba(123,47,190,.10));
  border: 1px solid rgba(61,109,242,.35);
  border-radius: 24px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

body.vyhraj-pre-firmy .pricing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right,
    rgba(61,109,242,.18), transparent 60%);
  pointer-events: none;
}

/* Stronger emphasis on top of the shared base look above — landing's single card,
   and the one recommended /pre-firmy product carrying the "top" badge. */
body.vyhraj-pre-firmy .pricing-card.is-featured {
  border-color: rgba(61,109,242,.6);
  box-shadow: 0 0 0 1px rgba(61,109,242,.25), 0 12px 32px rgba(61,109,242,.18);
}

body.vyhraj-pre-firmy .pricing-card.is-featured::before {
  background: radial-gradient(circle at top right,
    rgba(61,109,242,.28), transparent 60%);
}

body.vyhraj-pre-firmy .pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 16px;
  align-self: flex-start;
}

body.vyhraj-pre-firmy .pricing-badge.free {
  background: rgba(48,196,141,.12);
  border: 1px solid rgba(48,196,141,.3);
  color: #6ee7b7;
}

body.vyhraj-pre-firmy .pricing-badge.top {
  background: rgba(245,166,35,.12);
  border: 1px solid rgba(245,166,35,.3);
  color: #ffd37a;
}

body.vyhraj-pre-firmy .pricing-card h3 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
  margin: 0 0 8px;
}

body.vyhraj-pre-firmy .pricing-card .pricing-price {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

body.vyhraj-pre-firmy .pricing-card .pricing-price .pricing-price-value {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
}

body.vyhraj-pre-firmy .pricing-card .pricing-price .pricing-price-value.is-text {
  font-size: 1.5rem;
}

body.vyhraj-pre-firmy .pricing-card .pricing-price .pricing-suffix {
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
  align-self: flex-end;
  margin-bottom: 4px;
}

/* The "Akcia do" badge of a running catalog sale: its own centred line under the price and its suffix. */
body.vyhraj-pre-firmy .pricing-card .pricing-sale-badge {
  align-self: center;
  margin: 0 0 10px;
}

body.vyhraj-pre-firmy .pricing-card .pricing-desc {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.6;
  flex: 1;
  text-align: center;
}

/* Feature list inside pricing card */
body.vyhraj-pre-firmy .pricing-features {
  list-style: none;
  padding: 0; margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.vyhraj-pre-firmy .pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}

body.vyhraj-pre-firmy .pricing-features li::before {
  content: "✓";
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(48,196,141,.15);
  color: #6ee7b7;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

body.vyhraj-pre-firmy .pricing-features li.unavailable {
  color: var(--muted);
  opacity: .5;
}

body.vyhraj-pre-firmy .pricing-features li.unavailable::before {
  content: "–";
  background: rgba(255,255,255,.06);
  color: var(--muted);
}

/* Pricing CTA button */
body.vyhraj-pre-firmy .btn-pricing {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: filter .15s, transform .15s;
  text-decoration: none !important;
}

body.vyhraj-pre-firmy .btn-pricing:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

body.vyhraj-pre-firmy .btn-pricing.free {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff !important;
}

body.vyhraj-pre-firmy .btn-pricing.top {
  background: var(--blue);
  color: #fff !important;
}

/* ════════════════════════════════════════════════
   BENEFITS GRID
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 56px;
}

@media (max-width: 860px) {
  body.vyhraj-pre-firmy .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  body.vyhraj-pre-firmy .benefits-grid {
    grid-template-columns: 1fr;
  }
}

body.vyhraj-pre-firmy .benefit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
}

body.vyhraj-pre-firmy .benefit-icon {
  font-size: 26px;
  margin-bottom: 12px;
  display: block;
}

body.vyhraj-pre-firmy .benefit-card h4 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin: 0 0 6px;
}

body.vyhraj-pre-firmy .benefit-card p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  line-height: 1.55;
}

body.vyhraj-pre-firmy .benefit-card p.text-gray-700 {
  color: var(--muted) !important;
}

body.vyhraj-pre-firmy .benefit-card img.cut-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: block;
}

body.vyhraj-pre-firmy .benefit-card .pf-partner-link {
  font-weight: 600;
  text-decoration: none;
}

/* ════════════════════════════════════════════════
   CONTACT FORM
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .contact-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 40px;
  max-width: 680px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  body.vyhraj-pre-firmy .contact-section { padding: 28px 20px; }
}

body.vyhraj-pre-firmy .contact-section h2 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
  margin: 0 0 8px;
  text-align: center;
}

body.vyhraj-pre-firmy .contact-section p.contact-sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 28px;
  text-align: center;
}

body.vyhraj-pre-firmy .form-group label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}

body.vyhraj-pre-firmy .form-control {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: border-color .15s !important;
}

body.vyhraj-pre-firmy .form-control::placeholder {
  color: rgba(255,255,255,.25) !important;
}

body.vyhraj-pre-firmy .form-control:focus {
  border-color: rgba(61,109,242,.5) !important;
  box-shadow: 0 0 0 3px rgba(61,109,242,.12) !important;
  background: rgba(255,255,255,.07) !important;
}

body.vyhraj-pre-firmy .btn-contact-submit {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: filter .15s;
  margin-top: 8px;
}

body.vyhraj-pre-firmy .btn-contact-submit:hover {
  filter: brightness(1.12);
}

body.vyhraj-pre-firmy .form-check-input {
  margin-left: 0.5rem;
}

body.vyhraj-pre-firmy .contact-section .form-control.is-invalid {
  border-color: rgba(255,107,107,.55) !important;
  background: rgba(255,107,107,.05) !important;
}

body.vyhraj-pre-firmy .contact-section .invalid-feedback {
  display: block;
  font-size: 12px;
  color: #ffa0a0;
  margin-top: 6px;
}

/* ════════════════════════════════════════════════
   ALERT: successMessage / errorMessage
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .pf-alert {
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.vyhraj-pre-firmy .pf-alert.success {
  background: rgba(48,196,141,.12);
  border: 1px solid rgba(48,196,141,.3);
  color: #6ee7b7;
}

body.vyhraj-pre-firmy .pf-alert.error {
  background: rgba(255,107,107,.12);
  border: 1px solid rgba(255,107,107,.3);
  color: #ffa0a0;
}

/* ════════════════════════════════════════════════
   BUSINESS PACKAGE ORDER MODALS
   Scoped to .business-package-modal only
   ════════════════════════════════════════════════ */
body.vyhraj-pre-firmy .business-package-order-modal .modal-backdrop,
body.vyhraj-pre-firmy .modal-backdrop.show {
  background: rgba(0, 0, 0, 0.75);
}

@supports (backdrop-filter: blur(4px)) {
  body.vyhraj-pre-firmy .modal-backdrop.show {
    backdrop-filter: blur(4px);
  }
}

body.vyhraj-pre-firmy .business-package-modal-dialog {
  max-width: 560px;
  margin: 1rem auto;
}

@media (max-width: 575px) {
  body.vyhraj-pre-firmy .business-package-modal-dialog {
    margin: 12px;
    max-width: calc(100% - 24px);
  }
}

body.vyhraj-pre-firmy .business-package-modal {
  background: #121a24 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 40px !important;
  color: #e8eeff !important;
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45) !important;
}

@media (max-width: 575px) {
  body.vyhraj-pre-firmy .business-package-modal {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
}

body.vyhraj-pre-firmy .business-package-modal .bpm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-close:hover,
body.vyhraj-pre-firmy .business-package-modal .bpm-close:focus {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 195, 77, 0.2);
  outline: none;
  color: #fff;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-close svg {
  width: 18px;
  height: 18px;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-header {
  text-align: center;
  margin-bottom: 28px;
  padding-top: 8px;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 195, 77, 0.12);
  border: 1px solid rgba(255, 195, 77, 0.35);
  color: #ffc34d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-title {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.2;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-subtitle {
  font-family: "Satoshi", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.5;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-form {
  margin: 0;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-field {
  margin-bottom: 20px;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-required {
  color: #ff6b6b;
  margin-left: 2px;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-input-wrap {
  position: relative;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-input-wrap--textarea .bpm-field-icon {
  top: 16px;
  transform: none;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 13px 18px 13px 44px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-family: "Satoshi", sans-serif !important;
  transition: border-color 0.2s, background 0.2s !important;
  box-shadow: none !important;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-textarea {
  padding-left: 18px !important;
  min-height: 96px;
  resize: vertical;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-input:focus {
  border-color: rgba(255, 195, 77, 0.4) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  outline: none !important;
  box-shadow: none !important;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 4px 0 16px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: "Satoshi", sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-toggle:hover,
body.vyhraj-pre-firmy .business-package-modal .bpm-toggle:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-toggle-icon,
body.vyhraj-pre-firmy .business-package-modal .bpm-toggle-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-toggle-chevron {
  margin-left: auto;
  transition: transform 0.25s ease;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-toggle[aria-expanded="true"] .bpm-toggle-chevron {
  transform: rotate(180deg);
}

body.vyhraj-pre-firmy .business-package-modal .bpm-collapse {
  transition: height 0.3s ease;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-collapse .bpm-field:first-child {
  margin-top: 4px;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-submit {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffc34d, #e6a820);
  color: #1a1205;
  font-family: "Satoshi", sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.15s;
}

body.vyhraj-pre-firmy .business-package-modal .bpm-submit:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 24px rgba(255, 195, 77, 0.25);
  transform: translateY(-1px);
}

body.vyhraj-pre-firmy .business-package-modal .bpm-submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 195, 77, 0.3);
}

body.vyhraj-pre-firmy .business-package-modal .bpm-privacy {
  margin: 14px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════
   SEA-6 — Adventný kalendár landing (05 §9)
   Scoped to /adventny-kalendar-pre-eshop only
   ════════════════════════════════════════════════ */

body.vyhraj-pre-firmy .pf-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 22px 0 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}

body.vyhraj-pre-firmy .pf-back:hover {
  color: var(--blue-l);
}

body.vyhraj-pre-firmy .adv-hero-mockup-img {
  display: block;
  width: 100%;
  max-width: 807px;
  height: auto;
  margin: 8px auto 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

body.vyhraj-pre-firmy .adv-mockup-caption {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 46ch;
  margin: 14px auto 0;
}

/* S7: the live demo calendar between the hero mockup and the first divider. */
body.vyhraj-pre-firmy .adv-demo-section {
  margin: 40px auto 0;
}
body.vyhraj-pre-firmy .adv-demo {
  max-width: 720px;
  margin: 16px auto 0;
}

body.vyhraj-pre-firmy .adv-searchconsole {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}

body.vyhraj-pre-firmy .adv-searchconsole-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}

body.vyhraj-pre-firmy .adv-searchconsole-label {
  margin-top: 14px;
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 700;
  color: var(--amber);
}

body.vyhraj-pre-firmy .adv-searchconsole-caption {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 52ch;
  margin: 8px auto 0;
}

body.vyhraj-pre-firmy .adv-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0 48px;
}

@media (max-width: 760px) {
  body.vyhraj-pre-firmy .adv-steps {
    grid-template-columns: 1fr;
  }
}

body.vyhraj-pre-firmy .adv-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

body.vyhraj-pre-firmy .adv-step h3 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: #fff;
}

body.vyhraj-pre-firmy .adv-step h3 a {
  color: inherit;
  text-decoration: none;
}

body.vyhraj-pre-firmy .adv-step h3 a:hover {
  text-decoration: underline;
}

body.vyhraj-pre-firmy .adv-step p {
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

body.vyhraj-pre-firmy .adv-step-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-top: 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

body.vyhraj-pre-firmy .adv-bonus {
  max-width: 560px;
  margin: 4px 0 48px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: rgba(224, 166, 62, 0.08);
  border: 1px solid rgba(224, 166, 62, 0.35);
}

body.vyhraj-pre-firmy .adv-bonus-badge {
  display: inline-block;
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(224, 166, 62, .15);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

body.vyhraj-pre-firmy .adv-bonus p {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
}

body.vyhraj-pre-firmy .adv-features {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  display: grid;
  gap: 12px;
  max-width: 560px;
}

body.vyhraj-pre-firmy .adv-features li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  line-height: 1.5;
}

body.vyhraj-pre-firmy .adv-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

body.vyhraj-pre-firmy .adv-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 48px;
}

body.vyhraj-pre-firmy .adv-faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px 20px;
}

body.vyhraj-pre-firmy .adv-faq-question {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 700;
  color: #fff;
  list-style: none;
}

body.vyhraj-pre-firmy .adv-faq-question::-webkit-details-marker {
  display: none;
}

body.vyhraj-pre-firmy .adv-faq-answer {
  padding: 0 0 16px;
}

body.vyhraj-pre-firmy .adv-faq-answer p {
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* ════════════════════════════════════════════════
   ORGANIZERS — #organizatori help section
   (Meta rules, statute, prize tax, purchase-based competitions, free listing CTA, statute template)
   ════════════════════════════════════════════════ */

/* Small text link under the hero button. */
body.vyhraj-pre-firmy .pf-hero-sublink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

body.vyhraj-pre-firmy .pf-hero-sublink:hover {
  color: #fff;
  text-decoration: underline;
}

/* The fixed navbar (and the partner promo bar) must not cover the heading when the page opens at
   /pre-firmy#organizatori or #cennik, or a hero link is clicked; layout/base.html sets both variables. */
body.vyhraj-pre-firmy #organizatori,
body.vyhraj-pre-firmy #cennik {
  scroll-margin-top: calc(var(--vyhrat-navbar-height, 72px) + var(--vyhrat-promo-bar-height, 0px) + 16px);
}

body.vyhraj-pre-firmy .pf-org-eyebrow {
  display: inline-block;
  padding: 7px 18px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(61,109,242,.12);
  border: 1px solid rgba(61,109,242,.30);
  color: var(--blue-l);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.vyhraj-pre-firmy .pf-org .section-head p {
  max-width: 62ch;
  line-height: 1.6;
}

body.vyhraj-pre-firmy .pf-org-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

@media (max-width: 767px) {
  body.vyhraj-pre-firmy .pf-org-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* From 768 px the tall statute card (it holds the template list) spans the first two rows of the right column, the
   Facebook/Instagram and tax cards stack in the left one, and the purchase card takes the whole third row with a
   readable line length. The DOM order stays social, statute, tax, purchase (phones and screen readers). */
@media (min-width: 768px) {
  body.vyhraj-pre-firmy .pf-org-card--social {
    grid-column: 1;
    grid-row: 1;
  }

  body.vyhraj-pre-firmy .pf-org-card--statute {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  body.vyhraj-pre-firmy .pf-org-card--tax {
    grid-column: 1;
    grid-row: 2;
  }

  body.vyhraj-pre-firmy .pf-org-card--purchase {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  body.vyhraj-pre-firmy .pf-org-card--purchase p {
    max-width: 70ch;
  }
}

body.vyhraj-pre-firmy .pf-org-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  min-width: 0;
  overflow-wrap: anywhere;
}

body.vyhraj-pre-firmy .pf-org-card h3 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  margin: 0 0 12px;
}

body.vyhraj-pre-firmy .pf-org-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
}

body.vyhraj-pre-firmy .pf-org-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
}

body.vyhraj-pre-firmy .pf-org-card li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

body.vyhraj-pre-firmy .pf-org-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

body.vyhraj-pre-firmy .pf-org-card .pf-org-source {
  font-size: 12px;
  margin-bottom: 0;
}

/* The link text and its "→" are one inline run (the arrow is joined to the last word with   in the markup), so
   when the text wraps on a phone the arrow stays next to the last word. No flex layout inside the link. */
body.vyhraj-pre-firmy .pf-org-link {
  color: var(--blue-l);
  font-weight: 600;
  text-decoration: none;
}

body.vyhraj-pre-firmy .pf-org-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* The statute template download: a secondary button (border in --blue-l), not the main CTA. */
body.vyhraj-pre-firmy .pf-org-card .pf-org-download {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 0;
}

body.vyhraj-pre-firmy .pf-org-download-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--blue-l);
  border-radius: 999px;
  color: var(--blue-l);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}

body.vyhraj-pre-firmy .pf-org-download-link:hover {
  background: rgba(107,150,255,.14);
  color: #fff;
}

body.vyhraj-pre-firmy .pf-org-card .pf-org-download-hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* The three statute templates: a short vertical list in the statute card, no bullets, 7 px between the items, each
   link the .pf-org-download-link style above. The card's generic list rules (check mark, indent, grid gap) are
   switched off for this list. Links wrap inside the card at 360 px and stay 44 px tall to tap. */
body.vyhraj-pre-firmy .pf-org-card .pf-org-download-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

body.vyhraj-pre-firmy .pf-org-card .pf-org-download-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  max-width: 100%;
}

body.vyhraj-pre-firmy .pf-org-card .pf-org-download-list li {
  padding-left: 0;
  max-width: 100%;
}

body.vyhraj-pre-firmy .pf-org-card .pf-org-download-list li::before {
  content: none;
}

body.vyhraj-pre-firmy .pf-org-download-list .pf-org-download-link {
  min-height: 44px;
  max-width: 100%;
  line-height: 1.35;
}

/* Inside a card a link takes its own line: the purchase card has two, the second one is the template. */
body.vyhraj-pre-firmy .pf-org-card .pf-org-link {
  display: block;
  width: fit-content;
  max-width: 100%;
}

body.vyhraj-pre-firmy .pf-org-card .pf-org-link + .pf-org-link {
  margin-top: 8px;
}

/* CTA box: the free listing first, the partner account second. */
body.vyhraj-pre-firmy .pf-org-cta {
  background: linear-gradient(145deg, rgba(61,109,242,.12), rgba(123,47,190,.10));
  border: 1px solid rgba(61,109,242,.35);
  border-radius: 24px;
  padding: 28px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

body.vyhraj-pre-firmy .pf-org-cta h3 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
  margin: 0;
}

body.vyhraj-pre-firmy .pf-org-cta p {
  color: var(--muted);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0;
}

body.vyhraj-pre-firmy .pf-org-cta .btn-pricing {
  display: inline-block;
  width: auto;
  padding: 14px 28px;
}

body.vyhraj-pre-firmy .pf-org-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
  overflow-wrap: anywhere;
}

body.vyhraj-pre-firmy .pf-org-note a {
  color: var(--blue-l);
}

@media (max-width: 575px) {
  body.vyhraj-pre-firmy .pf-org-cta {
    padding: 22px 18px;
  }

  body.vyhraj-pre-firmy .pf-org-cta .btn-pricing {
    display: block;
    width: 100%;
  }

  body.vyhraj-pre-firmy .pf-org-card {
    padding: 22px 18px;
  }
}