/* rostislav.sk v7: tmavý, klidný styl (design v2/v3). Dvě písma, jeden akcent. Úvod s fotkou přes celou plochu.
   Animace (sekce „pohyb“ na konci) běží jen s JS (třída .js na <html>) a vypíná je prefers-reduced-motion. */

/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-normal-400-600-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-normal-400-600-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/PlusJakartaSans-normal-400-600-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/PlusJakartaSans-normal-400-600-latin.woff2) format('woff2');
  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;
}

:root {
  --bg: #05080f;          /* pozadí stránky */
  --bg-alt: #0a0d15;      /* o odstín světlejší sekce */
  --card: #0e121b;        /* karty, lišta, kontakt */
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .14);
  --white: #ffffff;       /* nadpisy */
  --text: #c4c8d1;        /* odstavce: kontrast 10,5 : 1 na --bg, 9,9 : 1 na --card */
  --muted: #8b909b;       /* drobné popisky: 6,2 : 1 */
  --accent: #ff7a29;      /* jediný akcent: štítky, tečky, linky */
  --light: #f9f8f6;       /* hlavní tlačítko */

  --font-h: 'Space Grotesk', system-ui, sans-serif;
  --font-b: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* typografická škála: H1, H2, H3, text, malý text, štítek */
  --fs-h1: 64px;
  --fs-h2: 44px;
  --fs-h3: 24px;
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-label: 14px;

  --gutter: 40px;
  --wrap: min(1200px, 100% - 2 * var(--gutter));
  --sec: 128px;
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0C5.4 3.2 6.8 4.6 10 5 6.8 5.4 5.4 6.8 5 10 4.6 6.8 3.2 5.4 0 5 3.2 4.6 4.6 3.2 5 0Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.65 var(--font-b);
  letter-spacing: 0.012em;
  word-spacing: 0.1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b { font-weight: 600; color: var(--white); }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; border-radius: 6px; }
.nowrap { white-space: nowrap; }

.wrap { width: var(--wrap); margin-inline: auto; }

/* ---------- písmo ---------- */
h1, .h2, .h3 {
  font-family: var(--font-h);
  font-weight: 500;
  color: var(--white);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.025em; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.012em; }
p { text-wrap: pretty; }

.eyebrow {
  display: block;
  font: 600 var(--fs-label)/1.3 var(--font-b);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  vertical-align: -1px;
  margin-right: 10px;
  width: 11px;
  height: 11px;
  background: var(--accent);
  -webkit-mask: var(--star) center / contain no-repeat;
  mask: var(--star) center / contain no-repeat;
}

.small, .note, figcaption, .src, .notfor { font-size: var(--fs-small); line-height: 1.6; }

