/* Generováno z design/Landing C - Clarity.dc.html pomocí tools/build.mjs: needitovat ručně. */
*{ box-sizing:border-box }
  body{ margin:0; background:#FDFAE9; font-family:'Inter Tight',sans-serif; -webkit-font-smoothing:antialiased }
  a{ color:#111214 } a:hover{ color:#111214 }
  @keyframes orbPulse { 0%,100%{ opacity:.55; transform:scale(1) } 50%{ opacity:.9; transform:scale(1.04) } }
  @keyframes orbMorph {
    0%   { border-radius:58% 42% 47% 53% / 46% 52% 48% 54%; transform:rotate(0deg) scale(1) }
    25%  { border-radius:40% 60% 62% 38% / 58% 40% 60% 42%; transform:rotate(90deg) scale(1.05) }
    50%  { border-radius:64% 36% 38% 62% / 42% 62% 38% 58%; transform:rotate(180deg) scale(0.98) }
    75%  { border-radius:44% 56% 55% 45% / 60% 38% 62% 40%; transform:rotate(270deg) scale(1.04) }
    100% { border-radius:58% 42% 47% 53% / 46% 52% 48% 54%; transform:rotate(360deg) scale(1) }
  }
  @keyframes orbMorphB {
    0%   { border-radius:46% 54% 60% 40% / 55% 45% 55% 45%; transform:rotate(0deg) scale(1) }
    33%  { border-radius:62% 38% 42% 58% / 40% 60% 40% 60%; transform:rotate(-120deg) scale(1.06) }
    66%  { border-radius:38% 62% 56% 44% / 62% 42% 58% 38%; transform:rotate(-240deg) scale(0.96) }
    100% { border-radius:46% 54% 60% 40% / 55% 45% 55% 45%; transform:rotate(-360deg) scale(1) }
  }
  @keyframes wordDrop { 0%{ transform:translateY(-100%); opacity:0 } 100%{ transform:translateY(0); opacity:1 } }
  @keyframes caretBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
  @keyframes dotBounce { 0%,80%,100%{transform:translateY(0); opacity:.5} 40%{transform:translateY(-4px); opacity:1} }
  @keyframes typeIn { 0%{ width:0; animation-timing-function:steps(51,end) } 26%,100%{ width:100% } }
  @keyframes caretShow { 0%,25.9%{ visibility:visible } 26%,100%{ visibility:hidden } }
  @keyframes sendOn { 0%{ opacity:.3 } 1.5%,99%{ opacity:1 } 100%{ opacity:.3 } }
  @keyframes sendPress { 0%,27.4%{ transform:scale(1) } 28.2%{ transform:scale(.88) } 29.2%,100%{ transform:scale(1) } }
  @keyframes introShow { 0%,28.6%{ opacity:1; visibility:visible } 31.5%,99%{ opacity:0; visibility:hidden } 100%{ opacity:1; visibility:visible } }
  @keyframes chatShow { 0%,28.8%{ opacity:0; visibility:hidden } 31.8%,96%{ opacity:1; visibility:visible } 98%,100%{ opacity:0; visibility:hidden } }
  @keyframes bubbleIn { 0%,29%{ transform:translateY(14px) } 33%,100%{ transform:translateY(0) } }
  @keyframes dotsShow { 0%,33%{ opacity:0 } 35%,47%{ opacity:1 } 49%,100%{ opacity:0 } }
  @keyframes answerShow { 0%,48%{ opacity:0; visibility:hidden; transform:translateY(8px) } 51%,96%{ opacity:1; visibility:visible; transform:translateY(0) } 98%,100%{ opacity:0; visibility:hidden; transform:translateY(8px) } }
  @keyframes levitA { 0%,100%{ transform:translate(-50%,-50%) translateY(-7px) } 50%{ transform:translate(-50%,-50%) translateY(7px) } }
  @keyframes levitB { 0%,100%{ transform:translate(-50%,-50%) translateY(6px) } 50%{ transform:translate(-50%,-50%) translateY(-8px) } }
  @keyframes levitC { 0%,100%{ transform:translate(-50%,-50%) translateY(-5px) } 50%{ transform:translate(-50%,-50%) translateY(9px) } }
  @keyframes levitCore { 0%,100%{ transform:translate(-50%,-50%) translateY(-3px) } 50%{ transform:translate(-50%,-50%) translateY(3px) } }
  #faq summary::-webkit-details-marker { display:none }
  #faq details[open] [data-faq-icon] { transform:rotate(45deg) }
  #faq [data-faq-icon] { transition:transform .2s ease }
  @media (max-width: 900px){
    #hero h1{ white-space:normal !important; font-size:clamp(34px, 8.6vw, 52px) !important; letter-spacing:-0.03em !important }

    #hero p{ font-size:17px !important; max-width:38ch !important }
    #hero > div{ padding-top:56px !important; padding-bottom:44px !important }
    #hero a{ font-size:15px !important; padding:16px 24px !important }
    header > div{ padding-left:22px !important; padding-right:22px !important; gap:16px !important }
    header nav{ gap:16px !important }
    header nav a{ font-size:14px !important }
  }
  @media (max-width: 620px){
    #hero a{ flex:1 1 100% !important; justify-content:center !important }
    header > div{ height:auto !important; padding-top:14px !important; padding-bottom:14px !important; flex-wrap:wrap !important }
    header nav a:not(:last-child){ display:none !important }
    header nav a:last-child{ padding:10px 16px !important }
  }
  @media (max-width: 900px){
    [data-r="cols"]{ grid-template-columns:1fr !important; gap:40px !important }
    [data-r="tools"]{ grid-template-columns:repeat(3, minmax(0,1fr)) !important }
    [data-r="tools"] > div{ padding:14px 10px !important; gap:10px !important }
    [data-r="tools"] svg{ width:22px !important; height:22px !important }
    [data-r="tools"] span{ font-size:12.5px !important }
    [data-r="panel"]{ grid-template-columns:1fr !important }
    [data-r="panel"] > div{ border-right:none !important }
    [data-r="panel"] > div:first-child{ border-bottom:1px solid rgba(17,18,20,0.12) !important }
    [data-r="panel"] > div:first-child > div:first-child{ min-height:360px !important }
    [data-r="panel"] [data-sat]{ width:78px !important; height:78px !important; font-size:11.5px !important }
    [data-r="panel"] [data-core]{ width:118px !important; height:118px !important; font-size:15px !important }
    section h1{ font-size:40px !important; line-height:1.06 !important }
    section h2{ font-size:34px !important }
    section h3{ font-size:23px !important }
    section > div{ padding-left:22px !important; padding-right:22px !important }
    section > div[style*="padding:104px"]{ padding-top:64px !important; padding-bottom:68px !important }
    section > div[style*="padding:100px"], section > div[style*="padding:92px"]{ padding-top:64px !important; padding-bottom:64px !important }
    section > div[style*="padding:84px"]{ padding-top:48px !important; padding-bottom:56px !important }
    [data-r="panel"] > div > div{ padding-left:22px !important; padding-right:22px !important }
    img[alt="Jan Pfajfr"]{ width:220px !important }
  }
  @media (max-width: 560px){
    section h2{ font-size:30px !important }
  }
  @keyframes dotPulse { 0%,100%{ opacity:.25; transform:translateY(0) } 50%{ opacity:1; transform:translateY(-2px) } }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important } }

