/* ============================================================
   Fonty — self-host woff2 (latin + latin-ext pro češtinu)
   Zdroj: fontsource (OFL licence). Žádné Google Fonts CDN.
   ============================================================ */
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }



/* ===== colors_and_type.css ===== */
/* ============================================================
   Harmony Factory — Colors & Type
   ------------------------------------------------------------
   One source of truth for color tokens, font stacks, and
   semantic type styles. Import this file at the root of every
   page that uses the Harmony Factory brand.

   Usage:
     <link rel="stylesheet" href="colors_and_type.css">

   Fonts: Barlow Condensed (display) + JetBrains Mono (technical
   values) load from Google Fonts until self-hosted woff2 files are
   supplied. Barlow Semi Condensed (body) is self-hosted from
   ./fonts/ — production should convert TTF → woff2.
   ============================================================ */

/* Barlow Condensed (display) + JetBrains Mono (mono) — Google Fonts until woff2 TTFs land.
   NOTE (GDPR): self-host both before production deploy. */

/* Barlow Semi Condensed (body) — self-hosted, weights 400/500/600/700 only.
   (Audit: unused weights removed; convert to woff2 for production.) */
:root {
  /* ---------- Brand colors ---------- */
  --haf-green:        #005541;  /* primary — surfaces, identity, headings on light */
  --haf-green-700:    #004433;  /* hover/press for green surfaces */
  --haf-green-900:    #002A1F;  /* deep green text on light bg */
  --haf-green-100:    #E5EEEB;  /* tinted background, cells */
  --haf-green-050:    #F2F7F5;

  --haf-orange:       #FF6600;  /* accent — CTAs only, sparingly */
  --haf-orange-700:   #CC5200;  /* hover/press */
  --haf-orange-100:   #FFE8D6;  /* highlighted callouts */

  --haf-grey:         #AAABAC;  /* secondary, dividers */
  --haf-grey-700:     #6E6F70;  /* secondary text on light */
  --haf-grey-900:     #2B2C2D;  /* primary body text on light */
  --haf-grey-300:     #D4D4D5;  /* hairline border */
  --haf-grey-100:     #F5F5F5;  /* alternate section bg */
  --haf-grey-050:     #FAFAFA;
  --haf-white:        #FFFFFF;
  --haf-black:        #111111;
  --haf-sand:         #F7F4EF;  /* dominanta renovačního pasu (theme "pas") */
  --haf-whatsapp:     #25D366;  /* WhatsApp CTA only */

  /* Status / semantic — derived, used sparingly */
  --haf-success:      #2E7D5B;
  --haf-warning:      #C2641A;
  --haf-danger:       #B23A1F;
  --haf-info:         #2F5E78;

  /* ---------- Semantic surfaces ---------- */
  --bg:               var(--haf-white);
  --bg-alt:           var(--haf-grey-100);
  --bg-inverse:       var(--haf-green);
  --surface:          var(--haf-white);
  --surface-sunken:   var(--haf-grey-100);

  /* ---------- Semantic text ---------- */
  --fg:               var(--haf-grey-900);   /* primary body */
  --fg-muted:         var(--haf-grey-700);   /* secondary */
  --fg-subtle:        var(--haf-grey);       /* tertiary / captions */
  --fg-inverse:       var(--haf-white);      /* on dark green */
  --fg-brand:         var(--haf-green);      /* headings, links */
  --fg-accent:        var(--haf-orange);     /* CTA text rare */

  /* ---------- Borders ---------- */
  --border:           var(--haf-grey-300);
  --border-strong:    var(--haf-grey);
  --border-brand:     var(--haf-green);

  /* ---------- Type families ---------- */
  --font-display:     "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body:        "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-mono:        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (fluid — clamp() so hero nepřeteče na mobilu) ---------- */
  --fs-display: clamp(2.5rem, 6vw, 4.5rem);    /* @kind font */ /* 40–72 — hero only */
  --fs-h1:      clamp(2rem, 4.5vw, 3rem);      /* @kind font */ /* 32–48 */
  --fs-h2:      clamp(1.6rem, 3vw, 2.25rem);   /* @kind font */ /* 26–36 */
  --fs-h3:      1.625rem;  /* 26 */
  --fs-h4:      1.25rem;   /* 20 */
  --fs-lead:    1.25rem;   /* 20 */
  --fs-body:    1rem;      /* 16 */
  --fs-small:   0.875rem;  /* 14 */
  --fs-caption: 0.75rem;   /* 12 — UPPERCASE labels */

  /* ---------- Line heights ---------- */
  --lh-tight:   1.05;   /* @kind other */
  --lh-snug:    1.2;    /* @kind other */
  --lh-normal:  1.5;    /* @kind other */
  --lh-loose:   1.65;   /* @kind other */

  /* ---------- Tracking ---------- */
  --ls-tight:    -0.01em;
  --ls-normal:    0;       /* @kind other */
  --ls-wide:      0.04em;
  --ls-caption:   0.12em;  /* uppercase eyebrows */

  /* ---------- Spacing scale ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii (sharp & functional) ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;   /* default for inputs, buttons */
  --radius-lg:   6px;   /* max — cards, panels */
  --radius-pill: 999px; /* tags / chips only */

  /* ---------- Borders ---------- */
  --bw-hair:   1px;
  --bw-strong: 2px;
  --bw-bold:   3px;

  /* ---------- Shadows (used very sparingly) ---------- */
  --shadow-1:  0 1px 0 rgba(17,17,17,0.04);
  --shadow-2:  0 1px 2px rgba(17,17,17,0.06), 0 2px 6px rgba(17,17,17,0.04);
  --shadow-3:  0 6px 24px rgba(17,17,17,0.08);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: clamp(16px, 4vw, 32px);

  /* ---------- Motion ---------- */
  --easing:    cubic-bezier(.2,.6,.2,1);  /* @kind other */
  --dur-fast:  120ms;   /* @kind other */
  --dur-base:  200ms;   /* @kind other */
  --dur-slow:  320ms;   /* @kind other */
}

