/* Design System - Based on Mockup Specifications */

/* ========================================
   COLOR SYSTEM (from mockups)
   ======================================== */

:root {
  /* Primary Colors - Light background */
  --color-bg-light: #f7f9fc;
  --color-bg-dark-start: #0a0e27;
  --color-bg-dark-mid: #1a1f3a;
  --color-bg-dark-end: #0f1629;
  
  /* Accent Colors */
  --color-primary-orange: #ff6b35;
  --color-primary-orange-hover: #ff8254;
  --color-accent-cyan: #06b6d4;
  --color-success-green: #10b981;
  
  /* Glass Colors - Light Mode */
  --color-glass-bg: rgba(255, 255, 255, 0.65);
  --color-glass-bg-navbar: rgba(255, 255, 255, 0.85);
  --color-glass-bg-card: rgba(255, 255, 255, 0.65);
  --color-glass-border: rgba(255, 255, 255, 0.6);
  --color-glass-border-strong: rgba(255, 255, 255, 0.9);
  --color-glass-hover-bg: rgba(255, 255, 255, 0.75);
  
  /* Blur Amounts */
  --blur-sm: 12px;
  --blur-md: 20px;
  --blur-lg: 20px;
  
  /* Text Colors - Light Mode (Dark Text) */
  --color-text-primary: #0d1b3e;
  --color-text-secondary: rgba(13, 27, 62, 0.65);
  --color-text-light: rgba(13, 27, 62, 0.65);
  --color-text-muted: rgba(13, 27, 62, 0.55);
  --color-text-subtle: rgba(13, 27, 62, 0.45);
  
  /* Shadows - Light Mode */
  --shadow-glass: 0 8px 40px rgba(13, 27, 62, 0.12);
  --shadow-glass-strong: 0 8px 40px rgba(13, 27, 62, 0.12);
  --shadow-glass-hover: 0 12px 48px rgba(13, 27, 62, 0.15);
  --shadow-glow-orange: 0 0 30px rgba(255, 107, 53, 0.4);
  --shadow-glow-orange-strong: 0 0 40px rgba(255, 107, 53, 0.6);
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Spacing Scale */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;  /* 12px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
  --space-4xl: 6rem;    /* 96px */
  
  /* Layout Dimensions */
  --navbar-height: 80px;
  --container-max-width: 1400px;
  --container-padding: 3rem;  /* 48px */
  --hero-gap: 4rem;           /* 64px */
  
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */
  --font-size-6xl: 3.75rem;    /* 60px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* Z-Index Scale */
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-tooltip: 1200;
}

/* Responsive Typography */
@media (min-width: 768px) {
  :root {
    --font-size-4xl: 2.5rem;    /* 40px */
    --font-size-5xl: 3.5rem;    /* 56px */
    --font-size-6xl: 4.5rem;    /* 72px */
  }
}

/* ========================================
   GRADIENTS (from mockups)
   ======================================== */

.gradient-dark-bg {
  background: radial-gradient(
    ellipse at top,
    var(--color-bg-dark-mid) 0%,
    var(--color-bg-dark-start) 50%,
    var(--color-bg-dark-end) 100%
  );
  position: relative;
}

.gradient-dark-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

/* ========================================
   GLASS COMPONENTS (from mockups)
   ======================================== */

.glass-card {
  background: var(--color-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
  transition: all var(--transition-base);
}

.glass-card:hover {
  background: var(--color-glass-hover-bg);
  box-shadow: var(--shadow-glass-hover);
  transform: translateY(-2px);
}

.glass-card--interactive:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ── Button element reset ────────────────────────────────────────────
   Replaces reset.css dependency. Removes browser-default 3D border
   (the dark right/bottom edge visible without reset.css on Windows).
   ──────────────────────────────────────────────────────────────────── */
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* Button Styles from Mockup */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-primary-orange);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-glow-orange);
}

.btn--primary:hover {
  background: var(--color-primary-orange-hover);
  box-shadow: 0 0 40px rgba(255, 107, 53, 0.6);
  transform: translateY(-2px);
}

.btn--lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--font-size-lg);
}

/* Small pill — for filter chips, tags, compact controls */
.btn--sm {
  padding: 9px 18px;
  font-size: var(--font-size-sm);
  gap: 6px;
}

/* Glass button — frosted white surface, light-mode */
.btn--glass {
  background: var(--color-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(13,27,62,0.12);
  color: var(--color-text-muted);
}

.btn--glass:hover {
  border-color: rgba(38,208,206,0.4);
  color: var(--color-text-primary);
  background: rgba(38,208,206,0.06);
  transform: none;
}

/* Active state — gradient fill (e.g. selected filter chip) */
.btn--glass.is-active {
  background: linear-gradient(135deg, var(--color-text-primary), #26d0ce);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(38,208,206,0.25);
}

/* Ghost button variant - transparent with border */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: transparent;
  border: 1.5px solid rgba(13, 27, 62, 0.25);
  border-radius: 999px;
  color: #0d1b3e;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

.btn-ghost:hover,
.btn-ghost:focus {
  border-color: rgba(13, 27, 62, 0.4);
  background: rgba(13, 27, 62, 0.05);
  transform: translateY(-2px);
}

/* ========================================
   STAT CARD (from mockup)
   ======================================== */

.stat-card {
  background: var(--color-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  box-shadow: var(--shadow-glass);
}

.stat-card__value {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-card__label {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* ========================================
   FLOATING DECORATIVE ELEMENTS
   ======================================== */

.floating-element {
  position: absolute;
  background: var(--color-glass-bg);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-lg);
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

.floating-element--small {
  width: 80px;
  height: 80px;
  opacity: 0.3;
}

.floating-element--medium {
  width: 120px;
  height: 120px;
  opacity: 0.2;
}

.floating-element--large {
  width: 200px;
  height: 200px;
  opacity: 0.15;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 767px) {
  .glass-card {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  
  .stat-card__value {
    font-size: var(--font-size-5xl);
  }
  
  .btn--lg {
    width: 100%;
  }
}

/* ========================================
   BASE STYLES
   ======================================== */

html {
  scroll-behavior: smooth;
}

/* Offset scroll target so sticky navbar doesn't cover section headers */
section[id], header[id] {
  scroll-margin-top: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-bg-light);
  min-height: 100vh;
  position: relative;
}

body::before {
  display: none;
}

/* ========================================
   GLASS EFFECT UTILITIES
   ======================================== */

.glass {
  background: var(--color-glass-bg);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--color-glass-border);
}

.glass-navbar {
  background: var(--color-glass-bg-navbar);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: 1px solid var(--color-glass-border);
}

.glass-card-strong {
  background: var(--color-glass-bg-card);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--color-glass-border-strong);
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary-orange);
  color: white;
  padding: var(--space-md);
  text-decoration: none;
  z-index: var(--z-tooltip);
  border-radius: var(--radius-md);
}

.skip-to-content:focus {
  top: var(--space-md);
  left: var(--space-md);
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   NAVBAR COMPONENT
   ======================================== */

/* Transparent at top, transitions to frosted glass on scroll */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--navbar-height);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
  z-index: var(--z-sticky);
  transition: background 0.3s ease, box-shadow 0.3s ease,
              backdrop-filter 0.3s ease, border-bottom 0.3s ease;
}

/* Frosted glass when scrolled */
.navbar--scrolled {
  background: var(--color-glass-bg-navbar);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border-bottom: 1px solid var(--color-glass-border);
  box-shadow: 0 2px 20px rgba(13, 27, 62, 0.07);
}

.navbar__container {
  max-width: var(--container-max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

/* Logo Lockup - Inline SVG + Wordmark */
.logo-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

/* Preserve logo color on all link states — no opacity change */
.logo-lockup:hover,
.logo-lockup:active,
.logo-lockup:focus,
.logo-lockup:visited {
  text-decoration: none;
  opacity: 1;
}

.logo-mark-svg {
  display: block;
  background: none;
  border-radius: 0;
  flex-shrink: 0;
}

.logo-wordmark {
  font-size: 17px;
  font-weight: 700;
  color: #0d1b3e;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Dark hero variant — bílý text přes tmavé pozadí (vyzvy.html) */
.navbar--dark .logo-wordmark {
  color: #ffffff;
}

.navbar--dark .navbar__link {
  color: rgba(255, 255, 255, 0.85);
}

.navbar--dark .navbar__link:hover,
.navbar--dark .navbar__link:focus {
  color: #ffffff;
}

.navbar--dark .navbar__cta-button {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.navbar--dark .navbar__cta-button:hover,
.navbar--dark .navbar__cta-button:focus {
  background: rgba(255, 255, 255, 0.25);
  opacity: 1;
}

.navbar--dark .hamburger-line {
  background: #ffffff;
}

/* Po scrollu — glass efekt, přechod zpět na tmavý text */
.navbar--dark.navbar--scrolled .logo-wordmark  { color: #0d1b3e; }
.navbar--dark.navbar--scrolled .navbar__link   { color: var(--color-text-light); }
.navbar--dark.navbar--scrolled .navbar__link:hover,
.navbar--dark.navbar--scrolled .navbar__link:focus { color: var(--color-text-primary); }
.navbar--dark.navbar--scrolled .navbar__cta-button {
  background: linear-gradient(135deg, var(--color-text-primary), #26d0ce);
  color: #ffffff;
  border-color: transparent;
}
.navbar--dark.navbar--scrolled .hamburger-line { background: #0d1b3e; }

.navbar__links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .navbar__links {
    display: flex;
  }
}

.navbar__link-item {
  margin: 0;
}

.navbar__link {
  color: var(--color-text-light);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
  padding: var(--space-sm) 0;
  display: inline-block;
}

.navbar__link:hover,
.navbar__link:focus {
  color: var(--color-text-primary);
}

.navbar__cta {
  flex-shrink: 0;
}

.navbar__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.navbar__cta-button:hover,
.navbar__cta-button:focus {
  opacity: 0.88;
  transform: translateY(-2px);
}

/* ========================================
   NAVBAR MOBILE LAYOUT
   ======================================== */

@media (max-width: 767px) {
  .navbar {
    height: 60px;
  }
  
  .navbar__container {
    padding: 0 24px;
    height: 60px;
  }
  
  /* Hamburger button */
  .navbar__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    z-index: 101;
  }
  
  .hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: #0d1b3e;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  /* Hamburger open state */
  .navbar__hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .navbar__hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  
  .navbar__hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  /* Mobile menu */
  .navbar__links {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(13, 27, 62, 0.08);
    box-shadow: 0 8px 24px rgba(13, 27, 62, 0.12);
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 24px 0;
    z-index: 100;
  }
  
  .navbar__links.is-open {
    display: flex;
  }
  
  .navbar__link {
    padding: 16px 24px;
    width: 100%;
    text-align: center;
    font-size: 18px;
  }
  
  .navbar__cta {
    display: none;
  }
}

/* Hide hamburger on desktop */
@media (min-width: 768px) {
  .navbar__hamburger {
    display: none;
  }
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
  min-height: 100dvh;
  min-height: 100vh; /* Fallback */
  padding-top: calc(var(--navbar-height) + var(--space-4xl));
  padding-bottom: var(--space-4xl);
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--color-bg-light);
  overflow: hidden;
}

/* Cyan gradient orb behind glass card */
.hero::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(
    circle,
    rgba(38, 208, 206, 0.18) 0%,
    rgba(125, 184, 247, 0.12) 40%,
    transparent 70%
  );
  top: -150px;
  right: -150px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Subtle dot pattern overlay */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(13, 27, 62, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.hero__container {
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
  position: relative;
  z-index: 1; /* Ensure content sits above orb and dots */
}

@media (min-width: 768px) {
  .hero__container {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--hero-gap);
  }
}

.hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  overflow: visible;
}

/* Hero Headline */
.hero__headline {
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0d1b3e;
  margin-bottom: var(--space-lg);
  max-width: 650px;
}

@media (min-width: 768px) {
  .hero__headline {
    font-size: clamp(36px, 4vw, 58px);
  }
}

.hero__headline-accent {
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

/* Hero Subtitle */
.hero__subtitle {
  font-size: 1.25rem; /* 20px - increased from 18px */
  line-height: var(--line-height-relaxed);
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
  max-width: 560px;
}

/* Hero Actions (CTAs) */
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .hero__actions {
    flex-direction: row;
  }
}

.hero__cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.hero__cta-primary:hover,
.hero__cta-primary:focus,
.hero__cta-primary.animate-in.visible:hover,
.hero__cta-primary.animate-in.visible:focus {
  opacity: 0.88;
  transform: translateY(-2px);
}

.hero__cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: transparent;
  border: 1.5px solid rgba(13, 27, 62, 0.25);
  border-radius: 999px;
  color: #0d1b3e;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

.hero__cta-ghost:hover,
.hero__cta-ghost:focus {
  border-color: rgba(13, 27, 62, 0.4);
  background: rgba(13, 27, 62, 0.05);
  transform: translateY(-2px);
}

/* Hero Stat Badge */
/* Hero Stat Row (plain text, no card) */
.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  background: none;
  border: none;
  padding: 0;
}

.stat-number {
  font-size: 20px;
  font-weight: 800;
  color: #0d1b3e;
}

.stat-arrow {
  color: #26d0ce;
  font-size: 18px;
  font-weight: 700;
}

.stat-label {
  font-size: 15px;
  color: rgba(13, 27, 62, 0.60);
}

/* Legacy stat badge styles (deprecated) */
.hero__stat-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-glass-bg);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--color-glass-border);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem; /* 24px - reduced from 48px */
  max-width: fit-content;
}