/* oranžová tečka */
.dot { position: relative; padding-left: 18px; }
.dot::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- tlačítka ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 32px;
  border: 1px solid transparent;
  font: 600 var(--fs-small)/1 var(--font-b);
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn-light { background: var(--light); color: var(--bg); }
.btn-light:hover { background: #ffffff; }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .7); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }
.btn-sm { min-height: 40px; padding: 0 18px; }
/* v6: pevná šířka tlačítka v navigaci, aby se po načtení písma neposunulo (CLS 0 i v náhledu) */
.nav-bar .btn-sm { min-width: 128px; }

/* ---------- navigace ---------- */
.nav {
  position: fixed;
  z-index: 10;
  top: 16px;
  left: 0;
  right: 0;
}
.nav-bar {
  width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 9px 9px 9px 20px;
  background: rgba(14, 18, 27, .84);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  transition: background-color .4s ease-out, border-color .4s ease-out, box-shadow .4s ease-out;
}
/* po odjetí z úvodu: tmavší pruh, jemnější rozmazání pod ním, stín (třídu přidává main.js) */
.nav.is-solid .nav-bar {
  background: rgba(7, 10, 17, .93);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.brand {
  font: 500 var(--fs-body)/1.2 var(--font-h);
  letter-spacing: -0.01em;
  color: var(--white);
  text-decoration: none;
}

/* ---------- úvod: fotka přes celou plochu ----------
   Na fotce stojí vlevo a dívá se doprava, proto text leží v pravé polovině (ve směru jeho pohledu).
   Pravá část fotky přechází do --bg, levá část s postavou a obličejem zůstává beze změny. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* výška obrazovky, ale ne vyšší než 2:3 šířky, aby postava zůstala v levé polovině */
  min-height: max(640px, min(100vh, 66vw));
  min-height: max(640px, min(100svh, 66vw));
  padding: 128px 0 88px;
  background: var(--bg);
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* v5: na velmi širokých obrazovkách (21:9, 32:9) by fotka přes celou šířku byla moc přiblížená.
   Rám fotky je proto nejvýš 2× širší než vysoký (výřez jako na běžném 16:9), stojí uprostřed
   a po stranách přechází do --bg (levý přechod je v @media níže, pravý dělá přechod pod textem). */
.hero-media { width: min(100%, 200vh); width: min(100%, 200svh); margin-inline: auto; }
.hero-media picture { display: block; height: 100%; will-change: transform; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 12% 30%;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(5, 8, 15, .28) 0%,
    rgba(5, 8, 15, 0) 13%,
    rgba(5, 8, 15, 0) 40%,
    rgba(5, 8, 15, .5) 46%,
    rgba(5, 8, 15, .88) 53%,
    rgba(5, 8, 15, .95) 61%,
    #05080f 76%);
}
@media (min-width: 961px) and (min-aspect-ratio: 2/1) {
  /* rám je užší než okno: levý okraj fotky plynule do --bg (postava začíná až kolem 22 % šířky fotky) */
  .hero-media::after {
    background: linear-gradient(90deg,
      #05080f 0%,
      rgba(5, 8, 15, .72) 4%,
      rgba(5, 8, 15, .3) 9%,
      rgba(5, 8, 15, 0) 15%,
      rgba(5, 8, 15, 0) 40%,
      rgba(5, 8, 15, .5) 46%,
      rgba(5, 8, 15, .88) 53%,
      rgba(5, 8, 15, .95) 61%,
      #05080f 76%);
  }
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
}
.hero-copy { grid-column: 2; max-width: 560px; }
.hero-copy h1 { margin: 24px 0 24px; }
.hero-copy .lead { color: #e6e8ed; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.note { margin-top: 32px; color: var(--text); }

.photo {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line-strong);
  background: var(--card);
}
.photo img { width: 100%; }
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(5, 8, 15, .45), rgba(5, 8, 15, 0) 38%);
  pointer-events: none;
}
.photo img { filter: saturate(.92) brightness(.94); }

/* ---------- sekce ---------- */
.sec {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--sec) 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

/* ---------- v6: pasivní obrázek v pozadí každé sekce (princip fiscal.ai) ----------
   .sec-bg vyplní celou sekci a nahoře i dole plynule mizí do --bg (maska v px, aby mezi sekcemi nebyl šev).
   Samotný obrázek je „pás“ v přirozeném poměru stran (--bg-top, --bg-h), aby světlo scény nebylo uříznuté;
   object-position = poloha světla ve fotce, takže světlo sedí na stejném místě pásu na každé šířce.
   ::after je místní ztmavení pod textem (--scrim). Parallax (--py) nastavuje main.js. */
.sec-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 96px), #000 calc(100% - var(--fade-bot, 120px)), transparent 100%);
  mask: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 96px), #000 calc(100% - var(--fade-bot, 120px)), transparent 100%);
}
.sec-bg img {
  position: absolute;
  left: 0;
  top: var(--bg-top, 0px);
  width: 100%;
  height: var(--bg-h, 100%);
  max-width: none;
  object-fit: cover;
  object-position: var(--bg-pos, 50% 50%);
  opacity: var(--bg-o, .9);
  filter: var(--bg-filter, none);
  transform: translate3d(0, var(--py, 0px), 0);
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 var(--band-a, 18%), #000 var(--band-b, 78%), transparent var(--band-c, 100%));
  mask: linear-gradient(to bottom, transparent 0, #000 var(--band-a, 18%), #000 var(--band-b, 78%), transparent var(--band-c, 100%));
}
.sec-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim, none);
}
/* text vlevo v obsahu (levý okraj obsahu = 50 % − 600 px, textový sloupec 640 px): tma pod ním, scéna vpravo */
.sec-bg {
  --scrim: linear-gradient(90deg, rgba(5, 8, 15, .9) 0, rgba(5, 8, 15, .86) calc(50% + 40px), rgba(5, 8, 15, .35) calc(50% + 220px), rgba(5, 8, 15, 0) calc(50% + 420px));
}
.sec-bg img { --bg-h: max(100%, min(56.25vw, 1100px)); }

