/* ==========================================================================
   papirek.app — marketingový web
   Architektura: @layer reset, tokens, base, layout, components, utilities, motion
   Zdroj vizuálu: docs/design-zdroj/papirek.app-web.dc.html (schválený návrh)
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities, motion;

/* --------------------------------------------------------------------------
   Fonty — self-hostované, variabilní řezy, subset Latin + Latin Extended-A.
   Připraveno skriptem web/scripts/prepare-fonts.sh, licence OFL (viz
   web/assets/fonts/OFL-*.txt). Metricky sladěný fallback níže minimalizuje
   CLS během font-display: swap — hodnoty spočítané z OS/2/hhea tabulek
   výsledných fontů vs. Arial / Courier New (viz poznámka ve skriptu).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+2013, U+2014,
    U+2018-201A, U+201C-201E, U+2026, U+2039, U+203A;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var-latin-ext.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+2013, U+2014,
    U+2018-201A, U+201C-201E, U+2026, U+2039, U+203A;
}

/* Metricky sladěné fallbacky — zabraňují posunu layoutu (CLS) během swapu.
   size-adjust / ascent-override / descent-override spočítané podle metody
   Capsize (unitsPerEm, ascent, descent, xAvgCharWidth cílového fontu
   vs. systémového fallbacku). */
@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"),
    local("Arimo");
  size-adjust: 116.644%;
  ascent-override: 81.4444%;
  descent-override: 19.2895%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New"), local("Liberation Mono"), local("Cousine");
  size-adjust: 99.9837%;
  ascent-override: 102.0166%;
  descent-override: 30.0049%;
  line-gap-override: 0%;
}

/* ==========================================================================
   TOKENS
   Dvouvrstvé: primitiva (--c-*) → sémantika (--color-*). Tmavý režim
   přepisuje jen sémantickou vrstvu přes light-dark(); primitiva zůstávají
   jedna sada hodnot pro oba režimy.
   ========================================================================== */