.hero__stat-number {
  font-size: 3.5rem; /* 56px - increased from 48px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.hero__stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-normal);
}

/* Hero Trust Strip */
.hero__trust-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: 1.5rem; /* 24px - ensure consistency */
}

.hero__trust-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.hero__trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
}

.hero__trust-logo {
  height: 32px;
  width: auto;
  opacity: 0.3; /* Reduced from 0.4 for subtler appearance */
  filter: grayscale(100%);
  transition: opacity var(--transition-base);
}

.hero__trust-logo:hover {
  opacity: 0.7;
}


/* ========================================
   GRANT CARD — REBUILT CLEAN
   ======================================== */

/* ── Card scene: positioning context ── */
.card-scene {
  position: relative;
  width: 400px;
  flex-shrink: 0;
  overflow: visible;
}

/* ── Floating card ── */
.grant-card {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  box-shadow:
    0 2px 4px rgba(13, 27, 62, 0.04),
    0 8px 24px rgba(13, 27, 62, 0.10),
    0 24px 48px rgba(13, 27, 62, 0.10);
  padding: 28px 28px 20px;
  position: relative;
  overflow: visible;
  transition: box-shadow 0.5s ease;
}
.grant-card:hover {
  box-shadow:
    0 4px 8px rgba(13, 27, 62, 0.06),
    0 16px 40px rgba(13, 27, 62, 0.14),
    0 40px 80px rgba(13, 27, 62, 0.12);
}
@media (max-width: 768px) {
  .card-scene { width: 100%; }
}

/* ── Card internals ── */
.gc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.gc-title {
  font-size: 18px;
  font-weight: 700;
  color: #0d1b3e;
  margin: 0;
}
.gc-plus {
  font-size: 20px;
  color: rgba(13,27,62,0.25);
  line-height: 1;
}
.gc-status-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: rgba(13,27,62,0.40);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.gc-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(13,27,62,0.70);
}
.gc-active-label {
  font-weight: 700;
  color: #0d1b3e;
}
.gc-icon { flex-shrink: 0; }

/* Progress bar */
.gc-progress-track {
  background: rgba(13,27,62,0.08);
  border-radius: 999px;
  height: 26px;
  /* overflow visible so the % label can overflow right edge if needed */
  overflow: hidden;
  margin: 4px 0 12px;
  position: relative;
}
.gc-progress-fill {
  background: linear-gradient(90deg, #0d1b3e 0%, #26d0ce 100%);
  border-radius: 999px;
  height: 100%;
  width: 75%;
}
/* FIX 1: % centred across the full track, not just inside the fill */
.gc-progress-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 4px rgba(13,27,62,0.35);
  pointer-events: none;
}

/* FIX 2: active bullet — radar-ping blink, mirrors flip-dot concept */
.gc-icon--active {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Expanding ring that fades out like a sonar ping */
.gc-icon--active::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #26d0ce;
  opacity: 0;
  animation: gcActivePing 2s ease-out infinite;
  pointer-events: none;
}
/* Inner dot pulses in sync */
.gc-icon--active svg {
  animation: gcDotPulse 2s ease-in-out infinite;
}
@keyframes gcActivePing {
  0%   { transform: scale(0.9); opacity: 0.85; }
  80%  { transform: scale(2.2); opacity: 0;    }
  100% { transform: scale(2.2); opacity: 0;    }
}
@keyframes gcDotPulse {
  0%, 100% { opacity: 0.75; }
  40%      { opacity: 1.00; }
}

/* Pending item */
.gc-pending span:not(.gc-icon) {
  color: rgba(13,27,62,0.40);
}

/* Divider */
.gc-divider {
  height: 1px;
  background: rgba(13,27,62,0.08);
  margin: 12px 0;
}

/* Financials */
.gc-financials {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gc-fin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gc-fin-row--calendar {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 2px;
}
.gc-fin-label {
  font-size: 12px;
  color: rgba(13,27,62,0.50);
}
.gc-fin-value {
  font-size: 15px;
  font-weight: 700;
  color: #0d1b3e;
}
.gc-fin-value--accent {
  color: #26d0ce;
  font-size: 17px;
}
.gc-cal-icon {
  display: flex;
  align-items: center;
}

/* FIX 3: Sparkline with X/Y axes */
.gc-chart {
  position: relative;
  margin-top: 14px;
  /* left padding = room for Y-axis labels; bottom padding = X-axis labels */
  padding-left: 26px;
  padding-bottom: 18px;
  height: 68px; /* 50px chart + 18px x-axis */
}

/* Y-axis hairline — left edge of chart area */
.gc-chart::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 0;
  bottom: 18px;
  width: 1px;
  background: rgba(13,27,62,0.12);
}
/* X-axis hairline — bottom edge of chart area */
.gc-chart::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 0;
  bottom: 18px;
  height: 1px;
  background: rgba(13,27,62,0.12);
}