/* motto (v7): maják vpravo, paprsek dole pod textem (text je na středu) */
.bg-majak { --scrim: radial-gradient(60% 52% at 50% 38%, rgba(5, 8, 15, .78), rgba(5, 8, 15, .5) 55%, rgba(5, 8, 15, 0) 100%); --fade-bot: 48px; }
.bg-majak img { --bg-h: min(56.25vw, 1100px); --bg-top: calc(100% - var(--bg-h) * .62); --bg-pos: 84% 53%; --band-a: 30%; --band-b: 94%; --bg-o: 1; }
/* Proč 1:1 (v7): úsvit nad městem vpravo vedle nadpisu, pilíře dole už ve tmě */
.bg-mesto-usvit img { --bg-h: min(56.25vw, 1000px); --bg-top: calc(var(--bg-h) * -.35); --bg-pos: 80% 60%; --band-a: 20%; --band-b: 44%; --band-c: 96%; --bg-o: .9; }
/* nabídka (v7): vlákna zprava vedle nadpisu, řádky 01–03 pod nimi ve tmě */
.bg-vlakna img { --bg-h: min(50vw, 960px); --bg-top: calc(var(--sec) * 1.5 - var(--bg-h) * .42); --bg-pos: 80% 46%; --band-a: 18%; --band-b: 50%; --band-c: 64%; --bg-o: .95; }
/* principy: vrchol hory vpravo vedle nadpisu */
.bg-vrchol img { --bg-h: min(56.25vw, 1100px); --bg-top: -6%; --bg-pos: 84% 60%; --band-a: 12%; --band-b: 72%; --bg-o: .85; }
/* kdo jsem: duotón sálu, plátna nahoře nad portrétem; text vpravo, proto tma vpravo */
.bg-sal {
  --scrim: linear-gradient(90deg, rgba(5, 8, 15, .35) 0, rgba(5, 8, 15, .45) calc(50% - 160px), rgba(5, 8, 15, .9) calc(50% + 40px), rgba(5, 8, 15, .92) 100%);
}
.bg-sal img { --bg-h: min(66vw, 1200px); --bg-top: -14%; --bg-pos: 40% 30%; --band-a: 8%; --band-b: 46%; --bg-o: .55; }
/* 4K, 21:9, Retina: od v7 se načte varianta 3600 px (zvětšená, doostřená, s jemným zrnem), rozmazání už není potřeba */
/* kontakt: úsvit na konci silnice vpravo od středu, pod kartou s e-mailem */
.bg-cesta img { --bg-h: min(56.25vw, 1100px); --bg-top: calc(100% - var(--bg-h) * .78); --bg-pos: 72% 61%; --band-a: 26%; --band-b: 86%; --bg-o: 1; }
.text { max-width: 640px; }
.text .h2 + p, .text .eyebrow + .h2 { margin-top: 24px; }
.text .eyebrow + .h2 { margin-top: 20px; }
.text p + p { margin-top: 20px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  gap: 80px;
  align-items: end;
}
/* Kdo jsem: na portrétu se dívá doprava, proto fotka vlevo a text vpravo (fotka se nezrcadlí) */
.split-photo { grid-template-columns: minmax(0, 480px) minmax(0, 640px); justify-content: space-between; align-items: center; }
.split-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); align-items: start; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
}
/* v6: karty lehce průsvitné, scéna v pozadí sekce jemně prosvítá (bez podpory backdrop-filter zůstanou plné) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card {
    background: rgba(14, 18, 27, .74);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
  }
}

/* motto: jediná sekce na střed */
.motto { text-align: center; }
.motto .wrap { max-width: 720px; }
.motto .h2::before {
  content: "";
  display: block;
  width: 1px;
  height: 48px;
  margin: 0 auto 32px;
  background: var(--accent);
}
.motto p { margin: 24px auto 0; max-width: 560px; }

/* tři pilíře 1:1: řádky s linkou a tečkou */
.rows3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 72px;
}
.rows3 li { position: relative; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.rows3 li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.rows3 p, .cards3 p { margin-top: 12px; }
.rows-list p { margin-top: 0; }

/* metoda: výrok s linkou a tečkou (stejný motiv jako pilíře 1:1) */
.statement { position: relative; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.statement::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* nabídka: řádky číslo · co udělám · jak */
.rows-list { margin-top: 64px; counter-reset: n; border-bottom: 1px solid var(--line); }
.rows-list > li {
  display: grid;
  /* třetí sloupec = pravý sloupec .split (480 px), aby popisy seděly na mřížku */
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 480px);
  gap: 8px 40px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  counter-increment: n;
}
.rows-list > li::before {
  content: counter(n, decimal-leading-zero);
  padding-top: 6px;
  font: 600 var(--fs-label)/1.3 var(--font-b);
  letter-spacing: .12em;
  color: var(--muted);
}

/* karty po třech */
.cards3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 64px;
  counter-reset: n;
}
.cards3 > li { display: flex; flex-direction: column; padding: 32px; counter-increment: n; }
.cards3 > li::before {
  content: counter(n, decimal-leading-zero);
  display: block;
  margin-bottom: 20px;
  font: 600 var(--fs-label)/1.3 var(--font-b);
  letter-spacing: .12em;
  color: var(--muted);
}
.principles > li::before { color: var(--accent); }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
}
.notfor { margin-top: 40px; max-width: 640px; color: var(--text); }

