/* Upravnik: shared layout on top of the supplied Tabler 1.0 components. */

html { scroll-padding-top: 5rem; }
.site-navbar { box-shadow: none; }
.site-navbar .nav-link.active { color: var(--tblr-primary); font-weight: var(--tblr-font-weight-bold); }
.site-navbar .dropdown-menu { min-width: 17rem; }
.site-navbar .dropdown-item { white-space: normal; }
.hero-support { max-width: 44rem; margin: 1rem auto 0; color: var(--tblr-secondary); }
.demo-note { color: var(--tblr-secondary); font-size: var(--tblr-font-size-h5); margin: 1rem 0 0; }
.home-hero { padding-bottom: 0; }
.home-hero .hero-img { margin: 3rem auto 0; }
.browser-header { margin-bottom: -1px; }
.browser picture { display: block; line-height: 0; }
.automation-illustration { display: block; width: 100%; max-width: 500px; height: auto; margin-inline: auto; }
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { position: relative; margin-top: .5rem; padding-left: 1.5rem; color: var(--tblr-secondary); }
.feature-list li::before { content: '✓'; position: absolute; left: 0; color: var(--tblr-primary); font-weight: var(--tblr-font-weight-bold); }
.solution-eyebrow { color: var(--tblr-primary); font-weight: var(--tblr-font-weight-bold); font-size: var(--tblr-font-size-h6); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }
.solution-article, .site-document { max-width: 52rem; margin-inline: auto; }
.solution-article > h2 { font-size: var(--tblr-font-size-h1); margin-top: 2.5rem; margin-bottom: 1rem; }
.solution-article > h3 { font-size: var(--tblr-font-size-h3); margin-top: 1.5rem; }
.solution-article p, .solution-article li { color: var(--tblr-secondary); line-height: 1.75; }
.solution-article .card { margin-block: 2rem; }
.site-document { padding-bottom: 4rem; }
.demo-modal .modal-header { align-items: flex-start; }
.demo-modal .btn-close { flex-shrink: 0; margin-left: 1rem; }
.demo-modal .demo-privacy { font-size: var(--tblr-font-size-h5); color: var(--tblr-secondary); }
.demo-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.presentation-bar { position: sticky; top: 0; z-index: 1025; }
.presentation-bar-inner { min-height: 50px; }
.presentation-bar .btn { flex-shrink: 0; }
.back-to-top { position: fixed; z-index: 1020; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); }
.back-to-top[hidden] { display: none !important; }
@media (max-width: 991.98px) {
 .site-navbar .navbar-collapse { padding-top: 1rem; }
 .site-navbar .nav-item:last-child { margin-top: .5rem; }
 .site-navbar .dropdown-menu { min-width: 0; }
}
@media (max-width: 767.98px) {
 .home-hero { padding-bottom: 0; }
}
@media (max-width: 575.98px) {
 .presentation-bar-inner { gap: .5rem !important; }
 .presentation-bar-inner > span { font-size: var(--tblr-font-size-h5); max-width: 10rem; }
 .presentation-bar .btn { font-size: var(--tblr-font-size-h5); padding-inline: .75rem; min-height: 44px; }
}
@media (pointer: coarse) {
 .back-to-top { width: 44px; height: 44px; }
 .demo-modal .form-control, .demo-modal .form-select { min-height: 44px; font-size: 1rem; }
}
@media print { .presentation-bar, .back-to-top { display: none !important; } }

/* Shared marketing components, based on the original Funkcionalnosti cards. */
.body-marketing .card,
.body-marketing .pricing-card,
.body-marketing .feature-card,
.body-marketing .workflow-step,
.body-marketing .portal-panel,
.body-marketing .site-panel { border-radius: 1rem !important; }
.pricing { gap: 1rem; }
.pricing > .pricing-card { margin-left: 0; margin-right: 0; }
.feature-card { height: 100%; padding: 1.5rem; background: var(--tblr-bg-surface); border: 1px solid rgba(98,105,118,.16); border-radius: 1rem; }
.feature-card .shape { flex: 0 0 auto; }
.icon-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.icon-link .icon { width: 1.125rem; height: 1.125rem; }
.body-marketing .btn > .icon { flex-shrink: 0; }
.body-marketing .btn { white-space: normal; }
.marketing-banner { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(11rem,14rem); align-items: center; gap: 1.75rem; }
.marketing-banner, .marketing-banner-surface { border: 1px solid rgba(98,105,118,.12); border-radius: 1rem !important; padding: clamp(1.5rem,3vw,3rem) !important; }
.banner-icon { width: 4rem; height: 4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.8); color: var(--banner-accent,var(--tblr-primary)); }
.banner-icon .icon { width: 2rem; height: 2rem; stroke-width: 1.6; }
.banner-content p { max-width: 46rem; }
.banner-actions { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
.banner-actions > .small { text-align: center; }
.body-marketing .banner-blue { --banner-accent: var(--tblr-primary); background: var(--tblr-primary-lt) !important; }
.body-marketing .banner-green { --banner-accent: var(--tblr-green); background: var(--tblr-green-lt) !important; }
.body-marketing .banner-azure { --banner-accent: var(--tblr-azure); background: var(--tblr-azure-lt) !important; }
.body-marketing .banner-purple { --banner-accent: var(--tblr-purple); background: var(--tblr-purple-lt) !important; }
.plan-label { display: flex; align-items: center; gap: .6rem; font-weight: 600; margin-bottom: 1.5rem; }
.plan-title { font-size: clamp(2rem,4vw,3.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; max-width: 39rem; }
.plan-description { max-width: 39rem; font-size: 1.125rem; line-height: 1.75; color: var(--tblr-secondary); margin-top: 1.5rem; }
.plan-facts { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2rem; }
.plan-fact { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.plan-fact .icon { color: var(--tblr-primary); width: 1.25rem; height: 1.25rem; }
.plan-price-card { max-width: 26rem; margin: 1rem auto 0 !important; }
.plan-price-card .pricing-btn .btn { width: 100%; }
@media (max-width: 991.98px) {
 .marketing-banner { grid-template-columns: auto minmax(0,1fr); }
 .banner-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
 .banner-actions > .small { width: 100%; text-align: left; }
}
@media (max-width: 575.98px) {
 .marketing-banner { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
 .banner-actions { grid-column: 1; flex-direction: column; }
 .banner-icon { width: 3.5rem; height: 3.5rem; }
 .plan-hero { padding-top: 3rem; }
 .plan-facts { flex-direction: column; gap: .75rem; }
}