/* ============================================================
   Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Semantic type
   ============================================================ */
.haf-display, .haf-h1, .haf-h2, .haf-h3, .haf-h4 {
  font-family: var(--font-display);
  color: var(--fg-brand);
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
}
/* Uppercase jen display / H1 / eyebrow — kondenzované verzálky s diakritikou
   jsou od H2 dolů špatně čitelné. */
.haf-display { font-size: var(--fs-display); font-weight: 700; text-transform: uppercase; }
.haf-h1      { font-size: var(--fs-h1); text-transform: uppercase; }
.haf-h2      { font-size: var(--fs-h2); font-weight: 600; }
.haf-h3      { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
.haf-h4      { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

.haf-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.haf-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg);
  font-weight: 400;
}

.haf-body  { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg); }
.haf-small { font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-muted); }
.haf-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.haf-mono { font-family: var(--font-mono); font-size: var(--fs-small); }

/* Default headings/paragraphs follow the same rules unless overridden */
h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--fg-brand); text-transform: uppercase; margin: 0 0 var(--space-5); }
h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--fg-brand); margin: 0 0 var(--space-4); }
h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-brand); margin: 0 0 var(--space-3); }
h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--fg-brand); margin: 0 0 var(--space-3); }
p  { margin: 0 0 var(--space-4); line-height: var(--lh-loose); }

a { color: var(--fg-brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--easing); }
a:hover { color: var(--haf-orange); }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

::selection { background: var(--haf-orange); color: var(--haf-white); }

/* ===== themes.css ===== */
/* ============================================================
   Harmony Factory — themes.css
   ------------------------------------------------------------
   Jeden systém + data-theme. Komponenty se nemění — přepínají se
   jen sémantické tokeny. Nastavte na body (bez atributu):

     body (bez atributu)                        → harmonyfactory.cz (výchozí)
     body[data-theme="pas"]       → renovacni-pas-domu.cz
     body[data-theme="izolace"]   → foukana-prirodni-izolace.cz

   Import až PO colors_and_type.css.
   ============================================================ */

/* Renovační pas — sekce na "papíru" (sand) */
[data-theme="pas"] {
  --bg-alt: var(--haf-sand);
  --surface-sunken: var(--haf-sand);
}

