/* ============================================================
   FONTY
   ============================================================ */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/mulish-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/signika-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/signika-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   DESIGN SYSTEM – PROMĚNNÉ
   ============================================================ */
:root{
  /* barvy */
  --color-primary: #02454C;
  --color-secondary: #34D0D2;
  --color-accent: #F2D070;
  --color-accent-strong: #D1A52E;
  --color-background: #FFFFFF;
  --color-surface: #F2FAFA;
  --color-surface-hover: #E1EFF1;
  --color-surface-2: #E8F3F3;
  --color-mist: #E9F2F4;
  --color-ice: #BDE5EE;
  --color-border: #DCEBEB;
  --color-text: #333333;
  --color-muted: #8AA3A6;
  --gradient-box: linear-gradient(120deg, #E4F1EF 0%, #C4DFE2 100%);
  --gradient-box-light: linear-gradient(120deg, #F2FAFA 0%, #DCEBEC 100%);

  /* typografie */
  --font-heading: 'Signika', sans-serif;
  --font-body: 'Mulish', sans-serif;
  --fs-body: 1.125rem;      /* 18px */
  --fs-lead: 1.125rem;      /* 18px */
  --fs-small: 1rem;         /* 16px – minimum na webu */
  --fs-emphasis: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);   /* 20 → 24px */
  --lh-body: 1.65;
  --lh-heading: 1.15;
  --h1-size: clamp(2.5rem, 1.97rem + 2.25vw, 4rem);
  --h2-size: clamp(2.125rem, 1.9rem + 0.95vw, 2.75rem);
  --h3-lg-size: clamp(2.125rem, 1.9rem + 0.95vw, 2.75rem);
  --h3-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --h4-size: clamp(1.625rem, 1.4rem + 0.94vw, 2.25rem);      /* 26 → 36px */

  /* spacing škála */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 5rem;     /* 80px */
  --space-10: 6rem;    /* 96px */
  --space-11: 7.5rem;  /* 120px */
  --space-section: 6.25rem; /* 100px – tablet; desktop se přepisuje na 120px */

  /* zaoblení */
  --radius-box: 24px;
  --radius-card: 20px;
  --radius-field: 10px;
  --radius-pill: 999px;

  /* tlačítka */
  --btn-padding-y: 14px;
  --btn-padding-x: 30px;
  --btn-border-width: 1px;

  /* layout */
  --container-max: 1224px;
  --container-width: 85%;
  --header-height: 96px;

  /* ostatní */
  --shadow-soft: 0 24px 30px -20px rgba(2, 69, 76, 0.28);
  --transition-brush: 1s cubic-bezier(.55,.05,.35,1);
}

@media (min-width: 1025px){
  :root{ --space-section: 7.5rem; }
}

@media (min-width: 1920px){
  :root{
    --container-max: 1360px;
    --h1-size: clamp(2.5rem, 1.6rem + 2.1vw, 4.25rem);
    --h2-size: clamp(2.125rem, 1.73rem + 0.95vw, 2.875rem);
  }
}

/* ============================================================
   RESET / ZÁKLAD
   ============================================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6{ margin: 0; font-family: var(--font-heading); font-weight: 700; line-height: var(--lh-heading); color: var(--color-primary); }
p{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
img{ display: block; max-width: 100%; height: auto; }
a{ color: var(--color-primary); text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
section[id]{ scroll-margin-top: 84px; }

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

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

/* ============================================================
   LAYOUT – KONTEJNER
   ============================================================ */
.jd-wrap{
  width: var(--container-width);
  max-width: var(--container-max);
  margin: 0 auto;
}
.jd-sec{
  width: 100%;
  background: var(--color-background);
  padding: var(--space-section) 0 0;
  box-sizing: border-box;
}
.jd-sec-head{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 48rem;
}
.jd-eyebrow{
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.jd-lead{
  font-size: var(--fs-lead);
  line-height: 1.7;
}

/* ============================================================
   TYPOGRAFIE – NADPISY
   ============================================================ */
.jd-h1{ font-size: var(--h1-size); letter-spacing: -0.01em; }
.jd-h2{ font-size: var(--h2-size); }
.jd-h3big{ font-size: var(--h3-lg-size); }
.jd-card h3{ font-size: var(--h3-size); }

.jd-highlight{
  background: linear-gradient(transparent 58%, var(--color-accent) 58%, var(--color-accent) 92%, transparent 92%);
  padding: 0 0.25em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.jd-nowrap{ white-space: nowrap; }

/* ============================================================
   BRUSH (prvky kreslené štětcem)
   ============================================================ */
.jd-brush path{
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--transition-brush);
  transition-delay: var(--d, 0s);
}
.jd-brush.is-on path{ stroke-dashoffset: 0; }
.jd-brush.jd-slow path{ transition-duration: 1.8s; transition-timing-function: cubic-bezier(.45,.05,.35,1); }
.jd-delay-1{ --d: 0.2s; }
.jd-delay-2{ --d: 1.3s; }
.jd-delay-3{ --d: 2.4s; }
.jd-delay-4{ --d: 3.5s; }
.jd-delay-cta-arrow{ --d: 0.4s; }
.jd-delay-cta-arrow .jd-delay-cta-tip{ transition-delay: 1.2s; transition-duration: .6s; }
@keyframes jdCtaStrokeVisible{ to{ opacity: 1; } }
.jd-delay-cta-arrow > path{ opacity: 0; }
.jd-delay-cta-arrow.is-on > path{
  animation: jdCtaStrokeVisible 0s linear var(--d) forwards;
}
.jd-delay-cta-arrow.is-on > .jd-delay-cta-tip{ animation-delay: 1.2s; }

.signature{
  display: block;
  width: 7.5rem;
  height: auto;
  overflow: visible;
  transform: rotate(-3deg);
}
.signature__reveal{
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 2.4s cubic-bezier(.45,.05,.4,1) .4s;
}
.signature.is-visible .signature__reveal{ transform: scaleX(1); }
.signature__underline{
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s cubic-bezier(.45,.05,.35,1) 2.5s;
}
.signature.is-visible .signature__underline{ stroke-dashoffset: 0; }

.jd-ul{
  position: absolute;
  left: -3px; right: -3px; bottom: -8px;
  width: calc(100% + 6px);
  height: 10px;
  display: block;
  overflow: visible;
}
.jd-ul path{
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset .5s cubic-bezier(.45,.05,.35,1), opacity 0s linear .5s;
}
.jd-btn .jd-ul{ bottom: -7px; }
.jd-btn-draw:hover .jd-ul path,
.jd-btn-draw:focus-visible .jd-ul path{
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.3,.1,.3,1), opacity 0s;
}
.jd-btn--link .jd-ul path{ stroke-dashoffset: 0; opacity: 1; }

/* ============================================================
   TLAČÍTKA
   ============================================================ */
.jd-btn{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--radius-field);
  border: var(--btn-border-width) solid transparent;
  text-align: center;
}
.jd-btn-draw{ position: relative; }
.jd-btn-draw > span{ position: relative; display: inline-block; }

