/* =========================================================
   Replica design system
   Measured 1:1 from the reference page (grid, type scale,
   radii, spacing, component anatomy).
   Swap the tokens below to rebrand.

   The webfont is loaded from index.html (preconnect + <link>)
   rather than @import here, so it no longer waits for this
   file to download before it starts.
   ========================================================= */

:root {
  /* --- Brand colours (change these to rebrand) --- */
  --c-bg:          #ffffff;
  --c-ink:         #000000;
  --c-on-ink:      #ffffff;         /* text/icons on ink surfaces (dark buttons) */
  --c-ink-hover:   #262626;         /* ink surfaces, hover */
  --c-line:        #eeeeee;         /* borders + grey pill surfaces */
  --c-line-hover:  #e4e4e4;         /* grey pill surface, hover */
  --c-line-strong: #d8d8d8;         /* card border, hover */
  --c-accent:      #0d9488;         /* active pill / logo mark / checkmarks — deep teal */
  --c-accent-hover:#0b7d72;         /* accent surface, hover */
  --c-accent-2:    #cce9e5;         /* soft tint (reserved, currently unused) */
  --c-ink-70:      rgba(0,0,0,.7);  /* secondary text — 8.4:1 on --c-bg */
  --c-ink-muted:   rgba(0,0,0,.55); /* tertiary text — 4.7:1. Do not go below .55
                                       on a white bg or it drops under WCAG AA. */
  --c-focus:       #0b57d0;         /* keyboard focus ring */
  --c-badge-warm:  #f5c542;         /* highlighted card badge */
  --c-veil:        rgba(255,255,255,.92); /* badge plate over a photo */
  --ph-from:       #d9dee4;         /* photo placeholder gradient, from */
  --ph-to:         #b9c2cc;         /* photo placeholder gradient, to */

  --font: 'Inter Tight', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- Type scale (responsive steps override these in the media queries) --- */
  --fs-display: 88px;   --lh-display: 88px;    /* .h1  — hero */
  --fs-h2:      56px;   --lh-h2:      58px;    /* .h2  — closing CTA */
  --fs-section: 32px;   --lh-section: 38.4px;  /* .h-section */
  --fs-card:    24px;   --lh-card:    33.6px;  /* .h-card */
  --fs-body:    16px;   --lh-body:    24px;    /* .t-regular */
  --fs-small:   14px;   --lh-small:   21px;    /* .t-small */

  /* --- Layout (measured) --- */
  --container:   1152px;  /* CONTENT width — gutters are added outside it */
  --gutter:      24px;
  --gap:         40px;
  --col-label:   384px;   /* left section-label column */
  --col-cards:   728px;   /* right card-grid column   */
  --card:        344px;   /* reference only: (--col-cards - --gap) / 2 */
  --r-sm:        8px;
  --r-card:      16px;
  --r-cta:       24px;
  --r-pill:      1600px;

  --pad-section: 96px;
  --sticky-top:  104px;   /* sticky section label clearance below the navbar */

  --t-fast: .18s;
  --t-med:  .2s;
}

/* --------------------------- reset --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; }

/* The measured column sets (384+40+728, 240+16+640+16+240, 360+160+632) all add
   up to exactly --container, so the gutters have to live OUTSIDE that width or
   every grid on the page overflows by 2 x --gutter on wide screens. */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------- utilities --------------------------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico    { width: 14px; height: 14px; flex: none; }

/* Visually hidden, still announced. */
.u-sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 0; left: var(--gutter); z-index: 100;
  padding: 10px 16px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--c-ink); color: var(--c-on-ink);
  transform: translateY(-110%);
  transition: transform var(--t-fast) ease;
}
.skip-link:focus { transform: translateY(0); }

/* Links carry no underline, so the focus ring is the only keyboard affordance. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
/* skip-link target: focusable programmatically, never shows a ring */
#main:focus, #main:focus-visible { outline: none; }