/* Foukaná izolace — jemný zelený tint; vyšší hustotu accent CTA
   řeší obsah stránky, ne CSS */
[data-theme="izolace"] {
  --bg-alt: var(--haf-green-050);
  --surface-sunken: var(--haf-green-050);
}

/* ===== ui_kits/_shared/components.css ===== */
/* Shared UI kit primitives — used across all three Harmony Factory sites.
   Pull this in alongside ../../colors_and_type.css. */

/* Layout primitives */
.hf-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.hf-section { padding: var(--space-8) 0; }
.hf-section--alt { background: var(--haf-grey-100); }
.hf-section--dark { background: var(--haf-green); color: var(--haf-white); }
.hf-section--dark h1, .hf-section--dark h2, .hf-section--dark h3, .hf-section--dark h4 { color: var(--haf-white); }
.hf-section--dark p { color: rgba(255,255,255,0.92); }

/* Eyebrow */
.hf-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--haf-orange);
  margin: 0 0 var(--space-3);
}

/* Buttons */
.hf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  border: none; border-radius: var(--radius-md);
  padding: 11px 18px; cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--easing), transform var(--dur-fast) var(--easing);
}
.hf-btn:hover { transform: none; }
.hf-btn:active { transform: translateY(1px); }
.hf-btn:focus-visible { outline: 2px solid var(--haf-orange); outline-offset: 2px; }

.hf-btn--primary { background: var(--haf-green); color: #fff; }
.hf-btn--primary:hover { background: var(--haf-green-700); }
.hf-btn--accent  { background: var(--haf-orange); color: #fff; }
.hf-btn--accent:hover { background: var(--haf-orange-700); }
.hf-btn--secondary { background: transparent; color: var(--haf-green); border: 1px solid var(--haf-green); }
.hf-btn--secondary:hover { background: var(--haf-green-100); }
.hf-btn--ghost { background: transparent; color: var(--haf-grey-900); padding: 6px 0; text-decoration: underline; text-underline-offset: 4px; border-radius: 0; }
.hf-btn--ghost:hover { color: var(--haf-orange); }
.hf-btn--lg { padding: 14px 24px; font-size: 16px; }
.hf-btn--sm { padding: 7px 12px; font-size: 12px; }

.hf-btn--on-dark.hf-btn--secondary { color: #fff; border-color: rgba(255,255,255,0.5); }
.hf-btn--on-dark.hf-btn--secondary:hover { background: rgba(255,255,255,0.08); border-color: #fff; }

/* Cards */
.hf-card {
  background: var(--haf-white);
  border: 1px solid var(--haf-grey-300);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.hf-card--featured { border-bottom: 3px solid var(--haf-orange); }
.hf-card__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.1; text-transform: uppercase; color: var(--haf-green); margin: 0 0 var(--space-3); }
.hf-card__body  { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--haf-grey-900); margin: 0; }
.hf-card__meta  { font-family: var(--font-mono); font-size: 12px; color: var(--haf-grey-700); margin-top: var(--space-3); }

/* Photo placeholder block */
.hf-photo-placeholder {
  background: var(--haf-grey-100);
  border: 1px solid var(--haf-grey-300);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 12px; letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--haf-grey-700);
  padding: var(--space-5);
  text-align: center;
  aspect-ratio: 4 / 3;
}

/* Header */
.hf-header { background: #fff; border-bottom: 1px solid var(--haf-grey-300); position: sticky; top: 0; z-index: 10; }
.hf-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: var(--space-5); }
.hf-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hf-brand img { height: 32px; }
.hf-brand__text { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--haf-green); font-size: 16px; letter-spacing: 0.02em; }
.hf-nav { display: flex; gap: var(--space-5); }
.hf-nav a { font-family: var(--font-body); font-size: 14px; color: var(--haf-grey-900); text-decoration: none; padding: 8px 0; }
.hf-nav a:hover { color: var(--haf-orange); }
.hf-nav a.active { color: var(--haf-green); font-weight: 600; }

/* Footer */
.hf-footer { background: var(--haf-green); color: rgba(255,255,255,0.85); padding: var(--space-7) 0 var(--space-5); }
.hf-footer h4 { color: #fff; font-size: 14px; letter-spacing: 0.06em; margin: 0 0 var(--space-3); }
.hf-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
.hf-footer a:hover { color: var(--haf-orange); }
.hf-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
.hf-footer__bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: var(--space-6); padding-top: var(--space-4); display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.55); }