.jd-btn--primary{ background: var(--color-primary); color: #FFFFFF; }
.jd-btn--outline{ background: transparent; color: var(--color-primary); border-color: var(--color-primary); padding: calc(var(--btn-padding-y) - var(--btn-border-width)) calc(var(--btn-padding-x) - var(--btn-border-width)); }
.jd-hero-box .jd-btn--outline{ background: var(--color-background); }
.jd-btn--accent{ background: var(--color-accent); color: var(--color-primary); border: 0; }
.jd-form .jd-btn--accent .jd-ul path{ stroke: #FFFFFF; }
.jd-btn--block{ display: block; width: 100%; }
.jd-btn--link{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-weight: 700;
  font-size: 1.125rem;
  white-space: nowrap;
}
.jd-link-arrow{ flex: none; width: 1.125rem; height: 1.125rem; transform: rotate(-2deg); transition: transform .25s ease; }
.jd-btn--link:hover .jd-link-arrow,
.jd-btn--link:focus-visible .jd-link-arrow{ transform: rotate(-2deg) translate(2px, -2px); }
.jd-link-arrow-down{ flex: none; width: 1.25rem; height: 1.25rem; transform: rotate(135deg); transition: transform .25s ease; }
.jd-btn--link:hover .jd-link-arrow-down,
.jd-btn--link:focus-visible .jd-link-arrow-down{ transform: translateY(2px) rotate(135deg); }

/* ============================================================
   HLAVIČKA
   ============================================================ */
.jd-head{
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: var(--header-height);
  margin-bottom: calc(var(--header-height) * -1);
  background: transparent;
  box-sizing: border-box;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.jd-head.is-scrolled,
.jd-head.is-open{
  background: var(--color-background);
}
.jd-head .jd-wrap{
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
}
.jd-logo{ display: block; height: 38px; width: auto; }

.jd-burger{
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: var(--radius-field);
  background: var(--color-mist);
  color: var(--color-primary);
  padding: 0;
}

.jd-nav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) 2.4rem;
}
.jd-nav-link{
  color: var(--color-primary);
  font-weight: 800;
  font-size: calc(var(--fs-small) + 1px);
  padding: var(--space-2) 0;
}
.jd-nav .jd-btn--primary{
  font-size: calc(var(--fs-small) + 1px);
  padding: 11px 25px;
}

/* ============================================================
   1 HERO
   ============================================================ */
#uvod{
  padding: 6.5rem 0 0;
}
.jd-hero-wrap{ position: relative; }
.jd-hero-box{
  position: relative;
  overflow: hidden;
  background: var(--gradient-box);
  border-radius: var(--radius-box);
  min-height: 620px;
  box-sizing: border-box;
  padding: calc(var(--space-8) - var(--space-1)) var(--space-8) var(--space-9);
  display: flex;
  align-items: center;
}
.jd-hero-text{
  width: 58%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  z-index: 2;
}
.jd-tag{ font-family: var(--font-heading); font-weight: 600; font-size: 1.375rem; line-height: 1.4; color: var(--color-primary); }
.jd-btns{ display: flex; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-2); }
.jd-hero-controls{
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(2,69,76,.18);
  box-sizing: border-box;
}
.jd-hero-controls-label{
  flex: none;
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1.25;
  color: var(--color-primary);
  white-space: nowrap;
}
.jd-hero-options{
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.jd-hero-options::-webkit-scrollbar{ display: none; }
.jd-hero-option{
  position: relative;
  flex: none;
  padding: 0 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  opacity: .58;
  cursor: pointer;
  transition: opacity .2s ease;
}
.jd-hero-option::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform: scaleX(0) rotate(-1.5deg);
  transform-origin: left;
  transition: transform .25s ease;
}
.jd-hero-option:hover{ opacity: .82; }
.jd-hero-option[aria-current="true"]{ font-weight: 700; opacity: 1; }
.jd-hero-option[aria-current="true"]::after{ transform: scaleX(1) rotate(-1.5deg); }
.jd-hero-option:focus-visible{ outline: 3px solid var(--color-accent); outline-offset: 3px; }

.jd-hero-slider{
  position: absolute;
  right: var(--space-6);
  bottom: 0;
  height: 600px;
  width: auto;
  display: block;
}
.jd-hero-slider picture{ display: contents; }
.jd-hero-slider img{ height: 100%; width: auto; display: block; }
.jd-hero-slider img:not(.is-active){ display: none; }

@media (min-width: 1025px){
  .jd-hero-box{ overflow: visible; }
  .jd-hero-controls{
    position: absolute;
    right: auto;
    bottom: var(--space-5);
    left: var(--space-8);
    width: max-content;
    max-width: calc(100% - (2 * var(--space-8)));
  }
  .jd-hero-slider{
    right: calc(-1 * var(--space-10));
    height: calc(600px + var(--space-9));
  }
}

/* ============================================================
   2 MOŽNÁ TO ZNÁTE – to-do list v boxu + lísteček
   ============================================================ */