/* --------------------------- type scale --------------------------- */
.h1        { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.04em; }
.h2        { font-size: var(--fs-h2);      line-height: var(--lh-h2);      letter-spacing: -.04em; }
.h-section { font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: -.0415em; }
.h-card    { font-size: var(--fs-card);    line-height: var(--lh-card);    letter-spacing: -.04em; }
.t-regular { font-size: var(--fs-body);    line-height: var(--lh-body); }
.t-small   { font-size: var(--fs-small);   line-height: var(--lh-small); }
.t-70      { color: var(--c-ink-70); }

/* --------------------------- buttons / pills --------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, opacity var(--t-fast) ease;
  white-space: nowrap;
}
.btn--dark   { background: var(--c-ink); color: var(--c-on-ink); padding: 8px 24px; font-size: var(--fs-body); line-height: var(--lh-body); }
.btn--dark:hover { background: var(--c-ink-hover); }
.btn--dark-sm{ background: var(--c-ink); color: var(--c-on-ink); padding: 8px 20px; font-size: var(--fs-small); line-height: var(--lh-small); }
.btn--dark-sm:hover { background: var(--c-ink-hover); }
.btn--ghost  { background: transparent; color: var(--c-ink); padding: 8px 20px; font-size: var(--fs-small); line-height: var(--lh-small); }
.btn--ghost:hover { background: var(--c-line); }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; border-radius: var(--r-pill);
  background: var(--c-line); font-size: var(--fs-body); line-height: var(--lh-body);
  transition: background-color var(--t-fast) ease;
}
.pill:hover      { background: var(--c-line-hover); }
.pill--active    { background: var(--c-accent); color: var(--c-on-ink); }
.pill--active:hover { background: var(--c-accent-hover); }

/* --------------------------- navbar --------------------------- */
.navbar { position: sticky; top: 0; z-index: 50; background: var(--c-bg); padding: 20px 0; }
/* Reference columns: 240 / 640 / 240 + 2x16 gap = exactly --container (zero slack).
   Kept at the measured values for fidelity; the minmax(0, ...) guards let a longer
   brand name or a fifth nav item shrink its column instead of overflowing the row.
   If you rebrand to a much longer name, switch to: minmax(0,1fr) auto minmax(0,1fr). */
.navbar__grid {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 640px) minmax(0, 240px);
  gap: 16px;
  align-items: center;
}
.navbar__brand { display: flex; align-items: center; gap: 10px; font-size: 28px; letter-spacing: -.03em; }
.navbar__mark { width: 30px; height: 30px; flex: none; color: var(--c-accent); }

.navbar__menu {
  justify-self: center;
  display: flex; align-items: center; gap: 4px;
  background: var(--c-line); border-radius: var(--r-pill); padding: 8px 12px;
}
.navbar__link {
  padding: 2px 10px; border-radius: var(--r-pill);
  font-weight: 500; transition: opacity var(--t-fast) ease;
}
.navbar__link:hover { opacity: .6; }

.navbar__right { justify-self: end; display: flex; align-items: center; gap: 20px; }
.navbar__right a:not(.btn) { transition: opacity var(--t-fast) ease; }
.navbar__right a:not(.btn):hover { opacity: .6; }

/* Mobile disclosure nav (hidden on desktop, shown below 991px) */
.navmob { display: none; position: relative; justify-self: end; }
.navmob > summary {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-line); color: var(--c-ink);
  transition: background-color var(--t-fast) ease;
}
.navmob > summary::-webkit-details-marker { display: none; }
.navmob > summary:hover { background: var(--c-line-hover); }
.navmob[open] > summary { background: var(--c-ink); color: var(--c-on-ink); }
.navmob__ico { width: 22px; height: 22px; }
.navmob__panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60;
  width: min(78vw, 300px);
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px; border: 1px solid var(--c-line); border-radius: var(--r-card);
  background: var(--c-bg);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.28);
}
.navmob__panel > a {
  padding: 12px 14px; border-radius: 12px; font-weight: 500;
  transition: background-color var(--t-fast) ease;
}
.navmob__panel > a:hover { background: var(--c-line); }
.navmob__cta { margin-top: 8px; justify-content: center; padding: 12px 20px; }
.navmob__cta:hover { background: var(--c-ink-hover); }