/* Spec list (used on insulation product pages) */
.hf-spec { display: grid; grid-template-columns: 1fr auto; padding: 12px 0; border-bottom: 1px solid var(--haf-grey-300); font-family: var(--font-body); font-size: 14px; }
.hf-spec__label { color: var(--haf-grey-700); }
.hf-spec__value { font-family: var(--font-mono); color: var(--haf-grey-900); font-weight: 500; }

/* Article (blog) */
.hf-article { max-width: 760px; margin: 0 auto; }
.hf-article p { font-size: 17px; line-height: 1.75; color: var(--haf-grey-900); }
.hf-article h2 { margin-top: var(--space-7); }
.hf-article h3 { margin-top: var(--space-6); }
.hf-article blockquote { border-left: 3px solid var(--haf-orange); padding: 4px 0 4px 20px; margin: var(--space-5) 0; font-family: var(--font-display); font-size: 22px; line-height: 1.3; text-transform: uppercase; color: var(--haf-green); }

/* Quote block */
.hf-quote-block { background: var(--haf-green); color: #fff; padding: var(--space-7) var(--space-6); border-bottom: 3px solid var(--haf-orange); }
.hf-quote-block__text { font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1.05; text-transform: uppercase; max-width: 800px; margin: 0 0 var(--space-4); }
.hf-quote-block__who { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.7); }
.hf-quote-block__who strong { color: #fff; font-weight: 500; }

/* ===== components/buttons.css ===== */
/* hf-btn — doplňky k tlačítkovému systému v ui_kits/_shared/components.css.
   KONVERZNÍ LOGIKA (audit §1.2/7):
   - hf-btn--accent (oranžová) = JEDINÉ konverzní CTA, max 1× na obrazovku
   - hf-btn--primary (zelená)  = navigační / sekundární akce
   - hf-btn--whatsapp / --phone = přímé kontaktní kanály */

.hf-btn--whatsapp {
  background: var(--haf-whatsapp);
  color: #fff;
}
.hf-btn--whatsapp:hover { background: #1EBE5A; }
.hf-btn--whatsapp .hf-btn__icon { width: 18px; height: 18px; flex: none; }

.hf-btn--phone {
  background: transparent;
  color: var(--haf-green);
  border: 1px solid var(--haf-green);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hf-btn--phone:hover { background: var(--haf-green-100); }
.hf-btn--phone.hf-btn--solid { background: var(--haf-green); color: #fff; border: none; }
.hf-btn--phone.hf-btn--solid:hover { background: var(--haf-green-700); }

/* ===== components/crossroad.css ===== */
/* hf-crossroad — rozcestník mezi weby. Sekce č. 2 homepage.
   2 velké karty odkazující na produktové weby. */

.hf-crossroad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 720px) { .hf-crossroad { grid-template-columns: 1fr; } }

.hf-crossroad__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  color: var(--fg);
  transition: border-color var(--dur-base) var(--easing), box-shadow var(--dur-base) var(--easing);
}
.hf-crossroad__card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  color: var(--fg);
}

.hf-crossroad__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: var(--lh-snug);
  color: var(--fg-brand);
  margin: 0;
}
.hf-crossroad__body { font-size: var(--fs-body); line-height: var(--lh-loose); margin: 0; flex: 1; }
.hf-crossroad__link {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--haf-orange);
  text-decoration: none;
}
.hf-crossroad__card:hover .hf-crossroad__link { text-decoration: underline; text-underline-offset: 3px; }

/* ===== components/process.css ===== */
/* hf-process — 3 očíslované kroky spolupráce */

.hf-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: hf-step;
}
@media (max-width: 720px) { .hf-process { grid-template-columns: 1fr; gap: var(--space-5); } }

