/* ============================================================
   ESA RoboTech — style.css (v1.0, 2026-09-23 — první produkční verze)
   Vychází z designu ElMetal (eshop.css): navy paleta, brand font
   v titulku, fixní dekorativní vrstva, hlavička s nav + akcí.
   Stránka = swipovací fullscreen panely (CSS scroll-snap).
   ============================================================ */

/* #region Fonty a ikony — hostované lokálně (v1.0; dřív Google Fonts + jsDelivr = IP návštěvníků třetím stranám)
   Chakra Petch (OFL), Open Sans variabilní wght (OFL), Bootstrap Icons 1.11.3 (MIT) — jen 13 použitých ikon.
   Licence v fonts/LICENSE-*.txt */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/chakra-petch-latin-500-normal.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; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/chakra-petch-latin-ext-500-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/chakra-petch-latin-600-normal.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; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/chakra-petch-latin-ext-600-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/chakra-petch-latin-700-normal.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; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/chakra-petch-latin-ext-700-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-display: swap; font-weight: 300 800; src: url(fonts/open-sans-latin-wght-normal.woff2) format("woff2-variations"), url(fonts/open-sans-latin-wght-normal.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; }
@font-face { font-family: "Open Sans"; font-style: normal; font-display: swap; font-weight: 300 800; src: url(fonts/open-sans-latin-ext-wght-normal.woff2) format("woff2-variations"), url(fonts/open-sans-latin-ext-wght-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-display: block; font-family: bootstrap-icons; src: url(fonts/bootstrap-icons.woff2) format("woff2"); }
.bi::before,[class*=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.bi-arrow-left::before{content:"\f12f"}
.bi-arrow-right::before{content:"\f138"}
.bi-arrow-right-short::before{content:"\f135"}
.bi-chevron-down::before{content:"\f282"}
.bi-chevron-left::before{content:"\f284"}
.bi-chevron-right::before{content:"\f285"}
.bi-clipboard-check::before{content:"\f28b"}
.bi-clock::before{content:"\f293"}
.bi-envelope::before{content:"\f32f"}
.bi-pause-fill::before{content:"\f4c3"}
.bi-person-badge::before{content:"\f4d3"}
.bi-play-fill::before{content:"\f4f4"}
.bi-send::before{content:"\f6c0"}
/* #endregion */

/* #region Tokens */
:root {
  --ert-navy:      #1a3a5c;
  --ert-navy-dark: #12293f;
  --ert-navy-deep: #0c1c2c;
  --ert-accent:    #8fc3e8;
  --ert-accent-2:  #4fa3e3;
  --ert-accent-ink: #1f5f96;   /* v1.0: text v akcentu na světlém pozadí (4,6:1+) */
  --ert-bg:        #dbe9f1;
  --ert-ink:       #1c2630;
  --ert-muted:     #5c6b78;
  --ert-radius:    8px;
  --ert-header-h:  88px;   /* v0.14: 72 → 88 */
  --ert-font-ui:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ert-font-brand: "Chakra Petch", "Open Sans", sans-serif;
}
/* #endregion */

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

html {
  height: 100%;
  background: var(--ert-bg);
  overflow: hidden;              /* scrolluje jen <main>, ne dokument */
  scroll-behavior: smooth;
}

body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--ert-font-ui);
  color: var(--ert-ink);
  background: var(--ert-bg);
  -webkit-font-smoothing: antialiased;
}

.container {
  width: min(1180px, 100% - 2rem);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

a { color: var(--ert-navy); }
/* #endregion */

/* #region Pozadí — fixní vrstva */
.bg-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,58,92,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,58,92,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
}
.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
}
.bg-glow--1 { width: 46vw; height: 46vw; right: -12vw; top: -10vw; background: rgba(143,195,232,.7); }
.bg-glow--2 { width: 34vw; height: 34vw; left: -10vw; bottom: -12vw; background: rgba(26,58,92,.25); }
/* #endregion */

/* #region Létající ikonky na pozadí */
/* Fixní vrstva nad gridem, pod obsahem. Animuje se jen transform + opacity (GPU),
   každá ikonka má vlastní dráhu přes CSS proměnné: --y výška, --s velikost,
   --d doba přeletu, --dl zpoždění (záporné = start uprostřed dráhy), --dy svislý drift, --rot rotace. */