/* --------------------------- hero --------------------------- */
.hero { padding: 120px 0 0; text-align: center; }

.hero__crumbs { display: flex; align-items: center; justify-content: center; gap: 12px; }
.crumb-back {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-ink); color: var(--c-on-ink);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; transition: background-color var(--t-fast) ease;
}
.crumb-back:hover { background: var(--c-ink-hover); }

/* The markup keeps a deliberate <br>. text-wrap: balance is the safety net for
   when you swap in your own headline and drop it: the title still wraps evenly
   instead of leaving one orphaned word on the second line. */
.hero__title { margin: 64px auto 0; max-width: 900px; text-wrap: balance; }

.hero__cats {
  margin-top: 132px;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.hero__cats-label { font-size: var(--fs-body); }
.hero__lead { max-width: 62ch; margin: 16px 0 24px; color: var(--c-ink-muted); line-height: 1.6; }

.rule { height: 1px; border: 0; background: var(--c-line); margin: 56px 0 0; }

/* --------------------------- section w/ sticky label --------------------------- */
.section { padding: var(--pad-section) 0; }

/* 384 + 40 + 728 needs the full 1152 of content width, but the single-column
   fallback does not start until 991px — so 992-1199px had nothing to give and
   the row pushed a horizontal scrollbar onto the page. minmax(0, ...) holds the
   measured widths whenever they fit and lets the card column give way when they
   do not (same guard .footer__top already uses). */
.section__grid {
  display: grid;
  grid-template-columns: minmax(0, var(--col-label)) minmax(0, var(--col-cards));
  gap: var(--gap);
  align-items: start;
}
.section__label { position: sticky; top: var(--sticky-top); }
.section__label h2 { padding: 8px 0; color: var(--c-ink-muted); }
.section__label p  { margin: 4px 0 0; max-width: 300px; color: var(--c-ink-70); }

/* --------------------------- card grid --------------------------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  padding: 24px; background: var(--c-bg);
  transition: border-color var(--t-med) ease, transform var(--t-med) ease;
}
.card:hover { border-color: var(--c-line-strong); transform: translateY(-2px); }

.card__media {
  position: relative; overflow: hidden;
  border-radius: var(--r-card); aspect-ratio: 294 / 221;
  background: linear-gradient(135deg, var(--ph-from) 0%, var(--ph-to) 100%);
}
.card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.card__badge {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--c-veil); color: var(--c-ink);
  font-size: 15px; line-height: 20px;
}
.card__badge--warm { background: var(--c-badge-warm); }

.card__title { margin-top: 20px; }
/* Reserves two body lines so one-line and two-line blurbs still line the feature
   lists up across a row. Longer copy just pushes down — .card__foot's margin-top
   auto keeps the buttons on the baseline of the tallest card in the row. */
.card__sub   { margin-top: 8px; min-height: calc(var(--lh-body) * 2); }

.card__features { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.card__features li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body); line-height: var(--lh-body); }
.card__features .ico { margin-top: calc((var(--lh-body) - 14px) / 2); color: var(--c-accent); }

.card__foot { margin-top: auto; padding-top: 24px; }
.card__price { display: block; margin-bottom: 16px; }
/* Triple price list (Homestaging / Video / Kompletní) used in the "Podle typu
   nemovitosti" cards. Two columns: label left, price right-aligned and bold.
   Same bottom margin as a single .card__price so the action row stays aligned
   across cards with one price vs. three. */
.card__prices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.card__prices li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--fs-body); line-height: var(--lh-body); }
.card__prices b { font-weight: 600; white-space: nowrap; }
/* Two equal-width buttons spanning the full card content width, with an even
   gap between them — symmetric from each other and from the card sides.
   min-width:0 lets the 1fr tracks split exactly in half instead of following
   each label's min-content (which left the longer button wider). Horizontal
   padding is trimmed so the longest label still fits on one line at that
   equal width; vertical padding is preserved so both buttons stay one line tall. */