.gc-sparkline {
  width: 100%;
  height: 50px;
  display: block;
}

/* Y-axis labels — stacked on the left */
.gc-axis-y {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 18px;
  width: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 4px;
}
.gc-axis-y span {
  font-size: 8px;
  font-weight: 600;
  color: rgba(13,27,62,0.38);
  line-height: 1;
}

/* X-axis labels — row at the bottom */
.gc-axis-x {
  position: absolute;
  left: 26px;
  right: 0;
  bottom: 0;
  height: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.gc-axis-x span {
  font-size: 8px;
  font-weight: 600;
  color: rgba(13,27,62,0.38);
  line-height: 1;
}

.gc-chart-pct {
  position: absolute;
  bottom: 20px;
  right: 2px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(13,27,62,0.40);
}


/* ========================================
   MOBILE LAYOUT
   ======================================== */

@media (max-width: 767px) {
  @keyframes float-card {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
}

/* ========================================
   GHOST CARD DEPTH EFFECT
   ======================================== */

.card-stack {
  position: relative;
  width: 400px;
  flex-shrink: 0;
}

/* Ghost layer — the depth illusion */
.card-back {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  transform: translate(18px, 22px) rotate(3deg);
  box-shadow: 0 8px 32px rgba(13, 27, 62, 0.08);
  z-index: 0;
}

/* Main card sits above the ghost — lerp JS handles movement */
.grant-card {
  position: relative;
  z-index: 1;
}

/* Back layer — lerp JS handles movement */
.card-back {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 768px) {
  .card-back { display: none; }  /* no depth effect on mobile */
  .card-stack:hover .grant-card { transform: none; }
  .card-stack { width: 100%; }
}

/* ========================================
   NAVIGATION STATES
   ======================================== */

/* Active nav link highlighting */
.nav-active {
  color: #26d0ce !important;
  font-weight: 600;
}

/* ========================================
   PLACEHOLDER SECTIONS
   ======================================== */

.section-placeholder {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f9fc;
  border-top: 1px solid rgba(13, 27, 62, 0.06);
}

.section-placeholder p {
  font-size: 16px;
  color: rgba(13, 27, 62, 0.30);
  letter-spacing: 0.05em;
}

/* ========================================
   GLASS CARD COMPONENT — Reusable Primitive
   ======================================== */

/* Base glass card — layout-agnostic, reusable primitive */
.glass-card {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.90);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(13, 27, 62, 0.08);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.3s ease,
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

/* Hover variant — for interactive cards */
.glass-card--hover:hover {
  transform: translateY(-8px);
  box-shadow:
    0 12px 40px rgba(13, 27, 62, 0.13),
    0 0 0 1px rgba(38, 208, 206, 0.20);
  border-color: rgba(38, 208, 206, 0.35);
  cursor: pointer;
}

/* Disable hover on touch devices */
@media (hover: none) {
  .glass-card--hover:hover {
    transform: none;
    box-shadow: 0 4px 24px rgba(13, 27, 62, 0.08);
    border-color: rgba(255, 255, 255, 0.90);
  }
}

/* Card internals — semantic content structure */
.card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  color: #0d1b3e;
  margin: 0;
  line-height: 1.3;
}

.card-desc {
  font-size: 14px;
  color: rgba(13, 27, 62, 0.60);
  line-height: 1.65;
  margin: 0;
  flex-grow: 1; /* pushes .card-link to bottom */
}

.card-link {
  font-size: 13px;
  font-weight: 600;
  color: #26d0ce;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: letter-spacing 0.2s ease;
  align-self: flex-start;
}

.card-link:hover {
  letter-spacing: 0.04em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SERVICES SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━ Section shared styles ━━ */
/* ── Section divider — subtle gradient hairline between sections ── */
.section-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(38, 208, 206, 0.30) 30%,
    rgba(13, 27, 62, 0.10) 60%,
    transparent 100%
  );
  border: none;
  margin: 0;
}

#sluzby {
  padding: 100px 24px;
  background: #f7f9fc;
  position: relative;
  overflow: hidden;
}

/* Subtle teal orb — top-right, mirrors hero atmospheric quality */
#sluzby::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  background: radial-gradient(circle,
    rgba(38, 208, 206, 0.09) 0%, transparent 65%);
  top: -100px; right: -80px;
  pointer-events: none;
  z-index: 0;
}

/* Ensure section-inner content sits above the orb */
#sluzby .section-inner { position: relative; z-index: 1; }

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: #26d0ce;
  text-transform: uppercase;
  margin-bottom: 18px;
  /* Left accent bar anchors the label visually to the section heading */
  padding-left: 14px;
  border-left: 3px solid #26d0ce;
  line-height: 1;
}

.section-subtitle {
  font-size: 17px;
  color: rgba(13, 27, 62, 0.58);
  max-width: 560px;
  line-height: 1.65;
  margin: 12px 0 48px;
}

/* ━━ Services grid ━━ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ━━ Stats bar ━━ */
.stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.90);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(13, 27, 62, 0.08);
  padding: 32px 40px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: 800;
  color: #0d1b3e;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 13px;
  color: rgba(13, 27, 62, 0.50);
  text-align: center;
  line-height: 1.4;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(13, 27, 62, 0.10);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 28px 24px;
  }
  .stat-divider {
    display: none;
  }
}

/* ━━ Scroll animation initial state ━━ */
.animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO → SERVICES SEPARATOR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Ensure #hero can contain the absolute separator */
#hero {
  position: relative;
  overflow: hidden; /* clips the wave to hero bounds */
}

/* #sluzby must start at exactly #f7f9fc — no gap or overlap */
#sluzby {
  position: relative;
  z-index: 1;  /* sits above the separator layer */
}

/* Hero → Services separator container */
.hero-separator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  z-index: 3;           /* above hero orb and dot texture layers */
  pointer-events: none; /* never blocks clicks */
  overflow: hidden;
}

/* Layer 1: atmospheric gradient fade */
.sep-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(240, 244, 255, 0.55) 50%,
    #f7f9fc 100%
  );
}

/* Layer 2: SVG wave with parallax */
.sep-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  will-change: transform;  /* composited on GPU — no layout reflow */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLIP CARDS — 3D card flip interaction
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Flip card shell ── */
.flip-card {
  height: 260px;          /* fixed height required for flip geometry */
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* ── Shared face rules ── */
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Front face: uses existing .glass-card styles ── */
.flip-front.glass-card {
  /* glass-card already provides background/border/shadow */
  /* only override what needs to change for flip context  */
  position: absolute; /* override glass-card's default if needed */
}

/* Pulsing hint at bottom of front */
.card-flip-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(13, 27, 62, 0.30);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: auto;
}

.flip-dot {
  width: 5px; height: 5px;
  background: #26d0ce;
  border-radius: 50%;
  flex-shrink: 0;
  animation: flipDotPulse 2s ease-in-out infinite;
}

@keyframes flipDotPulse {
  0%, 100% { opacity: 0.4; transform: scale(1);   }
  50%       { opacity: 1.0; transform: scale(1.5); }
}

/* ── Back face: brand gradient surface ── */
.flip-back {
  background: linear-gradient(135deg,
    #0d1b3e 0%, #1a4a6b 55%, #26d0ce 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 40px rgba(13, 27, 62, 0.18);
  transform: rotateY(180deg); /* pre-rotated — hidden at rest */
  justify-content: space-between;
  position: relative; /* for close button positioning */
}

/* Glass sheen on back */
.flip-back::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.00) 50%);
  pointer-events: none;
}

/* Close button */
.back-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: none;
  font-size: 20px; line-height: 1;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.2s ease;
  z-index: 2;
}

.back-close:hover { color: rgba(255, 255, 255, 0.90); }

/* Back content */
.back-tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.50);
  text-transform: uppercase;
}

.back-body { display: flex; flex-direction: column; gap: 10px; }

.back-stat {
  font-size: 30px; font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.back-stat span {
  font-size: 13px; font-weight: 400;
  color: rgba(255, 255, 255, 0.60);
  display: block; margin-top: 3px;
  letter-spacing: 0;
}

.back-substat {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.back-substat strong { color: #ffffff; }

/* Back CTA button */
.back-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  width: fit-content;
  position: relative; z-index: 1;
}

.back-cta:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
}

/* Disable hover lift on flip cards (flip replaces hover lift) */
.flip-card .glass-card:hover {
  transform: none;
  box-shadow: 0 4px 24px rgba(13, 27, 62, 0.08);
  border-color: rgba(255, 255, 255, 0.90);
}

/* Mobile: flip works on tap, no hover states needed */
@media (max-width: 768px) {
  .flip-card { height: 280px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROCESS STEPS SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━ Process section shell ━━ */
#proces {
  padding: 100px 24px;
  background: #f7f9fc;
  position: relative;
  overflow: hidden;
}

/* Subtle background orb — mirrors hero atmospheric quality */
#proces::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle,
    rgba(38,208,206,0.10) 0%, transparent 65%);
  bottom: -150px; left: -100px;
  border-radius: 50%;
  pointer-events: none;
}