.hf-process__step { counter-increment: hf-step; }
.hf-process__step::before {
  content: counter(hf-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--haf-green);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: var(--space-4);
}
.hf-process__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-brand);
  margin: 0 0 var(--space-2);
}
.hf-process__body { font-size: var(--fs-small); line-height: var(--lh-loose); margin: 0; color: var(--fg); }

/* ===== components/faq.css ===== */
/* hf-faq — accordion přes <details>/<summary>. Bez JS. */

.hf-faq { border-top: 1px solid var(--border); }
.hf-faq details { border-bottom: 1px solid var(--border); }
.hf-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--fg-brand);
}
.hf-faq summary::-webkit-details-marker { display: none; }
.hf-faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--haf-orange);
  border-bottom: 2px solid var(--haf-orange);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--easing);
  margin-right: 4px;
}
.hf-faq details[open] summary::after { transform: rotate(225deg); }
.hf-faq__answer { padding: 0 0 var(--space-4); max-width: 720px; }
.hf-faq__answer p { margin: 0 0 var(--space-3); font-size: var(--fs-body); line-height: var(--lh-loose); }
.hf-faq__answer p:last-child { margin-bottom: 0; }

/* ===== components/trust.css ===== */
/* hf-trust — důvěryhodnostní blok: statement + řádek badge certifikací */

.hf-trust__statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--fg-brand);
  margin: 0 0 var(--space-3);
}
.hf-trust__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hf-trust__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--fg);
}
.hf-trust__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--haf-green);
  flex: none;
}

/* ===== components/photo.css ===== */
/* hf-photo — fotky realizací.
   hf-photo--annotated = SIGNATURE PRVEK: reálná fotka + popisky ve stylu
   kóty z technického výkresu (oranžová linka, štítek v JetBrains Mono).
   Pozice bodů v %, štítky editovatelné přímo v HTML. */

.hf-photo,
.hf-photo--annotated {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
}
.hf-photo img,
.hf-photo--annotated img { width: 100%; height: auto; display: block; }

.hf-anno {
  position: absolute;
  display: flex;
  align-items: center;
  line-height: 1.3;
}
.hf-anno__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--haf-orange);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--haf-orange);
  flex: none;
}
.hf-anno__line { height: 2px; background: var(--haf-orange); flex: none; }
.hf-anno__label {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.3vw, 13px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--haf-grey-900);
  background: rgba(255,255,255,0.94);
  padding: 5px 9px;
  border-left: 3px solid var(--haf-orange);
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.hf-anno__label small {
  display: block;
  font-weight: 400;
  font-size: 0.82em;
  color: #5a5a5a;
  letter-spacing: 0;
}
/* varianta: štítek vlevo od bodu — pozicovat přes right */
.hf-anno--left { flex-direction: row-reverse; }

.hf-photo__caption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  padding: var(--space-2) 2px;
  line-height: 1.5;
}

/* hf-gallery — grid fotek realizace s mono popisky */
.hf-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 720px) { .hf-gallery { grid-template-columns: 1fr; } }
.hf-gallery figure { margin: 0; }
.hf-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}
.hf-gallery figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  padding: var(--space-2) 2px;
}

/* ===== components/cards.css ===== */
/* hf-card--reference — reference s fotkou, citací, jménem a lokalitou.
   hf-card--case — případová studie (rozšíření hf-card). */

.hf-card--reference {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.hf-card--reference .hf-reference__photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
.hf-reference__quote {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-2);
}
.hf-reference__who {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}
.hf-reference__who strong { color: var(--fg); font-weight: 700; }

.hf-card--case .hf-case__facts {
  display: grid;
  gap: 0;
  margin-top: var(--space-3);
  border-top: 1px solid var(--border);
}



  /* drobné layoutové doplňky jen pro tuto stránku */
  .hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-8); align-items: center; }
  .about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-8); align-items: center; }
  .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .audience { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); max-width: 720px; }
  .audience li { padding-left: 22px; position: relative; line-height: var(--lh-loose); }
  .audience li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 2px; background: var(--haf-orange); }
  @media (max-width: 860px) {
    .hero-grid, .about-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  }

/* ============================================================
   MOTION VRSTVA — scroll reveal + sticky mobilní CTA
   ============================================================ */