.card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.card__actions .btn { width: 100%; min-width: 0; padding-left: 12px; padding-right: 12px; }

/* --------------------------- closing CTA --------------------------- */
.cta { padding: 80px 0 120px; }
.cta__inner {
  background: var(--c-line); border-radius: var(--r-cta);
  padding: 80px 40px; text-align: center;
}
.cta__title { max-width: 620px; margin: 0 auto; text-wrap: balance; }
.cta__inner .btn { margin-top: 32px; }

/* --------------------------- footer --------------------------- */
.footer { border-top: 1px solid var(--c-line); padding: 64px 0 48px; }
.footer__top { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 632px); gap: 16px 160px; }
.footer__menus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.footer__menus h3 { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-muted); margin-bottom: 12px; }
.footer__menus li + li { margin-top: 8px; }
.footer__menus a { transition: opacity var(--t-fast) ease; }
.footer__menus a:hover { opacity: .6; }
.footer__blurb { margin: 16px 0 0; max-width: 320px; }
.footer__bottom {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--c-line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--c-ink-70); font-size: var(--fs-small);
}

/* =========================================================
   Responsive — reference breakpoints 991 / 767 / 479
   Type steps are token overrides, so every element using the
   scale follows automatically (no per-class re-declaration,
   and no inline style can escape them).
   ========================================================= */
@media (max-width: 991px) {
  :root {
    --pad-section: 72px;
    --fs-display: 56px;  --lh-display: 56px;
    --fs-h2:      44px;  --lh-h2:      46px;
    --fs-section: 28px;  --lh-section: 34px;
  }

  .navbar__grid { grid-template-columns: 1fr auto; }
  .navbar__menu { display: none; }
  .navbar__right { display: none; }
  .navmob { display: block; }
  .navbar__right { gap: 16px; }

  .hero { padding-top: 72px; }
  .hero__title { margin-top: 40px; }
  .hero__cats { margin-top: 64px; }

  .section__grid { grid-template-columns: 1fr; gap: 32px; }
  .section__label { position: static; }
  .section__label p { max-width: none; }

  .footer__top { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  :root {
    --fs-display: 44px;  --lh-display: 46px;
    --fs-h2:      36px;  --lh-h2:      38px;
    --pad-section: 56px;
    --gutter:      20px;
  }
  .cards { grid-template-columns: 1fr; gap: 24px; }
  .cta__inner { padding: 56px 24px; }
  .footer__menus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }

  .navbar { padding: 12px 0; border-bottom: 1px solid var(--c-line); }
  .navbar__brand { font-size: 24px; }
  .navbar__mark { width: 26px; height: 26px; }

  .hero { padding-top: 40px; }
  .hero__crumbs { justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
  .hero__crumbs > a:not(.crumb-back) { font-size: var(--fs-small); color: var(--c-ink-70); }
  .hero__title { margin-top: 24px; text-align: left; }
  .hero__cats {
    margin-top: 40px; justify-content: flex-start; gap: 8px;
  }
  .hero__cats-label { flex: 0 0 100%; text-align: left; font-size: var(--fs-small); color: var(--c-ink-muted); }
  .hero__cats { text-align: left; }
  .hero__cats .pill { font-size: var(--fs-small); padding: 8px 16px; }
  .rule { margin-top: 40px; }

  .section__grid { gap: 24px; }
  .card { padding: 16px; border-radius: var(--r-card); }
  .card__title { margin-top: 16px; }
  .card__sub { min-height: 0; }
  .card__foot { padding-top: 20px; }
  .cta { padding: 56px 0 72px; }
  .footer { padding: 48px 0 40px; }
  .footer__bottom { margin-top: 40px; }
}

@media (max-width: 479px) {
  :root {
    --fs-display: 36px;  --lh-display: 38px;
    --fs-h2:      30px;  --lh-h2:      32px;
  }
  .hero__cats-wrap { gap: 8px; }
  .card__actions { grid-template-columns: 1fr; }
  .card__actions .btn { padding: 12px 20px; }
  .card__actions .btn--ghost { background: var(--c-line); }
  .footer__menus { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =========================================================
   Objednávkový formulář + kontakt
   ========================================================= */
.cta__sub { max-width: 560px; margin: 16px auto 0; color: var(--c-ink-70); text-wrap: balance; }

.order {
  margin-top: 40px; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.order__form, .order__aside {
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-card); padding: 24px;
}
.order__aside { display: flex; flex-direction: column; gap: 20px; }
.order__contacts { display: flex; flex-direction: column; gap: 12px; }
.order__contacts li { display: flex; flex-direction: column; gap: 2px; }
.order__contact { font-size: 20px; line-height: 28px; font-weight: 500; border-bottom: 1px solid var(--c-line-strong); align-self: flex-start; }
.order__contact:hover { color: var(--c-accent); border-color: var(--c-accent); }
.order__perks { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--c-line); }
.order__perks li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body); line-height: var(--lh-body); padding-top: 6px; }
.order__perks .ico { margin-top: calc((var(--lh-body) - 14px) / 2); color: var(--c-accent); }