.bg-icons {
  position: fixed; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-icon {
  position: absolute;
  left: 0;
  top: var(--y, 50%);
  width: var(--s, 64px); height: var(--s, 64px);
  color: var(--ert-navy);
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;   /* Tabler = 24px grid, stroke 2 */
  opacity: 0;
  will-change: transform, opacity;
  animation: flyRight var(--d, 60s) linear var(--dl, 0s) infinite;
}
.bg-icon--rev { animation-name: flyLeft; }
@keyframes flyRight {
  0%   { transform: translate(-15vw, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--o, .13); }
  92%  { opacity: var(--o, .13); }
  100% { transform: translate(112vw, var(--dy, 0px)) rotate(var(--rot, 40deg)); opacity: 0; }
}
@keyframes flyLeft {
  0%   { transform: translate(112vw, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--o, .13); }
  92%  { opacity: var(--o, .13); }
  100% { transform: translate(-15vw, var(--dy, 0px)) rotate(var(--rot, -40deg)); opacity: 0; }
}
.bg-icon--1  { --y: 14%; --s: clamp(44px, 7vmin, 96px);   --d: 75s;  --dl: -20s; --dy: 60px;  --rot: 25deg; }
.bg-icon--2  { --y: 68%; --s: clamp(60px, 11vmin, 150px); --d: 95s;  --dl: -60s; --dy: -80px; --rot: 180deg; --o: .09; }
.bg-icon--3  { --y: 36%; --s: clamp(36px, 5.5vmin, 76px); --d: 62s;  --dl: -10s; --dy: 40px;  --rot: 90deg; }
.bg-icon--4  { --y: 82%; --s: clamp(40px, 6.5vmin, 88px); --d: 70s;  --dl: -45s; --dy: -30px; --rot: -20deg; }
.bg-icon--5  { --y: 24%; --s: clamp(52px, 9vmin, 124px);  --d: 88s;  --dl: -70s; --dy: 90px;  --rot: 15deg; --o: .10; }
.bg-icon--6  { --y: 55%; --s: clamp(32px, 5vmin, 66px);   --d: 58s;  --dl: -30s; --dy: -50px; --rot: 300deg; }
.bg-icon--7  { --y: 44%; --s: clamp(48px, 8vmin, 110px);  --d: 80s;  --dl: -5s;  --dy: 30px;  --rot: -15deg; --o: .11; }
.bg-icon--8  { --y: 90%; --s: clamp(40px, 6vmin, 82px);   --d: 66s;  --dl: -50s; --dy: -70px; --rot: 30deg; }
.bg-icon--9  { --y: 8%;  --s: clamp(34px, 5.2vmin, 72px); --d: 54s;  --dl: -25s; --dy: 50px;  --rot: -240deg; }
.bg-icon--10 { --y: 62%; --s: clamp(70px, 13vmin, 180px); --d: 110s; --dl: -85s; --dy: -40px; --rot: -20deg; --o: .08; }
.bg-icon--11 { --y: 30%; --s: clamp(30px, 4.4vmin, 60px); --d: 50s;  --dl: -40s; --dy: -60px; --rot: 45deg; }
.bg-icon--12 { --y: 76%; --s: clamp(44px, 7vmin, 96px);   --d: 84s;  --dl: -15s; --dy: 70px;  --rot: 120deg; }
/* polovina letí zprava doleva */
.bg-icon--2, .bg-icon--4, .bg-icon--6, .bg-icon--8, .bg-icon--10, .bg-icon--12 { animation-name: flyLeft; }

@media (max-width: 767.98px) {
  .bg-icon { --o: .10; }
  .bg-icon--2, .bg-icon--5, .bg-icon--7, .bg-icon--9, .bg-icon--10, .bg-icon--12 { display: none; }  /* na telefonu stačí 6 */
}
/* Statická varianta (reduced-motion nebo třída html.icons-static): rozmístění v % obou os,
   velikost ve vmin → funguje na telefonu, tabletu na výšku i ultrawide. */
@media (prefers-reduced-motion: reduce) {
  .bg-icon { animation: none; opacity: var(--o-static, .10); transform: rotate(var(--rot-static, 0deg)); left: var(--x, 50%); }
}
html.icons-static .bg-icon { animation: none; opacity: var(--o-static, .10); transform: rotate(var(--rot-static, 0deg)); left: var(--x, 50%); }
.bg-icon--1  { --x: 6%;  --rot-static: -12deg; }
.bg-icon--2  { --x: 84%; --rot-static: 15deg;  --o-static: .07; }
.bg-icon--3  { --x: 22%; --rot-static: 8deg; }
.bg-icon--4  { --x: 64%; --rot-static: -6deg; }
.bg-icon--5  { --x: 90%; --rot-static: 10deg; }
.bg-icon--6  { --x: 40%; --rot-static: 25deg; }
.bg-icon--7  { --x: 12%; --rot-static: -8deg; }
.bg-icon--8  { --x: 50%; --rot-static: 12deg; }
.bg-icon--9  { --x: 72%; --rot-static: -20deg; }
.bg-icon--10 { --x: 30%; --rot-static: 6deg;   --o-static: .06; }
.bg-icon--11 { --x: 56%; --rot-static: 18deg; }
.bg-icon--12 { --x: 78%; --rot-static: -10deg; }
/* #endregion */

/* #region Header — stejná kostra jako ElMetal .site-header */
.site-header {
  flex: 0 0 auto;
  min-height: var(--ert-header-h);
  background: var(--ert-navy);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: clamp(8px, 1.5vw, 16px);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.2vw, .9rem);
  line-height: 1;
  text-decoration: none;
  min-width: 0;
}
.site-brand__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.site-logo {
  height: clamp(36px, 5vw, 54px);
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.site-title {
  color: #fff;
  font-family: var(--ert-font-brand);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  letter-spacing: .5px;
  white-space: nowrap;
}
.site-title__accent { color: var(--ert-accent); font-weight: 500; margin-left: .15em; }
.site-tagline {
  color: rgba(255,255,255,.7);
  font-size: clamp(.78rem, 1.15vw, .95rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: .3rem;
}

.site-nav { display: flex; gap: .25rem; margin-left: auto; }
.site-nav__link {
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  padding: .6rem 1.1rem;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.site-nav__link:hover { color: #fff; background: rgba(255,255,255,.08); }
.site-nav__link.is-active { color: #fff; border-bottom-color: var(--ert-accent); border-radius: 6px 6px 0 0; }

.site-actions { display: flex; align-items: center; gap: 1.25rem; }

.site-actions .btn { font-size: 1.05rem; padding: .65rem 1.2rem; }   /* v0.14: větší hlavička */
@media (max-width: 767.98px) {
  .site-nav {
    order: 3; width: 100%; margin-left: 0; justify-content: center;
    border-top: 1px solid rgba(255,255,255,.12); padding-top: .4rem;
  }
  .site-title { font-size: 1.45rem; }
  .btn__label { display: none; }
  .site-header .container { gap: .45rem 1rem; flex-wrap: wrap; }
  .site-brand { flex: 1 1 auto; }
  .site-tagline { font-size: .6rem; letter-spacing: 1.2px; margin-top: .2rem; }
  .site-nav { padding-top: .25rem; gap: 0; }
  .site-nav__link { font-size: 1rem; padding: .4rem .8rem; }
  .site-actions .btn { padding: .5rem .7rem; font-size: 1rem; }
}
/* #endregion */

/* #region Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn--outline { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; }
.btn--outline:hover { background: #fff; color: var(--ert-navy); border-color: #fff; }
.btn--primary { background: var(--ert-navy); color: #fff; border-color: var(--ert-navy); }
.btn--primary:hover { background: var(--ert-navy-dark); border-color: var(--ert-navy-dark); }
.btn--ghost { color: var(--ert-navy); border-color: rgba(26,58,92,.35); background: rgba(255,255,255,.4); }
.btn--ghost:hover { background: #fff; border-color: var(--ert-navy); }
/* #endregion */

/* #region Swipe panely */
.site-main {
  flex: 1 1 auto;
  min-height: 0;                          /* nutné, aby flex dítě mohlo scrollovat */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  position: relative;
  z-index: 1;
  scrollbar-width: none;
}
.site-main::-webkit-scrollbar { display: none; }

.panel {
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-block: clamp(2rem, 6vh, 5rem);
}
.panel__inner { max-width: 760px; }
.panel--hero .panel__inner { max-width: 940px; }
.panel--hero .lead { max-width: 62ch; }
.panel__title, .page-intro__title { text-wrap: balance; }
.nowrap { white-space: nowrap; }
/* na užších displejích jsou panely vyšší než okno — mandatory snap by v nich bránil scrollu */
@media (max-width: 991.98px) { .site-main { scroll-snap-type: y proximity; } .panel { scroll-snap-stop: normal; } }

.eyebrow {
  font-family: var(--ert-font-brand);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ert-accent-ink);
  margin: 0 0 1rem;
}
.panel__title {
  font-family: var(--ert-font-brand);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.08;
  color: var(--ert-navy);
  margin: 0 0 1.5rem;
  letter-spacing: -.5px;
}
.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--ert-ink);
  margin: 0 0 1.75rem;
  max-width: 62ch;
}
.lead--muted { color: var(--ert-muted); }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.swipe-hint {
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  color: var(--ert-muted);
  text-decoration: none;
  font-size: .75rem; letter-spacing: 3px; text-transform: uppercase;
  animation: hintBob 1.8s ease-in-out infinite;
}
.swipe-hint i { font-size: 1.2rem; }
@keyframes hintBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .swipe-hint { animation: none; } html { scroll-behavior: auto; } }

/* poslední panel = kontakt + patička dole */
.panel--contact { justify-content: center; padding-bottom: 0; }
.contact {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-bottom: clamp(2rem, 6vh, 5rem);
}
.contact__intro .lead { margin-bottom: 1.25rem; }
.contact-facts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: .5rem; color: var(--ert-muted); font-size: .95rem; }
.contact-facts i { color: var(--ert-accent-2); margin-right: .5rem; }

