:root {
      /* --light-bg: #f5f7fa; */
      --light-bg: white;
      --light-bg-transparent: #f5f7fa00; 
      --light-text: #222;
      --light-card: #fff;
      --light-accent: #0d6efd;
      --dark-bg-transparent: #1a1c1f00;
      --dark-bg: #1a1c1f;
      --dark-text: #f1f1f1;
      --dark-card: #292c31;
      --dark-card-secondary: #23272c;
      --dark-accent: #66b2ff;

      --ps-highlight-color-light: #0d6efd80;
      --ps-highlight-color-dark: #66b2ff80;
    }
    html
    {
      scroll-padding-top: 70px; /*65px is nav bar*/
      scroll-behavior: smooth;
    }
    body {
      transition-delay: 100ms;
      transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s;
      font-size: 1.15rem;
    }
    body, div
    {
      will-change: background-color;
    }
    body.light-mode {
      background-color: var(--light-bg);
      color: var(--light-text);
    }
    body.dark-mode {
      background-color: var(--dark-bg);
      color: var(--dark-text);
    }
    .card {
      transition: background-color 0.3s, color 0.3s;
    }
    .light-mode .card {
      background-color: var(--light-card);
      color: var(--light-text);
    }
    .dark-mode .card {
      background-color: var(--dark-card);
      color: var(--dark-text);
      box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
    }
    .hero {
      padding-top: 60px;
      padding-bottom: 120px;
      margin-bottom: -60px;
      padding-left: 0;
      padding-right: 0;
      text-align: center;
      color: var(--dark-bg);
      transition-delay: 100ms;
      transition: opacity 0.3s ease, background-color 0.3s ease;
    }
    .light-mode .hero {
      background:
        linear-gradient(0deg, var(--light-bg), var(--light-bg-transparent) 40%), 
        radial-gradient(ellipse at top right, #0077b640, transparent 50%),
        radial-gradient(ellipse at top left, #0077b640, transparent 50%),
        radial-gradient(ellipse at top center, #5cc1ff20, transparent 50%),
        radial-gradient(ellipse at bottom left, #5cc1ff40, transparent 50%),
        radial-gradient(ellipse at bottom right, #5cc1ff40, transparent 50%);
    }
    .dark-mode .hero {
      background:
        linear-gradient(0deg, var(--dark-bg), var(--light-bg-transparent) 40%), 
        radial-gradient(ellipse at top right, #203a43A0, transparent 70%),
        radial-gradient(ellipse at top left, #203a4390, transparent 50%),
        radial-gradient(ellipse at top center, #0f202760, transparent 50%),
        radial-gradient(ellipse at bottom left, #0f2027D0, transparent 50%),
        radial-gradient(ellipse at bottom right, #0f2027D0, transparent 50%);
      color: white;
      /* background: linear-gradient(to right, #0f2027, #203a43); */
    }
    .hero-transition {
      margin: 0;
      padding-top: 60px;
      padding-bottom: 800px;
      margin-bottom: -800px;
      transition: background-color 0.3s;
    }
    .light-mode .hero-transition {
      background-image: 
        linear-gradient(0deg, var(--light-bg), var(--light-bg-transparent)),
        linear-gradient(90deg, #5dc2ff, #0178b7);
      /* background: linear-gradient(to right, #5cc1ff, #0077b6); */
    }
    .dark-mode .hero-transition {
      background-image: 
        linear-gradient(0deg, var(--dark-bg), var(--dark-bg-transparent)),
        linear-gradient(90deg, #0f2027, #203a43);
      /* background: linear-gradient(to right, #0f2027, #203a43); */
    }
    .features .icon {
      font-size: 2.5rem;
      margin-bottom: 10px;
    }
    .equal-height {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    footer {
      transition: background-color 0.3s, color 0.3s;
    }
    .light-mode footer {
      background-color: #002b36;
      color: white;
    }
    .dark-mode footer {
      background-color: #111;
      color: #ccc;
    }
    .contact-section {
      padding: 40px 0;
      transition: background-color 0.3s;
    }
    .light-mode .contact-section {
      background-color: #e3f2fd;
    }
    .dark-mode .contact-section {
      background-color: #1a1a1a;
    }


.hero-icon-primary
{
  fill: var(--light-text);
}
.dark-mode .hero-icon-primary
{
  fill: var(--dark-text);
}

.hero-icon-secondary
{
  margin-top: -100%;
}


/* 2025-08-04 VOJTA: uprava  */
.lena-logo
{
  width: auto;
  height: 2.5rem;
}
.wellcome-lena-logo
{
  width: auto;
  height: 6rem;
}
.software-description {
  padding: 80px 0;
  transition: background-color 0.3s;
}
.light-mode .software-description {
  /* background-color: var(--light-card); */
}
.dark-mode .software-description {
  /* background-color: var(--dark-card); */
}
.software-block
{
  border: none;
  border-radius: var(--bs-border-radius);
  margin-bottom: 60px;
  padding: 20px;
}
.light-mode .software-block
{
  /* background-color: #e0f0ff; */
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
  color: var(--light-text);
    /* background-color: var(--light-card); */
    background-color: transparent;
}
.dark-mode .software-block
{
  /* background-color: #021220; */
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
  color: var(--dark-text);
  /* background-color: var(--dark-card); */
  background-color: transparent;
}
.q-and-a
{
  border: none;
  margin-top: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.dark-mode .q-and-a
{
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.q-and-a .card-header
{
  border: none;
}
.dark-mode .q-and-a .card-header
{
  background-color: var(--dark-card-secondary);
}
.q-and-a .card-body
{
  border: none;
}


    .software-description img {
      max-width: 100%;
      border-radius: 8px;
    }
    .theme-toggle-navbar {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .theme-toggle-navbar button {
      padding: 0;
      font-size: 1.4rem;
      border: none;
      background: none;
      color: inherit;
    }
    .theme-toggle-navbar button:focus {
      outline: none;
      box-shadow: none;
    }
    .navbar-nav .nav-item .theme-toggle-btn {
      background: none !important;
      border: none !important;
      padding: 0 !important;
      box-shadow: none !important;
      color: white;
    }
    .software-icon {
      font-size: 2rem;
      margin-right: 10px;
    }

/* Výpis blogu – přizpůsobení barev */

.light-mode .list-group-item {
  background-color: var(--light-card);
  color: var(--light-text);
  border-color: #ddd;
}

.dark-mode .list-group-item {
  background-color: var(--dark-card);
  color: var(--dark-text);
  border-color: #444;
}

.light-mode .list-group-item:hover {
  background-color: #eef5ff;
}

.dark-mode .list-group-item:hover {
  background-color: #2a2a2a;
}

.light-mode .text-muted {
  color: #6c757d !important; /* defaultní Bootstrap barva */
}

.dark-mode .text-muted {
  color: #aaa !important; /* světlejší šedá pro tmavé pozadí */
}

.navbar-glass
{
  --bs-bg-opacity: 0.90;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* transition: box-shadow 0.3 ease; */
  box-shadow: 0 8px 16px #0003;
}

.row
{
  margin-bottom: 60px;
}

.software-description .row:nth-child(even)
{
  flex-direction: row-reverse;
}

.badge
{
  color: #4db2ef;
  background-color: #5dc2ff35 !important;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 7px;
  margin-bottom: 1rem;
}

.badge.red
{
  color: #ff6060;
  background-color: #ffDFDF !important;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 7px;
  margin-bottom: 1rem;
}

.fade-up-on-scroll
{
  visibility: hidden;
  transform: scale(0.8);
}
.fade-up-on-scroll.show
{
  visibility: visible;
  animation: fade-up 0.3s ease-out forwards;
}
@keyframes fade-up
{
  0% { transform: translateY(40) scale(0.8); opacity: 0.5; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.card-button
{
  border: none;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 100%;
  cursor: pointer;
}
.card-button:hover
{
  transform: translateY(-5px);
  box-shadow: 0 2px 12px var(--ps-highlight-color-light);
}
.dark-mode .card-button:hover
{
  transform: translateY(-5px);
  box-shadow: 0 2px 12px var(--ps-highlight-color-dark);
}

/* stat karty  */
.stat-card-wrapper
{
  position: relative;
  padding: 10px;
}

.stat-card {
  position: relative;
  text-align: center;
  padding: 30px 20px;
  border-radius: 10px;
  background-color: #f8f9fa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1;
}

.stat-icon {
  font-size: 40px;
  color: var(--ps-highlight-color-light); /* ikona */
  margin-bottom: 10px;
}
.dark-mode .stat-icon
{
  color: var(--ps-highlight-color-dark);
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: var(--ps-highlight-color-light); /* číslo */
}
.dark-mode .stat-number
{
  color: var(--ps-highlight-color-dark);
}

.stat-label {
  font-size: 16px;
  color: #6c757d;
}

/* SVG obvodová čára jako světelný stín */
.svg-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.svg-border rect {
  fill: none;
  stroke: var(--ps-highlight-color-light);
  stroke-width: 6;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  filter: blur(6px); /* světelný efekt */
  opacity: 0.7;
  transition: stroke-dashoffset 2s ease-out;
}
.dark-mode .svg-border rect
{
  stroke: var(--ps-highlight-color-dark);
}

.svg-border.animate rect {
  stroke-dashoffset: 0;
}

@media (min-width: 768px)
{
  .software-block
  {
    padding: 40px;
  }
}

/* @media (prefers-color-scheme: dark)
{
  body {
    background-color: black;
  }
}
 */