/* ============================================================
   Zažij budoucnost: humanoid robot rental.
   Visual language: Starlink-inspired monochrome (black / white / grey).
   Vanilla CSS. Class names preserved for app.js / checkout.js.
   ============================================================ */

/* Metric-adjusted fallback fonts: while Space Grotesk / Inter load, the fallback
   is sized to match the web font's advances so first paint does not reflow (CLS).
   Values computed from the actual font metrics. Two variants per font: Arial-metric
   (Windows/macOS) and DejaVu Sans (Linux). The web font always wins once loaded. */
@font-face { font-family: "Space Grotesk fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"); size-adjust: 112.66%; ascent-override: 87.34%; descent-override: 25.92%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk fallback dejavu"; src: local("DejaVu Sans"); size-adjust: 96.97%; ascent-override: 101.48%; descent-override: 30.11%; line-gap-override: 0%; }
@font-face { font-family: "Inter fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"); size-adjust: 108.76%; ascent-override: 89.07%; descent-override: 22.18%; line-gap-override: 0%; }
@font-face { font-family: "Inter fallback dejavu"; src: local("DejaVu Sans"); size-adjust: 93.61%; ascent-override: 103.48%; descent-override: 25.77%; line-gap-override: 0%; }

:root {
  --ink:      #0a0a0a;   /* near-black: text, solid buttons, dark blocks */
  --ink-2:    #161616;   /* dark card surface */
  --paper:    #ffffff;   /* page background */
  --paper-2:  #f5f5f4;   /* light grey block */
  --card:     #ffffff;
  --line:     #e6e5e3;   /* light hairline */
  --line-dk:  #262626;   /* dark hairline */
  --muted:    #6e6e6e;   /* muted text on light */
  --muted-dk: #a8a8a8;   /* muted text on dark */
  --accent:   #0a0a0a;   /* "accent" is monochrome black on light surfaces */
  --accent-2: #ffffff;   /* "accent" on dark surfaces */
  --accent-ink:#0a0a0a;
  --glow:     rgba(0,0,0,.12);
  --ok:       #0a0a0a;   /* neutralised (was green) */
  --display:  "Space Grotesk", "Space Grotesk fallback", "Space Grotesk fallback dejavu", system-ui, sans-serif;
  --sans:     "Inter", "Inter fallback", "Inter fallback dejavu", system-ui, sans-serif;
  --radius:   10px;   /* cards / panels (Starlink: slightly rounded, not pill) */
  --radius-sm:8px;    /* small surfaces / inputs */
  --radius-btn:6px;   /* CTA buttons / chips */
  --maxw:     1120px;
  --shadow:   0 1px 2px rgba(10,10,10,.04), 0 12px 32px rgba(10,10,10,.07);
  --shadow-lg:0 2px 6px rgba(10,10,10,.06), 0 30px 70px rgba(10,10,10,.14);
  --navh:     64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: #fff; }
section[id] { scroll-margin-top: 92px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.eyebrow {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 4.6vw, 46px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }
.sec-head { max-width: 640px; margin-bottom: 48px; }
.sec-head h2 { margin: 12px 0 14px; }
.sec-head p { color: var(--muted); font-size: 18px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 16px;
  padding: 14px 24px; border-radius: var(--radius-btn); border: 1px solid transparent;
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: translateY(1px); }
/* default (light surfaces): solid black, invert on hover */
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(10,10,10,.28); }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ghost-dk { background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-dk:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 30px; font-size: 17px; }

/* on dark surfaces the primary CTA is white-solid (inverts to outline) */
.nav .btn-primary,
.hero .btn-primary,
.feature .btn-primary,
.price-card .btn-primary,
.gift .btn-primary,
.footer .btn-primary,
.final-cta .btn-primary {
  background: #fff; color: var(--ink); border-color: #fff;
}
.nav .btn-primary:hover,
.hero .btn-primary:hover,
.feature .btn-primary:hover,
.price-card .btn-primary:hover,
.gift .btn-primary:hover,
.footer .btn-primary:hover,
.final-cta .btn-primary:hover {
  background: transparent; color: #fff; border-color: #fff;
}
/* ghost on dark surfaces */
.feature .btn-ghost,
.gift .btn-ghost,
.price-card .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.32);
}
.feature .btn-ghost:hover,
.gift .btn-ghost:hover,
.price-card .btn-ghost:hover {
  background: #fff; color: var(--ink); border-color: #fff;
}