.contact-form {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(26,58,92,.14);
  border-radius: 12px;
  padding: clamp(1rem, 2.4vw, 1.75rem);
  box-shadow: 0 12px 32px -18px rgba(18,41,63,.4);
  backdrop-filter: blur(6px);
}
.chips { border: 0; padding: 0; margin: 0 0 1.1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips__legend { width: 100%; font-family: var(--ert-font-brand); font-weight: 600; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ert-accent-ink); margin-bottom: .6rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(26,58,92,.3);
  background: rgba(255,255,255,.5);
  color: var(--ert-navy);
  font-size: .88rem; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  user-select: none;
}
.chip span i { font-size: 1em; opacity: .8; }
.chip:hover span { border-color: var(--ert-navy); background: #fff; }
.chip input:checked + span { background: var(--ert-navy); color: #fff; border-color: var(--ert-navy); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(79,163,227,.4); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: .8rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ert-muted); }
.field__label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field textarea {
  font: inherit; font-size: .95rem;
  padding: .6rem .75rem;
  border: 1px solid rgba(26,58,92,.25);
  border-radius: 6px;
  background: #fff;
  color: var(--ert-ink);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ert-accent-2); box-shadow: 0 0 0 3px rgba(79,163,227,.25); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #c0392b; }
.consent { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; font-size: .82rem; color: var(--ert-muted); cursor: pointer; }
.consent input { margin-top: .2rem; accent-color: var(--ert-navy); }
.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-actions .btn { border: 0; font: inherit; font-weight: 600; }
.form-note { font-size: .8rem; color: var(--ert-muted); }
.form-note.is-error { color: #c0392b; }

@media (max-width: 991.98px) {
  .contact { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; padding-top: 1rem; }
  .panel--contact { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
  .form-grid { grid-template-columns: 1fr; }
  .chip span { font-size: .8rem; padding: .35rem .7rem; }
}
.contact-mail {
  font-family: var(--ert-font-brand);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 600;
  text-decoration: none;
  color: var(--ert-navy);
  display: inline-flex; align-items: center; gap: .6rem;
}
.contact-mail:hover { color: var(--ert-navy-dark); text-decoration: underline; }
/* #endregion */

/* #region Projekty — dlaždice kategorií */
.panel--projects { justify-content: center; }
.panel__title--sm { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom: clamp(1rem, 3vh, 2rem); }

.cat-menu__hint {
  color: var(--ert-muted);
  font-size: .92rem;
  margin: -0.6rem 0 1.1rem;
}

/* #region Karusel kategorií */
/* Aktivní snímek je uprostřed a o kousek větší, sousedé se ke krajům ztrácejí.
   Šířka snímku je jediný zdroj pravdy — počítá se z ní i vnitřní odsazení pásu,
   aby se první a poslední snímek daly vycentrovat stejně jako ostatní. */
.carousel { position: relative; --slide-w: clamp(250px, 40vw, 440px); }

.carousel__track {
  display: flex;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  padding-inline: calc((100% - var(--slide-w)) / 2);
  padding-block: .6rem .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--ert-accent-2); outline-offset: 4px; border-radius: var(--ert-radius); }

.slide {
  --d: 0;                                  /* vzdálenost od středu pásu, 0 = aktivní */
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(26,58,92,.13);
  border-radius: var(--ert-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transform: scale(calc(1 - .11 * min(var(--d), 1)));
  opacity: calc(1 - .55 * min(var(--d), 1));
  box-shadow: 0 calc(14px * (1 - min(var(--d), 1))) calc(32px * (1 - min(var(--d), 1))) rgba(12,28,44,.18);
  transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease, border-color .2s;
  will-change: transform, opacity;
}
.slide:hover, .slide:focus-visible { border-color: var(--ert-accent-2); outline: none; }
.slide:focus-visible { outline: 2px solid var(--ert-accent-2); outline-offset: 3px; }

.slide__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ert-navy-dark); }
.slide__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(calc(.6 + .4 * (1 - min(var(--d), 1)))) contrast(1.02);
  transition: transform .5s ease, filter .35s;
}
.slide:hover .slide__img img { transform: scale(1.05); }
.slide__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,41,63,.05) 40%, rgba(18,41,63,.62));
}
.slide__icon {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 1;
  display: grid; place-items: center;
  width: 38px; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ert-navy);
}
.slide__icon svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 2; }
.slide__body { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem 1rem; }
.slide__title {
  font-family: var(--ert-font-brand); font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.16rem); color: var(--ert-navy);
  display: flex; align-items: center; gap: .2rem;
}
.slide__title i { color: var(--ert-accent-2); font-size: 1.25em; transition: transform .25s; }
.slide:hover .slide__title i { transform: translateX(4px); }
.slide__desc { font-size: .84rem; line-height: 1.45; color: var(--ert-muted); }