.pains{
  padding: var(--space-section) 0 0;
  background: var(--color-background);
}
.pains__inner{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--space-7);
}
.pains__title{
  max-width: 35rem;
  text-align: left;
  font-size: var(--h2-size);
  line-height: var(--lh-heading);
  color: var(--color-primary);
}
.pains__box-wrap{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.todo{ width: 100%; }
.todo__list{
  display: grid;
  grid-template-columns: minmax(0,1fr);
}
.todo__row{
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-ice);
}
.todo__row:first-child{
  padding-top: 0;
}
.todo__row:last-child{
  padding-bottom: 0;
  border-bottom: 0;
}
.todo__problem,
.todo__solution{
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}
.todo__problem .todo__title{
  font-size: var(--fs-body);
  line-height: 1.4;
  color: #5E7477; /* tmavší odstín tlumené barvy – splňuje kontrast WCAG AA (4,9:1 na bílé), --color-muted má jen 2,7:1 */
  font-weight: 600;
}
.todo__problem s{
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}
.todo__solution{
  margin-top: var(--space-4);
}
.todo__solution-head{
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-2);
}
.todo__solution .todo__title{
  font-size: var(--fs-lead);
  color: var(--color-primary);
  font-weight: 700;
}
.todo__title{
  line-height: 1.35;
  color: var(--color-primary);
  overflow-wrap: break-word;
}
.todo__text{
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  overflow-wrap: break-word;
}
.todo__check{
  display: block;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: var(--color-primary);
}
.todo__check-mark{
  stroke: var(--color-accent-strong);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.55,.05,.35,1);
}
.todo__row.is-visible .todo__check-mark{ stroke-dashoffset: 0; }
.pains.is-sequenced .todo__row:nth-child(1) .todo__check-mark{ stroke-dashoffset: 0; transition-delay: 0s; }
.pains.is-sequenced .todo__row:nth-child(2) .todo__check-mark{ stroke-dashoffset: 0; transition-delay: .95s; }
.pains.is-sequenced .todo__row:nth-child(3) .todo__check-mark{ stroke-dashoffset: 0; transition-delay: 1.9s; }
.pains.is-sequenced .todo__row:nth-child(4) .todo__check-mark{ stroke-dashoffset: 0; transition-delay: 2.85s; }
.sticky-note{
  position: relative;
  z-index: 2;
  width: min(20rem, calc(100% - 1rem));
  margin: var(--space-5) auto 0;
  padding: 1.75rem 1.125rem .5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .625rem;
  background: var(--color-accent);
  border-radius: 4px;
  box-shadow: 0 16px 26px -20px rgba(2,69,76,.28);
  transform: rotate(-2deg);
  color: var(--color-primary);
}
.sticky-note::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 80px;
  height: 20px;
  margin-left: -40px;
  background: rgba(220,235,235,.75);
  transform: rotate(2deg);
}
.sticky-note__text{
  max-width: 42rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  line-height: 1.35;
}
.sticky-note .signature{ align-self: flex-end; }
.sticky-note .signature__reveal{ transition-delay: 3.85s; }
.sticky-note .signature__underline{ transition-delay: 5.95s; }
.pains.is-sequenced .sticky-note .signature__reveal{ transform: scaleX(1); }
.pains.is-sequenced .sticky-note .signature__underline{ stroke-dashoffset: 0; }
@media (min-width: 768px){
  .todo__list{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .todo__row{ padding: var(--space-6); }
  .todo__row:first-child{ padding-top: var(--space-6); }
  .todo__row:last-child{ padding-bottom: var(--space-6); }
  .todo__row:nth-child(odd){ border-right: 1px solid var(--color-ice); }
  .todo__row:nth-child(n+3){ border-bottom: 0; }
  .sticky-note{ flex-direction: column; align-items: flex-start; padding: 1.75rem 1.125rem .5rem; }
}
@media (min-width: 768px) and (max-width: 1024px){
  .sticky-note{ margin-left: auto; margin-right: 0; }
}
@media (min-width: 1025px){
  .pains__inner{
    grid-template-columns: minmax(19rem,20rem) minmax(0,1fr);
    grid-template-areas:
      "title list"
      "note list";
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: clamp(var(--space-5), 3vw, var(--space-7));
  }
  .pains__title{
    grid-area: title;
    padding-top: var(--space-5);
  }
  .pains__box-wrap{ display: contents; }
  .todo{ grid-area: list; }
  .todo__row{ padding: var(--space-6); }
  .todo__row:first-child{ padding-top: var(--space-6); }
  .todo__row:last-child{ padding-bottom: var(--space-6); }
  .sticky-note{
    grid-area: note;
    flex-direction: column;
    align-items: flex-start;
    margin-top: var(--space-6);
  }
}
@media (prefers-reduced-motion: reduce){
  .todo__check-mark,
  .signature__reveal,
  .signature__underline{ transition: none; }
  .todo__check-mark{ stroke-dashoffset: 0; }
  .signature__reveal{ transform: none; }
  .signature__underline{ stroke-dashoffset: 0; }
}

/* ============================================================
   3 S ČÍM VÁM POMŮŽU
   ============================================================ */
.jd-services{
  padding: var(--space-section) 0 0;
  background: var(--color-background);
}
.jd-services-head{
  max-width: 47.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.jd-services-intro{
  font-size: var(--fs-body);
  line-height: 1.7;
}
.jd-services-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--space-4);
}
.jd-service-card{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  background: var(--gradient-box);
  border-radius: 22px;
  transition: background-color .3s ease;
}
.jd-service-card:hover{ background: var(--gradient-box); }
.jd-service-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex: none;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  color: var(--color-primary);
}
.jd-service-icon svg{ display: block; width: 2.25rem; height: 2.25rem; }
.jd-service-card h3{
  font-size: var(--fs-emphasis);
  line-height: 1.3;
}
.jd-service-card p{
  font-size: var(--fs-body);
  line-height: 1.6;
}
.jd-service-card--featured > div{
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
}
.jd-service-callout{
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(2,69,76,.22);
}
.jd-service-callout > .jd-service-icon{
  width: 2rem;
  height: 2rem;
  margin: 0;
  border-radius: 0;
  background: transparent;
}
.jd-service-callout > .jd-service-icon svg{ width: 1.75rem; height: 1.75rem; }
.jd-service-card .jd-service-callout-title{ margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.jd-service-callout > p{ grid-column: 1 / -1; }
.jd-services-cta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-5) 0 0;
}
@media (min-width: 768px){
  .jd-services-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-areas:
      "tall b"
      "tall c"
      "d e";
    gap: var(--space-5);
  }
  .jd-services-grid > :nth-child(1){ grid-area: tall; }
  .jd-services-grid > :nth-child(2){ grid-area: b; }
  .jd-services-grid > :nth-child(3){ grid-area: c; }
  .jd-services-grid > :nth-child(4){ grid-area: d; }
  .jd-services-grid > :nth-child(5){ grid-area: e; }
  .jd-service-card{ padding: 2.125rem var(--space-6) 2.25rem; }
  .jd-service-card--featured .jd-service-callout{ margin-top: var(--space-7); }
  .jd-services-cta{ padding: var(--space-6) 0 0; }
}
@media (min-width: 1200px){
  .jd-services-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
    grid-template-rows: auto auto;
    grid-template-areas:
      "tall b c"
      "tall d e";
  }
  .jd-service-card--featured .jd-service-callout{ margin-top: auto; }
}
@media (prefers-reduced-motion: reduce){
  .jd-service-card{ transition: none; }
}