/* ---------- nav: floating translucent pill ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 14px 10px 0;
  transition: padding .25s ease;
}
.nav .container { max-width: var(--maxw); padding: 0; }
/* selector must beat `.nav .container { padding: 0 }` (same element has both
   classes), otherwise the horizontal padding is zeroed and the logo hugs the edge */
.nav .container.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 0 0 14px; border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
/* scrolled / off-hero: condense into the blurred glass pill. Toggles ONLY the
   pill's bg/blur/border/shadow , never the logo/hamburger position or size, so
   there is no layout shift when the sticky header engages (task 13). The
   scrolled geometry (24px logo inset, 26px icon) is now the default below. */
.nav.scrolled .nav-inner {
  background: rgba(46,46,46,.6);
  border-color: transparent;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }
/* logo dot removed across the site (nav, footer, checkout) per refinement */
.brand .dot { display: none; }
.nav .brand { color: #fff; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 15px; color: rgba(255,255,255,.78); font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: #fff; }
.nav-cta { display: inline-flex; gap: 10px; align-items: center; }
.nav-cta .btn { padding: 11px 20px; font-size: 15px; }

/* hamburger (mobile control): classic 3 lines, NO border in any state.
   Over the hero it sits on a subtle translucent square for legibility; once the
   sticky pill kicks in (.scrolled) it collapses to just the icon (no bg/box). */
/* No background in any state: over the hero the icon reads via its drop-shadow,
   on scroll it sits on the glass pill. Generous horizontal padding gives the
   icon breathing room from the right edge while the pill's own right padding
   stays 0. Lighter, slightly smaller icon stroke. */
.nav-toggle {
  display: none;
  height: 44px; flex: 0 0 auto; padding: 0 14px;
  align-items: center; justify-content: center; cursor: pointer;
  background: transparent; color: #fff; border: none;
  transition: opacity .2s ease;
}
.nav-toggle:hover { opacity: .8; }
.nav-toggle-bars { position: relative; width: 20px; height: 13px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.nav-toggle-bars span { position: absolute; left: 0; width: 20px; height: 1.5px; background: #fff; border-radius: 1px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle-bars span:nth-child(3) { bottom: 0; }
.nav.menu-open .nav-toggle-bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav.menu-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-toggle-bars span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* mobile dropdown menu */
.nav-menu {
  display: none;
  margin-top: 10px; padding: 18px; border-radius: var(--radius);
  background: rgba(46,46,46,.6);
  border: none;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  flex-direction: column; gap: 4px;
}
.nav.menu-open .nav-menu { display: flex; }
.nav-menu a:not(.btn) { color: rgba(255,255,255,.86); font-family: var(--display); font-weight: 500; font-size: 18px; padding: 12px 8px; border-radius: 10px; transition: background .15s; }
.nav-menu a:not(.btn):hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-menu .btn { margin-top: 10px; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}
/* desktop: inset the header content to match the section content gutter, so the
   logo and the CTA line up with the rest of the page (and the CTA is not on the edge) */
@media (min-width: 861px) {
  /* logo inset matches the section gutter; the CTA's right gap is trimmed to the
     pill so it equals the button's top/bottom inset (56px pill, centered button) */
  .nav .container.nav-inner { padding: 0 8px 0 24px; }
}

/* ---------- hero: full-bleed video + overlay, sized to content ---------- */
.hero {
  position: relative;
  display: flex; flex-direction: column;
  color: #fff; overflow: hidden; background: var(--ink);
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* vertical darkening + a left-column wash so the bottom-left copy stays
     readable even over bright parts of the photo */
  background:
    linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 42%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 24%, rgba(0,0,0,.46) 52%, rgba(0,0,0,.8) 84%, rgba(0,0,0,.95) 100%);
}
/* Hero is a clean single column sized to its content (no forced screen height).
   Generous padding keeps it spacious; padding-top clears the fixed nav.
   Specificity beats the mobile `.container { padding: 0 24px }` rule. */
.hero .hero-inner {
  position: relative; z-index: 2; width: 100%;
  padding: 132px 24px 96px;
}
.hero-main { max-width: 760px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
  color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  padding: 7px 14px; border-radius: var(--radius-btn); margin-bottom: 22px; backdrop-filter: blur(6px);
}
.hero-badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 #fff; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55);} 70% { box-shadow: 0 0 0 9px rgba(255,255,255,0);} 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0);} }
.hero h1 { font-size: clamp(42px, 7vw, 76px); letter-spacing: -0.035em; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
.hero h1 .accent { color: #fff; }
.hero-sub { color: #fff; font-size: clamp(16px, 2vw, 19px); margin: 20px 0 0; max-width: 46ch; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.hero-price { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 18px; }
.hero-price .from { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.hero-price .amount { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 5vw, 40px); letter-spacing: -0.02em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.hero-cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 420px; margin-top: 32px; }
.hero-cta .btn { width: 100%; }
.hero-meta { display: flex; gap: 20px 36px; margin-top: 40px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); }
.hero-meta div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 130px; }
.hero-meta { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.hero-meta b { font-family: var(--display); font-size: 20px; font-weight: 600; color: #fff; }
.hero-meta span { font-size: 13px; color: rgba(255,255,255,.82); }
@media (max-width: 560px) {
  .hero .hero-inner { padding: 110px 24px 64px; }
  .hero-cta { max-width: none; width: 100%; }
}

/* ---------- full-bleed feature section (photo + overlay text, no card) ---------- */
.feature {
  position: relative; min-height: 80vh; display: flex; flex-direction: column;
  color: #fff; overflow: hidden; background: var(--ink);
}
.feature-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.feature-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 30%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.9) 100%);
}
.feature .feature-inner { position: relative; z-index: 2; width: 100%; margin-top: auto; padding: 84px 24px 72px; }
.feature-copy { max-width: 680px; }
.feature-copy .eyebrow { color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.feature-copy h2 { color: #fff; margin: 12px 0 18px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.feature-copy p { color: #fff; font-size: 17px; margin-bottom: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.feature-copy p:last-of-type { margin-bottom: 0; }
.feature-copy .btn { margin-top: 26px; }
@media (max-width: 560px) {
  .feature-inner { padding: 72px 0 56px; }
  .feature-scrim { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.75) 70%, rgba(0,0,0,.94) 100%); }
}
/* founder carries long-form prose: keep the portrait visible up top, darken
   steadily so all paragraphs stay legible without a card behind the text. */
.feature-founder .feature-scrim {
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.82) 100%);
}
.feature-founder .feature-copy p { font-size: 16px; line-height: 1.65; }