.form { display: flex; flex-direction: column; gap: 16px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-ink-muted); }
.field__input {
  width: 100%; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--c-ink); background: var(--c-bg);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  padding: 12px 14px; transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.field__input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent); }
.field__input--area { resize: vertical; min-height: 108px; }
.form__submit { width: 100%; justify-content: center; margin-top: 4px; }
.form__submit[disabled] { opacity: .6; pointer-events: none; }
.form__note { margin: 0; text-align: center; }
.form__error { margin: 0; color: #b42318; font-size: var(--fs-small); line-height: var(--lh-small); }
.form--done { align-items: flex-start; gap: 12px; }
.form--done p { margin: 0; }
.form--done a { border-bottom: 1px solid var(--c-line-strong); }

.footer__ai { opacity: .38; font-size: 12px; }
.footer__ai:hover { opacity: .7; }

/* =========================================================
   Nabídky — jemnější mřížka na tabletu i velkém desktopu
   ========================================================= */
/* Osamocená poslední karta v lichém počtu zabere celou šířku
   a přepne se do vodorovného layoutu (obrázek vlevo, obsah vpravo). */
@media (min-width: 768px) {
  .cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cards > .card:last-child:nth-child(odd):has(.card__media) {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 28px;
  }
  .cards > .card:last-child:nth-child(odd):has(.card__media) > .card__media { grid-row: 1 / -1; height: 100%; aspect-ratio: auto; min-height: 260px; }
  .cards > .card:last-child:nth-child(odd):has(.card__media) > .card__title { margin-top: 0; }
  .cards > .card:last-child:nth-child(odd):has(.card__media) > .card__sub { min-height: 0; }
  .cards > .card:last-child:nth-child(odd):has(.card__media) > .card__foot { padding-top: 20px; }
  .cards > .card:last-child:nth-child(odd) .card__actions { grid-template-columns: repeat(2, minmax(0, 200px)); }
}

.card { box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
.card:hover { box-shadow: 0 12px 32px rgba(16, 24, 40, .08); }
.card__media img { transition: transform .4s ease; }
.card:hover .card__media img { transform: scale(1.03); }
.card__price { font-weight: 500; }

@media (max-width: 991px) {
  .order { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .order { margin-top: 32px; gap: 16px; }
  .order__form, .order__aside { padding: 20px; }
  .form__row { grid-template-columns: 1fr; }
}

/* =========================================================
   Nabídka na celou obrazovku (#balicky) — tmavá scéna
   ========================================================= */
.section--stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(72px, 10vh, 128px) 0;
  overflow: clip;
  background:
    radial-gradient(120% 90% at 50% -10%, #14312e 0%, rgba(20,49,46,0) 60%),
    linear-gradient(180deg, #0d0e10 0%, #101315 100%);
  color: var(--c-on-ink);
}
/* jemný přechod ze světlé stránky do tmavé scény */
.section--stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 110%, color-mix(in oklab, var(--c-accent) 22%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
/* pomalu plující aurora */
.stage__aurora {
  position: absolute; inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(28% 32% at 25% 30%, color-mix(in oklab, var(--c-accent) 55%, transparent) 0%, transparent 65%),
    radial-gradient(26% 30% at 75% 65%, color-mix(in oklab, #4f7cff 45%, transparent) 0%, transparent 65%),
    radial-gradient(22% 26% at 55% 15%, color-mix(in oklab, var(--c-badge-warm) 30%, transparent) 0%, transparent 70%);
  filter: blur(60px) saturate(120%);
  opacity: .55;
  animation: stageDrift 26s ease-in-out infinite alternate;
}
@keyframes stageDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}

/* full screen do všech stran — obsah scény jde přes celou šířku okna */
.section--stage > .container {
  max-width: none;
  width: 100%;
  padding-inline: clamp(20px, 4vw, 64px);
}
.section--stage .section__grid {
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vh, 56px);
  justify-items: center;
  text-align: center;
}
.section--stage .cards {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  text-align: left;
}
/* uvnitř scény žádná karta nepřetahuje celý řádek */
.section--stage .cards > .card:last-child:nth-child(odd),
.section--stage .cards > .card:last-child:nth-child(odd):has(.card__media) {
  grid-column: auto;
  display: flex;
  flex-direction: column;
}
.section--stage .cards > .card:last-child:nth-child(odd):has(.card__media) > .card__media {
  grid-row: auto;
  aspect-ratio: 3 / 2;
  min-height: 0;
  height: auto;
}
.section--stage .card__media { aspect-ratio: 3 / 2; }
.section--stage .cards > .card:last-child:nth-child(odd) .card__actions {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1023px) {
  .section--stage .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .section--stage .cards { grid-template-columns: 1fr; }
}


.section--stage .section__label { position: static; }
.section--stage .section__label h2 { color: var(--c-on-ink); }
.section--stage .section__label p { color: rgba(255,255,255,.72); max-width: 34ch; }

.section--stage .card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--c-on-ink);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .35s ease, background .3s ease;
}
.section--stage .card:hover {
  transform: translateY(-8px) scale(1.015);
  background: rgba(255,255,255,.1);
  border-color: color-mix(in oklab, var(--c-accent) 60%, transparent);
  box-shadow: 0 34px 80px -30px color-mix(in oklab, var(--c-accent) 45%, transparent);
}
.section--stage .card .t-70,
.section--stage .card__sub { color: rgba(255,255,255,.72); }
.section--stage .card__features li { color: rgba(255,255,255,.86); }
.section--stage .card__features .ico { color: color-mix(in oklab, var(--c-accent) 70%, white); }
.section--stage .card__price { color: var(--c-on-ink); }
.section--stage .btn--ghost {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: var(--c-on-ink);
}
.section--stage .btn--ghost:hover { background: rgba(255,255,255,.16); }
.section--stage .btn--dark-sm,
.section--stage .btn--dark {
  background: var(--c-accent);
  color: var(--c-on-ink);
}
.section--stage .btn--dark-sm:hover,
.section--stage .btn--dark:hover { background: var(--c-accent-hover); }

/* nájezd karet při scrollu (kde prohlížeč umí scroll-driven animace) */
@supports (animation-timeline: view()) {
  .section--stage .card {
    animation: stageRise linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
  @keyframes stageRise {
    from { opacity: 0; transform: translateY(48px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage__aurora { animation: none; }
  .section--stage .card { animation: none; }
}

/* =========================================================
   Právní stránky + souhlas ve formuláři
   ========================================================= */
.legal { padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 8vw, 96px); }
.legal__inner { max-width: 760px; }
.legal__title { margin-bottom: 16px; }
.legal h2 { margin: 32px 0 8px; }
.legal p { margin: 0 0 8px; }
.legal ul { margin: 8px 0 16px; }
.legal__back { margin-top: 40px; }

.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.field__check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--c-accent, #0d9488);
}