/* ============================================================
   4 UKÁZKY PRÁCE
   ============================================================ */
.jd-ukazky{ display: flex; flex-direction: column; gap: var(--space-10); }
.jd-proj{
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(23rem,.88fr);
  grid-template-areas:
    "visual info"
    "visual quote";
  align-items: stretch;
  gap: var(--space-6) clamp(var(--space-7), 5vw, var(--space-10));
}
.jd-proj--reverse{
  grid-template-columns: minmax(23rem,.88fr) minmax(0,1.12fr);
  grid-template-areas:
    "info visual"
    "quote visual";
}
.jd-proj + .jd-proj{ padding-top: var(--space-10); }

.jd-proj-head{
  grid-area: info;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
}
.jd-proj-info{ min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.jd-proj-info p{ margin-top: var(--space-1); }
.jd-proj .jd-highlight{ padding: 0; background: none; }
.jd-proj-facts{ margin-top: var(--space-3); border-top: 1px solid var(--color-border); }
.jd-proj-facts > div{ display: grid; grid-template-columns: 8.5rem minmax(0,1fr); align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.jd-proj-facts dt{ color: var(--color-primary); font-size: var(--fs-body); font-weight: 700; }
.jd-proj-facts dd{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-primary); font-size: var(--fs-body); }
.jd-proj-meta{ display: flex; align-items: center; }
.jd-tech{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.jd-tech-label{ font-size: var(--fs-small); font-weight: 700; color: var(--color-primary); margin-right: 2px; }
.jd-pill{
  background: var(--color-mist);
  color: var(--color-primary);
  font-size: var(--fs-small);
  line-height: 1.25rem;
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
}

.jd-shotwrap{
  grid-area: visual;
  position: relative;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 0 var(--space-7) var(--space-6) 0;
}
.jd-shotwrap.jd-r,
.jd-shotwrap.jd-l{ padding: 0 var(--space-7) var(--space-6) 0; }
.jd-proj-visual-title{ display: none; }
.jd-browser{
  position: absolute;
  inset: 0 var(--space-7) var(--space-6) 0;
  overflow: hidden;
  border: 1px solid var(--color-ice);
  border-radius: var(--radius-card);
  background: var(--color-background);
}
.jd-browser-bar{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr minmax(10rem, 24rem) 1fr;
  align-items: center;
  gap: var(--space-4);
  height: 60px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  box-sizing: border-box;
}
.jd-browser-dots{ display: flex; align-items: center; gap: 6px; }
.jd-browser-dots i{
  display: block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.jd-browser-dots i:nth-child(2){ background: var(--color-ice); }
.jd-browser-dots i:nth-child(3){ background: var(--color-border); }
.jd-browser-url{
  overflow: hidden;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.9);
  color: var(--color-primary);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jd-shot-progress{
  position: absolute;
  z-index: 3;
  top: 52px;
  right: 0;
  left: 0;
  height: 16px;
  pointer-events: none;
}
.jd-shot-progress::before{
  content: '';
  position: absolute;
  top: 7px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--color-border);
}
.jd-shot-progress-bar{
  position: absolute;
  top: 7px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.jd-shot{
  position: absolute;
  inset: 60px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  direction: rtl;
  scrollbar-width: none;
  background: var(--color-background);
  cursor: grab;
}
.jd-shot.is-dragging{ cursor: grabbing; user-select: none; }
.jd-shot::-webkit-scrollbar{ display: none; }
.jd-shot img{
  width: 100%;
  height: auto;
  direction: ltr;
  user-select: none;
  -webkit-user-drag: none;
}
.jd-shot-control{
  position: static;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.9);
  color: var(--color-primary);
  cursor: pointer;
}
.jd-shot-control:hover{ background: var(--color-accent); }
.jd-shot-control svg{
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jd-shot-control .jd-shot-control-play{ fill: currentColor; stroke: none; }
.jd-shot-control svg[hidden]{ display: none; }
.jd-phone{
  position: absolute;
  bottom: 0;
  width: 180px; height: auto;
}
.jd-shotwrap.jd-r .jd-phone{ right: 0; }
.jd-shotwrap.jd-l .jd-phone{ right: 0; left: auto; }

.jd-quote-row{ grid-area: quote; min-width: 0; display: block; }
.jd-quote-row .jd-quote{ flex: 1; min-width: 0; }
.jd-quote{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-field);
  padding: var(--space-5);
}
.jd-quote-text{ flex: 1 1 100%; min-width: 0; display: flex; gap: var(--space-3); align-items: flex-start; }
.jd-quote-text svg{ flex: none; width: 30px; height: auto; }
.jd-quote-text p{ font-family: var(--font-heading); font-weight: 500; font-size: 1.125rem; line-height: 1.45; color: var(--color-primary); }
.jd-quote-person{ flex: none; display: flex; align-items: center; gap: var(--space-3); }
.jd-mini-shot{ display: none; }
.jd-mini-shot img{ width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--color-ice); }
.jd-quote-avatar{ width: 52px; height: 52px; border-radius: var(--radius-pill); object-fit: cover; flex: none; }
.jd-quote-avatar--bordered{ background: var(--color-background); border: 1px solid var(--color-border); box-sizing: border-box; }
.jd-quote-name{ font-size: var(--fs-small); line-height: 1.3; color: var(--color-primary); }
.jd-quote-name strong{ display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-small); }