/* ---------- dark block helper ---------- */
.block-dark { background: var(--ink); color: #fff; }
.block-dark .eyebrow { color: var(--muted-dk); }
.block-dark h2, .block-dark h3 { color: #fff; }
.block-dark .sec-head p { color: var(--muted-dk); }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { background: rgba(255,255,255,.04); border: 1px solid var(--line-dk); border-radius: var(--radius); padding: 26px 22px; position: relative; }
.step-num { font-family: var(--display); font-size: 13px; font-weight: 600; color: #fff; letter-spacing: .1em; opacity: .55; }
.step h3 { margin: 14px 0 8px; color: #fff; }
.step p { color: var(--muted-dk); font-size: 15px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* compact variant (jak to funguje) */
.sec-head-sm { margin-bottom: 28px; }
.sec-head-sm h2 { margin: 8px 0 0; }
.steps-compact { gap: 14px; }
.steps-compact .step { padding: 18px 18px; border-radius: var(--radius-sm); }
.steps-compact .step h3 { font-size: 16px; margin: 8px 0 5px; }
.steps-compact .step p { font-size: 14px; }
@media (max-width: 520px) { .steps-compact { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ---------- includes grid ---------- */
.includes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.inc { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px; box-shadow: var(--shadow); }
.inc .ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: #fff; }
.inc h3 { font-size: 16px; margin-bottom: 4px; }
.inc p { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .includes { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .includes { grid-template-columns: 1fr; } }

/* ---------- příležitosti ---------- */
.occasions { display: flex; flex-wrap: wrap; gap: 12px; }
.occ {
  font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: 11px 18px; box-shadow: var(--shadow);
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s;
}
.occ:hover { border-color: var(--ink); box-shadow: 0 6px 18px rgba(10,10,10,.1); }
.occ:active { transform: translateY(1px); }
/* desktop: force a line break after the third use-case */
.occ-break { display: none; }
@media (max-width: 480px) { .occ { font-size: 14px; padding: 10px 15px; } }
@media (min-width: 861px) { .occ-break { display: block; flex-basis: 100%; height: 0; } }

/* ---------- pricing: dark cards on near-black w/ contour texture ---------- */
#cenik { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
#cenik::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 16% 12%, rgba(255,255,255,.04) 0 1px, transparent 1px 30px),
    repeating-radial-gradient(circle at 86% 88%, rgba(255,255,255,.03) 0 1px, transparent 1px 38px),
    repeating-radial-gradient(circle at 60% 40%, rgba(255,255,255,.022) 0 1px, transparent 1px 52px);
  mask-image: radial-gradient(1200px 800px at 50% 30%, #000 30%, transparent 100%);
}
#cenik .container { position: relative; z-index: 1; }
#cenik .eyebrow { color: var(--muted-dk); }
#cenik .sec-head h2 { color: #fff; }
#cenik .sec-head p { color: var(--muted-dk); }
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.pricing-2 { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
.price-card {
  background: var(--ink-2); border: 1px solid var(--line-dk); border-radius: var(--radius);
  padding: 30px 26px; display: flex; flex-direction: column; color: #fff; position: relative;
  cursor: pointer;
}
.price-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.price-card.featured { border-color: rgba(255,255,255,.55); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.price-card.is-picked { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 30px 70px rgba(0,0,0,.5); }
.price-card.anchor { background: #0e0e0e; }
.price-tier { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dk); }
.price-name { font-family: var(--display); font-size: 23px; font-weight: 600; margin: 8px 0 6px; letter-spacing: -0.01em; color: #fff; }
.price-desc { color: var(--muted-dk); font-size: 14.5px; min-height: 42px; }
.feat-list { list-style: none; margin: 16px 0 22px; display: flex; flex-direction: column; gap: 11px; }
.feat-list li { position: relative; padding-left: 18px; font-size: 14.5px; color: #cfcfcf; }
.feat-list li svg { display: none; }
.feat-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .85; }
/* price foot: small label over big price, sits at bottom of card */
.price-foot { margin-top: auto; padding-top: 6px; }
.price-from { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dk); margin-bottom: 4px; }
.price-amount { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.price-amount .now { font-family: var(--display); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.price-amount .was { color: var(--muted-dk); text-decoration: line-through; font-size: 17px; }
.price-save {
  align-self: flex-start; display: inline-block; margin: 0 0 8px;
  font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .03em;
  color: #fff; background: #2e2e2e; border: 1px solid #3d3d3d;
  padding: 4px 11px; border-radius: var(--radius-btn); line-height: 1.2;
}
.price-unit { display: block; font-size: 13px; color: var(--muted-dk); margin-bottom: 18px; }
.price-card .btn { margin-top: 4px; }
/* per-package expandable detail (time breakdown, what to expect) */
.pkg-detail { margin: 0 0 22px; border-top: 1px solid var(--line-dk); }
.pkg-detail > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 0 0; font-size: 13.5px; font-weight: 600; color: #cfcfcf; }
.pkg-detail > summary::-webkit-details-marker { display: none; }
.pkg-detail > summary::after { content: "+"; margin-left: auto; font-size: 17px; line-height: 1; color: var(--muted-dk); }
.pkg-detail[open] > summary::after { content: "−"; }
.pkg-detail-body { padding: 8px 0 2px; }
.pkg-detail-body p { color: var(--muted-dk); font-size: 13.5px; line-height: 1.5; margin: 0; }
.badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: #fff; color: var(--ink); font-family: var(--display); font-weight: 600;
  font-size: 12px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--radius-btn);
  white-space: nowrap;
}
.badge-limited { background: #2e2e2e; color: #fff; border: none; }

/* price info box (íčko) */
.price-info { max-width: none; margin: 28px 0 0; background: rgba(255,255,255,.04); border: 1px solid var(--line-dk); border-radius: var(--radius); overflow: hidden; position: relative; z-index: 1; }
.price-info > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 18px 22px; font-family: var(--display); font-weight: 600; font-size: 16px; color: #fff; }
.price-info > summary::-webkit-details-marker { display: none; }
.price-info > summary::after { content: "+"; margin-left: auto; font-size: 20px; color: #fff; transition: transform .2s; }
.price-info[open] > summary::after { content: "−"; }
.info-i { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 13px; }
.price-info-body { padding: 0 22px 22px; max-width: 820px; }
.price-info-body p { color: var(--muted-dk); font-size: 15px; margin-bottom: 12px; }
.price-info-body ul { margin: 0 0 12px 2px; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.price-info-body li { position: relative; padding-left: 20px; color: var(--muted-dk); font-size: 15px; }
.price-info-body li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .7; }
.price-info-body li b, .price-info-body p b { color: #fff; }
#cenik > .container > p { position: relative; z-index: 1; }

/* required asterisk + checkout billing details */
.req { color: var(--ink); font-weight: 700; }
.opt { color: var(--muted); font-weight: 400; font-size: 12px; }
/* package picker radio cards */
.pkg-cards { display: grid; gap: 12px; }
.pkg-card { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; width: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); cursor: pointer; font-family: var(--sans); transition: border-color .15s, background .15s, box-shadow .15s; }
.pkg-card:hover { border-color: var(--ink); background: var(--card); box-shadow: 0 0 0 3px rgba(10,10,10,.08); }
.pkg-card:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10,10,10,.12); }
.pkg-card.is-selected { border-color: var(--ink); background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.pkg-card .pkg-name { font-family: var(--display); font-weight: 600; font-size: 16px; }
.pkg-card .pkg-len { color: var(--muted); font-size: 13px; }
.pkg-card .pkg-price { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); margin-top: 4px; }
.pkg-change { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; border-bottom: 1px solid rgba(10,10,10,.3); }
.pkg-change:hover { border-color: var(--ink); }
/* gift checkbox row */
.check-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 14px 16px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); transition: border-color .15s, background .15s; }
.check-row:hover { border-color: var(--ink); }
.check-row input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ink); flex: 0 0 auto; cursor: pointer; }
.check-row .check-text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.4; }
.check-row .check-sub { color: var(--muted); font-size: 13px; }
.billing { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.billing > summary { list-style: none; cursor: pointer; padding: 13px 14px; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--paper); }
.billing > summary::-webkit-details-marker { display: none; }
.billing > summary::after { content: "+"; float: right; color: var(--ink); font-size: 18px; line-height: 1; }
.billing[open] > summary::after { content: "−"; }
.billing[open] > summary { color: var(--ink); border-bottom: 1px solid var(--line); }
.billing-body { padding: 16px 14px 4px; }
@media (max-width: 920px) {
  .pricing { grid-template-columns: 1fr; gap: 28px; }
  .price-card.featured { order: -1; }
}

/* ---------- gift: full-width dark banner ---------- */
.gift {
  position: relative; background: var(--ink); color: #fff; overflow: hidden;
  border-top: 1px solid var(--line-dk);
}
.gift::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 88% 12%, rgba(255,255,255,.04) 0 1px, transparent 1px 32px),
    repeating-radial-gradient(circle at 10% 95%, rgba(255,255,255,.03) 0 1px, transparent 1px 40px);
}
.gift-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; text-align: center; }
.gift h2 { color: #fff; }
.gift p { color: var(--muted-dk); margin: 14px 0 26px; font-size: 18px; }
.gift .ribbon { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dk); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; }
#faq .sec-head { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 22px 4px; display: flex; justify-content: space-between; align-items: center; gap: 18px; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); }
.faq-q .chev { flex: 0 0 auto; transition: transform .25s ease; color: var(--ink); }
.faq-item.open .chev { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 4px 22px; color: var(--muted); font-size: 16px; }
.faq-a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- founder (legacy, kept for safety) ---------- */
.founder { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: center; max-width: 760px; }
.founder .avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 600; font-size: 30px; }
.founder p { color: var(--muted); }
.founder a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.founder-grid { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
/* About reading width matches the FAQ column (800px, centered) */
#zakladatel .sec-head,
#zakladatel .founder-grid { max-width: 800px; margin-left: auto; margin-right: auto; }
.founder-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper-2); aspect-ratio: 3/4; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-body p { color: var(--muted); margin-bottom: 14px; font-size: 16px; }
.founder-body p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .founder-grid { grid-template-columns: 1fr; gap: 24px; }
  .founder-photo { max-width: none; width: 100%; aspect-ratio: 1/1; }
}