/* principy (v7: bez citátu a autorů) */
.principles { margin-top: 64px; }
.principles-end { margin-top: 64px; max-width: 640px; }
.text .about-cta { margin-top: 32px; }

/* kdo jsem: fakta jako jednoduchá tabulka (popisek vlevo, text vpravo) */
.facts { margin: 40px 0 0; border-top: 1px solid var(--line); }
.facts > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  padding-top: 3px;
  font: 600 13px/1.4 var(--font-b);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts dd { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--text); }
.text .facts-link { margin-top: 24px; font-size: var(--fs-small); }
.facts-link a, .small a, .foot a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
}
.facts-link a:hover, .small a:hover, .foot a:hover { text-decoration-color: var(--white); }

/* ---------- v6: pás s logy nástrojů (konec sekce Kdo jsem) ----------
   Bez JS / s reduced-motion: vystředěné řádky. S JS (.is-moving): jedna řada, nekonečný posun, kopii přidá main.js. */
.tools { margin-top: 112px; }
.tools-strip { margin-top: 32px; }
.tools-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 44px;
}
.tools-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 17px/1.2 var(--font-h);
  letter-spacing: -0.005em;
  color: var(--white);
  white-space: nowrap;
  opacity: .6;
  transition: opacity .3s;
}
.tools-list li:hover { opacity: 1; }
.tools-list img { width: auto; height: 26px; flex: none; }
.tools > .eyebrow { text-align: center; }