.jd-ref{ flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--space-3); }
.jd-ref summary{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  padding: var(--space-1) 0;
  margin-left: 0;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  cursor: pointer;
  list-style: none;
}
.jd-ref summary::-webkit-details-marker{ display: none; }
.jd-ref summary::marker{ content: ""; }
.jd-ref summary svg{ transition: transform .25s ease; }
.jd-ref[open] summary svg{ transform: rotate(180deg); }
.jd-ref-body{
  margin-left: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 56rem;
}
.jd-ref-body p{ font-size: var(--fs-small); line-height: 1.65; }

/* ============================================================
   5 KDO JSEM
   ============================================================ */
@media (min-width: 768px){
  #o-mne{ padding-top: 9.375rem; }
}
#o-mne .jd-wrap{
  background: var(--color-surface);
  border-radius: var(--radius-box);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.jd-omne-photo{ flex: 1 1 27.5rem; min-width: 0; position: relative; min-height: 620px; }
.jd-omne-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.jd-omne-text{
  flex: 1.3 1 30rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-9) var(--space-9) var(--space-9) var(--space-8);
  box-sizing: border-box;
}
.jd-omne-text .jd-eyebrow{ margin-bottom: calc(var(--space-4) - var(--space-5)); }
.jd-omne-close{ margin-top: var(--space-2); font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; line-height: 1.4; color: var(--color-primary); }
.jd-omne-text .signature{ align-self: flex-end; margin-right: var(--space-5); width: 9rem; }

/* ============================================================
   6 CENÍK
   ============================================================ */
.jd-cenik-intro{ display: flex; flex-direction: column; gap: var(--space-5); align-items: center; text-align: center; }
.jd-cenik-intro .jd-eyebrow{ margin-bottom: calc(var(--space-4) - var(--space-5)); }
.jd-cenik-intro p{ max-width: 51rem; font-size: var(--fs-lead); line-height: 1.7; }
.jd-cenik-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-5);
  align-items: stretch;
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
}
.jd-cenik-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  border: 1px solid var(--color-ice);
  border-radius: var(--radius-card);
  padding: var(--space-7) var(--space-6) var(--space-6);
  box-sizing: border-box;
}
.jd-cenik-card--highlight{
  background: var(--gradient-box);
  border: 1px solid var(--color-ice);
}
.jd-cenik-ribbon{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1.2;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}
.jd-cenik-card--highlight h3,
.jd-cenik-card--highlight .jd-cenik-sub,
.jd-cenik-card--highlight .jd-eyebrow,
.jd-cenik-card--highlight .jd-cenik-list .jd-eyebrow{ color: var(--color-primary); }
.jd-cenik-card--highlight .jd-cenik-desc,
.jd-cenik-card--highlight .jd-cenik-list li span{ color: var(--color-text); }
.jd-cenik-card--highlight .jd-price,
.jd-cenik-card--highlight .jd-cenik-list{ border-top-color: #FFFFFF; }
.jd-cenik-card--highlight .jd-price{ color: var(--color-primary); }
.jd-cenik-card--highlight .jd-price-amount{ color: var(--color-primary); }
.jd-cenik-card--highlight .jd-cenik-list svg path{ stroke: var(--color-primary); }
.jd-cenik-card .jd-btn--outline{ background: var(--color-background); }
.jd-cenik-stage{
  align-self: flex-start;
  font-family: var(--font-heading);
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
}
.jd-cenik-card h3{ margin-top: var(--space-4); font-size: var(--h3-size); line-height: 1.2; min-height: 4.5rem; }
.jd-cenik-sub{ margin-top: var(--space-2); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-body); line-height: 1.4; color: var(--color-primary); }
.jd-cenik-card > p.jd-cenik-desc{ margin-top: var(--space-3); min-height: 5.4rem; }
.jd-price{ margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-ice); color: var(--color-primary); display: flex; align-items: baseline; gap: var(--space-2); }
.jd-price-from{ font-size: var(--fs-small); font-weight: 700; }
.jd-price-amount{ font-family: var(--font-heading); font-weight: 700; font-size: var(--h3-lg-size); line-height: 1.2; }
.jd-cenik-list{ flex: 1; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-6) 0 var(--space-5); border-top: 1px solid var(--color-ice); font-size: 1.125rem; line-height: 1.6; }
.jd-cenik-list .jd-eyebrow{ color: var(--color-primary); }
.jd-cenik-list ul{ display: flex; flex-direction: column; gap: var(--space-2); }
.jd-cenik-list li{ display: flex; gap: var(--space-2); }
.jd-cenik-list svg{ flex: none; margin-top: 3px; display: block; }

.jd-dark{
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-7);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-7) var(--space-8);
  box-sizing: border-box;
  color: var(--color-text);
}
.jd-dark-top{ display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); align-items: center; }
.jd-dark-top > div{ flex: 1 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.jd-cenik-ul{
  flex: 1 1 26rem; min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-4) var(--space-5);
  font-size: 1.125rem; line-height: 1.55;
  font-weight: 600;
}
.jd-cenik-ul li{ display: flex; gap: var(--space-2); align-items: flex-start; }
.jd-cenik-ul svg{ flex: none; margin-top: 3px; }
.jd-dark-note{ display: flex; gap: var(--space-3); align-items: flex-start; border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.jd-dark-note .jd-dark-note-title{ margin-bottom: var(--space-2); font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); }
.jd-info-dot{
  flex: none; width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
  font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-small);
}

/* ============================================================
   7 CTA + KONTAKT + PATIČKA
   ============================================================ */