.carousel__bar {
  height: 3px; margin-top: .5rem; border-radius: 2px;
  background: rgba(26,58,92,.14); overflow: hidden;
}
.carousel__bar i { display: block; height: 100%; width: 0; background: var(--ert-accent-2); }
.carousel.is-stopped .carousel__bar { opacity: 0; }

.carousel__nav { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; }
.cbtn {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  border: 1px solid rgba(26,58,92,.2); border-radius: 50%;
  background: rgba(255,255,255,.75); color: var(--ert-navy);
  font-size: 1rem; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.cbtn:hover, .cbtn:focus-visible { background: var(--ert-navy); color: #fff; border-color: var(--ert-navy); outline: none; }
.cbtn--play { margin-left: auto; }
.carousel__dots { display: flex; gap: .4rem; align-items: center; }
.dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(26,58,92,.24); transition: background .2s, transform .2s;
}
.dot.is-on { background: var(--ert-navy); transform: scale(1.35); }
.dot:focus-visible { outline: 2px solid var(--ert-accent-2); outline-offset: 3px; }

@media (max-width: 575.98px) {
  /* užší snímek a mírnější maska — jinak by se sousedé na telefonu ztratili úplně
     a zmizel by signál, že se dá swipovat */
  .carousel { --slide-w: clamp(215px, 66vw, 290px); }
  .carousel__track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .carousel__nav { gap: .35rem; }
}
/* v0.14 — tichý přeskok z klonu na skutečnou kartu (cyklický pás) */
.carousel.is-jumping .slide, .carousel.is-jumping .slide__img img { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  .slide, .slide__img img { transition: none; }
}
/* #endregion */

/* #region Reveal — stagger po skončení loaderu (jen s JS; bez JS je obsah vidět hned) */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); animation: revealAuto 0s linear 6.5s forwards; /* pojistka bez script.js */ }
@keyframes revealAuto { to { opacity: 1; transform: none; } }
.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }
html.is-ready .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* #endregion */

