/* Marek Lopatník — CSS.
   1:1 statická rekonstrukce originálu (Webflow), zdůvodnění jednotlivých
   rozhodnutí je v DECISIONS.md. Etapa 1: reset, tokeny, navbar, footer
   (kostra) — obsah sekcí (Hero/Služby/Reference/Projekty) přibude
   postupně v Etapě 2. */

/* --- Self-hostovaný font (Albert Sans) ---
   Licence: SIL Open Font License 1.1, viz assets/fonts/OFL-AlbertSans.txt.
   Originál (WebFont.load) načítal navíc "Familjen Grotesk" a "Encode Sans"
   z Google Fonts, ale ani jeden se ve skutečnosti nikde nepoužívá —
   "Familjen Grotesk" není v CSS originálu na žádném selektoru a
   "Encode Sans" je jen na `.color_code`/`.color_name`, což jsou třídy
   Webflow style-guide stránky, která se na webu nikde nerenderuje (viz
   DECISIONS.md). Self-hostujeme proto jen Albert Sans — jediný font,
   který je na webu opravdu vidět.
   Variabilní font (osa wght 400–600, + italic) — Google servíruje stejný
   soubor pro všechny statické váhy dané osy, takže stačí 2 soubory na styl
   (latin + latin-ext kvůli české/slovenské diakritice), tedy 4 celkem
   (normal + italic). Material Icons z originálu nereplikujeme vůbec —
   jediné dva glyfy, které používal (hamburger/cross v navbaru), jsou tady
   řešené jako inline SVG přímo v HTML. */

@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-sans-italic-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-sans-italic-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokeny ---
   Hodnoty ověřené živě přes getComputedStyle na originálu (reference/),
   ne jen odhadem z CSS textu. */
:root {
  --font-main: "Albert Sans", sans-serif;

  /* Neutrální škála (nejsvětlejší → nejtmavší, dle originálu) */
  --color-text: #f4f4f4;
  --color-bg: #000;
  --color-bg-raised: #141414;
  --color-bg-raised-2: #1c1c18;

  /* Akcentové barvy */
  --color-green: #9ef8b9;
  --color-primary: #00ffa1;
  --color-red: #ff6161;
  --color-violet: #b433ff;
  --color-yellow: #dbcf75;
  --color-mint-light: #e6fff6;
  --color-dark-text: #0c0c0c;
  --color-text-muted: #8a8b87;

  --container-max-width: 1760px;
  --container-padding: 20px;

  --radius-button: 10px;
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* min-height:100vh + flex tlačí patičku dolů na krátkých stránkách
   (404, kde `main` obsah nevyplní celou výšku okna) — bez tohohle
   patička "plavala" uprostřed obrazovky na vyšších monitorech.
   `.navbar` je `position:fixed`, takže se flexboxu netýká. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

body > main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Živě ověřeno na originále na všech breakpointech (Hero/O mně/Služby/
   Projekty/Kontakt/footer — všechny používají tuhle stejnou `.container`
   třídu): boční padding je responsive, standardní Webflow tiery:
   ≥1440px 48px, 768–1439px 32px (výchozí hodnota níž), 480–767px 16px,
   ≤479px 0px. Dřív jsem to omylem opravila jen lokálně pro
   `.contact_grid`/`.footer_bottom_content` na 1440px — ve skutečnosti
   je to vlastnost samotné `.container` třídy přes všechny šířky, proto
   to u Hero tlačítek (taky uvnitř `.container`) pořád sedělo špatně.
   `.navbar .container` má vlastní odsazení (20px, viz výše) a tímhle
   pravidlem není dotčený. `.container-medium` (Reference sekce) je
   samostatná třída se svým vlastním, už dřív ověřeným chováním. */
@media screen and (min-width: 1440px) {
  .container {
    padding-left: 48px;
    padding-right: 48px;
  }
}

@media screen and (max-width: 767px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media screen and (max-width: 479px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Navbar používá užší boční odsazení než obsahové sekce (ověřeno živě
   na originále: 20px v navbaru, 32px/2rem v obsahu). */
.navbar .container {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Navbar --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 24px 0;
  background-color: transparent;
}

.navbar_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0;
}

.nav_logo {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Skutečná "pilulka" kolem odkazů (ověřeno živě na originále: `<nav>`
   má vlastní border/bg/radius, oddělené od `.navbar_wrapper`). Na mobilu
   se stejný prvek mění na plnou rozbalovací nabídku (viz media query). */
.nav_menu_wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 55%;
  border: 1px solid var(--color-text);
  background-color: var(--color-bg-raised-2);
  border-radius: 10px;
  padding: 31px 60px;
}

/* Scroll efekt na desktopu (≥992px): originál nechává navbar samotný
   vždy průhledný, ale "pilulka" kolem odkazů se při scrollu roztáhne
   z content-fit šířky na 100 % šířky navbaru a logo se posune doprava,
   aby sedělo uvnitř nově viditelné černé plochy (ověřeno živě přes
   getBoundingClientRect/computed style na originále — scroll-linked
   přechod dokončený už během ~0-45px scrollu, tj. v praxi skoro okamžitý
   snap; proto tady jednoduchý threshold + krátký CSS transition místo
   1:1 kopírování Webflow scroll-progress interakce). */
@media screen and (min-width: 992px) {
  .navbar_wrapper {
    position: relative;
  }

  .nav_logo {
    position: relative;
    z-index: 2;
    transition: transform 0.25s ease;
  }

  .nav_menu_wrapper {
    position: absolute;
    top: 50%;
    right: var(--container-padding);
    transform: translateY(-50%);
    z-index: 1;
    width: max-content;
    max-width: none;
    transition: width 0.25s ease;
  }

  .navbar[data-scrolled="true"] .nav_logo {
    transform: translateX(40px);
  }

  .navbar[data-scrolled="true"] .nav_menu_wrapper {
    width: calc(100% - 2 * var(--container-padding));
  }
}

.nav_menu {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--color-bg-raised-2);
}

.nav_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav_link:hover {
  color: var(--color-green);
}

.nav_link[aria-current="page"] {
  color: var(--color-primary);
}

/* Jazykový dropdown */
.nav_lang {
  position: relative;
}

.nav_lang_toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-text);
  font: inherit;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
}