/* Progressive enhancement: bez JS je vše viditelné (html nemá .js) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--easing), transform .55s var(--easing); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--easing), transform .5s var(--easing); }
.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }
.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* Sticky CTA lišta — jen mobil */
.hf-callbar { display: none; }
@media (max-width: 720px) {
  .hf-callbar {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(0,42,31,.96); backdrop-filter: blur(6px);
    border-top: 2px solid var(--haf-orange);
  }
  .hf-callbar a { flex: 1; text-align: center; }
  body { padding-bottom: 68px; }
}

/* ============================================================
   V4 — „OKÓTOVANÝ VÝKRES"
   Podpisový prvek: kóta (bod—linka—mono štítek) jako strukturní
   motiv celé stránky, ne jen fotek. Nové třídy hf4-* (bez kolizí).
   ============================================================ */

/* --- Kóta jako uvozovka sekce --- */
.hf4-kicker { display:flex; align-items:center; gap:0; margin-bottom: var(--space-3); }
.hf4-kicker::before { content:""; width:11px; height:11px; border-radius:50%; background:var(--haf-orange); box-shadow:0 0 0 2px var(--haf-white),0 0 0 4px var(--haf-orange); flex:none; }
.hf4-kicker::after { content:""; order:-0; }
.hf4-kicker .hf4-kicker__line { width:56px; height:2px; background:var(--haf-orange); flex:none; }
.hf4-kicker .hf4-kicker__label { font-family:var(--font-mono); font-size:var(--fs-caption); font-weight:700; letter-spacing:.14em; color:var(--haf-grey-900); background:var(--haf-white); border-left:3px solid var(--haf-orange); padding:5px 10px; box-shadow:var(--shadow-2); }
.hf4-on-dark .hf4-kicker__label { background:var(--haf-green-900); color:var(--haf-white); box-shadow:none; }

/* --- Hero: split výkres --- */
.hf4-hero { display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); min-height: min(86vh,760px); background:var(--haf-green); color:var(--haf-white);
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px; }
@media (max-width:880px){ .hf4-hero { grid-template-columns:1fr; min-height:0; } }
.hf4-hero__panel { display:flex; flex-direction:column; justify-content:center; padding: clamp(48px,8vw,96px) clamp(20px,5vw,72px); }
.hf4-hero__panel h1 { color:var(--haf-white); font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:.98; margin:0 0 var(--space-5); text-transform:uppercase; }
.hf4-hero__panel h1 .hf4-accent { color:var(--haf-orange); display:block; }
.hf4-hero__sub { font-size:var(--fs-lead); color:rgba(255,255,255,.9); max-width:52ch; margin-bottom:var(--space-6); }
.hf4-hero__ctas { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.hf4-btn-ghost { border:2px solid rgba(255,255,255,.85); color:#fff !important; border-radius:var(--radius-md); padding:12px 22px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; transition:background var(--dur-base) var(--easing); }
.hf4-btn-ghost:hover { background:rgba(255,255,255,.12); }
.hf4-hero__media { position:relative; min-height:340px; background-size:cover; background-position:center 40%; }
.hf4-hero__media::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,42,31,.45), rgba(0,42,31,0) 40%); }
@media (max-width:880px){ .hf4-hero__media::before { background:linear-gradient(180deg, rgba(0,42,31,.5), rgba(0,42,31,0) 45%); } }

/* --- Spec bar v2: velká čísla, svislé linky, oranžový horní lem --- */
.hf4-specbar { background:var(--haf-green-900); border-top:3px solid var(--haf-orange); }
.hf4-specbar__grid { display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:820px){ .hf4-specbar__grid { grid-template-columns:repeat(2,1fr); } }
.hf4-specbar__item { padding:var(--space-6) var(--space-5); border-left:1px solid rgba(255,255,255,.12); }
.hf4-specbar__item:first-child { border-left:none; }
@media (max-width:820px){ .hf4-specbar__item:nth-child(3){ border-left:none; } .hf4-specbar__item { border-top:1px solid rgba(255,255,255,.12);} .hf4-specbar__item:nth-child(-n+2){border-top:none} }
.hf4-specbar__value { font-family:var(--font-mono); font-weight:700; font-size:clamp(1.5rem,3vw,2.3rem); color:var(--haf-orange); display:block; margin-bottom:4px; }
.hf4-specbar__label { font-size:var(--fs-small); color:rgba(255,255,255,.72); }