/* #region Loader — bohatší než ElMetal (dva diagonální panely + „servo" značka + status) */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: all;
  font-family: var(--ert-font-brand);
  /* pojistka bez JS: po 6 s loader zmizí sám, i kdyby script.js nedoběhl */
  animation: loaderAutoHide 0s linear 6s forwards;
}
html.no-js #loader, html.loader-skip #loader { display: none; }
html.loader-skip .reveal { transition: none; }
@keyframes loaderAutoHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.loader-panel {
  position: absolute; inset: 0;
  background: var(--ert-navy);
  transition: transform .8s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.loader-panel--top    { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 58%); }
.loader-panel--bottom { clip-path: polygon(0 56%, 100% 42%, 100% 100%, 0 100%); background: var(--ert-navy-dark); }
/* jemný rastr na panelech */
.loader-panel::before {
  content: ""; position: absolute; inset: 0;
  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: 48px 48px;
}
/* světelný „šev" na diagonále */
.loader-panel--top::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ert-accent), transparent);
  transform: rotate(-4deg); opacity: .5;
}

.loader-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem;
  transition: opacity .3s ease, transform .3s ease;
}

.loader-mark { width: clamp(84px, 12vw, 120px); height: auto; overflow: visible; }
.loader-ring { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 2; transform-origin: 60px 60px; }
.loader-ring--outer { stroke-dasharray: 28 10 6 10; stroke: var(--ert-accent); animation: spin 3.2s linear infinite; }
.loader-ring--mid   { stroke-dasharray: 4 8; animation: spin 2.1s linear infinite reverse; }
.loader-hex { fill: rgba(143,195,232,.08); stroke: rgba(255,255,255,.55); stroke-width: 1.5; transform-origin: 60px 60px; animation: hexPulse 1.6s ease-in-out infinite; }
.loader-arm { stroke: #fff; stroke-width: 3; stroke-linecap: round; fill: #fff; transform-origin: 60px 60px; animation: armSweep 1.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hexPulse { 50% { transform: scale(1.06); fill: rgba(143,195,232,.18); } }
@keyframes armSweep { 0% { transform: rotate(-70deg); } 50% { transform: rotate(70deg); } 100% { transform: rotate(-70deg); } }

.loader-title {
  display: flex; gap: .35em; align-items: baseline;
  color: #fff;
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  padding-inline: .2em;
}
.loader-word { display: inline-flex; }
.loader-word--accent { color: var(--ert-accent); font-weight: 500; }
.loader-word span {
  display: inline-block;
  opacity: 0; transform: translateY(110%);
  animation: letterIn .55s cubic-bezier(.2,.7,.2,1) forwards;
}
.loader-word span:nth-child(1) { animation-delay: .25s; } .loader-word span:nth-child(2) { animation-delay: .30s; }
.loader-word span:nth-child(3) { animation-delay: .35s; } .loader-word span:nth-child(4) { animation-delay: .40s; }
.loader-word span:nth-child(5) { animation-delay: .45s; } .loader-word span:nth-child(6) { animation-delay: .50s; }
.loader-word span:nth-child(7) { animation-delay: .55s; } .loader-word span:nth-child(8) { animation-delay: .60s; }
.loader-word--accent span:nth-child(1) { animation-delay: .45s; } .loader-word--accent span:nth-child(2) { animation-delay: .50s; }
.loader-word--accent span:nth-child(3) { animation-delay: .55s; } .loader-word--accent span:nth-child(4) { animation-delay: .60s; }
.loader-word--accent span:nth-child(5) { animation-delay: .65s; } .loader-word--accent span:nth-child(6) { animation-delay: .70s; }
.loader-word--accent span:nth-child(7) { animation-delay: .75s; } .loader-word--accent span:nth-child(8) { animation-delay: .80s; }
@keyframes letterIn { to { opacity: 1; transform: none; } }
/* scan přes titulek */
.loader-title::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: scan 1.4s ease-in-out 1s infinite;
}
@keyframes scan { to { left: 110%; } }