#kontakt{ width: 100%; background: var(--color-background); padding: 9.375rem 0 0; box-sizing: border-box; }
.jd-cta-wrap{ position: relative; z-index: 2; margin: 0 var(--space-7); }
.jd-cta-box{
  position: relative;
  background: var(--color-accent);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-9);
  box-sizing: border-box;
  min-height: 380px;
}
.jd-cta-text{ position: relative; z-index: 1; max-width: 40rem; display: flex; flex-direction: column; gap: var(--space-5); }
.jd-cta-eyebrow{ display: flex; align-items: center; gap: var(--space-4); margin-bottom: calc(var(--space-4) - var(--space-5)); }
.jd-cta-eyebrow-line{ display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--color-primary); }
.jd-cta-hint{ padding-top: var(--space-2); display: flex; align-items: flex-end; gap: var(--space-3); }
.jd-cta-hint span{ font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-emphasis); line-height: 1.3; color: var(--color-primary); padding-bottom: var(--space-2); }
.jd-cta-hint svg{ display: block; flex: none; width: 70px; height: 150px; margin-bottom: -120px; overflow: visible; }
.jd-cta-img{ position: absolute; right: var(--space-7); bottom: 0; height: 530px; width: auto; display: block; }

.jd-foot{
  position: relative;
  z-index: 1;
  margin-top: -150px;
  background: var(--color-primary);
  border-radius: var(--radius-box);
  padding: 13.875rem var(--space-8) var(--space-8);
  box-sizing: border-box;
  color: #FFFFFF;
}
.jd-foot-grid{ display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); align-items: baseline; gap: var(--space-8); }
.jd-contact-col{ display: flex; flex-direction: column; gap: var(--space-6); }
.jd-contact-h{ font-size: var(--h4-size); line-height: 1.2; color: #FFFFFF; }
.jd-contact-links{ display: flex; flex-direction: column; gap: var(--space-4); }
.jd-contact-link{ display: flex; align-items: center; gap: var(--space-4); color: #FFFFFF; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-lead); }
.jd-contact-link span{ color: var(--color-secondary); display: flex; }
.jd-social{ display: flex; gap: var(--space-3); }
.jd-social a{
  width: 40px; height: 40px;
  border-radius: var(--radius-field);
  background: var(--color-accent);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.jd-social svg{ width: 24px; height: 24px; }
.jd-invoice{ margin-top: var(--space-3); padding-top: var(--space-6); border-top: 1px solid rgba(189,229,238,.3); display: flex; flex-direction: column; gap: var(--space-2); }
.jd-invoice h3{ margin: 0 0 var(--space-1); font-size: var(--fs-emphasis); line-height: 1.3; color: #FFFFFF; }
.jd-invoice p{ font-size: var(--fs-small); line-height: 1.65; color: var(--color-mist); }
.jd-invoice p.jd-invoice-legal{ font-size: var(--fs-small); line-height: 1.5; color: var(--color-ice); }
.jd-invoice-links{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--space-4);
  margin-top: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.4;
}
.jd-invoice-links a{
  color: var(--color-ice);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jd-form{ display: flex; flex-direction: column; gap: var(--space-3); }
.jd-form h2{ margin: 0 0 var(--space-1); font-size: var(--h4-size); line-height: 1.2; color: #FFFFFF; }
.jd-field label{ display: block; font-size: var(--fs-small); font-weight: 700; color: var(--color-ice); margin-bottom: var(--space-2); }
.jd-field label .jd-field-optional{ font-weight: 400; opacity: .8; }
.jd-field input, .jd-field textarea{
  width: 100%;
  box-sizing: border-box;
  background: var(--color-background);
  border: 1.5px solid transparent;
  border-radius: var(--radius-field);
  padding: 0.9375rem 1.125rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-text);
  outline: none;
}
.jd-field textarea{ resize: vertical; min-height: 150px; }
.jd-field input:focus, .jd-field textarea:focus{ border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(242,208,112,.35); }
.jd-field ::placeholder{ color: var(--color-muted); }
.jd-field-error{ display: block; margin-top: var(--space-2); font-size: var(--fs-small); color: #FFD9D9; }
.jd-form-2col{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
.jd-form-foot{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-5); margin-top: var(--space-1); }
.jd-form-foot p{ flex: 1 1 17.5rem; font-size: var(--fs-small); line-height: 1.4; color: var(--color-ice); }
.jd-form-note{ font-size: var(--fs-small); margin-top: var(--space-3); }
.jd-form-note--success{
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  color: var(--color-primary);
  background: var(--color-surface);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-field);
  outline: none;
}
.jd-form-note--success strong{ font-family: var(--font-heading); font-size: var(--fs-body); }
.jd-form-note--error{ color: #FFD9D9; }
.jd-form-note[hidden]{ display: none; }

.jd-copyright{
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--color-primary);
  font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem;
}
.jd-copyright img{ height: 24px; width: auto; }

/* ============================================================
   404 STRÁNKA
   ============================================================ */
body.jd-page-404{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.jd-page-404 main{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
body.jd-page-404 main .jd-sec{
  padding: 6.25rem 0 var(--space-7);
}
.jd-404-foot{ flex: none; padding-top: var(--space-4); }
.jd-404-box{
  position: relative;
  overflow: hidden;
  background: var(--gradient-box);
  border-radius: var(--radius-box);
  box-sizing: border-box;
  padding: var(--space-10) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
}
@media (min-width: 768px){
  .jd-404-box{ overflow: visible; }
}
.jd-404-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.jd-404-text .jd-eyebrow{ margin-bottom: calc(var(--space-4) - var(--space-5)); }
.jd-404-text .jd-lead{ max-width: 30rem; }
.jd-404-visual{
  position: relative;
  flex: none;
  width: 17.5rem;
  height: 17.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jd-404-circle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.jd-404-icon{ display: block; width: 13.5rem; height: 13.5rem; margin-left: 3.875rem; color: var(--color-primary); }
.jd-404-note{
  position: absolute;
  top: 80%;
  left: 58%;
  z-index: 2;
  width: 11.5rem;
  margin: 0;
}
@media (max-width: 1024px){
  .jd-404-box{ flex-direction: column; text-align: center; padding: var(--space-8) var(--space-6); gap: var(--space-6); }
  .jd-404-text{ align-items: center; max-width: 28rem; }
  .jd-404-visual{ width: 15.5rem; height: 15.5rem; }
  .jd-404-icon{ width: 11.5rem; height: 11.5rem; margin-left: 1.25rem; }
  .jd-404-note{ width: 10rem; }
  body.jd-page-404 main .jd-sec{ padding: 5.25rem 0 var(--space-6); }
}
@media (max-width: 767px){
  .jd-404-box{ border-radius: 20px; padding: var(--space-7) var(--space-5); }
  .jd-404-visual{ width: 10.5rem; height: 10.5rem; margin-top: var(--space-2); }
  .jd-404-icon{ width: 8rem; height: 8rem; margin-left: 0; }
  .jd-404-note{ position: static; top: auto; left: auto; width: min(13.75rem, 100%); margin: var(--space-4) auto 0; }
  body.jd-page-404 main .jd-sec{ padding: 5.5rem 0 var(--space-5); }
}
.jd-foot--standalone{ position: static; margin-top: 0; border-radius: var(--radius-box); }
.jd-foot-grid--single{ grid-template-columns: minmax(0,1fr); max-width: 32rem; }
.jd-legal{ display: flex; flex-direction: column; gap: var(--space-5); max-width: 50rem; padding-bottom: var(--space-section); }
.jd-legal p{ line-height: 1.7; }
.jd-legal a{ text-decoration: underline; text-underline-offset: 2px; }
.jd-legal ul{ display: flex; flex-direction: column; gap: var(--space-3); list-style: disc; padding-left: 1.25em; }
.jd-legal li{ padding-left: 0.25em; line-height: 1.6; }
.jd-legal-section{ display: flex; flex-direction: column; gap: var(--space-4); }
.jd-legal-section h2{ font-size: var(--h3-size); }
.jd-legal-section h3{ font-size: var(--fs-emphasis); }

/* ============================================================
   COOKIE LIŠTA
   ============================================================ */
.jd-cookie-bar{
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 200;
  width: calc(100% - (2 * var(--space-5)));
  max-width: 26rem;
  max-height: calc(100dvh - (2 * var(--space-5)));
  overflow-y: auto;
}
.jd-cookie-bar[hidden]{ display: none; }
.jd-cookie-card{
  position: relative;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: var(--space-6);
  box-sizing: border-box;
}
.jd-cookie-view,
.jd-cookie-settings{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}
.jd-cookie-view[hidden],
.jd-cookie-settings[hidden]{ display: none; }
.jd-cookie-head{
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.jd-cookie-icon{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-mist);
  color: var(--color-primary);
}
.jd-cookie-title{
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-emphasis);
  line-height: 1.2;
  color: var(--color-primary);
}
.jd-cookie-text{
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text);
}
.jd-cookie-text a{ color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.jd-cookie-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.jd-cookie-bar .jd-btn{ font-size: var(--fs-small); padding: 0.75rem 1.25rem; text-align: center; }
.jd-cookie-settings-toggle{
  align-self: center;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-primary);
  cursor: pointer;
}
.jd-cookie-close{
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-mist);
  color: var(--color-primary);
  cursor: pointer;
}
.jd-cookie-row{
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.jd-cookie-row-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.jd-cookie-row-title{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--color-primary);
}
.jd-cookie-row-title em{ font-style: normal; font-weight: 600; color: var(--color-muted); }
.jd-cookie-row-desc{
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-muted);
}
.jd-switch{
  position: relative;
  flex: none;
  display: inline-block;
  width: 44px;
  height: 26px;
  cursor: pointer;
}
.jd-switch input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.jd-switch-track{
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: background-color .2s ease;
}
.jd-switch-track::before{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(2,69,76,.3);
  transition: transform .2s ease;
}
.jd-switch input:checked + .jd-switch-track{ background: var(--color-primary); }
.jd-switch input:checked + .jd-switch-track::before{ transform: translateX(18px); }
.jd-switch input:focus-visible + .jd-switch-track{ outline: 2px solid var(--color-primary); outline-offset: 2px; }
.jd-switch--locked{ cursor: default; }
.jd-switch--locked input{ cursor: default; }
.jd-switch--locked .jd-switch-track,
.jd-switch--locked input:checked + .jd-switch-track{ background: var(--color-muted); }
.jd-cookie-reopen{
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 190;
  padding: 0.625rem var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  box-shadow: var(--shadow-soft);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.jd-cookie-reopen[hidden]{ display: none; }
@media (max-width: 767px){
  .jd-cookie-bar{
    right: var(--space-3);
    width: calc(100% - (2 * var(--space-3)));
    bottom: var(--space-3);
    max-height: calc(100dvh - (2 * var(--space-3)));
  }
  .jd-cookie-card{ padding: var(--space-5); border-radius: 20px; }
  .jd-cookie-reopen{ right: var(--space-3); bottom: var(--space-3); }
}

/* ============================================================
   RESPONZIVITA
   ============================================================ */
@media (max-width: 1024px){
  .jd-head{ height: 76px; margin-bottom: -76px; }
  .jd-logo{ height: 32px; }
  .jd-burger{ display: flex; }
  .jd-nav{
    display: none;
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-background);
    padding: var(--space-1) 7.5% var(--space-6);
    box-shadow: var(--shadow-soft);
    border-top: 1px solid var(--color-border);
  }
  .jd-head.is-open .jd-nav{ display: flex; }
  .jd-nav a{ padding: 0.9375rem 0; font-size: var(--fs-body); border-bottom: 1px solid var(--color-mist); }
  .jd-nav a:last-child{ margin-top: var(--space-5); border-bottom: 0; text-align: center; padding: var(--space-4) var(--space-5); }

  #uvod{ padding: 5.25rem 0 0; }
  .jd-hero-box{ flex-direction: column; align-items: stretch; padding: var(--space-7) var(--space-8) 0; min-height: 0; }
  .jd-hero-text{ width: 100%; }
  .jd-hero-controls{ margin-top: var(--space-4); padding: 0 var(--space-8); border-top: 0; }
  .jd-hero-slider{ order: 1; position: static; height: 440px; align-self: center; margin-top: var(--space-4); }

  .jd-sec{ padding-top: var(--space-section); padding-bottom: 0; }
  .jd-ukazky{ gap: 4.5rem; }
  .jd-proj + .jd-proj{ padding-top: 0; border-top: 0; }
  .jd-proj{
    grid-template-columns: minmax(0,1fr);
    grid-template-areas:
      "visual"
      "info"
      "quote";
    gap: var(--space-6);
  }
  .jd-shotwrap{ height: auto; }
  .jd-proj-info > .jd-h3big{ display: none; }
  .jd-proj-visual-title{ display: block; margin-bottom: var(--space-5); }
  .jd-browser{ position: relative; inset: auto; height: 540px; }
  .jd-shot{ inset: 60px 0 0; height: auto; }
  .jd-phone{ width: 140px; }

  .jd-omne-photo{ flex-basis: 100%; min-height: 32.5rem; }
  .jd-omne-text{ padding: var(--space-7) var(--space-8) var(--space-9); }

  .jd-cenik-grid{ grid-template-columns: minmax(0,1fr); max-width: 38.75rem; width: 100%; margin-left: auto; margin-right: auto; gap: var(--space-8); }
  .jd-cenik-card h3{ min-height: 0; }

  .jd-cta-wrap{ margin: 0; }
  .jd-cta-box{ padding: var(--space-7) var(--space-7); min-height: 22.5rem; }
  .jd-cta-text{ max-width: 57%; }
  .jd-cta-img{ height: 420px; right: var(--space-4); }
  .jd-cta-hint{ display: none; }

  .jd-foot{ margin-top: -90px; padding: 9.375rem var(--space-7) var(--space-7); }
  .jd-foot-grid{ grid-template-columns: minmax(0,1fr); gap: var(--space-7); }
  .jd-form{ order: -1; }
}

@media (min-width: 768px) and (max-width: 1024px){
  .jd-cta-wrap{ margin-right: var(--space-4); margin-left: var(--space-4); }
  .jd-cta-img{ right: calc(-1 * var(--space-3)); height: 450px; }
}

@media (max-width: 767px){
  .jd-dark-note{ flex-direction: column; }
  .jd-wrap{ width: 90%; }
  .jd-nav{ padding: var(--space-1) 5% var(--space-6); }

  .jd-services-cta{ justify-content: flex-end; }
  .jd-legal{ padding-top: var(--space-5); }
  .sticky-note .signature__reveal{ transition-delay: 0s; }
  .sticky-note .signature__underline{ transition-delay: 2.1s; }

  #uvod{ padding: 5.5rem 0 0; }
  .jd-hero-box{ padding: var(--space-6) var(--space-5) 0; border-radius: 20px; }
  .jd-hero-text{ gap: 1.125rem; }
  .jd-hero-controls{ flex-direction: row; align-items: baseline; gap: var(--space-3); margin-top: var(--space-3); padding: 0 var(--space-5) 0 var(--space-2); }
  .jd-hero-options{
    width: 100%;
    flex-wrap: nowrap;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
  .jd-hero-slider{ order: 1; height: 330px; align-self: center; margin-top: var(--space-2); }
  .jd-hero-slider img{ max-width: none; }
  .jd-tag{ font-size: 1.0625rem; line-height: 1.4; }
  .jd-nowrap{ white-space: normal; }
  .jd-btns a{ flex: 1 1 100%; text-align: center; box-sizing: border-box; }

  .pains, .jd-services{ padding-top: 6.25rem; }
  .jd-sec{ padding-top: 6.25rem; padding-bottom: 0; }
  .jd-ukazky{ gap: 3.5rem; }
  .jd-shotwrap.jd-r,
  .jd-shotwrap.jd-l{ padding: 0 var(--space-5) var(--space-6) 0; }
  .jd-browser{ height: 360px; border-radius: 14px; }
  .jd-browser-bar{ grid-template-columns: 1fr minmax(8rem, 14rem) 1fr; padding: 0 var(--space-3); }
  .jd-phone{ width: 84px; }
  .jd-quote{ padding: 1.375rem 1.25rem; gap: var(--space-4); }
  .jd-quote-text p{ line-height: 1.5; }
  .jd-ref, .jd-ref-body{ margin-left: 0; }
  .jd-ref summary{ margin-left: 0; }

  .jd-omne-photo{ min-height: 23.75rem; }
  .jd-omne-text{ padding: 2.25rem var(--space-5) 2.5rem; }
  .jd-omne-text p{ line-height: 1.7; }
  .jd-omne-close{ line-height: 1.45; }

  .jd-cenik-intro .jd-eyebrow,
  .jd-cenik-intro .jd-h2,
  .jd-cenik-intro > p{
    width: 100%;
    text-align: left;
  }
  .jd-cenik-card{ padding: 1.75rem var(--space-5); }
  .jd-dark{ padding: var(--space-6) var(--space-5); }
  .jd-cenik-ul{ grid-template-columns: minmax(0,1fr); }

  #kontakt{ padding-top: 6.25rem; }
  .jd-cta-box{ padding: var(--space-6) var(--space-5) 0; min-height: 0; }
  .jd-cta-text{ max-width: none; }
  .jd-cta-img{ display: none; }
  .jd-cta-hint{
    display: block;
    position: relative;
    height: 4rem;
    padding: 0;
  }
  .jd-cta-hint span{ display: none; }
  .jd-cta-hint svg{
    position: absolute;
    top: 0;
    right: var(--space-3);
    width: 45px;
    height: 96px;
    margin: 0;
  }
  .jd-foot{ margin-top: -60px; padding: 6.25rem var(--space-5) 2.5rem; border-radius: 20px; }
  .jd-form-2col{ grid-template-columns: minmax(0,1fr); }
  .jd-form h2{ line-height: 1.3; }
  .jd-form button{ width: 100%; }
  .jd-contact-h{ line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce){
  .jd-head{ transition: none; }
  .jd-brush path{ transition: none; stroke-dashoffset: 0; }
  .jd-delay-cta-arrow > path{ opacity: 1; animation: none; }
  .jd-hero-option,
  .jd-hero-option::after{ transition: none; }
  .jd-link-arrow,
  .jd-link-arrow-down{ transition: none; }
}