/* --- Rozcestník v2: fotka nahoře, plný panel dole (čitelnost) --- */
.hf4-xr { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
@media (max-width:760px){ .hf4-xr { grid-template-columns:1fr; } }
.hf4-xr__card { display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; box-shadow:var(--shadow-2); transition:transform var(--dur-base) var(--easing), box-shadow var(--dur-base) var(--easing); background:var(--haf-green-900); }
.hf4-xr__card:hover { transform:translateY(-4px); box-shadow:var(--shadow-3); }
.hf4-xr__media { height:230px; overflow:hidden; position:relative; }
.hf4-xr__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--easing); }
.hf4-xr__card:hover .hf4-xr__media img { transform:scale(1.05); }
.hf4-xr__media--grid { background:var(--haf-green); display:flex; align-items:center; justify-content:center;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:26px 26px; }
.hf4-xr__etapa { font-family:var(--font-mono); font-weight:700; font-size:clamp(1.5rem,2.8vw,2rem); color:var(--haf-orange); letter-spacing:.06em; }
.hf4-xr__panel { padding:var(--space-5) var(--space-6) var(--space-6); color:#fff; }
.hf4-xr__title { font-family:var(--font-display); font-weight:600; font-size:1.7rem; text-transform:uppercase; display:block; margin-bottom:6px; color:#fff; }
.hf4-xr__body { color:rgba(255,255,255,.85); display:block; margin-bottom:var(--space-4); }
.hf4-xr__link { font-family:var(--font-mono); font-size:var(--fs-small); color:#FFB380; }
.hf4-xr__card:hover .hf4-xr__link { color:var(--haf-orange); }

/* --- Pro koho: řádky s kótovacím bodem místo karet --- */
.hf4-who { border-top:2px solid var(--haf-green); }
.hf4-who__row { display:grid; grid-template-columns:minmax(180px,280px) 1fr; gap:var(--space-5); padding:var(--space-5) 0; border-bottom:1px solid var(--border); align-items:baseline; transition:background var(--dur-fast) var(--easing); }
@media (max-width:640px){ .hf4-who__row { grid-template-columns:1fr; gap:var(--space-2); } }
.hf4-who__row:hover { background:linear-gradient(90deg, var(--haf-orange-100), transparent 60%); }
.hf4-who__title { font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--fg-brand); text-transform:uppercase; display:flex; gap:10px; align-items:center; }
.hf4-who__title::before { content:""; width:9px; height:9px; background:var(--haf-orange); flex:none; }
.hf4-who__body { color:var(--fg); margin:0; }

/* --- Kroky: sekvence spojená kótovací linkou --- */
.hf4-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); position:relative; counter-reset:hf4; margin-top:var(--space-6); }
@media (max-width:760px){ .hf4-steps { grid-template-columns:1fr; } }
.hf4-steps::before { content:""; position:absolute; top:24px; left:8%; right:8%; border-top:2px dashed var(--haf-orange); opacity:.5; }
@media (max-width:760px){ .hf4-steps::before { display:none; } }
.hf4-step { counter-increment:hf4; position:relative; background:var(--surface); }
.hf4-step__num { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--haf-green); color:#fff; font-family:var(--font-mono); font-weight:700; border-radius:var(--radius-md); box-shadow:0 0 0 4px var(--surface); margin-bottom:var(--space-3); }
.hf4-step__num::before { content:counter(hf4); }
.hf4-step h3 { text-transform:uppercase; font-size:1.25rem; }

/* --- Důvěra: split, mono chipy --- */
.hf4-trust { display:grid; grid-template-columns:1.2fr 1fr; gap:var(--space-7); align-items:center; }
@media (max-width:760px){ .hf4-trust { grid-template-columns:1fr; } }
.hf4-trust__chips { display:flex; flex-direction:column; gap:var(--space-3); }
.hf4-chip { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:var(--fs-small); border:1px solid var(--border); background:var(--haf-white); padding:12px 14px; border-radius:var(--radius-md); }
.hf4-chip::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--haf-orange); flex:none; }