/* Doplňky mimo šablonu */

/* Plynulý scroll na odkazy v rámci stránky. "no-preference" znamená, že kdo má
   v systému omezené animace, dostane skok bez posouvání. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth }
}

.dash-nav:hover { background: #FFDA47 }
:focus-visible { outline: 2px solid #111214; outline-offset: 3px }
#contact :focus-visible { outline-color: #FFDA47 }

/* Kontaktní formulář */
.lead { margin-top: 32px; display: flex; flex-direction: column; gap: 18px }
.lead__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.lead__field { display: flex; flex-direction: column; gap: 8px }
.lead__field label { font-size: 14.5px; font-weight: 600; color: #FDFAE9 }
.lead__req { color: #FFDA47 }
.lead input,
.lead textarea {
  font: 400 16px/1.5 'Inter Tight', sans-serif;
  color: #FDFAE9;
  background: rgba(253,250,233,.06);
  border: 1px solid rgba(253,250,233,.22);
  border-radius: 9px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.lead textarea { resize: vertical; min-height: 112px }
.lead input::placeholder,
.lead textarea::placeholder { color: rgba(253,250,233,.42) }
.lead input:hover,
.lead textarea:hover { border-color: rgba(253,250,233,.38) }
.lead input:focus,
.lead textarea:focus { outline: none; border-color: #FFDA47; background: rgba(253,250,233,.09) }
.lead [aria-invalid="true"] { border-color: #E2705C }
.lead__error { font-size: 13.5px; color: #F08A75 }
.lead__submit {
  align-self: flex-start;
  font: 700 16px/1 'Inter Tight', sans-serif;
  color: #111214;
  background: #FFDA47;
  border: none;
  border-radius: 9px;
  padding: 17px 30px;
  cursor: pointer;
  transition: filter .15s ease;
}
.lead__submit:hover { filter: brightness(1.06) }
.lead__submit[disabled] { opacity: .6; cursor: progress }
.lead__status { margin: 0; font-size: 15px; line-height: 1.6; border-left: 2px solid #FFDA47; padding-left: 14px; color: #FDFAE9 }
.lead__status[data-state="error"] { border-left-color: #E2705C; color: #F08A75 }
.lead__note { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(253,250,233,.7) }
.lead__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font: 500 13px/1 'JetBrains Mono', monospace }
.lead__meta a { color: rgba(253,250,233,.75); text-decoration: none }
.lead__meta a:hover { color: #FFDA47 }

/* Stránky mimo landing (poděkování, zásady) */
.page { max-width: 720px; margin: 0 auto; padding: 96px 44px }
.page h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; letter-spacing: -.034em; line-height: 1.06; margin: 24px 0 0 }
.page h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 40px 0 0 }
.page p, .page li { font-size: 16.5px; line-height: 1.7; color: #55585E }
.page ul { padding-left: 20px }
.page__eyebrow { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .16em; color: #6B7280 }
.page__back { display: inline-block; margin-top: 44px; font: 500 13px/1 'JetBrains Mono', monospace; color: #111214 }
@media (max-width: 900px) { .page { padding: 64px 22px } }