.tools-strip.is-moving {
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.tools-strip.is-moving:focus-visible { outline-offset: 0; }
.is-moving .tools-track { display: flex; width: max-content; animation: tools-run 60s linear infinite; }
.is-moving .tools-list { flex-wrap: nowrap; padding-right: 44px; }
.tools-strip.is-moving:hover .tools-track,
.tools-strip.is-moving:focus-within .tools-track { animation-play-state: paused; }
@keyframes tools-run { from { transform: none; } to { transform: translate3d(-50%, 0, 0); } }

/* kontakt: místo formuláře velký odkaz na e-mail */
.dim { color: var(--muted); }
.mail-card { padding: 40px; }
.mail {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-height: 64px;
  font: 500 34px/1.15 var(--font-h);
  letter-spacing: -0.02em;
  word-spacing: normal;
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 122, 41, .7);
  text-underline-offset: 8px;
  transition: text-decoration-color .2s;
}
.mail:hover { text-decoration-color: var(--accent); }
.mail-arrow { flex: none; color: var(--accent); transition: transform .3s ease-out; }
.mail:hover .mail-arrow { transform: translateX(4px); }
.mail-card .small { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.small { color: var(--text); }

/* patička */
.foot { padding: 48px 0 56px; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
.foot-motto { color: var(--white); font-family: var(--font-h); font-weight: 500; }

/* ---------- menší obrazovky ---------- */
@media (max-width: 1100px) {
  .split, .split-photo, .split-contact { gap: 56px; }
}
@media (max-width: 960px) {
  :root { --sec: 96px; --fs-h1: 52px; --fs-h2: 38px; }
  .split, .split-photo, .split-contact { grid-template-columns: minmax(0, 1fr); }
  .split-photo .photo { max-width: 520px; }
  .mail-card { max-width: 540px; }
  /* úvod: fotka nahoře oříznutá na postavu a obličej, text pod ní na tmavém pozadí */
  .hero { display: block; min-height: 0; padding: 0 0 var(--sec); }
  .hero-media { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 5; max-height: 76svh; width: 100%; }
  .hero-media img { object-position: 16% 0; }
  .hero-media::after { background: linear-gradient(to bottom, rgba(5, 8, 15, 0) 82%, #05080f 100%); }
  .hero-grid { display: block; }
  .hero-copy { max-width: 600px; margin-top: 8px; }
  .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rows3 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .quote { max-width: 640px; }
  .rows-list > li { grid-template-columns: 64px minmax(0, 1fr); }
  .rows-list > li p { grid-column: 2; }
  /* v6 pozadí na mobilu: pruh scény jen v horní části sekce, světlo v horním odsazení nad nadpisem
     (--ly = výška světla ve fotce), pod ním scéna mizí do tmy. Čitelnost má přednost. */
  .sec-bg { --fade-top: 24px; --fade-bot: 0px; --scrim: linear-gradient(to bottom, rgba(5, 8, 15, 0) 0, rgba(5, 8, 15, 0) 44px, rgba(5, 8, 15, .62) 80px, rgba(5, 8, 15, .82) 180px); }
  .sec-bg img {
    --bg-h: max(300px, 96vw);
    --bg-top: calc(var(--sec) * .5 - var(--bg-h) * var(--ly));
    --band-a: 0%;
    --band-b: calc(var(--ly) * 100% + 4%);
    --band-c: 100%;
    --bg-o: 1;
  }
  .bg-majak img { --ly: .4; --bg-pos: 84% 50%; }
  .bg-mesto-usvit img { --ly: .63; --bg-pos: 80% 63%; }
  .bg-vlakna img { --ly: .58; --bg-pos: 86% 50%; }
  .bg-vrchol img { --ly: .62; --bg-pos: 84% 62%; }
  .bg-sal img { --ly: .3; --bg-pos: 30% 30%; --bg-o: .6; }
  .bg-cesta img { --ly: .61; --bg-pos: 72% 61%; }
  /* motto: maják a paprsek nad nadpisem, proto delší světlý pruh */
  .bg-majak { --scrim: linear-gradient(to bottom, rgba(5, 8, 15, 0) 0, rgba(5, 8, 15, 0) 96px, rgba(5, 8, 15, .62) 132px, rgba(5, 8, 15, .82) 220px); }
  .bg-sal { --scrim: linear-gradient(to bottom, rgba(5, 8, 15, 0) 0, rgba(5, 8, 15, 0) 44px, rgba(5, 8, 15, .62) 80px, rgba(5, 8, 15, .82) 180px); }
  .tools { margin-top: 88px; }
}
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --sec: 80px;
    --fs-h1: 40px;
    --fs-h2: 32px;
    --fs-h3: 21px;
    --fs-body: 17px;
  }
  .facts > div { grid-template-columns: minmax(0, 1fr); padding: 14px 0; }
  .actions { margin-top: 32px; }
  .actions .btn { flex: 1 1 auto; }
  .cards3 { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .cards3 > li, .quote { padding: 28px 24px; }
  .mail-card { padding: 24px 20px; }
  .mail { font-size: clamp(20px, 6.6vw, 30px); text-underline-offset: 6px; }
  .rows-list { margin-top: 48px; }
  .rows-list > li { grid-template-columns: minmax(0, 1fr); padding: 28px 0; }
  .rows-list > li p { grid-column: auto; }
  .rows-list > li::before { padding-top: 0; }
  .rows3 { margin-top: 56px; }
  .cta-row { margin-top: 40px; }
  .cta-row .btn { width: 100%; }
  .principles, .principles-end { margin-top: 48px; }
  .nav { top: 12px; }
  .nav-bar { padding-left: 16px; min-height: 56px; }
}
/* ---------- pohyb (jen s JS) ---------- */
/* úvod po načtení: fotka se z 1,04 usadí na 1, text naskočí postupně */
@keyframes settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.js .hero-media img { animation: settle .8s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero-copy > :nth-child(1) { animation-delay: .1s; }
.js .hero-copy > :nth-child(2) { animation-delay: .2s; }
.js .hero-copy > :nth-child(3) { animation-delay: .3s; }
.js .hero-copy > :nth-child(4) { animation-delay: .4s; }
.js .hero-copy > :nth-child(5) { animation-delay: .5s; }

/* objevení při skrolování: .rv a .in přidává main.js, po doběhnutí je zase odebere */
.js .rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0s);
}
.js .rv.in { opacity: 1; transform: none; }

/* nabídka 01–03: oranžová linka se při skrolování dokreslí podél řádků (--p = 0 až 1 z main.js) */
.js .rows-list { position: relative; }
.js .rows-list::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  width: 1px;
  background: var(--accent);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}
.js .rows-list > li::before { transition: color .4s; }
.js .rows-list > li.on::before { color: var(--accent); }
@media (max-width: 640px) { .js .rows-list::after { left: -12px; } }

/* karty principů: při najetí se jemně zvednou a okraj zesvětlí */
.principles > li { transition: transform .3s ease-out, border-color .3s ease-out; }
@media (hover: hover) {
  .principles > li:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .22); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .rows-list::after { display: none; }
  .principles > li:hover { transform: none; }
}