/**
 * Hero Section - Přesná kopie prototypu
 *
 * CSS proměnné pro parametrizaci barev:
 * Barvy se čtou z parent theme (--color-*) a child theme (blocks/shared/tailwind.css)
 *
 * TASK-054a: Refaktoring hardcoded barev na CSS proměnné
 * Použité proměnné:
 * - --color-dark-900, --color-dark-800 (tmavé pozadí z tailwind.css)
 * - --color-green-500, --color-green-600, --color-green-accent (zelené akcenty)
 * - --color-blue-500, --color-blue-600 (modré akcenty)
 * - --color-amber, --color-error (doplňkové barvy)
 *
 * Transparentnost: color-mix(in srgb, var(--color-X) Y%, transparent)
 */

/* =====================================================
   CSS PROMĚNNÉ - výchozí hodnoty pro Hero Section
   ===================================================== */
.hero-section {
  /* Text barvy */
  --hero-text-muted: var(--color-muted, #9ca3af);
  --hero-text-body: var(--color-base-content-secondary, #6b7280);
  --hero-text-strong: var(--color-base-content, #d1d5db);
  --hero-text-white: var(--color-base-content-inverted, #ffffff);

  /* Node barvy */
  --hero-node-bg: var(--color-base-200, #111827);
  --hero-node-bg-center: var(--color-base-300, #131c28);
  --hero-node-border: var(--color-base-200, #1f2937);

  /* Stat card barvy */
  --hero-stat-card-bg: color-mix(
    in srgb,
    var(--color-dark-800, #0f172a) 75%,
    transparent
  );
  --hero-stat-card-border: var(--color-base-200, #1f2937);
  --hero-stat-desc: var(--color-base-content-secondary, #4b5563);

  /* Tooltip barvy */
  --hero-tip-bg: color-mix(
    in srgb,
    var(--color-dark-800, #0f172a) 90%,
    transparent
  );
  --hero-tip-border: var(--color-base-200, #1f2937);
  --hero-tip-text: var(--color-muted, #9ca3af);
}

/* =====================================================
   FULLSCREEN SECTION - sjednocená výška s ostatními sekcemi
   ===================================================== */
.hero-section {
  position: relative;
  width: 100%;
  /* Výška: 100vh mínus header */
  min-height: calc(100vh - var(--header-height, 80px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-dark-900, #0a0f1e);
  /* Scroll snap pro plynulý přesun */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-bottom: 2rem;
}

/* Container wrapper - omezuje šířku obsahu, pozadí zůstává full-width */
.hero-section .hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: var(--spacing-lg, 1.5rem);
  width: 100%;
  max-width: 90rem; /* 1440px — z parent theme customizeru */
  margin: 0 auto;
  padding-inline: var(
    --container-padding,
    clamp(var(--spacing-sm, 0.5rem), 3vw, var(--spacing-2xl, 3rem))
  );
  position: relative;
  z-index: 2;
  flex: 1;
}

/* WordPress admin bar kompenzace */
.admin-bar .hero-section {
  min-height: calc(100vh - var(--header-height, 80px) - 32px);
}

@media (max-width: 782px) {
  .admin-bar .hero-section {
    min-height: calc(100vh - var(--header-height, 60px) - 46px);
  }
}
.hero-section .hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 20% 50%,
      color-mix(in srgb, var(--color-green-600, #059669) 20%, transparent) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 80% 50%,
      color-mix(in srgb, var(--color-blue-600, #2563eb) 15%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      var(--hero-static-bg-start, var(--color-dark-900, #0a0f1e)) 0%,
      var(--hero-static-bg-mid, var(--color-dark-800, #0f172a)) 50%,
      var(--hero-static-bg-end, var(--color-dark-900, #0a0f1e)) 100%
    );
}
.hero-section .hero-neural-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.hero-section .hero-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    var(--hero-dot-grid-color, #1e2535) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  opacity: var(--hero-dot-grid-opacity, 0.8);
}
.hero-section .hero-left {
  position: relative;
  z-index: 10;
  animation: heroFadeLeft 0.8s ease both;
}
.hero-section .hero-badge {
  display: inline-block;
  border: 1px solid
    var(
      --hero-badge-border,
      color-mix(in srgb, var(--color-green-500, #10b981) 35%, transparent)
    );
  background: var(
    --hero-badge-bg,
    color-mix(in srgb, var(--color-green-500, #10b981) 8%, transparent)
  );
  color: var(--hero-text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
/* TASK-049b: H1 "Energy Saving" + tagline — typografie z parent theme customizeru */
.hero-section .hero-main-title {
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  text-transform: var(--h1-text-transform);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--hero-text-white);
  margin-bottom: 8px;
  /* Gradient text efekt */
  background: linear-gradient(
    135deg,
    var(--color-green-accent, #22c55e) 0%,
    var(--color-blue-500, #3b82f6) 50%,
    var(--color-green-accent, #22c55e) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-section .hero-tagline {
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  text-transform: var(--h3-text-transform);
  letter-spacing: var(--h3-letter-spacing);
  color: var(--hero-text-muted);
  margin-bottom: 24px;
}

/* Původní heading jako H2 podnadpis — typografie z parent theme customizeru */
.hero-section .hero-title {
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  text-transform: var(--h2-text-transform);
  letter-spacing: var(--h2-letter-spacing);
  color: var(--hero-text-white);
  margin-bottom: 20px;
}
.hero-section .hero-heading-line1 {
  color: inherit;
}
.hero-section .hero-green {
  color: var(--hero-highlight-color, var(--color-green-500, #10b981));
}
.hero-section .hero-body {
  color: var(--hero-text-body);
  max-width: 400px;
  margin-bottom: 36px;
}
.hero-section .hero-body strong {
  color: var(--hero-text-strong);
  font-weight: 600;
}
.hero-section .hero-cta {
  display: flex;
  gap: 14px;
  align-items: center;
}
/* Hero tlačítko - používá DaisyUI btn btn-primary, custom override pouze pro gradient */
.hero-section .hero-btn {
  transition: transform 0.15s;
}
.hero-section .hero-btn:hover {
  transform: translateY(-1px);
}
.hero-section .hero-btn-ghost {
  background: transparent;
  color: var(--hero-text-muted);
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}
.hero-section .hero-btn-ghost:hover {
  color: var(--hero-text-strong);
}
.hero-section .hero-right {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  gap: 16px;
  animation: heroFadeRight 0.9s 0.15s ease both;
}

@media (min-width: 1024px) {
  .hero-section .hero-right {
    align-items: end;
  }
}
/* TASK-049a: Hero obrázek jako alternativa k diagramu */
.hero-section .hero-image-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-section .hero-image {
  width: 100%;
  height: auto;
  max-height: 50vh;
  object-fit: contain;
  border-radius: 16px;
  /* Box-shadow řízený atributem heroImageShadow */
  box-shadow: var(--hero-image-shadow, none);
  animation: heroImageFloat 6s ease-in-out infinite;
}
/* Varianty box-shadow pro hero obrázek */
.hero-section .hero-image.shadow-none {
  --hero-image-shadow: none;
}
.hero-section .hero-image.shadow-sm {
  --hero-image-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.hero-section .hero-image.shadow-md {
  --hero-image-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.hero-section .hero-image.shadow-lg {
  --hero-image-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.hero-section .hero-image.shadow-xl {
  --hero-image-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
}
.hero-section .hero-image.shadow-glow {
  --hero-image-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 40px
      color-mix(in srgb, var(--color-green-accent, #22c55e) 15%, transparent);
}
@keyframes heroImageFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ============================================
 * TASK-055: Dashboard vizuální režim
 * macOS-style window s KPI, chart, bars, donut
 * ============================================ */
.hero-section .hero-dashboard-window {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-box, 2rem);
  overflow: hidden;
  animation: heroFadeRight 0.9s 0.15s ease both;
}

/* Title bar — macOS styl */
.hero-section .dash-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hero-section .dash-dots {
  display: flex;
  gap: 6px;
}
.hero-section .dash-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.hero-section .dash-dot1 {
  background: #ff5f57;
}
.hero-section .dash-dot2 {
  background: #febc2e;
}
.hero-section .dash-dot3 {
  background: #28c840;
}
.hero-section .dash-title {
  font-size: 11px;
  font-weight: 500;
  color: #8b949e;
  letter-spacing: 0.02em;
}

/* Tělo dashboardu */
.hero-section .dash-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* KPI karty */
.hero-section .dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hero-section .kpi {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: calc(var(--radius-box, 2rem) * 0.4);
  padding: 12px 10px;
}
.hero-section .kpi-label {
  font-size: 10px;
  color: #8b949e;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hero-section .kpi-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: #e6edf3;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.hero-section .kpi-val.green {
  color: var(--color-green-accent, #00c896);
}
.hero-section .kpi-val.blue {
  color: #3b82f6;
}
.hero-section .kpi-val.amber {
  color: #f59e0b;
}
.hero-section .kpi-change {
  font-size: 10px;
  color: var(--color-green-accent, #00c896);
  margin-top: 4px;
  font-weight: 500;
}
.hero-section .kpi-change.neg {
  color: #ef4444;
}

/* Area chart */
.hero-section .dash-chart-wrap {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: calc(var(--radius-box, 2rem) * 0.4);
  padding: 12px;
}
.hero-section .dash-chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #e6edf3;
  margin-bottom: 10px;
}
.hero-section .dash-chip {
  font-size: 9px;
  font-weight: 500;
  color: #8b949e;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 100px;
}
.hero-section .chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Chart animace — stroke draw */
.hero-section .chart-area-stroke {
  transition: stroke-dashoffset 1.5s ease-out;
}
.hero-section .chart-area-fill {
  opacity: 0;
  transition: opacity 0.8s ease-out 0.3s;
}
.hero-section .hero-dashboard-window.is-visible .chart-area-fill {
  opacity: 1;
}

/* Spodní řádek (bars + donut) */
.hero-section .dash-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hero-section .dash-mini {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: calc(var(--radius-box, 2rem) * 0.4);
  padding: 12px;
}
.hero-section .dash-mini-label {
  font-size: 10px;
  font-weight: 600;
  color: #8b949e;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Horizontal bars */
.hero-section .bar-row {
  display: grid;
  grid-template-columns: 60px 1fr 36px;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.hero-section .bar-row:last-child {
  margin-bottom: 0;
}
.hero-section .bar-name {
  font-size: 10px;
  color: #8b949e;
  white-space: nowrap;
}
.hero-section .bar-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.hero-section .bar-fill {
  height: 100%;
  border-radius: 3px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-section .hero-dashboard-window.is-visible .bar-fill {
  width: var(--bar-target);
}
.hero-section .bar-pct {
  font-size: 10px;
  font-weight: 600;
  color: #e6edf3;
  text-align: right;
}

/* Donut chart */
.hero-section .donut-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-section .dash-donut-svg {
  flex-shrink: 0;
}
.hero-section .donut-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-section .leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #8b949e;
}
.hero-section .leg-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-section .bar-fill {
    transition: none;
  }
  .hero-section .chart-area-stroke {
    transition: none;
  }
  .hero-section .chart-area-fill {
    transition: none;
    opacity: 1;
  }
  .hero-section .hero-dashboard-window {
    animation: none;
  }
}

/* Responzivní dashboard */
@media (max-width: 768px) {
  .hero-section .hero-dashboard-window {
    max-width: 100%;
  }
  .hero-section .dash-kpis {
    grid-template-columns: 1fr;
  }
  .hero-section .dash-bottom {
    grid-template-columns: 1fr;
  }
  .hero-section .kpi-val {
    font-size: 1.1rem;
  }
}

.hero-section .hero-flow-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 240px;
  flex-shrink: 0;
}
.hero-section .hero-flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-section .hero-nodes-grid {
  display: grid;
  grid-template-columns: 80px 1fr 80px 1fr 80px;
  grid-template-rows: repeat(4, 70px);
  width: 100%;
  height: 100%;
  align-items: center;
  justify-items: center;
  position: relative;
}
.hero-section .hero-nodes-rows-2 {
  grid-template-rows: repeat(3, 70px);
}
.hero-section .hero-nodes-rows-3 {
  grid-template-rows: repeat(3, 70px);
}
.hero-section .hero-nodes-rows-4 {
  grid-template-rows: repeat(4, 70px);
}
.hero-section .hero-nodes-group {
  display: contents;
}
.hero-section .hero-node {
  width: 68px;
  height: 68px;
  background: var(--hero-node-bg);
  border: 1.5px solid var(--hero-node-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: default;
  position: relative;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.hero-section .hero-node:hover {
  border-color: var(--color-green-500, #10b981);
  box-shadow: 0 0 18px
    color-mix(in srgb, var(--color-green-500, #10b981) 25%, transparent);
}
.hero-section .hero-node-icon {
  font-size: 22px;
  line-height: 1;
}
.hero-section .hero-node-label {
  font-size: 8px;
  color: var(--hero-text-body);
  letter-spacing: 0.03em;
  font-weight: 500;
}
.hero-section .hero-node.green {
  border-color: color-mix(
    in srgb,
    var(--color-green-500, #10b981) 45%,
    transparent
  );
  box-shadow: 0 0 12px
    color-mix(in srgb, var(--color-green-500, #10b981) 12%, transparent);
}
.hero-section .hero-node.blue {
  border-color: color-mix(
    in srgb,
    var(--color-blue-500, #3b82f6) 45%,
    transparent
  );
  box-shadow: 0 0 12px
    color-mix(in srgb, var(--color-blue-500, #3b82f6) 12%, transparent);
}
.hero-section .hero-node.yellow {
  border-color: color-mix(
    in srgb,
    var(--color-amber, #f59e0b) 40%,
    transparent
  );
  box-shadow: 0 0 12px
    color-mix(in srgb, var(--color-amber, #f59e0b) 10%, transparent);
}
.hero-section .hero-node.red {
  border-color: color-mix(
    in srgb,
    var(--color-error, #ef4444) 40%,
    transparent
  );
  box-shadow: 0 0 12px
    color-mix(in srgb, var(--color-error, #ef4444) 10%, transparent);
}
.hero-section .hero-node.hero-node-center {
  width: 76px;
  height: 76px;
  border-color: color-mix(
    in srgb,
    var(--color-green-500, #10b981) 60%,
    transparent
  );
  box-shadow: 0 0 24px
    color-mix(in srgb, var(--color-green-500, #10b981) 22%, transparent);
  background: var(--hero-node-bg-center);
}
.hero-section .hero-node.hero-node-center .hero-node-icon {
  font-size: 26px;
}
.hero-section .hero-node.hero-node-center::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 20px;
  border: 1.5px solid
    color-mix(in srgb, var(--color-green-500, #10b981) 20%, transparent);
  animation: heroPulseRing 2.6s ease-in-out infinite;
}
.hero-section .hero-stats {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 520px;
}
.hero-section .hero-stat-card {
  flex: 1;
  background: var(--hero-stat-card-bg);
  border: 1px solid var(--hero-stat-card-border);
  border-radius: 14px;
  padding: 16px 18px 14px;
  backdrop-filter: blur(12px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    border-color 0.3s,
    box-shadow 0.3s;
  animation: heroFadeUp 0.8s ease both;
}
/* Skrytá karta pro fullpage scroll (přepíše animaci) */
.hero-section .hero-stat-card.stat-hidden {
  animation: none;
  opacity: 0;
  transform: translateY(20px);
}
/* Gradient border wrapper pro stat cards (přepisuje normální stat-card styly) */
.hero-section .hero-stat-card.hero-stat-card-wrapper {
  padding: 1px;
  border: none;
  background: none;
}
.hero-section .hero-stat-card-inner {
  border-radius: 13px;
  padding: 16px 18px 14px;
  backdrop-filter: blur(12px);
  background: var(--hero-stat-card-bg);
}
.hero-section .hero-stat-card:hover {
  border-color: color-mix(
    in srgb,
    var(--color-green-500, #10b981) 35%,
    transparent
  );
  box-shadow: 0 0 20px
    color-mix(in srgb, var(--color-green-500, #10b981) 8%, transparent);
}
.hero-section .hero-stat-card:nth-child(1) {
  animation-delay: 0.4s;
}
.hero-section .hero-stat-card:nth-child(2) {
  animation-delay: 0.55s;
}
.hero-section .hero-stat-card:nth-child(3) {
  animation-delay: 0.7s;
}
/* Když jsou animace vypnuté - karty okamžitě viditelné */
.hero-section[data-animations="false"] .hero-stat-card {
  animation: none;
  opacity: 1;
  transform: none;
}
.hero-section[data-animations="false"] .hero-stat-card.stat-hidden {
  opacity: 1;
  transform: none;
}
.hero-section .hero-stat-num {
  color: var(--hero-stat-color, var(--color-green-500, #10b981));
  margin-bottom: 6px;
  white-space: nowrap;
}
.hero-section .hero-stat-desc {
  font-size: 11px;
  color: var(--hero-stat-desc);
}
.hero-section .hero-tip {
  position: absolute;
  background: var(--hero-tip-bg);
  border: 1px solid var(--hero-tip-border);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 10px;
  color: var(--hero-tip-text);
  backdrop-filter: blur(8px);
  z-index: 30;
  white-space: nowrap;
  pointer-events: none;
  animation: heroFadeIn 0.9s ease both;
}
.hero-section .hero-tip-title {
  font-weight: 600;
  color: var(--color-green-500, #10b981);
  margin-bottom: 3px;
  font-size: 10px;
}
.hero-section .hero-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
}
.hero-section .hero-tip-row span:last-child {
  color: var(--hero-text-body);
}
.hero-section .hero-tip-topleft {
  top: -8px;
  left: 88px;
  animation-delay: 0.7s;
}
.hero-section .hero-tip-bottomright {
  bottom: -8px;
  right: 88px;
  animation-delay: 0.9s;
}
@keyframes heroFadeLeft {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroFadeRight {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes heroPulseRing {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.07);
    opacity: 0.1;
  }
}
@media (max-width: 1023px) {
  .hero-section .hero-container {
    grid-template-columns: 1fr;
  }
  .hero-section {
    min-height: auto;
  }
  .hero-section .hero-left {
    text-align: center;
  }
  .hero-section .hero-body {
    max-width: 100%;
  }
  .hero-section .hero-cta {
    justify-content: center;
    flex-wrap: wrap;
  }
  .hero-section .hero-right {
    min-height: auto;
  }
  /* TASK-049: Responzivní hero-image */
  .hero-section .hero-image-container {
    max-width: 100%;
    padding: 0 16px;
  }
  .hero-section .hero-image {
    max-height: 50vh;
    border-radius: 12px;
  }
  /* TASK-049b: Responzivní hlavní nadpis — velikosti z customizeru */
  .hero-section .hero-main-title {
    margin-bottom: 4px;
  }
  .hero-section .hero-tagline {
    margin-bottom: 16px;
  }
  .hero-section .hero-flow-box {
    height: auto;
    min-height: 340px;
    max-width: 100%;
    position: relative;
    overflow: visible;
  }
  /* Mobilní vertikální layout: shora dolů (zdroje → zpracování → spotřebiče) */
  .hero-section .hero-nodes-grid {
    display: flex;
    flex-direction: column;
    gap: 56px;
    align-items: center;
    width: 100%;
    padding: 28px 0;
    position: relative;
    z-index: 5;
  }
  /* Wrapper skupiny - zobrazí uzly v řádku */
  .hero-section .hero-nodes-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
  }
  /* Reset desktop grid pozic */
  .hero-section .hero-node {
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 auto;
  }
  /* SVG animace - viditelná i na mobilu */
  .hero-section .hero-flow-svg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
  }
  .hero-section .hero-stats {
    flex-direction: column;
  }
  /* Tooltipy - první nahoře, druhý dole */
  .hero-section .hero-flow-box {
    padding-top: 80px;
    padding-bottom: 100px;
  }
  .hero-section .hero-tip {
    position: absolute;
    white-space: nowrap;
    max-width: none;
  }
  .hero-section .hero-tip-topleft {
    top: 0;
    left: 25%;
    right: auto;
    transform: translateX(-50%);
  }
  .hero-section .hero-tip-bottomright {
    top: auto;
    bottom: 0;
    left: auto;
    right: 25%;
    transform: translateX(50%);
  }
}

/* === Benefit Cards === */
.hero-benefit-cards {
  /* Přes celou šířku hero gridu */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;

  width: 100%;
  z-index: 10;
  position: relative;
}

@media (min-width: 768px) {
  .hero-benefit-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg, 1.5rem);
  }
}

/* Gradient border wrapper pro benefit cards - radius z DaisyUI/customizeru */
.hero-benefit-card-wrapper {
  border-radius: var(--radius-box, 1rem);
  overflow: hidden;
  min-width: 0;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.hero-benefit-card-wrapper:hover {
  transform: translateY(-2px);
}
.hero-benefit-card-wrapper .hero-benefit-card {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-box, 1rem) - 2px);
}

.hero-benefit-card {
  background: var(
    --hero-benefit-bg,
    color-mix(in srgb, var(--color-dark-800, #0f172a) 60%, transparent)
  );
  border-color: var(
    --hero-benefit-border,
    var(--fallback-b3, oklch(var(--b3)))
  );
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hero-benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--color-dark-900, #0a0f1e) 80%, transparent);
}

/* Ikona vlevo (mobile + lg+), vertikálně jen mezi md–lg */
.hero-benefit-layout {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-benefit-layout {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
}

.hero-benefit-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.hero-benefit-icon {
  color: var(--hero-benefit-icon, var(--fallback-su, oklch(var(--su))));
}

.hero-benefit-icon svg {
  width: 100%;
  height: 100%;
}

.hero-benefit-title {
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  text-transform: var(--h3-text-transform);
  letter-spacing: var(--h3-letter-spacing);
  color: var(--hero-benefit-title, var(--fallback-bc, oklch(var(--bc))));
  word-break: break-word;
  overflow-wrap: break-word;
}

.hero-benefit-text {
  color: var(--hero-benefit-text, var(--fallback-bc, oklch(var(--bc) / 0.7)));
}