/* newsletter status message (reused by the compact footer subscribe form) */
.newsletter-msg { font-size: 14px; margin-top: 12px; min-height: 1.2em; font-weight: 500; }
.newsletter-msg.ok { color: #fff; }
.newsletter-msg.err { color: #ff9b8a; }

/* ---------- final CTA (conversion closer before footer) ---------- */
.final-cta { background: var(--ink); color: #fff; border-top: 1px solid var(--line-dk); }
.final-cta-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.final-cta-inner h2 { color: #fff; }
.final-cta-inner p { color: var(--muted-dk); font-size: 18px; margin: 14px 0 26px; }

/* ---------- footer (compact: brand + contact, compact subscribe, slim bottom) ---------- */
.footer { background: var(--ink); color: var(--muted-dk); padding: 40px 0 28px; border-top: 1px solid var(--line-dk); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 48px; flex-wrap: wrap; padding-bottom: 24px; }
.footer .brand { color: #fff; }
.footer .brand .dot { background: #fff; }
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-contact { color: #c9c9c9; font-size: 14.5px; }
.footer-contact:hover { color: #fff; }
.footer-subscribe { width: 100%; max-width: 400px; }
.footer-sub-label { display: block; font-size: 13.5px; color: var(--muted-dk); margin-bottom: 10px; }
.footer-sub-row { display: flex; gap: 8px; }
.footer-sub-row input {
  flex: 1 1 auto; min-width: 0; font-family: var(--sans); font-size: 15px; padding: 11px 14px;
  border-radius: var(--radius-btn); border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06); color: #fff; transition: border-color .15s, box-shadow .15s;
}
.footer-sub-row input::placeholder { color: rgba(255,255,255,.5); }
.footer-sub-row input:focus { outline: none; border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.footer-sub-row .btn { flex: 0 0 auto; }
.footer-sub-note { font-size: 12px; color: var(--muted-dk); margin-top: 10px; line-height: 1.5; }
.footer-sub-note a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: #c9c9c9; }
.footer-links a:hover { color: #fff; }

/* ---------- checkout ---------- */
.co-wrap { min-height: 100vh; display: flex; justify-content: center; }
.co-main { padding: 56px 48px; display: flex; flex-direction: column; width: 100%; max-width: 600px; }
.co-back { font-size: 14px; color: var(--muted); margin-bottom: 24px; display: inline-flex; gap: 6px; align-items: center; }
.co-back:hover { color: var(--ink); }
.co-main h1 { font-size: 30px; margin-bottom: 6px; }
.co-main .demo-pill { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-btn); margin: 14px 0 28px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10,10,10,.12); }
.field input::placeholder, .field textarea::placeholder { color: #b6b5ae; }
.field.invalid input { border-color: #c01b14; }
.field .err { color: #c01b14; font-size: 12.5px; margin-top: 6px; display: none; }
.field.invalid .err { display: block; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card-row { display: grid; grid-template-columns: 1fr 110px 100px; gap: 14px; }
.co-pay { margin-top: 10px; }
.co-fineprint { font-size: 12.5px; color: var(--muted); margin-top: 16px; text-align: center; }
.co-fineprint a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 880px) {
  .co-main { padding: 36px 26px; max-width: none; }
  .card-row { grid-template-columns: 1fr 1fr; }
}

/* spinner + success */
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.success { text-align: center; padding: 20px 0; animation: rise .4s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.success .check { width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; margin: 0 auto 22px; }
.success h1 { font-size: 28px; margin-bottom: 10px; }
.success p { color: var(--muted); }
.voucher {
  margin: 26px auto; max-width: 380px; background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 22px; position: relative; overflow: hidden; border: 1px solid var(--line-dk);
}
.voucher::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 85% 10%, rgba(255,255,255,.05) 0 1px, transparent 1px 26px);
}
.voucher .vlabel { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dk); position: relative; }
.voucher .vcode { font-family: var(--display); font-size: 25px; font-weight: 600; letter-spacing: .06em; margin: 8px 0 4px; position: relative; }
.voucher .vmeta { font-size: 13px; color: var(--muted-dk); position: relative; }
.copy-btn { margin-top: 4px; font-size: 13px; }

/* ---------- legal / podminky ---------- */
.legal { max-width: 820px; margin: 0 auto; padding: 92px 24px 80px; }
.legal h1 { font-size: 34px; margin-bottom: 6px; }
.legal .updated { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.legal .demo-pill { display: inline-flex; gap: 7px; align-items: center; background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-btn); margin-bottom: 34px; }
.legal h2 { font-size: 21px; margin: 36px 0 10px; }
.legal h3 { font-size: 17px; margin: 22px 0 8px; }
.legal p, .legal li { color: #34342f; font-size: 15.5px; }
.legal ul, .legal ol { margin: 8px 0 8px 22px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal .back { font-size: 14px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; margin-bottom: 28px; }
.legal .back:hover { color: var(--ink); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .pulse, .spinner { animation: none; } }

/* ---------- mobile breathing room ---------- */
@media (max-width: 600px) {
  .container { padding: 0 24px; }
  .section { padding: 64px 0; }
  .section-tight { padding: 44px 0; }
  .sec-head { margin-bottom: 32px; }
  .price-card { padding: 26px 22px; }
  .inc { padding: 18px; }
  .steps-compact .step { padding: 16px 16px; }
  .gift { padding: 34px 24px; border-radius: var(--radius); }
  .price-info > summary, .price-info-body { padding-left: 18px; padding-right: 18px; }
  .co-main { padding: 36px 24px 44px; }
  .co-main .demo-pill { margin: 16px 0 26px; }
  .co-pay { margin-top: 24px; }
  .billing { margin-bottom: 22px; }
  .co-fineprint { margin-top: 18px; }
  .legal { padding: 80px 24px 64px; }
}
@media (max-width: 420px) {
  .hero-meta { gap: 18px 24px; }
}
@media (max-width: 360px) {
  .container { padding: 0 20px; }
}

/* ---------- rezervace modal (checkout v dialogu) ---------- */
.checkout-modal {
  position: fixed; inset: 0; margin: auto;
  width: min(1100px, 96vw); height: 95vh;
  max-width: 96vw; max-height: 95vh;
  padding: 0; border: none; border-radius: var(--radius); overflow: hidden;
  background: var(--ink); color: #fff;
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  transform: scale(.9); opacity: 0;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .22s ease;
}
.checkout-modal.is-open { transform: scale(1); opacity: 1; }
.checkout-modal::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
.checkout-modal-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.checkout-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: rgba(12,13,18,.72); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px);
  transition: background .15s ease;
}
.checkout-modal-close:hover { background: rgba(40,42,56,.92); }
@media (max-width: 640px) {
  .checkout-modal {
    width: 100vw; height: 100vh; height: 100dvh;
    max-width: 100vw; max-height: 100vh; max-height: 100dvh;
    border-radius: 0;
  }
  .checkout-modal-close {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
  }
}