/* ━━ Process grid — horizontal on desktop ━━ */
/* ── Proces Stepper ── */
.proces-stepper {
  display: flex;
  align-items: center;   /* browser centres every child, including connectors */
  width: 100%;
  margin: 56px 0 0;
}

.proces-card {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  border-radius: 20px;
  border: 2px solid transparent;
  background: transparent;
  opacity: 0.28;
  filter: grayscale(0.6);
  transition:
    opacity      600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter       600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background   600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow   600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform    600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.proces-card.active {
  opacity: 1;
  filter: grayscale(0);
  background: rgba(255,255,255,0.92);
  border-color: rgba(38,208,206,0.32);
  box-shadow:
    0 8px 32px rgba(38,208,206,0.12),
    0 2px 12px rgba(13,27,62,0.07);
  transform: translateY(-3px);
}

.pc-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(13,27,62,0.5);
  background: rgba(13,27,62,0.06);
  padding: 4px 11px;
  border-radius: 100px;
  margin-bottom: 16px;
  transition: background 600ms, color 600ms;
}

.proces-card.active .pc-badge {
  background: rgba(38,208,206,0.12);
  color: #0a8a88;
}

.pc-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.pc-icon svg {
  width: 34px;
  height: 34px;
}

.pc-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0d1b3e;
  margin: 0 0 8px;
  line-height: 1.3;
}

.pc-desc {
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(13,27,62,0.54);
  margin: 0;
}

.proces-connector {
  flex: 1;
  position: relative;
  height: 2px;
  background: rgba(13,27,62,0.09);
  border-radius: 2px;
}

.proces-connector-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #26d0ce 0%, #0b9b98 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.38, 0, 0.18, 1);
  box-shadow: 0 0 7px rgba(38,208,206,0.45);
}

.proces-connector-fill.drawing {
  transform: scaleX(1);
}

/* ━━ Secondary CTA ━━ */
.process-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 52px;
}
.process-cta-hint {
  font-size: 13px;
  color: rgba(13,27,62,0.40);
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .proces-stepper {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .proces-card {
    flex: none;
    width: 100%;
    max-width: 480px;           /* cap width so card doesn't stretch edge-to-edge */
    flex-direction: column;     /* vertical stack, same as desktop */
    text-align: center;         /* centred content */
    align-items: center;        /* centred content */
    gap: 0;
    padding: 24px 20px;
  }
  .proces-card.active {
    transform: none;
  }
  .pc-badge {
    margin-bottom: 14px;
    white-space: nowrap;        /* prevent "DO 5 DNÍ" wrapping to 3 lines */
  }
  .pc-icon {
    margin-bottom: 14px;
  }
  .pc-title {
    margin-bottom: 8px;
  }
  .pc-desc {
    text-align: center;
  }
  .proces-connector {
    display: none;
  }
}

/* ── Section headings: fade in on scroll (preserved from Sprint 3A) ── */
#proces .section-label,
#proces h2,
#proces .section-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#proces .section-label.visible,
#proces h2.visible,
#proces .section-subtitle.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

footer {
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(13,27,62,0.08);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
}

.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-tagline {
  font-size: 14px;
  color: rgba(13,27,62,0.45);
  line-height: 1.5;
  max-width: 240px;
}

.footer-nav,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(13,27,62,0.38);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.footer-nav a,
.footer-contact a,
.footer-contact p {
  font-size: 14px;
  color: rgba(13,27,62,0.60);
  text-decoration: none;
  transition: color 0.2s ease;
  margin: 0;
}
.footer-nav a:hover,
.footer-contact a:hover { color: #26d0ce; }

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  border-top: 1px solid rgba(13,27,62,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-bottom p {
  font-size: 12px;
  color: rgba(13,27,62,0.35);
  margin: 0;
}
.footer-legal {
  display: flex;
  gap: 20px;
}
.footer-legal a {
  font-size: 12px;
  color: rgba(13,27,62,0.35);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: #26d0ce; }

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 24px 32px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

/* ════════════════════════════════════════
   KONTAKT SECTION — Sprint 6
   ════════════════════════════════════════ */

#kontakt {
  padding: 100px 24px 80px;
  background: #f7f9fc;
  position: relative;
  overflow: hidden;
}

/* Subtle navy orb — bottom-left, balances teal orbs used elsewhere */
#kontakt::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle,
    rgba(13, 27, 62, 0.05) 0%,
    rgba(38, 208, 206, 0.07) 45%,
    transparent 70%);
  bottom: -120px; left: -80px;
  pointer-events: none;
  z-index: 0;
}

#kontakt .section-inner { position: relative; z-index: 1; }

.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 56px;
  align-items: start;
}

.kontakt-form-wrap {
  padding: 40px;
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.form-field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13,27,62,0.6);
  margin-bottom: 8px;
}

.form-field input,
.form-field textarea {
  background: rgba(255,255,255,0.60);
  border: 1.5px solid rgba(13,27,62,0.12);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.95rem;
  color: #0d1b3e;
  font-family: inherit;
  transition: border-color 200ms, box-shadow 200ms;
  outline: none;
  resize: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(13,27,62,0.35);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(38,208,206,0.6);
  box-shadow: 0 0 0 3px rgba(38,208,206,0.12);
}

.form-field.field-error input,
.form-field.field-error textarea {
  border-color: rgba(220,60,60,0.6);
  box-shadow: 0 0 0 3px rgba(220,60,60,0.08);
}

.field-error-msg {
  font-size: 0.72rem;
  color: #dc3c3c;
  margin-top: 5px;
  min-height: 16px;
  display: block;
}

.kontakt-submit {
  width: 100%;
  padding: 16px;
  margin-top: 8px;
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  color: white;
  border: none;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 200ms, transform 200ms;
  min-height: 52px;
}

.kontakt-submit:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.kontakt-submit.loading {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.kontakt-success,
.kontakt-error {
  text-align: center;
  padding: 32px 24px;
}

.kontakt-success h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0d1b3e;
  margin: 16px 0 8px;
}

.kontakt-success p,
.kontakt-error p {
  color: rgba(13,27,62,0.6);
  font-size: 0.9rem;
}

.kontakt-error a {
  color: #26d0ce;
  font-weight: 600;
}

.kontakt-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.95rem;
  color: #0d1b3e;
}

.info-item a {
  color: #0d1b3e;
  text-decoration: none;
  font-weight: 500;
  transition: color 200ms;
}

.info-item a:hover {
  color: #26d0ce;
}

.response-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: rgba(38,208,206,0.10);
  border: 1px solid rgba(38,208,206,0.25);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #0a8a88;
  width: fit-content;
}

.kontakt-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.kontakt-stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0d1b3e;
  line-height: 1;
}

.kontakt-stat-label {
  font-size: 0.8rem;
  color: rgba(13,27,62,0.55);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .kontakt-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }
  .kontakt-form-wrap {
    padding: 24px 20px;
  }
  .kontakt-info {
    padding-top: 0;
  }
}

/* ════════════════════════════════════════
   #O-NAS — About Section
   ═══════════════════════════════════════════════ */

.onas-section {
  padding: 120px 24px;
  position: relative;
  overflow: hidden;
  background: #f7f9fc;
}

.onas-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse,
    rgba(38,208,206,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.onas-subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(13,27,62,0.60);
  max-width: 520px;
  margin-top: 16px;
}

.onas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  margin-top: 64px;
  align-items: start;
}

.onas-story {
  display: flex;
  flex-direction: column;
}

.onas-story p {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(13,27,62,0.72);
  margin-bottom: 20px;
}

.onas-story p:last-of-type {
  margin-bottom: 0;
}

.onas-quote {
  position: relative;
  margin: 32px 0;
  padding: 24px 28px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.90);
  border-left: 3px solid #26d0ce;
  border-radius: 0 16px 16px 0;
  box-shadow: 0 4px 24px rgba(13,27,62,0.07);
}

.onas-quote p {
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  color: #0d1b3e;
  line-height: 1.6;
  margin: 0;
}

.onas-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 600;
  color: rgba(13,27,62,0.45);
  letter-spacing: 0.04em;
}

.onas-inline-stats {
  display: flex;
  gap: 0;           /* gap removed — dividers own the spacing now */
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(13,27,62,0.08);
}

.onas-inline-stat {
  flex: 1;
  position: relative;
  padding-right: 40px;
}

/* Vertical divider after every stat except the last */
.onas-inline-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 70%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(38, 208, 206, 0.45) 30%,
    rgba(13, 27, 62, 0.12) 70%,
    transparent 100%
  );
}

/* Give items after a divider their left breathing room */
.onas-inline-stat:not(:first-child) {
  padding-left: 40px;
}

.onas-num {
  font-size: 2rem;
  font-weight: 800;
  color: #0d1b3e;
  line-height: 1;
  display: block;
}