/* --- Reference karta: fotka + mono pás --- */
.hf4-ref { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--haf-white); transition:transform var(--dur-base) var(--easing), box-shadow var(--dur-base) var(--easing); }
.hf4-ref:hover { transform:translateY(-3px); box-shadow:var(--shadow-3); }
.hf4-ref img { width:100%; height:230px; object-fit:cover; display:block; }
.hf4-ref__strip { font-family:var(--font-mono); font-size:var(--fs-caption); letter-spacing:.06em; background:var(--haf-green-900); color:#FFB380; padding:8px 14px; }
.hf4-ref__body { padding:var(--space-4) var(--space-5); color:var(--fg); }

/* --- Sekční rytmus a opravy paddingů (bug v3) --- */
.hf-section { padding:var(--space-9) 0; }
.hf-photo__caption { line-height:1.6; margin:var(--space-2) auto var(--space-6); display:block; }
.hf-photo--annotated + .hf-photo__caption { margin-top:var(--space-2); }
.hf4-sand { background:var(--haf-sand); }

/* ============================================================
   V6.1 — cílené korekce (schéma v rozcestníku, řádky Pro koho,
   spojnice kroků, mobilní header/hero)
   ============================================================ */

/* 1) Schéma v kartě „Nevím, kde začít" */
.hf4-xr__media--grid { flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.hf4-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hf4-flow__node { font-family: var(--font-mono); font-size: clamp(10px, 1.2vw, 12px); font-weight: 700; letter-spacing: .08em; color: var(--haf-white); border: 1px solid rgba(255,255,255,.55); padding: 7px 11px; border-radius: var(--radius-sm); background: rgba(0,42,31,.35); white-space: nowrap; }
.hf4-flow__arrow { color: var(--haf-orange); font-family: var(--font-mono); font-weight: 700; }

/* 2) „Poznáváte se?" — řádky jako kótované karty */
.hf4-who { border-top: none; }
.hf4-who__row { background: var(--haf-white); border: 1px solid var(--border); border-left: 3px solid var(--haf-orange); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); align-items: start; }
.hf4-who__row:hover { background: var(--haf-white); box-shadow: var(--shadow-2); border-left-width: 6px; padding-left: calc(var(--space-5) - 3px); }
.hf4-who__title { font-size: 1.2rem; }
.hf4-who__title::before { display: none; }
.hf4-who__body { color: var(--fg-muted); }
@media (max-width: 640px) {
  .hf4-who__row { padding: var(--space-4); }
  .hf4-who__title { font-size: 1.1rem; }
  .hf4-who__body { font-size: var(--fs-small); }
}

/* 3) Kroky — čistá plná spojnice mezi čísly (segmenty, ne čára přes karty) */
.hf4-steps::before { display: none; }
.hf4-step__num { position: relative; z-index: 1; }
.hf4-step { position: relative; }
.hf4-step::after { content: ""; position: absolute; top: 23px; left: 56px; right: calc(-1 * var(--space-6)); height: 2px; background: var(--haf-orange); }
.hf4-step:last-child::after { display: none; }
@media (max-width: 760px) { .hf4-step::after { display: none; } }

/* 4) Mobil: header s viditelným telefonem, hero bez tlačenice */
@media (max-width: 760px) {
  .hf-header__inner { flex-wrap: wrap; row-gap: 4px; padding: 10px 0; }
  .hf-header__phone { order: 2; padding: 9px 14px; font-size: 14px; }
  .hf-brand { order: 1; }
  .hf-nav { order: 3; width: 100%; gap: var(--space-4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hf-nav a { font-size: 13px; white-space: nowrap; }
}
@media (max-width: 880px) {
  .hf4-hero__panel { padding: 44px 20px 48px; }
  .hf4-hero__panel h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .hf4-hero__sub { font-size: 1.05rem; margin-bottom: var(--space-5); }
  .hf4-hero__media { min-height: 300px; }
}