.loader-bar { width: min(260px, 60vw); height: 3px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ert-accent-2), var(--ert-accent)); transition: width .4s ease; }
.loader-status {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  min-height: 1.2em;
}
.loader-status::before { content: "▸ "; color: var(--ert-accent); }

/* exit */
#loader.exit { pointer-events: none; }
#loader.exit .loader-content { opacity: 0; transform: scale(.96); }
#loader.exit .loader-panel--top    { transform: translate(-10vw, -115vh); }
#loader.exit .loader-panel--bottom { transform: translate(10vw, 115vh); }
#loader.done { display: none; }

@media (prefers-reduced-motion: reduce) {
  .loader-ring, .loader-hex, .loader-arm, .loader-word span, .loader-title::after { animation: none; }
  .loader-word span { opacity: 1; transform: none; }
  .loader-panel, .loader-content { transition: none; }
}
/* #endregion */

/* #region Podstránky kategorií (běžný scroll, žádný snap) */
html.page { overflow: auto; height: auto; }
html.page body { height: auto; min-height: 100vh; }
.page-main { flex: 1 0 auto; position: relative; z-index: 1; }
.page-hero {
  position: relative;
  min-height: clamp(220px, 38vh, 420px);
  background: var(--ert-navy-dark);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.8); }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,41,63,.1), rgba(18,41,63,.85)); }