.nav_lang_list {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  padding: 8px 0;
  min-width: 100px;
  list-style: none;
  background-color: var(--color-bg-raised-2);
  border-radius: 8px;
}

.nav_lang[data-open="false"] .nav_lang_list {
  display: none;
}

.nav_lang_list a {
  display: block;
  padding: 6px 16px;
  color: #e6e6e6;
  text-transform: uppercase;
  font-size: 14px;
}

.nav_lang_list a:hover,
.nav_lang_list a[aria-current="page"] {
  color: var(--color-primary);
}

/* Hamburger (mobil/tablet) */
.nav_toggle {
  display: none;
  background: none;
  border: 0;
  padding: 4px;
  color: var(--color-text);
  cursor: pointer;
}

.nav_toggle svg {
  width: 24px;
  height: 24px;
}

.nav_toggle .icon-close {
  display: none;
}

.navbar[data-menu-open="true"] .nav_toggle .icon-open {
  display: none;
}

.navbar[data-menu-open="true"] .nav_toggle .icon-close {
  display: block;
}

@media screen and (max-width: 991px) {
  .navbar {
    padding: 10px 0;
    background-color: var(--color-bg-raised-2);
    border-bottom: 1px solid #4a4b45;
  }

  .nav_toggle {
    display: block;
  }

  .nav_menu_wrapper {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border-style: none;
    border-radius: 0;
    padding: 60px 0;
  }

  .navbar[data-menu-open="true"] .nav_menu_wrapper {
    display: flex;
  }

  .nav_menu {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    width: 100%;
  }
}


/* --- Tlačítka ---
   Sdílené mezi Hero (Etapa 2) a dalšími sekcemi. Kruhový hover efekt
   (`.button_hover_color`) je v originále řízený Webflow IX2 JS; tady
   čistě CSS `:hover` transition — stejný vizuální výsledek, bez JS. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 10px;
  padding: 16px 30px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.button_text {
  color: var(--color-dark-text);
  font-size: 18px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.button_icon_wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 24px;
  position: relative;
  z-index: 1;
}

/* Šipka na hoveru rotuje -45° na OBOU tlačítkách (živě ověřeno na
   originále přes dispatchEvent + vzorkování computed style v čase —
   ne odhad). Primary: scale(1.1), rychlejší přechod (~0.35s). */
.button_arrow_svg {
  width: 21px;
  height: 26px;
  color: #0c0c0c;
  transition: transform 0.35s ease;
}

.button:hover .button_arrow_svg {
  transform: rotate(-45deg) scale(1.1);
}

/* Kruh na hoveru existuje jen u sekundárního tlačítka (originál nemá
   `.button_hover_color` element vůbec v DOM primary tlačítka — ověřeno
   živě, `querySelector` nic nenajde). Finální stav je scale(10), ne
   scale(3) — při scale(3) kruh nikdy nepokryje celé tlačítko, proto to
   předtím furt vypadalo rozbitě i po opravě z-indexu. Přechod trvá
   dlouho, cca 1.8–2s (živě naměřeno: při 1.6s ještě neustálený,
   postupné zpomalování typické pro "ease"). */
.button_hover_color {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: var(--color-mint-light);
  transform: translate(-50%, 100%) scale(0);
  transition: transform 1.8s ease;
}

.button:hover .button_hover_color {
  transform: translate(-50%, 0) scale(10);
}

/* Primary (Calendly CTA): mint pozadí, tmavý text */
.button--primary {
  background-color: var(--color-green);
}

/* Secondary (např. „Služby"): tmavé pozadí, mint rámeček, světlý text */
.button--secondary {
  background-color: var(--color-bg-raised);
  border: 1px solid var(--color-mint-light);
  gap: 10px;
}

.button--secondary .button_text {
  color: var(--color-mint-light);
  font-weight: 500;
}

.button--secondary .button_arrow_svg {
  color: var(--color-mint-light);
  width: 20px;
}

.button--secondary .button_hover_color {
  background-color: var(--color-mint-light);
}

/* Živě ověřeno na originále (dlouhé, čisté vzorkování computed style,
   3s po hoveru — kratší čekání dřív zachytilo jen mezistav přechodu,
   ne finální barvu): text i ikona sekundárního tlačítka na hoveru
   ztmavnou na #0c0c0c (stejná tmavá jako primary), ne na #515956, jak
   jsem si dřív myslela. Bez tohohle by byl světlý text na světlém
   rozjetém kruhu neviditelný — přesně tenhle bug byl vidět na
   screenshotech od Petry. Transition stejná délka jako kruh/šipka. */
.button--secondary:hover .button_text,
.button--secondary:hover .button_arrow_svg {
  color: #0c0c0c;
}

.button--secondary .button_text,
.button--secondary .button_arrow_svg {
  transition: color 1.8s ease;
}

.button--secondary:hover .button_arrow_svg {
  transform: rotate(-45deg) scale(1.2);
}

/* --- Hero --- */
.hero_section {
  background-color: var(--color-bg);
  position: relative;
  overflow: hidden;
  margin-bottom: 60px;
  padding-top: 175px;
}