@layer tokens {
  :root {
    color-scheme: light dark;

    /* --- primitiva: barvy (oklch), pár [světlý, tmavý] -------------------- */
    --c-bg-1: oklch(0.975 0.008 80);
    --c-bg-2: oklch(0.17 0.01 80);
    --c-surface-1: oklch(0.94 0.01 80);
    --c-surface-2: oklch(0.22 0.01 80);
    --c-surface2-1: oklch(0.905 0.012 80);
    --c-surface2-2: oklch(0.27 0.012 80);
    --c-ink-1: oklch(0.2 0.01 80);
    --c-ink-2: oklch(0.95 0.008 80);
    --c-ink-muted-1: oklch(0.42 0.01 80);
    --c-ink-muted-2: oklch(0.72 0.01 80);
    /* L upraveno oproti zdroji (0.55 / 0.6) — na --color-surface padalo
       pod 4,5:1 (WCAG 2.2 AA), viz report frontend-dev. */
    --c-ink-subtle-1: oklch(0.5 0.01 80);
    --c-ink-subtle-2: oklch(0.64 0.01 80);
    --c-line-1: oklch(0.88 0.01 80);
    --c-line-2: oklch(0.3 0.01 80);
    /* L=0.50 (ne 0.55 jako v původním zdroji) — 0.55 padá pod 4,5:1 na
       --color-surface (WCAG 2.2 AA), viz poznámka u .card--dark níže. */
    --c-accent-1: oklch(0.5 0.13 50);
    --c-accent-2: oklch(0.78 0.13 55);
    --c-accent-ink-1: white;
    --c-accent-ink-2: oklch(0.2 0.02 50);
    --c-focus-1: oklch(0.55 0.2 260);
    --c-focus-2: oklch(0.75 0.15 250);
    /* Odstíny dlaždic domovské obrazovky v hero mockupu (dekorativní, mimo
       barevný režim webu — simulují systémové ikony telefonu). */
    --c-tile-1: oklch(0.88 0.01 80);
    --c-tile-2: oklch(0.82 0.012 80);
    --c-tile-3: oklch(0.76 0.012 80);
    --c-tile-f: oklch(0.97 0.005 80);
    --c-tile-d: oklch(0.35 0.01 80);
    /* Barva demo obchodu (Tlapkárna) v mockupech appky — stejná v obou režimech,
       je to obsah simulované obrazovky appky, ne chrome webu. */
    --c-shop: oklch(0.45 0.12 140);
    --c-shop-ink: oklch(0.97 0.02 140);
    --c-shop-surface: oklch(0.985 0.005 140);
    --c-shop-surface-pattern-a: oklch(0.93 0.015 140);
    --c-shop-surface-pattern-b: oklch(0.9 0.02 140);
    --c-shop-muted: oklch(0.45 0.03 140);
    --c-shop-ink-on-surface: oklch(0.2 0.02 140);
    --c-lock-bg: oklch(0.22 0.02 250);
    --c-lock-ink: oklch(0.95 0.01 250);
    --c-lock-ink-muted: oklch(0.7 0.02 250);
    --c-lock-panel: oklch(0.95 0.01 250 / 0.12);

    /* --- sémantické tokeny -------------------------------------------------- */
    --color-bg: light-dark(var(--c-bg-1), var(--c-bg-2));
    --color-surface: light-dark(var(--c-surface-1), var(--c-surface-2));
    --color-surface-2: light-dark(var(--c-surface2-1), var(--c-surface2-2));
    --color-ink: light-dark(var(--c-ink-1), var(--c-ink-2));
    --color-ink-2: light-dark(var(--c-ink-muted-1), var(--c-ink-muted-2));
    --color-ink-3: light-dark(var(--c-ink-subtle-1), var(--c-ink-subtle-2));
    --color-line: light-dark(var(--c-line-1), var(--c-line-2));
    --color-accent: light-dark(var(--c-accent-1), var(--c-accent-2));
    --color-accent-ink: light-dark(var(--c-accent-ink-1), var(--c-accent-ink-2));
    --color-focus: light-dark(var(--c-focus-1), var(--c-focus-2));
    --color-shop: var(--c-shop);
    --color-shop-ink: var(--c-shop-ink);

    /* --- typografie ---------------------------------------------------- */
    --font-sans: "Public Sans", "Public Sans Fallback", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace,
      "SFMono-Regular", monospace;

    --fs-hero: clamp(2.5rem, 1.55rem + 4.3vw, 4rem);
    --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 2.875rem);
    --fs-h3-lg: 1.3125rem;
    --fs-h3: 1.1875rem;
    --fs-lede: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);
    --fs-body-lg: 1.0625rem;
    --fs-body: 1rem;
    --fs-sm: 0.9375rem;
    --fs-xs: 0.875rem;
    --fs-2xs: 0.8125rem;
    --fs-mono-label: 0.8125rem;

    /* --- rozestupy (4px báze) -------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 3.5rem;
    --space-10: 4rem;
    --space-11: 5rem;
    --space-12: 5.5rem;

    /* --- rádiusy ----------------------------------------------------------- */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --radius-mark: 9px;

    /* --- rozvržení ----------------------------------------------------------- */
    --content-max: 75rem; /* 1200px */
    --measure: 42ch;
    --header-h: 4.5rem;

    /* --- pohyb (nulováno v @layer motion při prefers-reduced-motion) ------ */
    --dur-fast: 160ms;
    --dur-base: 400ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- stín -------------------------------------------------------------- */
    --shadow-phone: 0 30px 60px oklch(0 0 0 / 0.18);
    --shadow-card: 0 20px 40px oklch(0 0 0 / 0.1);
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    hanging-punctuation: first;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  ol,
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea {
    font: inherit;
    color: inherit;
  }

  a {
    color: inherit;
  }

  details > summary {
    list-style: none;
    cursor: pointer;
  }

  details > summary::-webkit-details-marker {
    display: none;
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
  }

  body {
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.6;
  }

  h1,
  h2,
  h3 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-ink);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-hero);
    line-height: 1.03;
    letter-spacing: -0.03em;
  }

  h2 {
    font-size: var(--fs-h2);
    line-height: 1.08;
  }

  h3 {
    font-size: var(--fs-h3);
  }

  p {
    text-wrap: pretty;
  }

  a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }

  a:hover {
    color: var(--color-accent);
  }

  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  .section {
    border-top: 1px solid var(--color-line);
  }

  .section:first-of-type {
    border-top: none;
  }

  .section > .container {
    padding-block: var(--space-11) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
  }

  .section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 60ch;
  }

  .section-head--split {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-8);
    align-items: end;
  }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-8);
    align-items: start;
  }

  .grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: var(--space-3);
  }

  .eyebrow {
    margin: 0;
    font: 500 var(--fs-mono-label) var(--font-mono);
    color: var(--color-accent);
  }

  .section-head--flex {
    max-width: none;
  }

  .section-head__note {
    margin: 0;
    max-width: var(--measure);
    color: var(--color-ink-2);
    font-size: var(--fs-body-lg);
    line-height: 1.55;
  }

  .h2-narrow {
    max-width: 20ch;
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

@layer components {
  /* ---------------------------- skip link ------------------------------- */
  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    z-index: 1000;
    transform: translateY(-160%);
    background: var(--color-ink);
    color: var(--color-bg);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* ---------------------------- brand mark -------------------------------- */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-ink);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    border-radius: var(--radius-sm);
  }

  .brand-mark {
    position: relative;
    display: block;
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--radius-mark);
    background: var(--color-ink);
    overflow: hidden;
    flex-shrink: 0;
  }

  .brand-mark::before,
  .brand-mark::after {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inline-size: 12px;
    block-size: 12px;
  }

  .brand-mark::before {
    inset-inline-end: -1px;
    background: var(--color-bg);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }

  .brand-mark::after {
    inset-inline-end: 0;
    background: var(--color-accent);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
  }

  .brand-accent {
    color: var(--color-accent);
  }

  /* ---------------------------- header / nav ------------------------------ */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
  }

  .header-inner {
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding-block: var(--space-3);
  }

  .main-nav ul {
    display: none;
  }

  .main-nav a {
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-xs);
    color: var(--color-ink-2);
  }

  .main-nav a:hover {
    color: var(--color-accent);
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    background: transparent;
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    cursor: pointer;
  }

  .nav-toggle svg {
    inline-size: 22px;
    block-size: 22px;
  }

  .nav-drawer {
    display: none;
  }

  .nav-drawer.is-open {
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-2) var(--space-4) var(--space-5);
  }

  .nav-drawer.is-open ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .nav-drawer.is-open a {
    display: block;
    text-decoration: none;
    font-weight: 600;
    color: var(--color-ink);
    padding-block: var(--space-1);
  }

  @media (min-width: 62rem) {
    .nav-toggle {
      display: none;
    }

    .nav-drawer,
    .nav-drawer.is-open {
      display: block;
      position: static;
      background: none;
      border: none;
      padding: 0;
    }

    .nav-drawer ul {
      display: flex !important;
      flex-direction: row;
      gap: var(--space-6);
    }

    .nav-drawer a {
      padding: 0;
    }
  }

  /* ---------------------------- buttons ------------------------------------ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-body);
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }

  .btn:hover {
    transform: translateY(-1px);
    color: inherit;
  }

  .btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-ink);
  }

  .btn-outline {
    border-color: var(--color-ink);
    color: var(--color-ink);
    background: transparent;
  }

  .btn-ghost {
    padding-inline: var(--space-4);
    color: var(--color-ink);
  }

  .btn-dark {
    background: var(--color-ink);
    color: var(--color-bg);
    border-radius: var(--radius-sm);
  }

  .btn-sm {
    min-height: 36px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-xs);
  }

  /* ---------------------------- hero ---------------------------------------- */
  .hero > .container {
    padding-block: var(--space-10) var(--space-11);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-9);
    align-items: center;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .hero-copy .lede {
    max-width: var(--measure);
    font-size: var(--fs-lede);
    line-height: 1.55;
    color: var(--color-ink-2);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .hero-price-note {
    font: 400 var(--fs-2xs) var(--font-mono);
    color: var(--color-ink-3);
  }

  .hero-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    justify-self: center;
  }

  /* ---------------------------- phone mockup (hero) --------------------------
     Plný rámeček s výřezem — jen pro domovskou obrazovku v hero sekci.
     Scény v „co aplikace umí" používají plošší .device-card (viz níže),
     přesně podle zdroje návrhu. */
  .phone {
    --phone-w: 312px;
    --phone-h: 660px;
    inline-size: var(--phone-w);
    max-inline-size: 100%;
    block-size: var(--phone-h);
    border-radius: 52px;
    padding: 10px;
    background: var(--c-ink-1);
    box-shadow: var(--shadow-phone);
  }

  .phone__screen {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 42px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .phone__notch {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 96px;
    block-size: 28px;
    border-radius: var(--radius-pill);
    background: var(--c-ink-1);
    z-index: 2;
  }

  .phone__caption {
    font: 400 var(--fs-2xs) var(--font-mono);
    color: var(--color-ink-3);
  }

  /* home screen (hero) */
  .phone--home .phone__screen {
    background: linear-gradient(
      180deg,
      oklch(0.93 0.015 80),
      oklch(0.86 0.02 70)
    );
    color: var(--c-ink-1);
  }

  .phone__statusbar {
    display: flex;
    justify-content: space-between;
    padding: 16px 26px 0;
    font-size: 13px;
    font-weight: 600;
  }

  .phone__battery {
    display: block;
    inline-size: 22px;
    block-size: 10px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
  }

  .phone-grid {
    display: grid;
    grid-template-columns: repeat(4, 58px);
    gap: 18px 14px;
    justify-content: center;
    padding: 30px 0 0;
  }

  .app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .app-tile__icon {
    position: relative;
    display: block;
    inline-size: 58px;
    block-size: 58px;
    border-radius: 15px;
    background: var(--tile-bg, var(--c-line-1));
  }

  .app-tile__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: var(--glyph-w, 20px);
    block-size: var(--glyph-h, 20px);
    border-radius: var(--glyph-r, 6px);
    background: var(--tile-fg, oklch(0.97 0.005 80));
  }

  .app-tile__label {
    font-size: 9px;
    font-weight: 500;
    color: oklch(0.35 0.01 80);
    text-align: center;
  }

  .app-tile--shop .app-tile__icon {
    background: var(--color-shop);
    box-shadow: 0 8px 20px oklch(0.45 0.12 140 / 0.35);
  }

  .app-tile--shop .app-tile__icon::after {
    content: none;
  }

  .app-tile__glyph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-shop-ink);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.05em;
  }

  .app-tile__badge {
    position: absolute;
    inset-block-start: -5px;
    inset-inline-end: -5px;
    inline-size: 17px;
    block-size: 17px;
    border-radius: var(--radius-pill);
    background: var(--c-accent-1);
    color: white;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid oklch(0.9 0.015 80);
  }

  .app-tile__label--bold {
    font-weight: 700;
  }

  .phone-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-block-start: auto;
    padding-block-end: 12px;
  }

  .phone-dots span {
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--radius-pill);
    background: currentColor;
  }

  .phone-dots span:last-child {
    opacity: 0.3;
  }

  .phone-dock {
    margin: 0 12px 12px;
    padding: 12px 10px;
    border-radius: 26px;
    background: oklch(1 0 0 / 0.4);
    display: flex;
    justify-content: space-around;
  }

  .phone-dock__item {
    position: relative;
    display: block;
    inline-size: 54px;
    block-size: 54px;
    border-radius: 14px;
    background: var(--tile-bg, var(--c-line-1));
  }

  .phone-dock__item::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: var(--glyph-w, 20px);
    block-size: var(--glyph-h, 20px);
    border-radius: var(--glyph-r, 6px);
    background: var(--tile-fg, oklch(0.97 0.005 80));
  }

  /* ---------------------------- device-card (scény "co aplikace umí") --------
     Plošší karta bez rámečku/výřezu — přesně podle zdroje návrhu, na rozdíl
     od hero, kde je appka na domovské obrazovce v plném rámečku telefonu. */
  .device-card {
    inline-size: 100%;
    max-inline-size: 340px;
    aspect-ratio: 9 / 16;
    border-radius: 36px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
  }

  /* lock screen (scéna 01) */
  .device-card--lock {
    background: var(--c-lock-bg);
    color: var(--c-lock-ink);
    padding: 28px 20px;
    gap: 4px;
  }

  .phone__date {
    font-size: 11px;
    text-align: center;
    color: var(--c-lock-ink-muted);
  }

  .phone__clock {
    font-size: 56px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.05em;
    text-align: center;
  }

  .phone__notification {
    margin-block-start: auto;
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: var(--c-lock-panel);
  }

  .phone__notification-icon {
    flex: none;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 9px;
    background: var(--color-shop);
    color: var(--color-shop-ink);
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.05em;
  }

  .phone__notification-text {
    font-size: 11px;
    line-height: 1.35;
  }

  /* shop screens (scéna 02 / 03) */
  .device-card--shop {
    background: var(--c-shop-surface);
    border: 1px solid var(--color-line);
    color: var(--c-shop-ink-on-surface);
  }

  .shop-topbar {
    display: flex;
    justify-content: space-between;
    padding: 20px 18px 0;
    font-size: 12px;
    font-weight: 600;
  }

  .shop-topbar__brand {
    color: var(--color-shop);
  }

  .shop-photo {
    margin: 14px 18px 0;
    aspect-ratio: 1;
    border-radius: 18px;
    background: repeating-linear-gradient(
      135deg,
      var(--c-shop-surface-pattern-a) 0 6px,
      var(--c-shop-surface-pattern-b) 6px 12px
    );
    display: flex;
    align-items: flex-end;
    padding: 10px;
  }

  .shop-photo span {
    font: 400 10px var(--font-mono);
    color: var(--c-shop-muted);
  }

  .shop-product {
    padding: 14px 18px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .shop-product__name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .shop-product__stock {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-shop);
  }

  .shop-product__price {
    font-size: 20px;
    font-weight: 700;
    margin-block-start: 4px;
  }

  .shop-cta {
    margin: auto 18px 20px;
    padding: 13px;
    border-radius: 14px;
    background: var(--color-shop);
    color: white;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
  }

  .shop-cta--dark {
    background: var(--c-ink-1);
  }

  .shop-heading {
    padding: 20px 18px 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .shop-rows {
    margin: 14px 18px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .shop-row {
    padding: 11px;
    border-radius: 12px;
    background: var(--c-shop-surface-pattern-a);
    font-size: 11px;
    line-height: 1.4;
  }

  .shop-row b {
    display: block;
  }

  .shop-total {
    margin: auto 18px 0;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
  }

  /* ---------------------------- scene (co aplikace umí) ---------------------- */
  .scenes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-6);
    container-type: inline-size;
  }

  .scene {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .scene .device-card {
    align-self: flex-start;
  }

  .scene__desc {
    max-width: 34ch;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  .scene__num {
    display: block;
    margin-block-end: var(--space-1);
    font: 500 var(--fs-mono-label) var(--font-mono);
    color: var(--color-accent);
  }

  /* ---------------------------- reason / feature cards ------------------------ */
  .reason-card {
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .reason-card__icon {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 12px;
    background: var(--color-ink);
    margin-block-end: var(--space-1);
  }

  .reason-card h3 {
    font-size: var(--fs-h3);
  }

  .reason-card p {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  /* ---------------------------- steps (jak to funguje) ------------------------- */
  .steps {
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-3);
  }

  .step {
    padding-block: var(--space-5) 0;
    border-block-start: 1.5px solid var(--color-ink);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .step__num {
    font: 500 var(--fs-mono-label) var(--font-mono);
    color: var(--color-ink-3);
  }

  .step h3 {
    font-size: 1.3125rem;
  }

  .step p {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  /* ---------------------------- pro koho ---------------------------------------- */
  .prose {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    font-size: var(--fs-lede);
    line-height: 1.55;
    color: var(--color-ink-2);
  }

  /* ---------------------------- roadmap / plán ---------------------------------- */
  .roadmap-list {
    border-block-start: 1.5px solid var(--color-ink);
    container-type: inline-size;
  }

  .roadmap-item {
    border-bottom: 1px solid var(--color-line);
  }

  /* Grid s pojmenovanými oblastmi místo obalového <div>/<span> kolem nadpisu
     a stavového štítku — <summary> smí obsahovat jen frázový obsah,
     volitelně prokládaný nadpisem (<h3> jako přímé dítě), ne nadpis
     vnořený v dalším prvku. Název appky a štítek proto zůstávají přímými
     sourozenci a jejich vizuální seskupení řeší až tohle rozložení. */
  .roadmap-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr) auto;
    grid-template-areas:
      "title text toggle"
      "pill  text toggle";
    column-gap: var(--space-6);
    row-gap: var(--space-2);
    align-items: center;
    padding-block: var(--space-5);
  }

  .roadmap-item > summary.roadmap-row {
    list-style: none;
  }

  .roadmap-title {
    grid-area: title;
    align-self: end;
    font-size: 1.3125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .status-pill {
    grid-area: pill;
    align-self: start;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    font: 500 0.75rem var(--font-mono);
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-pill);
  }

  .status-pill--active {
    background: var(--color-accent);
    color: var(--color-accent-ink);
  }

  .status-pill--inactive {
    border: 1.5px solid var(--color-ink-3);
    color: var(--color-ink-2);
  }

  .roadmap-text {
    grid-area: text;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  .roadmap-toggle {
    grid-area: toggle;
    align-self: center;
    justify-self: end;
    white-space: nowrap;
  }

  .roadmap-toggle::after {
    content: "+";
    margin-inline-start: var(--space-2);
    font-weight: 400;
    display: inline-block;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .roadmap-item[open] .roadmap-toggle::after {
    transform: rotate(45deg);
  }

  .roadmap-panel {
    padding: 0 0 var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 40ch;
  }

  .roadmap-panel p {
    font-size: var(--fs-sm);
    color: var(--color-ink-2);
    line-height: 1.5;
  }

  @container (max-width: 40rem) {
    .roadmap-row {
      grid-template-columns: 1fr;
      grid-template-areas:
        "title"
        "pill"
        "text"
        "toggle";
      justify-items: start;
      row-gap: var(--space-3);
    }

    .roadmap-title {
      align-self: auto;
    }

    .status-pill {
      align-self: auto;
    }

    .roadmap-toggle {
      align-self: auto;
      justify-self: start;
    }
  }

  /* ---------------------------- ceník --------------------------------------------- */
  .price-list {
    border-block-start: 1.5px solid var(--color-ink);
  }

  .price-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-6);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-line);
  }

  .price-row__label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .price-row__name {
    font-size: 1.125rem;
    font-weight: 600;
  }

  .price-row__note {
    font-size: var(--fs-xs);
    color: var(--color-ink-2);
  }

  .price-row__value {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .price-vat-note {
    margin: 0;
    font: 500 var(--fs-mono-label) var(--font-mono);
    color: var(--color-ink-2);
  }

  .included-lists {
    margin-block-start: var(--space-8);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-6);
    container-type: inline-size;
  }

  .included-lists h3 {
    font-size: 1.125rem;
    margin-block-end: var(--space-2);
  }

  .dot-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--color-ink-2);
  }

  .dot-list li {
    display: flex;
    gap: var(--space-2);
  }

  .dot-list li::before {
    content: "";
    flex: none;
    inline-size: 6px;
    block-size: 6px;
    margin-block-start: 0.5em;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
  }

  .dot-list--muted li::before {
    background: var(--color-ink-3);
  }

  /* offer cards (pilot, nová platforma, poplatky) */
  .offer-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .card {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }

  .card--surface {
    background: var(--color-surface);
  }

  .card--outline {
    border: 1.5px solid var(--color-line);
  }

  .card--dark {
    background: var(--color-ink);
    color: var(--color-bg);
    /* Karta je vždy opačné polarity než stránka (var(--color-ink) coby pozadí
       to zajišťuje samo). Proto i akcent uvnitř potřebuje prohozenou
       light-dark() dvojici — jinak by ve světlém režimu použil variantu
       laděnou na světlé pozadí, ale zobrazil ji na tmavém pozadí karty
       a spadl by pod 4,5:1 (WCAG 2.2 AA). */
    --color-accent: light-dark(var(--c-accent-2), var(--c-accent-1));
    --color-accent-ink: light-dark(var(--c-accent-ink-2), var(--c-accent-ink-1));
  }

  .card--dark .eyebrow {
    color: var(--color-accent);
  }

  .card--dark p {
    color: color-mix(in oklch, var(--color-bg) 85%, transparent);
  }

  .card--dark h3 {
    color: var(--color-bg);
  }

  .card-title-lg {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.18;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .card-title-md {
    margin: 0;
    font-size: 1.3125rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .fee-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--fs-sm);
  }

  .fee-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-line);
  }

  .fee-row__name {
    font-weight: 600;
  }

  .fee-row__note {
    color: var(--color-ink-2);
    text-align: right;
  }

  .cta-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .cta-row__note {
    font-size: var(--fs-xs);
    color: var(--color-ink-3);
  }

  /* ---------------------------- onboarding (zavedení) ---------------------------- */
  .onboarding-list {
    border-block-start: 1.5px solid var(--color-ink);
  }

  .onboarding-item {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line);
    align-items: baseline;
  }

  .onboarding-item__num {
    font: 500 var(--fs-mono-label) var(--font-mono);
    color: var(--color-ink-3);
  }

  .onboarding-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .onboarding-item__title {
    font-size: var(--fs-body-lg);
    font-weight: 600;
  }

  .onboarding-item__text {
    font-size: var(--fs-xs);
    color: var(--color-ink-2);
    line-height: 1.45;
  }

  /* ---------------------------- FAQ ------------------------------------------------ */
  .faq-list {
    border-block-start: 1.5px solid var(--color-ink);
  }

  .faq-item {
    border-bottom: 1px solid var(--color-line);
  }

  .faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-5);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .faq-chevron {
    flex: none;
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .faq-item[open] .faq-chevron {
    transform: rotate(45deg);
  }

  .faq-answer {
    padding: 0 var(--space-9) var(--space-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--fs-body-lg);
    line-height: 1.55;
    color: var(--color-ink-2);
  }

  @media (max-width: 30rem) {
    .faq-answer {
      padding-inline-end: 0;
    }
  }

  /* ---------------------------- kontakt -------------------------------------------- */
  .contact-section {
    background: var(--color-surface);
  }

  .contact-direct {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  .contact-direct__label {
    font-size: var(--fs-2xs);
    color: var(--color-ink-3);
  }

  .contact-direct a,
  .contact-direct__placeholder {
    font-weight: 600;
    text-decoration: none;
  }

  .contact-direct__placeholder {
    color: var(--color-ink-2);
  }

  .contact-panel {
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
  }

  .contact-panel p {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--color-ink-3);
    line-height: 1.5;
  }

  /* ---------------------------- footer --------------------------------------------- */
  .site-footer {
    border-top: 1px solid var(--color-line);
  }

  .site-footer .container {
    padding-block: var(--space-8) var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    font-size: var(--fs-2xs);
    color: var(--color-ink-2);
    line-height: 1.6;
  }

  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    font-weight: 500;
  }

  .footer-links span {
    color: var(--color-ink-3);
  }

  .footer-legal {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
  }

  .footer-legal p {
    margin: 0;
    max-width: 60ch;
  }

  .footer-legal p + p {
    max-width: 44ch;
    color: var(--color-ink-3);
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

@layer utilities {
  .text-muted-sm {
    margin: 0;
    color: var(--color-ink-2);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }

  .card-title-sm {
    font-size: 1.125rem;
  }

  .price-vat-note--below {
    margin-block-start: var(--space-3);
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ==========================================================================
   MOTION
   Progresivní vylepšení: prvky jsou ve výchozím (bez-JS) stavu vždy plně
   viditelné. main.js přidává třídu [data-reveal] až po ověření podpory
   IntersectionObserveru a jen když uživatel nemá prefers-reduced-motion.
   Animuje se výhradně transform a opacity.
   ========================================================================== */

@layer motion {
  [data-reveal] {
    transition: opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  [data-reveal].is-hidden {
    opacity: 0;
    transform: translateY(20px);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 0.01ms;
      --dur-base: 0.01ms;
    }

    html {
      scroll-behavior: auto;
    }

    [data-reveal],
    [data-reveal].is-hidden {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}