.page-hero .container { position: relative; z-index: 1; padding-block: 2rem; }
.page-hero .eyebrow { color: var(--ert-accent); }
.page-hero .panel__title { color: #fff; margin-bottom: .5rem; }
.page-body { padding-block: clamp(2rem, 5vh, 3.5rem); }
.page-body .lead { max-width: 70ch; }
.placeholder-box {
  border: 1px dashed rgba(26,58,92,.35);
  border-radius: var(--ert-radius);
  background: rgba(255,255,255,.45);
  padding: 1.5rem;
  color: var(--ert-muted);
  display: flex; gap: 1rem; align-items: flex-start;
  max-width: 70ch;
}
.placeholder-box i { font-size: 1.6rem; color: var(--ert-accent-2); }
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.proj {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(26,58,92,.14);
  border-left: 4px solid var(--ert-navy);
  border-radius: var(--ert-radius);
  padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.proj__title { font-family: var(--ert-font-brand); font-weight: 600; font-size: 1.1rem; color: var(--ert-navy); margin: 0; }
.proj__text { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--ert-ink); }
.proj__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.proj__tags span { font-size: .72rem; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; color: var(--ert-navy); background: rgba(26,58,92,.08); border-radius: 4px; padding: .15rem .45rem; }
.page-body .lead--muted { margin-top: 1.5rem; font-size: .9rem; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 2rem; font-weight: 600; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.page-footer { flex: 0 0 auto; }
/* #endregion */

/* #region Footer — tmavší modrá než hlavička (rozhodnutí z ElMetalu) */
.site-footer {
  flex: 0 0 auto;
  background: var(--ert-navy-dark);
  color: rgba(255,255,255,.65);
  font-size: .82rem;
  margin-top: auto;
  width: 100%;
}
.site-footer__inner {
  display: flex; justify-content: space-between; gap: .9rem 2rem; flex-wrap: wrap;
  padding-block: 1.1rem;
}
/* v0.13 — oficiální firemní údaje (sídlo, IČ/DIČ, zápis v OR, telefon) */
.site-footer__col {
  display: flex; flex-direction: column; gap: .15rem;
  font-style: normal; line-height: 1.45;
}
.site-footer__name { color: #fff; font-weight: 600; }
.site-footer__col--end { text-align: right; }
@media (max-width: 767px) {
  .site-footer__inner { flex-direction: column; gap: .7rem; padding-block: .9rem; }
  .site-footer__col--end { text-align: left; }
}
.site-footer a { color: var(--ert-accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
/* #endregion */

/* #region Logo — úzké displeje */
@media (max-width: 420px) {
  .site-logo { display: none; }
}
/* #endregion */

/* #region Kategoriální stránka — intro + skládací motiv */
.page-intro {
  padding-block: clamp(3rem, 12vh, 7rem) clamp(1rem, 4vh, 2.5rem);
  text-align: center;
}
.page-intro__title {
  font-family: var(--ert-font-brand);
  font-weight: 700;
  color: var(--ert-navy);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.1;
  margin: .3rem 0 1rem;
}
.page-intro .lead { max-width: 62ch; margin-inline: auto; }
.page-intro__hint {
  margin-top: clamp(1.4rem, 5vh, 3rem);
  color: var(--ert-muted);
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.page-intro__hint i { display: block; font-size: 1.3rem; animation: hintBobY 2s ease-in-out infinite; }
@keyframes hintBobY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

.story { position: relative; }

/* Motiv zůstává přišpendlený uprostřed, kroky se přes něj posouvají. */
.story__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  z-index: 0;
  pointer-events: none;
}
.story__svgwrap { display: grid; place-items: center; }
.story__svg {
  width: clamp(280px, 46vw, 560px);
  height: auto;
  color: var(--ert-navy);
  overflow: visible;
}

.story__steps {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100svh;
  display: grid;
  gap: clamp(26vh, 34vh, 46vh);
  padding-block: 30vh 18vh;
}

.step {
  width: min(38ch, 44%);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  border: 1px solid rgba(26,58,92,.13);
  border-left: 3px solid var(--ert-accent-2);
  border-radius: var(--ert-radius);
  padding: clamp(.95rem, 2vw, 1.3rem) clamp(1.05rem, 2.2vw, 1.45rem);
  box-shadow: 0 8px 26px rgba(12,28,44,.09);
  position: relative;
}
.story__steps .step:nth-child(even) { justify-self: end; }
.step__n {
  position: absolute;
  top: -.75rem;
  left: 1rem;
  font-family: var(--ert-font-brand);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: 1px;
  color: #fff;
  background: var(--ert-navy);
  border-radius: 999px;
  padding: .18rem .55rem;
}
.step__title {
  font-family: var(--ert-font-brand);
  font-weight: 600;
  color: var(--ert-navy);
  font-size: clamp(1.05rem, 2.1vw, 1.32rem);
  line-height: 1.25;
  margin: .3rem 0 .5rem;
}
.step__text { margin: 0 0 .75rem; font-size: .92rem; line-height: 1.6; color: var(--ert-ink); }
.step__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.step__tags span {
  font-size: .72rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ert-navy);
  background: rgba(26,58,92,.08);
  border-radius: 999px;
  padding: .22rem .6rem;
}

/* Skládání: díly jsou skryté jen když běží JS (bez JS je vidět celý motiv). */
.story.is-live .story__svg > [data-part] {
  opacity: 0;
  transform: translate(calc(var(--fx, 0) * 1px), calc(var(--fy, 0) * 1px)) scale(.97);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
}
.story.is-live .story__svg > [data-part].is-on {
  opacity: 1;
  transform: none;
}

.page-outro { padding-block: clamp(1.5rem, 5vh, 3rem) clamp(2.5rem, 8vh, 5rem); }

@media (max-width: 991.98px) {
  .step { width: min(42ch, 58%); }
  .story__svg { width: clamp(240px, 52vw, 380px); }
}
@media (max-width: 767.98px) {
  .story__stage { opacity: .2; }
  .story__steps { gap: clamp(14vh, 20vh, 26vh); padding-block: 22vh 14vh; }
  .step, .story__steps .step:nth-child(even) { width: 100%; justify-self: stretch; }
  .story__svg { width: min(86vw, 380px); }
}
@media (prefers-reduced-motion: reduce) {
  .page-intro__hint i { animation: none; }
  .story.is-live .story__svg > [data-part] { opacity: 1; transform: none; transition: none; }
}
/* #endregion */

/* #region Kontaktní formulář — odeslání přes api/kontakt.php (v0.15) */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.privacy { font-size: .74rem; line-height: 1.45; color: var(--ert-muted); margin: .5rem 0 0; }
.privacy a { color: inherit; }
.form-note.is-ok { color: #1f7a4d; font-weight: 600; }
.form-note a { color: inherit; font-weight: 600; }
.contact-form button[disabled] { opacity: .6; cursor: progress; }
/* #endregion */

/* #region Kontakt — firemní údaje pod e-mailem (v0.16, duplicitně s patičkou záměrně) */
.contact-company { font-style: normal; margin: 1rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--ert-muted); }
.contact-company strong { color: var(--ert-navy); font-weight: 600; }
.contact-company a { color: var(--ert-navy); font-weight: 600; text-decoration: none; }
.contact-company a:hover { text-decoration: underline; }
.contact-company__reg { font-size: .85em; }
/* #endregion */