.hero_grid {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.hero_contents {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
  padding-left: 70px;
}

.hero_heading_wrapper {
  display: flex;
  flex-flow: column;
  gap: 40px;
}

/* Živě ověřeno na originále na více breakpointech (na rozdíl od
   sdíleného `.heading_medium` v O mně): Hero podnadpis má max-width
   jako % svého wrapperu, ale ne konstantní — 1024px a níž bez omezení
   (100 %), 1280px 85 %, 1440px+ 80 % (ověřeno i na 1920px, stejný
   poměr). Bez tohohle se text láme na míň řádků a tlačítka pod ním
   sedí výš, než mají. */
@media screen and (min-width: 1280px) {
  .hero_heading_wrapper .heading_medium {
    max-width: 85%;
  }
}

@media screen and (min-width: 1440px) {
  .hero_heading_wrapper .heading_medium {
    max-width: 80%;
  }
}

.hero_heading {
  color: var(--color-text);
  margin: 0;
  font-size: 85px;
  line-height: 90%;
  font-weight: 700;
}

.hero_heading span {
  background-color: var(--color-green);
  color: var(--color-green);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

/* Sdílená typografická třída pro Hero podnadpis i odstavce O mně —
   v originále je to doslova tatáž třída na obou místech (ověřeno
   v reference/), takže i tady sdílíme jedno pravidlo místo dvou
   rozjetých kopií. */
.heading_medium {
  color: var(--color-text);
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 125%;
}

@media screen and (min-width: 1440px) {
  .heading_medium { font-size: 28px; }
}

@media screen and (max-width: 767px) {
  .heading_medium { font-size: 24px; text-align: center; }
}

@media screen and (max-width: 479px) {
  .heading_medium { font-size: 20px; }
}

.hero_buttons {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  gap: 20px;
}

.hero_image_block {
  z-index: 2;
  width: 100%;
  max-width: 500px;
  position: relative;
}

.hero_image_wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero_image {
  width: 100%;
  object-fit: cover;
}

.hero_contact_card {
  display: flex;
  align-items: center;
  position: relative;
  bottom: 35px;
  border: 1px solid var(--color-text);
  background-color: var(--color-bg-raised-2);
  border-radius: 10px;
  padding: 45px 30px 45px 0;
}

.hero_contact_label {
  color: var(--color-green);
  font-size: 26px;
  font-weight: 500;
  line-height: 34px;
  margin-top: -8px;
  transform: rotate(-90deg);
  white-space: nowrap;
}

.hero_contact_list {
  list-style: none;
  margin: 0;
  padding-left: 30px;
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.hero_contact_list li {
  color: var(--color-text);
  font-size: 20px;
  line-height: 26px;
}

.shade {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.shade--hero {
  top: 0;
  left: 0;
  z-index: 0;
}

.shade--about {
  top: -245px;
  right: 0;
  max-width: 300px;
}

/* Vstupní animace Hero (na load, ne na scroll — Hero je vždy hned
   viditelný). Čisté CSS, bez JS. */
@media (prefers-reduced-motion: no-preference) {
  .hero_heading_wrapper {
    animation: hero-slide-in-left 0.8s ease-out both;
  }

  .hero_buttons {
    animation: hero-slide-in-left 0.8s ease-out 0.15s both;
  }

  .hero_image {
    animation: hero-slide-in-up 0.8s ease-out 0.1s both;
  }

  .hero_contact_card {
    animation: hero-slide-in-right 0.8s ease-out 0.25s both;
  }
}

/* Amplituda odpovídá originálu (ověřeno v pre-JS zdrojovém HTML:
   translate3d(-120%/120%, 0, 0) atd.) — původní -8%/8% tady bylo skoro
   neznatelné, proto web působil staticky. */
@keyframes hero-slide-in-left {
  from { transform: translateX(-120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes hero-slide-in-right {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes hero-slide-in-up {
  from { transform: translateY(120%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media screen and (min-width: 1280px) {
  .hero_contents { gap: 80px; padding-left: 40px; align-items: flex-start; }
  .hero_heading { font-size: 100px; }
  .hero_buttons { flex-flow: row; flex-wrap: wrap; gap: 40px; }
  .hero_image_block { max-width: 520px; margin-top: 40px; }
  .hero_contact_card { bottom: 105px; }
  .hero_image_wrapper { max-height: 600px; position: relative; bottom: 102px; }
}

@media screen and (min-width: 1440px) {
  .hero_grid { gap: 50px; }
  .hero_contents { gap: 120px; }
  .hero_heading { font-size: 120px; }
  .hero_image_block { max-width: 533px; }
  .hero_contact_list li { font-weight: 500; }
  .hero_image_wrapper { max-height: none; }
}

@media screen and (min-width: 1920px) {
  .hero_section { margin-bottom: 100px; }
  .hero_grid { overflow: visible; }
  .hero_contents { max-width: 1187px; }
  .hero_heading { font-size: 150px; }
  .hero_image_block { max-width: 533px; margin-top: 53px; }
  .hero_contact_label { margin-bottom: 0; }
}

@media screen and (max-width: 991px) {
  .hero_section { margin-bottom: 80px; padding-top: 140px; }
  .hero_grid { flex-flow: column; justify-content: flex-start; align-items: center; gap: 40px; }
  .hero_contents { justify-content: flex-start; align-self: center; align-items: center; max-width: 800px; padding-left: 0; gap: 60px; text-align: center; }
  .hero_heading_wrapper { max-width: 700px; }
  .hero_heading { font-size: 70px; }
  .hero_buttons { flex-flow: row; flex-wrap: wrap; }
  .hero_image_block { max-width: 500px; }
}

@media screen and (max-width: 767px) {
  .hero_contents { gap: 40px; align-self: stretch; align-items: center; padding-left: 0; }
  .hero_heading_wrapper { max-width: 456px; }
  .hero_heading { font-size: 60px; }
  .hero_buttons { flex-flow: column; align-items: stretch; gap: 20px; }
  .hero_image_block { display: flex; flex-flow: column; justify-content: flex-start; align-items: center; max-width: none; }
  .hero_image_wrapper { max-width: 370px; }
}

@media screen and (max-width: 479px) {
  .navbar { padding-top: 5px; padding-bottom: 5px; }
  .nav_menu_wrapper { padding-top: 40px; padding-bottom: 40px; }
  .nav_menu { gap: 20px; }
  .hero_section { margin-bottom: 80px; padding-top: 112px; }
  .hero_contents { gap: 30px; align-self: center; max-width: 300px; }
  .hero_heading { font-size: 50px; }
  .hero_buttons { gap: 20px; align-items: stretch; }
  .hero_contact_card { flex-flow: column; align-items: flex-start; gap: 10px; padding: 20px; }
  .hero_contact_label { margin-top: 0; padding-left: 10px; font-size: 20px; line-height: 30px; transform: none; }
  .hero_contact_list { gap: 5px; }
  .hero_contact_list li { font-size: 16px; line-height: 26px; }
  .button { padding: 14px 24px; }
  .button_text { font-size: 16px; line-height: 22px; }
  .button_arrow_svg { width: 18px; height: 18px; }
}

/* --- O mně --- */
.about_section {
  position: relative;
  overflow: visible;
  padding: 100px 0 20px;
}

.about_grid {
  display: flex;
  gap: 80px;
}

/* Originál má bio text jako jeden <div class="heading_medium"> s
   ručními <br><br> mezi odstavci; tady je to sémantičtější tři <p> se
   stejnou třídou (viz .heading_medium výše) a mezerou odpovídající
   jednomu prázdnému řádku (gap = line-height). */
.about_text {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  align-self: center;
  width: 100%;
  max-width: 600px;
}

.about_image_wrapper {
  z-index: 1;
  border-radius: 20px;
  width: 100%;
  max-width: 552px;
  position: relative;
  overflow: hidden;
}

.about_image {
  width: 100%;
  display: block;
  border-radius: 20px;
}

.about_image_overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  pointer-events: none;
}

/* Obrázek u O mně je v originále statický — živě ověřeno (žádný
   data-w-id/inline style na `.about_me_image_wrapper` v pre-JS zdroji,
   `overflow:visible`/`clip-path:none` i po scrollu do viewportu). Dřívější
   "wipe cover" reveal byla domněnka bez opory v originále — odstraněno. */

/* Originál: `.about_me_text_wrapper` má translate3d(-100%,...), tj. jiná
   magnituda než Hero (-120%) — vlastní keyframe místo sdílení s Hero. */
@media (prefers-reduced-motion: no-preference) {
  .about_text.is-revealed {
    animation: about-slide-in-left 0.7s ease-out both;
  }
}

@keyframes about-slide-in-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* --- Obecný scroll-reveal systém ---
   Použito na sekce, které v originále mají vlastní vstupní animaci
   (ověřeno v pre-JS zdrojovém HTML — `.about_text`/`.about_image_wrapper`
   výše jsou stejný princip, jen dřívější/bespoke). JS (main.js) jen
   přidá `.is-revealed`, jakmile prvek vjede do viewportu — typ efektu
   určuje `data-reveal` hodnota v HTML, žádná JS logika navíc.
   Respektuje `prefers-reduced-motion` stejně jako Hero. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal="fade"] {
    opacity: 0;
    transition: opacity 0.7s ease;
  }
  [data-reveal="fade"].is-revealed {
    opacity: 1;
  }

  [data-reveal="fade-up"] {
    opacity: 0;
    transform: translateY(30%);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  [data-reveal="fade-up"].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Originál: scale3d(0, 0, 1) — obě osy najednou, ne jen svislá. */
  [data-reveal="scale"] {
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.7s ease;
  }
  [data-reveal="scale"].is-revealed {
    transform: scale(1);
  }

  /* Originál: `.heading_wrapper.insights_-_resources` (Projekty intro) —
     translateX(100%), bez opacity změny (jen posun, ne fade). display:
     inline-block je nutné, jinak by blokový <h2> táhl translateX(100%)
     ze šířky celého kontejneru (mnohem víc než vlastní text), takže by
     se posunul úplně mimo viewport a IntersectionObserver by ho nikdy
     nezachytil jako "v pohledu" (ověřeno živě). */
  [data-reveal="slide-right"] {
    display: inline-block;
    transform: translateX(100%);
    transition: transform 0.7s ease;
  }
  [data-reveal="slide-right"].is-revealed {
    transform: translateX(0);
  }

  [data-reveal="slide-up"] {
    transform: translateY(30%);
    transition: transform 0.7s ease;
  }
  [data-reveal="slide-up"].is-revealed {
    transform: translateY(0);
  }

  [data-reveal="slide-up-full"] {
    transform: translateY(100%);
    transition: transform 0.7s ease;
  }
  [data-reveal="slide-up-full"].is-revealed {
    transform: translateY(0);
  }
}

@media screen and (min-width: 1280px) {
  .about_section { padding-top: 160px; padding-bottom: 160px; }
  .about_text { max-width: 662px; }
}

@media screen and (min-width: 1440px) {
  .about_section { padding-top: 140px; padding-bottom: 60px; }
  .about_text { max-width: 740px; }
}

@media screen and (min-width: 1920px) {
  .about_section { padding-top: 140px; padding-bottom: 140px; }
  .about_text { max-width: 890px; }
  .about_image_wrapper { flex: 1; max-width: 610px; }
}

@media screen and (max-width: 991px) {
  .about_section { padding-top: 100px; padding-bottom: 60px; }
  .about_grid { flex-flow: wrap; justify-content: center; gap: 100px; }
  .about_text { max-width: 100%; }
  .about_image_wrapper { max-width: none; max-height: 600px; }
}

@media screen and (max-width: 767px) {
  .about_section { padding-top: 80px; padding-bottom: 0; }
  .about_grid { flex-flow: column; align-items: stretch; gap: 40px; }
  .about_image_wrapper { align-self: center; max-height: 400px; }
}

@media screen and (max-width: 479px) {
  .about_section { padding: 80px 10px 0; }
  .about_image_wrapper { max-height: 300px; }
}

/* --- Služby ---
   Hodnoty ověřené živě (getComputedStyle) na originále na 1024px a
   375px šířce — viz DECISIONS.md. Karty jsou v originále CSS grid
   (2 sloupce desktop → 1 sloupec ≤991px); pořadí karet jsme živě
   ověřili na mobilu (`.flex-flow: row-reverse wrap-reverse` +
   `order:1` na první kartě z originálu) — čistý DOM pořadí (Sales
   outsourcing první, Account management druhá) beze změny na žádné
   šířce, takže žádný `order` trik nereplikujeme. */
.service_section {
  padding-top: 100px;
  margin-bottom: 100px;
  scroll-margin-top: 90px;
}

/* Sdílený nadpis sekcí (Služby zde, Reference/Projekty v dalších kolech). */
.section_heading {
  color: var(--color-green);
  text-transform: uppercase;
  margin: 0;
  font-size: 40px;
  line-height: 133%;
}

@media screen and (min-width: 1280px) {
  .section_heading { font-size: 50px; }
}

@media screen and (min-width: 1440px) {
  .section_heading { font-size: 55px; }
}

@media screen and (min-width: 1920px) {
  .section_heading { font-size: 60px; }
}

@media screen and (max-width: 991px) {
  .section_heading { font-size: 40px; line-height: 120%; }
}

@media screen and (max-width: 767px) {
  .section_heading { font-size: 36px; }
}

@media screen and (max-width: 479px) {
  .section_heading { font-size: 28px; line-height: 120%; }
}

.service_intro {
  display: flex;
  flex-flow: column;
  align-items: center;
  align-self: center;
  max-width: 562px;
  margin: 0 auto 60px;
}

.service_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.service_card {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 40px;
  border: 1px solid var(--color-text);
  background-color: var(--color-bg-raised);
  border-radius: 10px;
  padding: 40px 30px 40px 35px;
}

.service_card_heading {
  display: flex;
  flex-flow: column;
  gap: 20px;
  width: 100%;
}

.service_heading {
  color: var(--color-green);
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 125%;
}

.service_card > .service_text {
  margin: 0;
}

.service_text {
  color: var(--color-text);
  font-size: 17px;
  line-height: 26px;
}

.service_card .heading {
  color: var(--color-green);
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.service_items {
  display: flex;
  flex-flow: column;
  gap: 5px;
  width: 100%;
}

.service_item {
  display: flex;
  flex-flow: column;
  gap: 8px;
}

.service_item_head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 5px;
}

.service_icon {
  width: 45px;
}

.service_label {
  color: var(--color-green);
  font-size: 18px;
  font-weight: 400;
}

@media screen and (min-width: 1280px) {
  .service_section { padding-top: 140px; margin-bottom: 140px; }
  .service_grid { gap: 15px; }
  .service_card { padding: 50px 40px; }
  .service_heading { font-size: 30px; }
}

@media screen and (min-width: 1440px) {
  .service_section { padding-top: 60px; margin-bottom: 100px; }
  .service_grid { gap: 30px; }
  .service_heading { font-size: 35px; }
}

@media screen and (min-width: 1920px) {
  .service_text { font-size: 20px; }
  .service_heading { font-size: 40px; }
  .service_label { font-size: 23px; }
  .service_card .heading { font-size: 26px; }
}

@media screen and (max-width: 991px) {
  .service_section { margin-bottom: 100px; }
  .service_grid { grid-template-columns: 1fr; }
  .service_card { padding-top: 40px; padding-bottom: 40px; }
  .service_heading { font-size: 25px; }
}

@media screen and (max-width: 767px) {
  .service_section { margin-top: 60px; margin-bottom: 40px; padding-top: 20px; }
  .service_grid { gap: 20px; }
  .service_card { text-align: center; align-items: center; }
  .service_heading { text-align: center; }
  .service_item_head { flex-flow: column; align-self: center; gap: 10px; margin-left: auto; margin-right: auto; }
}

@media screen and (max-width: 479px) {
  .service_section { margin-top: 0; margin-bottom: 80px; }
  .service_card { padding: 27px 26px; text-align: center; }
  .service_heading { font-size: 22px; }
  .service_text { font-size: 18px; }
  .service_label { font-size: 18px; font-weight: 600; }
  .service_icon { width: 40px; }
}

/* --- Reference ---
   Originál používá Webflow `.w-slider` (drag/infinite/clone-based).
   Vlastní čistý ekvivalent: track s transform: translateX, žádný
   Webflow runtime. Karta v originále na desktopu bleedne mimo svůj
   grid sloupec (ověřeno živě — reálný Webflow layout bug, ne záměr),
   tady zůstává čistě uvnitř kontejneru — viz DECISIONS.md. */
.testimonial_section {
  padding: 80px 0;
  overflow: hidden;
  scroll-margin-top: 90px;
}

.container-medium {
  width: 100%;
  max-width: 73rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.testimonial_grid {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 40px;
  align-items: start;
}

.subtitle {
  color: var(--color-text);
  margin: 0 0 0.625rem;
  font-size: 18px;
  font-weight: 400;
}

.testimonial_intro .heading-style-h2 {
  color: var(--color-green);
  margin: 0 0 2rem;
  font-size: 2.5rem;
  font-weight: 600;
}

.testimonial_lead {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

/* min-width:0 je nutné: `.testimonial_carousel` je grid item v
   `.testimonial_grid` (30% 1fr) a bez toho se grid item nemůže zmenšit
   pod přirozenou šířku obsahu (default min-width:auto) — track uvnitř
   má 5 karet vedle sebe, takže bez téhle opravy celý sloupec vytlačí
   grid na šířku ~5x karty a viewport/track/card pak přetékají mimo
   viewport i přes overflow:hidden na `.testimonial_viewport` (ten totiž
   clipuje, ale sám je špatně velký). Ověřeno živě přes
   getBoundingClientRect na 1024px šířce. */
.testimonial_carousel {
  position: relative;
  min-width: 0;
}

.testimonial_viewport {
  overflow: hidden;
  border-radius: 1.5rem;
}

.testimonial_track {
  display: flex;
  transition: transform 0.5s ease;
}

.testimonial_card {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-flow: row;
  align-items: center;
  border: 1px solid var(--color-text);
  background-color: var(--color-bg-raised-2);
  border-radius: 1.5rem;
  overflow: hidden;
}

.testimonial_photo {
  flex: 0 0 248px;
  width: 248px;
  height: 100%;
  align-self: stretch;
  object-fit: cover;
  background-color: var(--color-green);
}

.testimonial_text {
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.5rem 1.9rem;
  color: var(--color-text);
}

.testimonial_quote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.testimonial_author {
  display: flex;
  flex-flow: column;
}

.testimonial_name {
  color: var(--color-green);
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.testimonial_role {
  margin: 4px 0 0;
  font-size: 1rem;
}

.testimonial_controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}

.carousel_arrow {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-text);
  border-radius: 8px;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

.carousel_arrow svg {
  width: 20px;
  height: 20px;
}

.carousel_dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel_dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background-color: rgba(244, 244, 244, 0.4);
  cursor: pointer;
}

.carousel_dot[aria-current="true"] {
  background-color: var(--color-text);
}

@media screen and (min-width: 1280px) {
  .testimonial_section { padding: 100px 0; }
  .container-medium { max-width: 75rem; }
}

@media screen and (min-width: 1440px) {
  .container-medium { max-width: 88.9rem; }
  .testimonial_intro .heading-style-h2 { font-weight: 500; }
}

@media screen and (min-width: 1920px) {
  .container-medium { max-width: 106rem; }
}

@media screen and (max-width: 991px) {
  .testimonial_section { padding: 0 0 20px; }
  .testimonial_grid { grid-template-columns: 100%; gap: 24px; }
}

@media screen and (max-width: 767px) {
  .container-medium { padding: 0 1rem; }
  .subtitle, .testimonial_intro .heading-style-h2 { text-align: center; }
  .testimonial_lead { text-align: center; }
}

@media screen and (max-width: 479px) {
  .testimonial_card { flex-flow: column; }
  .testimonial_photo { width: 100%; flex-basis: auto; height: 280px; align-self: stretch; }
}

/* --- Projekty ---
   Zdrojový HTML archiv obsahuje na titulcích/obrázcích inline
   `style="opacity:.5"` / `style="color:rgb(20,20,20)"` — živě ověřeno
   (čerstvý load, žádná interakce) na originále: je to jen zachycený
   přechodný IX2 stav z pořízení snapshotu, ne skutečný default. Skutečný
   klidový stav: plná viditelnost obrázku, zelený titulek — to
   implementujeme. Viz DECISIONS.md. */
.blog_section {
  padding: 40px 0 100px;
  overflow: hidden;
  scroll-margin-top: 90px;
}

.blog_intro {
  margin-bottom: 40px;
}

.blog_list {
  display: flex;
  flex-flow: column;
  gap: 20px;
}

.blog_card {
  display: flex;
  align-items: center;
  gap: 50px;
  border: 1px solid var(--color-text);
  background-color: var(--color-bg-raised);
  border-radius: 20px;
  overflow: hidden;
}

.blog_image {
  flex: 0 0 580px;
  width: 580px;
  height: 100%;
  min-height: 510px;
  object-fit: cover;
  border-radius: 20px 0 0 20px;
}

.blog_content {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 20px;
  width: 75%;
  padding: 20px 20px 20px 0;
}

.blog_title {
  color: var(--color-green);
  margin: 0;
  width: 90%;
  font-size: 26px;
  font-weight: 700;
  line-height: 125%;
}

.blog_tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.blog_tag {
  border: 1px solid var(--color-text);
  background-color: var(--color-bg-raised);
  border-radius: 15px;
  padding: 10px 20px;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 500;
}

.blog_content .paragraph-3 {
  color: var(--color-text);
  width: 95%;
  margin: 0;
  font-size: 16px;
  line-height: 26px;
}

.blog_content .heading {
  color: var(--color-green);
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

@media screen and (min-width: 1920px) {
  .blog_content .heading { font-size: 26px; }
}

@media screen and (max-width: 991px) {
  .blog_section { padding-bottom: 100px; }
  .blog_card { flex-flow: column; align-items: stretch; }
  .blog_image { flex-basis: auto; width: 100%; max-width: none; max-height: 460px; min-height: 0; border-radius: 20px 20px 0 0; }
  .blog_content { width: 100%; padding: 0 20px 40px; text-align: center; align-items: center; }
  .blog_title { width: 100%; }
  .blog_tags { justify-content: center; }
}

@media screen and (max-width: 767px) {
  .blog_section { padding-bottom: 80px; }
  .blog_image { max-height: 400px; }
  .blog_tag { font-size: 14px; }
}

@media screen and (max-width: 479px) {
  .blog_image { min-height: 270px; }
  .blog_content { padding: 40px 10px 40px; }
  .blog_tags { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .blog_tag { width: 100%; box-sizing: border-box; text-align: center; padding: 8px 10px; font-size: 12px; }
}

/* --- Kontakt (CTA sekce) ---
   V originále id="contact" sedí přímo na téhle sekci (ne na footeru) —
   Etapa 1 dočasně dala id="contact" na footer, teď se přesouvá sem,
   kam skutečně patří (viz DECISIONS.md, Etapa 2 kolo 1). */
.cta_section {
  display: flex;
  padding: 120px 0 0;
  scroll-margin-top: 90px;
}

/* Živě ověřeno na originále přes elementFromPoint: `.container.contact`
   (celý kontejner s kartou i CTA blokem) má vlastní šedé pozadí
   rgb(20,20,20), přes celou šířku sekce, na výšku přesně podle obsahu
   (ne celé cta_section včetně top paddingu). Dřívější předpoklad, že
   CTA sekce je celá průhledná/černá jako Hero, byl špatný — ověřen jen
   computed style na `#contact`/`.section_wrapper`/`body`, ne na tomhle
   konkrétním vnitřním kontejneru. */
.contact_grid {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
  background-color: var(--color-bg-raised);
}

/* Živě ověřeno na originále (`.blog_title_wrapper.contact`, obal kolem
   kontaktních údajů) — Petra si všimla, že "Telefonní číslo" je moc
   nalepené nahoře, na rebuildu tenhle padding úplně chyběl. Responsive
   schedule ověřený na 390/479/767/900/1024/1440/1920px. */
.contact_card {
  flex: 0 0 40%;
  width: 40%;
  display: flex;
  flex-flow: column;
  gap: 20px;
  padding: 20px 0 20px 20px;
}

.contact_card h3 {
  color: var(--color-green);
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.contact_card p {
  color: var(--color-text);
  margin: 0;
  font-size: 16px;
  line-height: 26px;
}

.cta_wrapper {
  flex: 0 0 60%;
  width: 60%;
  padding-left: 55px;
  padding-right: 20px;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 50px;
  text-align: center;
  max-width: 750px;
}

.cta_text {
  color: var(--color-text);
  margin: 0;
  font-size: 45px;
  font-weight: 700;
  line-height: 120%;
}

@media screen and (min-width: 1280px) {
  .cta_section { padding-top: 140px; }
  .cta_wrapper { max-width: 900px; gap: 65px; }
  .cta_text { font-size: 50px; }
}

@media screen and (min-width: 1440px) {
  .cta_text { font-size: 55px; }
}

/* Živě ověřeno na originále na velkém monitoru (Petra poslala
   screenshot s viditelně jinou mezerou nad CTA sekcí na širokém
   displeji): přesně na 1920px `.cta_section` mění padding-top
   140px→60px A přidává margin-top:100px (dřív jsem tenhle breakpoint
   testovala jen pro font-size/container padding, ne pro cta_section
   samotnou). Celkový odstup nad sekcí je tak 160px místo 140px. */
@media screen and (min-width: 1920px) {
  /* Petra na velkém monitoru viděla černou mezeru mezi Projekty a
     šedým CTA blokem, jako by šlo o dvě oddělené sekce — živě ověřeno,
     že na originále má na 1920px+ šedé pozadí i `.cta_section` sama
     (ne jen vnitřní `.contact_grid`), takže padding-top oblast (60px)
     je taky šedá, ne černá. Bez tohohle vznikal viditelný černý pruh
     mezi okrajem sekce a vnitřním gray boxem. */
  .cta_section {
    padding-top: 60px;
    margin-top: 100px;
    background-color: var(--color-bg-raised);
  }
  .cta_wrapper { max-width: 1121px; }
  .cta_text { font-size: 70px; }
}

@media screen and (max-width: 991px) {
  .cta_section { margin-top: 60px; padding-top: 0; }
  .contact_grid { flex-flow: column; gap: 40px; }
  .contact_card, .cta_wrapper { width: 100%; flex-basis: auto; padding-left: 0; }
  .cta_wrapper { max-width: 700px; margin: 0 auto; }
}

@media screen and (max-width: 767px) {
  .cta_text { font-size: 40px; }
  .contact_card { text-align: center; align-items: center; padding-top: 40px; }
}

@media screen and (max-width: 479px) {
  .cta_section { margin-top: 10px; padding-top: 20px; }
  .cta_wrapper { gap: 30px; }
  .contact_card { padding-right: 10px; }
}

/* --- Footer --- */
/* Živě ověřeno na originále: rgb(20,20,20) = --color-bg-raised, ne
   --color-bg-raised-2 (#1c1c18) — vizuálně blízké, ale jiný token. */
.footer {
  background-color: var(--color-bg-raised);
  padding: 20px 0;
  overflow: hidden;
}

.footer_bottom_content {
  border-top: 1px solid var(--color-text);
  padding-top: 20px;
}

.copyright_text {
  color: var(--color-text);
  text-align: center;
  margin: 0;
  font-size: 16px;
  line-height: 20px;
}

@media screen and (min-width: 1280px) {
  .footer { padding-top: 20px; }
}

@media screen and (max-width: 991px) {
  .footer { padding-top: 60px; }
}

@media screen and (max-width: 767px) {
  .footer { padding-top: 80px; }
}

@media screen and (max-width: 479px) {
  .footer { padding-top: 60px; padding-bottom: 20px; }
}

/* --- Čítače ---
   Originál: 4 čítače v DOM, ale čtvrtý ("dokončených projektů") má
   natvrdo `.hide` (display:none) — nikdy se nezobrazuje, stejný vzor
   jako ostatní `.hide` prvky napříč webem (viz DECISIONS.md Etapa 1 a
   Etapa 2 kolo 4). Zobrazují se jen 3: "200+ obchodních spoluprací",
   "9 let praxe...", "15+ meetingů...". Hodnoty dekódovány živě z
   `transform: translateY()` na originále (`getBoundingClientRect`
   proti masce), ne odhadem.

   Bod 3 z auditu (accessibility fix, PLATFORM REQUIREMENT, vizuál 1:1):
   originál má "digit-strip" odometr — každá číslice sloupec všech 0–9,
   jen jedna viditelná přes `overflow:hidden`. Textový/screen-reader
   obsah tak dostane všech 10 číslic na pozici (ověřeno v auditu).
   Rebuild render stejně vypadající velké tučné číslo (stejný font-size/
   barva/spacing), ale jako JEDEN textový uzel s JS count-up animací —
   screen reader vždy čte skutečnou hodnotu, ne cizí číslice navíc. */
.counter_section {
  background-color: var(--color-bg-raised-2);
  padding: 60px 40px;
}

.counter_grid {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 80px;
  padding: 0;
}

.counter_item {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 290px;
  text-align: center;
}

.counter_value {
  color: var(--color-text);
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 80px;
}

.counter_label {
  color: var(--color-green);
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

@media screen and (min-width: 1280px) {
  .counter_section { padding-left: 80px; padding-right: 80px; }
}

@media screen and (min-width: 1440px) {
  .counter_section { padding-left: 100px; padding-right: 100px; }
}

@media screen and (min-width: 1920px) {
  .counter_value { font-size: 80px; line-height: 96px; }
}

@media screen and (max-width: 991px) {
  .counter_section { padding-left: 40px; padding-right: 40px; }
  .counter_grid { flex-wrap: wrap; gap: 40px; }
  .counter_label { font-size: 21px; }
  .counter_value { font-size: 50px; line-height: 70px; }
}

@media screen and (max-width: 767px) {
  /* Živě ověřeno na originále: `align-items: center` na blocku, jinak
     se položky se svým max-width:290px natáhnou (stretch) a zůstanou
     zarovnané doleva místo na střed — Petra si toho všimla na mobilu. */
  .counter_grid { flex-flow: column; align-items: center; gap: 30px; }
  .counter_label { font-size: 16px; line-height: 26px; }
  .counter_value { font-size: 35px; line-height: 50px; }
}

@media screen and (max-width: 479px) {
  .counter_section { padding-top: 60px; padding-bottom: 60px; }
}

/* --- 404 ---
   Vlastní nová implementace ve stylu webu — originál má generickou
   Webflow šablonu (viz reference/AUDIT.md bod 11, DECISIONS.md),
   záměrně nekopírováno. */
.error_section {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 175px 0 100px;
  text-align: center;
}

.error_content {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 24px;
  max-width: 600px;
}

.error_code {
  color: var(--color-green);
  margin: 0;
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
}

.error_heading {
  color: var(--color-text);
  margin: 0;
  font-size: 32px;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .error_code { font-size: 80px; }
  .error_heading { font-size: 26px; }
}

/* --- Privacy / Ochrana osobních údajů ---
   Nová samostatná stránka, vlastní jednoduché sekce (žádný ekvivalent
   v originále — originál žádnou privacy stránku neměl, viz AUDIT.md
   bod 8, PLATFORM REQUIREMENT). Typografie navazuje na existující
   tokeny/vzory webu (`.section_heading` zelená caps pro H1,
   `--color-text`/`--color-text-muted` pro text). */
.legal_section {
  padding: 175px 0 120px;
}

.legal_content {
  max-width: 50rem;
}

.legal_title {
  color: var(--color-green);
  text-transform: uppercase;
  margin: 0 0 48px;
  font-size: 40px;
  line-height: 120%;
}

.legal_content h2 {
  color: var(--color-green);
  margin: 40px 0 12px;
  font-size: 22px;
  font-weight: 600;
}

.legal_content h2:first-of-type {
  margin-top: 0;
}

.legal_content p {
  color: var(--color-text);
  margin: 0;
}

.legal_content a {
  color: var(--color-green);
  text-decoration: underline;
}

.legal_content a:hover {
  color: var(--color-mint-light);
}

@media screen and (max-width: 767px) {
  .legal_section { padding: 140px 0 80px; }
  .legal_title { font-size: 30px; }
}

@media screen and (max-width: 479px) {
  /* `.container` padding kolabuje na 0 pod 480px (jinde to kompenzují
     jednotlivé sekce vlastním paddingem) — tahle stránka je nová, bez
     ekvivalentu v originále, takže potřebuje vlastní boční odsazení. */
  .legal_content { padding-left: 20px; padding-right: 20px; }
}

.footer_links {
  margin-top: 12px;
  text-align: center;
}

.footer_links a {
  color: var(--color-text-muted);
  font-size: 14px;
  text-decoration: underline;
}

.footer_links a:hover {
  color: var(--color-text);
}