.onas-lbl {
  font-size: 0.75rem;
  color: rgba(13,27,62,0.50);
  margin-top: 4px;
  display: block;
  line-height: 1.4;
}

/* Shadow depth layer — constitutional pattern */
.onas-card-wrap {
  position: relative;
}

/* Ghost layer — matches hero .card-back exactly */
.onas-card-back {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  transform: translate(18px, 22px) rotate(3deg);
  box-shadow: 0 8px 32px rgba(13, 27, 62, 0.08);
  z-index: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Glass card — front panel */
.onas-dashboard {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.95);
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(13,27,62,0.10);
  padding: 32px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onas-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.onas-dash-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(13,27,62,0.45);
}

.onas-dash-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0a8a88;
  letter-spacing: 0.03em;
}

.onas-badge-dot {
  width: 5px;
  height: 5px;
  background: #26d0ce;
  border-radius: 50%;
  flex-shrink: 0;
  animation: flipDotPulse 2s ease-in-out infinite;
}

.onas-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(13,27,62,0.07);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}

.onas-metric-cell {
  position: relative;   /* stacking context for ::before / ::after */
  background: rgba(255,255,255,0.65);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: default;
}

/* ── Layer 1: brand gradient (invisible at rest, fades in on hover) ── */
/* CSS cannot transition between two background *values* when one is a
   gradient — the browser snaps. Instead the gradient lives in ::before
   at opacity:0 and we transition opacity only. Silky smooth. */
.onas-metric-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d1b3e 0%, #1a4a6b 55%, #26d0ce 100%);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

/* ── Layer 2: glass sheen (mirrors flip-back::before) ── */
.onas-metric-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.13) 0%,
    rgba(255,255,255,0.00) 55%);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

.onas-metric-cell:hover::before,
.onas-metric-cell:hover::after {
  opacity: 1;
}

/* Text must sit above both overlay layers */
.onas-metric-num,
.onas-metric-lbl {
  position: relative;
  z-index: 2;
}

.onas-metric-cell:hover .onas-metric-num {
  color: #ffffff;
}

.onas-metric-cell:hover .onas-metric-lbl {
  color: rgba(255,255,255,0.65);
}

.onas-metric-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0d1b3e;
  line-height: 1;
  /* Spring easing on scale gives the number a satisfying pop */
  transition: color 420ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Subtle scale-up on the number — tactile, not distracting */
.onas-metric-cell:hover .onas-metric-num {
  transform: scale(1.06);
}

.onas-metric-lbl {
  font-size: 0.72rem;
  color: rgba(13,27,62,0.50);
  line-height: 1.4;
  transition: color 420ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* Animate-in — only if .animate-in does NOT exist globally */
.onas-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.25,0.46,0.45,0.94),
              transform 600ms cubic-bezier(0.25,0.46,0.45,0.94);
}

.onas-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .onas-animate { opacity: 1; transform: none; transition: none; }
}

/* Mobile */
@media (max-width: 768px) {
  .onas-section   { padding: 72px 24px; }
  .onas-grid      { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }
  .onas-inline-stat { padding-right: 24px; }
  .onas-inline-stat:not(:first-child) { padding-left: 24px; }
  .onas-card-back { display: none; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REFERENCE SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#reference {
  padding: 100px 24px;
  background: var(--color-bg-light, #f7f9fc);
  position: relative;
  overflow: hidden;
}

/* ── Decorative cyan orb ── */
.ref-orb {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(38, 208, 206, 0.07) 0%, transparent 70%);
  pointer-events: none;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Filter pills ── */
.ref-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.ref-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* padding absorbs the space a 1.5px border would occupy — no border at all */
  padding: 8.5px 17.5px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  /* inset shadow renders OVER the background, never creates a compositing seam */
  box-shadow: inset 0 0 0 1.5px rgba(13, 27, 62, 0.14);
  background: #ffffff;
  color: rgba(13, 27, 62, 0.60);
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease,
              box-shadow 0.22s ease, transform 0.18s ease;
  font-family: inherit;
  white-space: nowrap;
}

.ref-filter:hover {
  color: #0d1b3e;
  box-shadow: inset 0 0 0 1.5px rgba(13, 27, 62, 0.22),
              0 2px 10px rgba(13, 27, 62, 0.08);
  transform: translateY(-1px);
}

/* Active state — no border, no inset shadow, clean gradient edges */
.ref-filter.is-active {
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(38, 208, 206, 0.28);
  transform: translateY(-1px);
}

.ref-filter-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Reference grid ── */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

/* ── Reference card ── */
.ref-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.90);
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(13, 27, 62, 0.09);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.3s ease;
}

.ref-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 56px rgba(13, 27, 62, 0.16);
}

/* ── Card header row ── */
.ref-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* ── Type badges ── */
.ref-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ref-type-badge--obec {
  background: rgba(13, 27, 62, 0.08);
  color: #0d1b3e;
}

.ref-type-badge--firma {
  background: rgba(38, 208, 206, 0.12);
  color: #0a9b99;
}

.ref-type-badge--dum {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
}

.ref-year {
  font-size: 12px;
  font-weight: 600;
  color: rgba(13, 27, 62, 0.35);
}

/* ── Card icon ── */
.ref-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.ref-icon-wrap--navy  { background: linear-gradient(135deg, #0d1b3e, #1a4a6b); }
.ref-icon-wrap--cyan  { background: linear-gradient(135deg, #0a9b99, #26d0ce); }
.ref-icon-wrap--green { background: linear-gradient(135deg, #047857, #10b981); }

/* ── Card body copy ── */
.ref-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #0d1b3e;
  line-height: 1.35;
  margin-bottom: 6px;
}

.ref-card-location {
  font-size: 12px;
  color: rgba(13, 27, 62, 0.45);
  font-weight: 500;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ref-card-desc {
  font-size: 14px;
  color: rgba(13, 27, 62, 0.62);
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
}

/* ── Amount highlight row ── */
.ref-amount-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(13, 27, 62, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(13, 27, 62, 0.06);
}

.ref-amount-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(13, 27, 62, 0.40);
  text-transform: uppercase;
  flex-shrink: 0;
}

.ref-amount-value {
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ── Card footer ── */
.ref-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(13, 27, 62, 0.07);
  padding-top: 16px;
  margin-top: auto;
}

.ref-category-tag {
  font-size: 12px;
  font-weight: 600;
  color: rgba(13, 27, 62, 0.42);
}

.ref-cta-link {
  font-size: 13px;
  font-weight: 700;
  color: #26d0ce;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s ease;
  white-space: nowrap;
}

.ref-cta-link:hover { gap: 8px; }

/* ── Featured card (2-col span) ── */
.ref-card--featured {
  grid-column: span 2;
  flex-direction: row;
  gap: 28px;
  align-items: flex-start;
}

.ref-card--featured .ref-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ref-card--featured .ref-card-visual {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #0d1b3e 0%, #1a4a6b 60%, #26d0ce 100%);
  border-radius: 16px;
  padding: 24px 16px;
  min-height: 180px;
}

.ref-featured-amount {
  font-size: 26px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.1;
}

.ref-featured-amount-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* ── Pull quote ── */
.ref-quote {
  font-size: 14px;
  font-style: italic;
  color: rgba(13, 27, 62, 0.55);
  line-height: 1.65;
  border-left: 2px solid #26d0ce;
  padding-left: 14px;
  margin: 12px 0 20px;
}

.ref-quote-author {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: #0d1b3e;
}

/* ── Bottom CTA strip ── */
.ref-cta-strip {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.90);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(13, 27, 62, 0.08);
  padding: 36px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ref-cta-strip-text h3 {
  font-size: 22px;
  font-weight: 800;
  color: #0d1b3e;
  margin-bottom: 4px;
}

.ref-cta-strip-text p {
  font-size: 15px;
  color: rgba(13, 27, 62, 0.55);
}

.ref-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(38, 208, 206, 0.30);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ref-cta-btn:hover {
  box-shadow: 0 8px 32px rgba(38, 208, 206, 0.45);
  transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ref-grid { grid-template-columns: repeat(2, 1fr); }
  .ref-card--featured {
    grid-column: span 1;
    flex-direction: column;
  }
  .ref-card--featured .ref-card-visual { width: 100%; min-height: 100px; }
}

@media (max-width: 640px) {
  #reference { padding: 72px 24px; }
  .ref-grid { grid-template-columns: 1fr; }
  .ref-cta-strip {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }
}

/* ── Load-more: extra cards hidden until button clicked ── */
.ref-card--extra {
  display: none;
}

/* ── Load-more button wrapper ── */
.ref-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.ref-load-more-wrap.is-hidden {
  display: none;
}

/* Reuses .btn-ghost utility; no extra styles needed beyond this count pill */
.ref-load-more-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(13, 27, 62, 0.08);
  font-size: 11px;
  font-weight: 700;
  color: rgba(13, 27, 62, 0.55);
  flex-shrink: 0;
}

/* Count pill on gradient button — white frosted override + breathing room */
.hero__cta-primary .ref-load-more-count {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
  margin-left: 10px;
}

/* ── Staggered reveal animation for load-more cards ── */
@keyframes refReveal {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ref-card--revealing {
  animation: refReveal 520ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media (prefers-reduced-motion: reduce) {
  .ref-card { transition: none; }
  .ref-filter { transition: none; }
  .ref-card--revealing { animation: none; }
}




/* ════════════════════════════════════════
   BACK-TO-TOP FLOATING BUTTON
   ════════════════════════════════════════ */

.back-to-top {
  position: fixed;
  bottom: 36px;
  right: 36px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(13, 27, 62, 0.22),
              0 1px 4px  rgba(38, 208, 206, 0.18);
  /* Hidden by default — JS adds .is-visible when user scrolls down */
  opacity: 0;
  transform: translateY(16px) scale(0.88);
  pointer-events: none;
  transition: opacity 0.30s ease,
              transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.20s ease;
  z-index: 900;
  /* SVG chevron inside */
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus {
  box-shadow: 0 8px 28px rgba(13, 27, 62, 0.28),
              0 2px 8px  rgba(38, 208, 206, 0.30);
  transform: translateY(-3px) scale(1.06);
  outline: none;
}

.back-to-top:active {
  transform: translateY(0) scale(0.97);
}

/* SVG arrow icon inside the button */
.back-to-top svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* ── Mobile: slightly smaller, closer to edges ── */
@media (max-width: 768px) {
  .back-to-top {
    width: 44px;
    height: 44px;
    bottom: 24px;
    right: 20px;
  }

  .back-to-top svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .back-to-top.is-visible { transform: none; }
  .back-to-top:hover { transform: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COOKIE CONSENT BAR
   Non-blocking slide-up panel. Stores decision in
   localStorage under key "dc_cookie_consent".
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000; /* below modals, above everything else */
  padding: 0 24px 24px;
  pointer-events: none; /* pass-through until visible */

  /* slide-in from below */
  transform: translateY(110%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-bar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-bar__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;

  /* glass card — matches navbar / .glass-card */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: var(--radius-lg);
  box-shadow: 0 -4px 32px rgba(13, 27, 62, 0.10),
              0 8px 40px rgba(13, 27, 62, 0.08);
  padding: 18px 22px;
}

/* cookie icon */
.cookie-bar__icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

/* text block */
.cookie-bar__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cookie-bar__text strong {
  font-size: 14px;
  font-weight: 700;
  color: #0d1b3e;
  letter-spacing: -0.01em;
}

.cookie-bar__text span {
  font-size: 13px;
  color: rgba(13, 27, 62, 0.60);
  line-height: 1.5;
}

.cookie-bar__text a {
  color: #26d0ce;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-bar__text a:hover {
  color: #0b9b98;
}

/* action buttons */
.cookie-bar__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-items: center;
}

/* Accept — teal filled, same weight as hero CTA */
.cookie-bar__btn--accept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-family: inherit;
  white-space: nowrap;
  background: linear-gradient(135deg, #26d0ce 0%, #0b9b98 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(38, 208, 206, 0.30);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.cookie-bar__btn--accept:hover,
.cookie-bar__btn--accept:focus {
  box-shadow: 0 6px 20px rgba(38, 208, 206, 0.45);
  transform: translateY(-1px);
  outline: none;
}

.cookie-bar__btn--accept:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(38, 208, 206, 0.25);
}

/* Decline — ghost style, matches .btn-ghost */
.cookie-bar__btn--decline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  background: transparent;
  color: rgba(13, 27, 62, 0.55);
  box-shadow: inset 0 0 0 1.5px rgba(13, 27, 62, 0.16);
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

.cookie-bar__btn--decline:hover,
.cookie-bar__btn--decline:focus {
  color: #0d1b3e;
  box-shadow: inset 0 0 0 1.5px rgba(13, 27, 62, 0.32);
  outline: none;
}

/* ── Mobile: stack text above buttons ── */
@media (max-width: 600px) {
  .cookie-bar {
    padding: 0 12px 16px;
  }

  .cookie-bar__inner {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 18px;
  }

  .cookie-bar__icon {
    display: none; /* save space on small screens */
  }

  .cookie-bar__text {
    flex-basis: 100%;
  }

  .cookie-bar__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-bar {
    transition: opacity 0.2s ease;
    transform: none;
    opacity: 0;
  }
  .cookie-bar.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOGO SWITCHING SYSTEM
   Control with data-logo attribute on <body>:
     <body data-logo="v1">  → teal/navy DC lettermark (default)
     <body data-logo="v2">  → illustrated navy+gold brand logo

   To switch identity: change ONE attribute on <body>.
   Both logo sets are always in the DOM — only display changes.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Base: v2 hidden by default (v1 is active) ─────── */
.logo-set { display: contents; } /* transparent wrapper */
.logo-set--v2 { display: none; }

/* ── Activate v2, hide v1 ──────────────────────────── */
body[data-logo="v2"] .logo-set--v1 { display: none; }
body[data-logo="v2"] .logo-set--v2 { display: flex; align-items: center; }

/* ── v2 image sizing ───────────────────────────────── */
.logo-img--v2 {
  display: block;
  /* SVG scales perfectly — constrain by height only, width is auto.
     The SVG has a white fill background; mix-blend-mode keeps it
     seamless on both the glass navbar and the white footer. */
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply; /* white bg disappears on light surfaces */
}

/* Navbar: SVG aspect ratio is 1408:752 ≈ 1.87:1
   At 56px tall → ~105px wide — wordmark stays legible */
.logo-img--navbar {
  height: 56px;
  width: auto;
  max-width: 220px;
}

/* Footer: larger for brand presence */
.logo-img--footer {
  height: 96px;
  width: auto;
  max-width: 380px;
}

/* ── Footer tagline: hide when v2 active (logo has tagline built-in) ── */
body[data-logo="v2"] .footer-tagline--v1 {
  display: none;
}

/* ── Mobile adjustments for v2 logo ───────────────── */
@media (max-width: 767px) {
  .logo-img--navbar { height: 44px; max-width: 180px; }
  .logo-img--footer { height: 72px; max-width: 280px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO SEPARATOR — V1 COLOUR RESTORE
   The wave SVG in index.html was updated with warm v2 colours.
   These CSS rules override the SVG presentation attributes back
   to the v1 cool palette. CSS always wins over SVG attributes.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Restore gradient stops to v1 cool white */
#waveGrad stop:first-child { stop-color: rgba(236, 242, 255, 0); }
#waveGrad stop:last-child  { stop-color: #f7f9fc; }

/* Restore back wave (translucent cool blue, not gold tint) */
.sep-wave path:first-of-type { fill: rgba(200, 220, 255, 0.22); }

/* Restore seal rect to cool white — closes any background bleed */
.hero-separator rect { fill: #f7f9fc; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VYZVY PAGE — vyzvy.html
   Přesunuto sem, aby vyzvy.html používal jediný CSS soubor.
   Všechny barvy/spacing přes design tokeny, glass plochy přes .glass-card.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Status colour tokens ────────────────────────────────────────── */
:root {
  --status-open:      #10b981;
  --status-upcoming:  #f59e0b;
  --status-suspended: #f97316;
  --status-closed:    #94a3b8;
  --status-cancelled: #f43f5e;
}

/* ── Page hero ───────────────────────────────────────────────────── */
.vyzvy-hero {
  background: linear-gradient(
    160deg,
    var(--color-bg-dark-start) 0%,
    #1a3a5c 55%,
    var(--color-bg-dark-end) 100%
  );
  padding: 120px 24px 64px;
  position: relative;
  overflow: hidden;
}

.vyzvy-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 500px at 70% 60%, rgba(38,208,206,0.12), transparent);
  pointer-events: none;
}

.vyzvy-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.vyzvy-hero__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-cyan);
  margin-bottom: 12px;
}

.vyzvy-hero__title {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: var(--font-weight-bold);
  color: #fff;
  line-height: var(--line-height-tight);
  margin-bottom: 16px;
}

.vyzvy-hero__title span {
  background: linear-gradient(90deg, #26d0ce, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vyzvy-hero__subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255,255,255,0.65);
  max-width: 540px;
  margin-bottom: 40px;
  line-height: var(--line-height-relaxed);
}

.vyzvy-hero__meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
}

.vyzvy-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vyzvy-hero__stat-value {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  color: #fff;
  line-height: 1;
}

.vyzvy-hero__stat-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.vyzvy-hero__stat-sep {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: rgba(255,255,255,0.35);
}

.vyzvy-hero__stat-value--upcoming {
  color: rgba(255,255,255,0.6);
}

.vyzvy-hero__stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}

.vyzvy-hero__stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* ── Main section ────────────────────────────────────────────────── */
.vyzvy-section {
  background: var(--color-bg-light);
  min-height: 60vh;
}

.vyzvy-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ── Toolbar ─────────────────────────────────────────────────────── */
.vyzvy-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(13, 27, 62, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(13, 27, 62, 0.06);
  overflow: hidden;
}

/* ── Toolbar rows ── */
.vyzvy-toolbar__row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
}

.vyzvy-toolbar__row--chips {
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(13, 27, 62, 0.06);
  justify-content: space-between;
}

.vyzvy-toolbar__row--controls {
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 20px;
}

/* ── Filter chips ── */
.vyzvy-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.vyzvy-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(13, 27, 62, 0.12);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary, #475569);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.vyzvy-chip:hover {
  background: rgba(13, 27, 62, 0.05);
  border-color: rgba(13, 27, 62, 0.22);
}

.vyzvy-chip.is-active {
  background: #0d1b3e;
  color: #ffffff;
  border-color: #0d1b3e;
  box-shadow: 0 2px 8px rgba(13, 27, 62, 0.2);
}

/* ── Result count (inline with chips) ── */
.vyzvy-count {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

.vyzvy-count strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: 0.85rem;
}

.vyzvy-count__sep {
  color: rgba(13, 27, 62, 0.25);
  margin: 0 1px;
}

.vyzvy-count__label {
  color: var(--color-text-muted);
  margin-left: 2px;
}

/* ── Control dropdowns ── */
.vyzvy-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vyzvy-control__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted, #64748b);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.vyzvy-control__label svg {
  opacity: 0.5;
}

.vyzvy-control__select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(13, 27, 62, 0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid rgba(13, 27, 62, 0.10);
  border-radius: 8px;
  padding: 6px 30px 6px 12px;
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 140px;
}

.vyzvy-control__select:focus {
  outline: none;
  border-color: rgba(38, 208, 206, 0.5);
  box-shadow: 0 0 0 3px rgba(38, 208, 206, 0.10);
}

.vyzvy-control__select:hover {
  border-color: rgba(13, 27, 62, 0.22);
}

/* ── Tile grid ───────────────────────────────────────────────────── */
.vyzvy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  min-height: 200px;
}

/* ── Tile — extends .glass-card ──────────────────────────────────── */
/* .dotace-tile always has class="glass-card dotace-tile" */
.dotace-tile {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  /* Animate-in: start hidden */
  opacity: 0;
  transform: translateY(22px);
  /* Override glass-card's `transition: all` with specific properties */
  transition:
    opacity    0.45s ease,
    transform  0.38s cubic-bezier(0.34,1.4,0.64,1),
    box-shadow 0.28s ease,
    background 0.28s ease;
}

.dotace-tile.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Override glass-card hover: keep our stronger lift */
.dotace-tile:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 16px 48px rgba(13,27,62,0.11),
    0 0 0 1px rgba(38,208,206,0.18);
}

/* Don't hover-lift during animate-in */
.dotace-tile:not(.is-visible):hover {
  transform: translateY(22px) !important;
}

/* -- Status strip (top colour bar) -- */
.dotace-tile__strip {
  height: 4px;
  flex-shrink: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.dotace-tile__strip--open      { background: linear-gradient(90deg, var(--status-open),      #34d399); }
.dotace-tile__strip--upcoming  { background: linear-gradient(90deg, var(--status-upcoming),  #fbbf24); }
.dotace-tile__strip--suspended { background: linear-gradient(90deg, var(--status-suspended), #fb923c); }
.dotace-tile__strip--closed    { background: linear-gradient(90deg, var(--status-closed),    #cbd5e1); }
.dotace-tile__strip--cancelled { background: linear-gradient(90deg, var(--status-cancelled), #fb7185); }

/* -- Body -- */
.dotace-tile__body {
  padding: 20px 22px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* -- Meta row (status badge + program pill) -- */
.dotace-tile__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.dotace-tile__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: var(--radius-full);
}

.dotace-tile__status--open      { background: rgba(16,185,129,0.1);  color: #059669; }
.dotace-tile__status--upcoming  { background: rgba(245,158,11,0.1);  color: #d97706; }
.dotace-tile__status--suspended { background: rgba(249,115,22,0.1);  color: #ea580c; }
.dotace-tile__status--closed    { background: rgba(148,163,184,0.1); color: #64748b; }
.dotace-tile__status--cancelled { background: rgba(244,63,94,0.1);   color: #e11d48; }

.dotace-tile__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.dotace-tile__status--open .dotace-tile__status-dot {
  background: var(--status-open);
  box-shadow: 0 0 5px rgba(16,185,129,0.5);
  animation: vyzvy-pulse 2s ease-in-out infinite;
}
.dotace-tile__status--upcoming  .dotace-tile__status-dot { background: var(--status-upcoming);  }
.dotace-tile__status--suspended .dotace-tile__status-dot { background: var(--status-suspended); }
.dotace-tile__status--closed    .dotace-tile__status-dot { background: var(--status-closed);    }
.dotace-tile__status--cancelled .dotace-tile__status-dot { background: var(--status-cancelled); }

@keyframes vyzvy-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.dotace-tile__program {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: rgba(13,27,62,0.05);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* -- Title -- */
.dotace-tile__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- Divider -- */
.dotace-tile__divider {
  height: 1px;
  background: rgba(13,27,62,0.06);
  margin-bottom: 14px;
}

/* -- Info grid -- */
.dotace-tile__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-top: auto;
}

.dotace-tile__info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dotace-tile__info-label {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}

.dotace-tile__info-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.dotace-tile__info-value--accent {
  background: linear-gradient(135deg, var(--color-text-primary), #26d0ce);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -- Footer -- */
.dotace-tile__footer {
  padding: 10px 22px 14px;
  border-top: 1px solid rgba(13,27,62,0.05);
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}

.dotace-tile__footer--centered {
  justify-content: center;
  text-align: center;
}

.dotace-tile__deadline {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Progress bar (deadline countdown) ───────────────────────────── */
.dotace-tile__progress-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(13,27,62,0.08);
  overflow: hidden;
}

.dotace-tile__progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.dotace-tile__progress-fill--green  { background: #10b981; }
.dotace-tile__progress-fill--orange { background: #f59e0b; }
.dotace-tile__progress-fill--red    { background: #ef4444; }

/* ── Back card top meta ──────────────────────────────────────────── */
.dotace-tile__back-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}


/* ── Loading spinner ─────────────────────────────────────────────── */
.vyzvy-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 20px;
  color: var(--color-text-muted);
}

.vyzvy-loading__spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(38,208,206,0.2);
  border-top-color: #26d0ce;
  border-radius: 50%;
  animation: vyzvy-spin 0.8s linear infinite;
}

@keyframes vyzvy-spin { to { transform: rotate(360deg); } }

.vyzvy-loading__text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

/* ── Empty state ─────────────────────────────────────────────────── */
.vyzvy-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: var(--color-text-muted);
}

.vyzvy-empty__icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.vyzvy-empty__text { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.vyzvy-empty__hint { font-size: var(--font-size-sm); margin-top: 8px; color: var(--color-text-subtle); }

/* ── Load more ───────────────────────────────────────────────────── */
.vyzvy-more {
  text-align: center;
  margin-top: 44px;
}

.vyzvy-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(13,27,62,0.14);
  background: var(--color-glass-bg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-base);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vyzvy-more__btn:hover:not(:disabled) {
  border-color: rgba(38,208,206,0.4);
  background: rgba(38,208,206,0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(38,208,206,0.12);
}

.vyzvy-more__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Source note ─────────────────────────────────────────────────── */
.vyzvy-source {
  text-align: center;
  margin-top: 48px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.vyzvy-source a { color: var(--color-accent-cyan); text-decoration: none; }
.vyzvy-source a:hover { text-decoration: underline; }

/* ── Active nav link (vyzvy page) ────────────────────────────────── */
.navbar__link--active,
.navbar__link--active:hover {
  color: #26d0ce;
  font-weight: var(--font-weight-semibold);
}

/* ── Responsive — vyzvy ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .vyzvy-hero              { padding: 100px 20px 48px; }
  .vyzvy-hero__meta        { gap: 20px; }
  .vyzvy-hero__stat-divider{ display: none; }
  .vyzvy-toolbar__row--chips  { flex-direction: column; align-items: flex-start; }
  .vyzvy-count                { width: 100%; justify-content: center; margin-left: 0; margin-top: 4px; }
  .vyzvy-toolbar__row--controls { flex-direction: column; gap: 10px; }
  .vyzvy-control              { width: 100%; }
  .vyzvy-control__select      { flex: 1; }
  .vyzvy-grid              { grid-template-columns: 1fr; }
  .dotace-tile__info       { grid-template-columns: 1fr; gap: 8px; }
  /* Flip card: ensure full-width within single-column grid on mobile */
  .dotace-flip-card        { width: 100%; max-width: 100%; }
  .dotace-flip-card-inner  { width: 100%; max-width: 100%; }
}

@media (max-width: 480px) {
  .vyzvy-section__inner    { padding: 32px 16px 60px; }
  .vyzvy-grid              { gap: 14px; }
}

/* ── Source badges (zdroj: opzp / ms2021) ────────────────────────── */
.dotace-tile__source-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 6px;
}


/* ── DotaceEU source badge (nový jednotný zdroj) ─────────────────── */
.dotace-tile__source-badge--dotaceeu {
  background: rgba(13, 27, 62, 0.08);
  color: #0d1b3e;
  border: 1px solid rgba(13, 27, 62, 0.18);
}

.dotace-tile__back .dotace-tile__source-badge--dotaceeu {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
}

/* ── Období badge (přední strana karty) ──────────────────────────── */
.dotace-tile__obdobi-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.dotace-tile__obdobi-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-subtle, #6b7280);
}

.dotace-tile__obdobi {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #1a4a6b;
  background: rgba(38, 208, 206, 0.12);
  border: 1px solid rgba(38, 208, 206, 0.35);
  border-radius: 99px;
  padding: 2px 10px;
}

/* ── Alokace — přední strana karty ──────────────────────────────── */
.dotace-tile__alokace-front {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.dotace-tile__alokace-front-label {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}

.dotace-tile__alokace-front-value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ── Back card structured fields (Task B) ────────────────────────── */
.dotace-tile__back-field {
  margin-bottom: 2px;
}

.dotace-tile__back-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 3px;
}

.dotace-tile__back-value {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dotace-tile__back-field--prijemci .dotace-tile__back-value {
  font-size: 0.72rem;
  -webkit-line-clamp: 3;
}

.dotace-tile__back-link {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.dotace-tile__back-link:hover {
  color: #fff;
}

/* ── Reduced motion — vyzvy ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dotace-tile            { opacity: 1; transform: none; transition: none; }
  .vyzvy-loading__spinner { animation: none; border-top-color: #26d0ce; }
  .dotace-tile__status--open .dotace-tile__status-dot { animation: none; }
}

/* ── Dotace flip card wrapper ──────────────────────────────────────── */
.dotace-flip-card {
  /* NO perspective here — perspective on a grid item triggers a Safari layout
     bug where the item ignores grid track sizing and shifts to the right.
     Perspective is applied via transform: perspective() on the inner element. */
  cursor: pointer;
  width: 100%;
  min-width: 0; /* prevents grid blowout */
  min-height: 480px; /* min výška — dost prostoru pro všechna pole na zadní straně */
}

.dotace-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px; /* zaoblené rohy dědí obě strany */
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.dotace-flip-card.flipped .dotace-flip-card-inner {
  transform: perspective(1000px) rotateY(180deg);
}

/* Front face — add backface-visibility + fill fixed-height container */
.dotace-tile {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Tile must fill the fixed 480px container so content doesn't overflow
   into the grid gap and make rows appear merged */
.dotace-flip-card .dotace-tile {
  height: 100%;
}

/* Constitutional rule: one interaction per card — flip wins, no hover lift */
.dotace-flip-card .dotace-tile:hover,
.dotace-flip-card .dotace-tile:not(.is-visible):hover {
  transform: none !important;
  box-shadow: none;
}

/* Back face */
.dotace-tile__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  border-radius: 20px; /* explicitně — inherit nefunguje přes preserve-3d */
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden; /* clip anything that exceeds card bounds */
  background: linear-gradient(150deg, #0d1b3e 0%, #0f2d52 60%, #0d3b3a 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 40px rgba(13, 27, 62, 0.18);
}

.dotace-tile__back-title {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dotace-tile__back-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 12px;
  margin-top: auto; /* push buttons to bottom of card */
  flex-shrink: 0;
}

.dotace-tile__detail-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.dotace-tile__detail-link:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.07);
}

.dotace-tile__contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(38, 208, 206, 0.15);
  border: 1px solid rgba(38, 208, 206, 0.35);
  border-radius: 8px;
  color: #a8f0ef;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.dotace-tile__contact-btn:hover {
  background: rgba(38, 208, 206, 0.25);
  border-color: rgba(38, 208, 206, 0.6);
}

/* ── Vyzvy contact modal ─────────────────────────────────────────── */
.vyzvy-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.vyzvy-modal[data-open] {
  display: flex;
}

.vyzvy-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 62, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.vyzvy-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 40px 36px;
  border-radius: 20px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 8px 32px rgba(13, 27, 62, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.vyzvy-modal__panel input,
.vyzvy-modal__panel textarea,
.vyzvy-modal__panel select {
  font-family: inherit;
  font-size: 0.95rem;
}

.vyzvy-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}

.vyzvy-modal__close:hover {
  color: var(--color-text-primary);
}

.vyzvy-modal__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vyzvy-modal .form-field {
  margin-bottom: 16px;
}

.vyzvy-modal .form-field label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.vyzvy-modal .form-field input,
.vyzvy-modal .form-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(13, 27, 62, 0.16);
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.85);
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.vyzvy-modal .form-field input:focus,
.vyzvy-modal .form-field textarea:focus {
  outline: none;
  border-color: rgba(38, 208, 206, 0.5);
  box-shadow: 0 0 0 3px rgba(38, 208, 206, 0.12);
}

.vyzvy-modal-submit {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, #0d1b3e, #26d0ce);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 8px;
}

.vyzvy-modal-submit:hover:not(:disabled) {
  opacity: 0.88;
}

.vyzvy-modal-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vyzvy-modal-success,
.vyzvy-modal-error {
  text-align: center;
  padding: 16px 0;
  font-weight: var(--font-weight-semibold);
}

.vyzvy-modal-success { color: #059669; }
.vyzvy-modal-error   { color: #e11d48; }

/* ── Back card info rows ─────────────────────────────────────────── */
.dotace-tile__back-top {
  margin-bottom: 10px;
  flex-shrink: 0;
}

.dotace-back__info {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 8px;
  margin-bottom: 0;
  flex: 1;
  min-height: 0; /* allow flex child to shrink below content */
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

/* Ikony uvnitř tlačítek zadní strany */
.dotace-tile__detail-link svg,
.dotace-tile__contact-btn svg {
  vertical-align: middle;
  margin-right: 4px;
  margin-bottom: 2px;
}

@media (max-width: 479px) {
  .vyzvy-modal__panel {
    max-width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    padding: 32px 20px;
  }
  .vyzvy-modal {
    padding: 0;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════
   VYZVY TEASER SECTION
   ═══════════════════════════════════════════════════════════ */

.vyzvy-teaser {
  background: linear-gradient(180deg, #f7f9fc 0%, rgba(38, 208, 206, 0.05) 50%, #f7f9fc 100%);
  padding: 80px 24px;
  overflow: hidden;
}

.vyzvy-teaser__inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 64px;
  align-items: center;
}

/* ── Levý sloupec ── */
.vyzvy-teaser__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.vyzvy-teaser__left .section-label {
  align-self: flex-start;
}

.vyzvy-teaser__left .section-title {
  text-align: left;
  margin-bottom: 12px;
}

.vyzvy-teaser__left .section-subtitle {
  text-align: left;
}

/* Urgency line */
.vyzvy-teaser__urgency {
  font-size: 0.875rem;
  color: #b45309;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 16px;
  line-height: 1.4;
}

.vyzvy-teaser__urgency::before {
  content: "⏱";
  font-size: 0.9em;
  flex-shrink: 0;
}

/* Stats */
.vyzvy-teaser__stats {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 28px 0 36px;
}

.vyzvy-teaser__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vyzvy-teaser__stat-num {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.vyzvy-teaser__stat-label {
  font-size: 0.75rem;
  color: #64748b;
  letter-spacing: 0.02em;
}

.vyzvy-teaser__stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(13, 27, 62, 0.12);
  flex-shrink: 0;
}

/* CTA — uses .hero__cta-primary utility class */

/* ── Pravý sloupec — karty ── */
.vyzvy-teaser__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.vyzvy-teaser__card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(13, 27, 62, 0.07);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Featured karta — gradient border */
.vyzvy-teaser__card--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)) padding-box,
    linear-gradient(135deg, #0d1b3e, #26d0ce) border-box;
  box-shadow: 0 8px 32px rgba(13, 27, 62, 0.14);
  margin-left: -12px;
  margin-right: -12px;
  padding: 24px 36px;
  z-index: 1;
  position: relative;
}

.vyzvy-teaser__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vyzvy-teaser__card-program {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0d1b3e;
  opacity: 0.55;
}

.vyzvy-teaser__card-stav {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.vyzvy-teaser__card-stav--open {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.vyzvy-teaser__card-stav--upcoming {
  background: rgba(234, 179, 8, 0.12);
  color: #b45309;
}

.vyzvy-teaser__card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0d1b3e;
  line-height: 1.4;
  margin: 0;
}

.vyzvy-teaser__card--featured .vyzvy-teaser__card-title {
  font-size: 1rem;
}

.vyzvy-teaser__card-amount {
  font-size: 0.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0d1b3e 0%, #26d0ce 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Responsivita ── */
@media (max-width: 1023px) {
  .vyzvy-teaser__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .vyzvy-teaser__stats {
    flex-wrap: wrap;
  }

  .vyzvy-teaser__cards {
    max-width: 480px;
    margin: 0 auto;
  }

  .vyzvy-teaser__card--featured {
    margin-left: -8px;
    margin-right: -8px;
    padding: 20px 28px;
  }
}

@media (max-width: 479px) {
  .vyzvy-teaser__card--featured {
    margin-left: 0;
    margin-right: 0;
  }
}