/* ============================================================
   SMartina — hlavní stylesheet
   Designový systém: Samsung-like — čistá bílá + Samsung modrá + černá, sans-serif
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --- CSS Custom Properties --- */
/* Fallback pro případ, že Google Fonts nejsou dostupné (file:// nebo offline) */
:root {
  --font-heading: 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
}

:root {
  /* Barvy – Samsung: čistá bílá · černá · Samsung modrá · neutrální šedá */
  --clr-bg:          #FFFFFF;
  --clr-bg-2:        #F5F5F5;
  --clr-bg-3:        #E4E4E4;
  --clr-card:        #FFFFFF;
  --clr-text:        #2B2B31;
  --clr-text-mid:    #55555C;
  --clr-text-light:  #7A7A82;
  --clr-wine:        #6D5AD9;
  --clr-wine-dark:   #574AC0;
  --clr-wine-light:  #9B8FEA;
  --clr-tan:         #7A7A82;
  --clr-tan-light:   #EDEAFB;
  --clr-border:      #DCDCDC;
  --clr-green:       #F5F5F5;
  --clr-green-mid:   #7A7A82;
  --clr-green-dark:  #2E6BE6;
  --clr-bg-green:    #F5F5F5;

  /* Barvy podpůrné */
  --clr-btn:         #34343C;
  --clr-btn-hover:   #4C4C57;
  --clr-accent-blue: #2E6BE6;
  --clr-lilac:       #8E86D6;
  --clr-lilac-soft:  #ECEAF9;
  --clr-blue-soft:   #E6EEFC;
  --clr-silver:      #E4E4E4;
  --clr-pearl-2:     #F5F5F5;

  /* Bílý text na tmavých / modrých tlačítkách */
  --clr-on-accent:   #FFFFFF;

  /* Ploché akcenty (Samsung = bez gradientů) */
  --grad-accent: linear-gradient(120deg, #1428A0 0%, #1428A0 100%);
  --grad-accent-soft: linear-gradient(120deg, rgba(109,90,217,0.08), rgba(142,134,214,0.06));

  /* Typografie — Samsung-like neutrální sans-serif */
  --font-heading: 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Inter', system-ui, 'Segoe UI', Arial, sans-serif;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Border radius — Samsung: střídmé, čisté */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;

  /* Stíny */
  --shadow-sm:  0 2px 8px rgba(40, 25, 30, 0.07);
  --shadow-md:  0 4px 20px rgba(40, 25, 30, 0.10);
  --shadow-lg:  0 8px 40px rgba(40, 25, 30, 0.13);
  --shadow-wine: 0 4px 16px rgba(0, 0, 0, 0.14);

  /* Přechody */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max: 1200px;
  --nav-height: 72px;

  /* Glass – průhledné sklo */
  /* „Glass" přemapováno na Samsung-flat: plná bílá + jemný okraj/stín */
  --glass-bg:           #FFFFFF;
  --glass-bg-strong:    #FFFFFF;
  --glass-border:       #E4E4E4;
  --glass-border-inner: #EDEDED;
  --glass-blur:         none;
  --glass-shadow:       0 2px 12px rgba(0, 0, 0, 0.06);
  --glass-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.7;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--clr-wine);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--clr-wine-dark); }
a:focus-visible {
  outline: 2px solid var(--clr-wine);
  outline-offset: 3px;
  border-radius: 3px;
}

ul, ol { list-style: none; }

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.18;
  color: var(--clr-text);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; }

p { margin-bottom: var(--space-sm); }
p:last-child { margin-bottom: 0; }

.text-wine  { color: var(--clr-wine); }
.text-light { color: var(--clr-text-light); }
.text-center { text-align: center; }

/* Italic dekorace pro Playfair */
.italic-accent {
  font-style: italic;
  color: var(--clr-wine);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: min(var(--container-max), 100% - 3rem);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-2xl);
}
.section--light { background-color: var(--clr-bg); }
.section--warm  { background-color: var(--clr-bg); }
.section--tan   { background-color: var(--clr-bg); }
.section--green { background-color: var(--clr-bg); }

.section__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-xl);
}
.section__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-wine);
  background: transparent;
  border: none;
  padding: 0 0 0.2rem;
  border-radius: 0;
  margin-bottom: var(--space-sm);
}
.section__title { margin-bottom: var(--space-sm); }
.section__header .section__title::after { content: none; }
::selection { background: rgba(20, 40, 160, 0.18); }
.section__desc  { color: var(--clr-text-mid); font-size: 1.05rem; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); }

/* ============================================================
   TLAČÍTKA — netradiční tvary a efekty
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
  white-space: nowrap;
  isolation: isolate;
}

/* Primární — kovové tlačítko (tmavě šedá → modrofialová, titanium look) */
.btn--primary {
  color: #fff;
  padding: 0.95rem 2.3rem;
  border-radius: 14px;
  letter-spacing: 0.01em;
  font-weight: 600;
  background:
    linear-gradient(135deg,
      #2A2A34 0%,
      #3A3B52 46%,
      #565B82 100%);
  border: 1px solid rgba(255,255,255,0.14);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  box-shadow:
    0 7px 20px rgba(38,40,70,0.38),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -4px 10px rgba(0,0,0,0.38);
}
/* Jemný kovový odlesk nahoře */
.btn--primary::before {
  content: '';
  position: absolute;
  top: 1px; left: 6px; right: 6px;
  height: 46%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.02) 100%);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
}
.btn--primary:hover {
  transform: translateY(-2px);
  color: #fff;
  background:
    linear-gradient(135deg,
      #32323F 0%,
      #44465F 46%,
      #656A94 100%);
  box-shadow:
    0 12px 28px rgba(38,40,70,0.48),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -4px 10px rgba(0,0,0,0.38);
}
.btn--primary:active { transform: translateY(0); }

/* Sekundární — čiré sklo (na světlém pozadí, tmavý text) */
.btn--secondary {
  color: var(--clr-text);
  padding: 0.85rem 2rem;
  border-radius: 14px;
  letter-spacing: 0;
  font-weight: 600;
  background:
    linear-gradient(180deg,
      rgba(228,231,238,0.82) 0%,
      rgba(199,204,216,0.68) 50%,
      rgba(180,186,201,0.62) 100%);
  border: 1px solid rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    0 6px 18px rgba(45,50,75,0.14),
    inset 0 1px 1px rgba(255,255,255,0.95),
    inset 0 -6px 12px rgba(55,60,85,0.10);
}
.btn--secondary::before {
  content: '';
  position: absolute;
  top: 2px; left: 7px; right: 7px;
  height: 44%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.08) 100%);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
}
.btn--secondary:hover {
  color: var(--clr-text);
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(40,50,80,0.14),
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -6px 12px rgba(40,50,80,0.06);
}

/* Ghost — matné sklo na tmavém pozadí (bílý text) */
.btn--ghost {
  color: #fff;
  padding: 0.85rem 2rem;
  border-radius: 14px;
  font-weight: 600;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.14) 50%,
      rgba(255,255,255,0.08) 100%);
  border: 1px solid rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.18),
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -6px 12px rgba(0,0,0,0.10);
}
.btn--ghost::before {
  content: '';
  position: absolute;
  top: 2px; left: 7px; right: 7px;
  height: 44%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.06) 100%);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;
}
.btn--ghost:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.24),
    inset 0 1px 1px rgba(255,255,255,0.7),
    inset 0 -6px 12px rgba(0,0,0,0.10);
}

/* Malé tlačítko / tag */
.btn--sm {
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  border-radius: 14px;
}

/* Pulse efekt pro CTA */
.btn--pulse {
  animation: pulse-ring 2.5s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* ============================================================
   NAVIGACE
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.nav.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(201, 206, 233, 0.4), 0 6px 28px rgba(38, 34, 52, 0.08);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav__logo-img {
  height: 44px;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  .nav__logo-img { height: 36px; }
  .section { padding-block: var(--space-xl); }
  .about-image { margin-top: calc(-1 * var(--space-md)); }
}
@media (max-width: 480px) {
  .nav__logo-img { height: 40px; }
}

/* Desktop menu */
.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.nav__links a {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--clr-text);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition);
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--clr-wine);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
  border-radius: 1px;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--clr-wine);
  background: var(--clr-tan-light);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Social ikony v nav */
.nav__social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--clr-bg-2);
  color: var(--clr-text-mid);
  transition: all var(--transition);
}
.nav__social a:hover {
  background: var(--clr-wine);
  color: #fff;
  transform: translateY(-2px);
}
.nav__social svg { width: 32px; height: 32px; }
.nav__social img { width: 32px; height: 32px; display: block; }
.nav__social a:hover img { filter: brightness(0) invert(1); }

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  aria-label: "Otevřít menu";
}
.nav__hamburger span {
  display: block;
  height: 2.5px;
  background: var(--clr-text);
  border-radius: 2px;
  transition: all var(--transition);
  transform-origin: center;
}
.nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.75px) rotate(45deg); }
.nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.75px) rotate(-45deg); }

/* Mobile menu */
.nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(250, 248, 245, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 16vh;
  gap: var(--space-md);
  opacity: 0;
  transform: translateX(100%);
  transition: all var(--transition-slow);
}
.nav__mobile.is-open {
  display: flex;
  opacity: 1;
  transform: translateX(0);
}
.nav__mobile-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
}
.nav__mobile-links a {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-text);
  text-decoration: none;
  transition: color var(--transition);
}
.nav__mobile-links a:hover { color: var(--clr-wine); }

.nav__mobile-social {
  display: flex;
  gap: var(--space-md);
}
.nav__mobile-social img { width: 42px; height: 42px; display: block; }
.nav__mobile-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--clr-bg-2);
  color: var(--clr-text-mid);
  transition: all var(--transition);
}
.nav__mobile-social a:hover {
  background: var(--clr-wine);
  color: #fff;
}

/* ============================================================
   FEATHER — létající peříčko
   ============================================================ */
#feather-wrap {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  top: 20vh;
  left: 70vw;
  will-change: transform, top, left;
  opacity: 0.55;
  transition: top 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95),
              left 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
#feather-wrap img,
#feather-wrap svg {
  width: 200px; /* desktop */
  height: auto;
  animation: feather-sway 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(122,28,46,0.15));
}

@keyframes feather-sway {
  0%   { transform: rotate(-12deg) translateY(0); }
  25%  { transform: rotate(-5deg)  translateY(-8px); }
  50%  { transform: rotate(-18deg) translateY(-14px); }
  75%  { transform: rotate(-8deg)  translateY(-6px); }
  100% { transform: rotate(-12deg) translateY(0); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 60vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding-top: var(--nav-height);
  padding-bottom: var(--space-xl);
  background: linear-gradient(to right, rgba(253,252,251,0.97) 0%, rgba(253,252,251,0.88) 45%, rgba(253,252,251,0.25) 100%), url('../images/hero_foto.png') top right / 80% no-repeat;
  position: relative;
  overflow: hidden;
}

/* Mesh gradient — plující barevné světlo */
.hero::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle at 30% 30%, rgba(142,134,214,0.18) 0%, rgba(142,134,214,0.06) 45%, transparent 70%);
  top: -180px;
  right: -180px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  animation: mesh-drift 16s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 60% 60%, rgba(88,86,214,0.16) 0%, rgba(88,86,214,0.05) 45%, transparent 70%);
  bottom: -80px;
  left: -140px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  animation: mesh-drift 20s ease-in-out infinite reverse;
}
@keyframes mesh-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 30px) scale(1.08); }
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-xl);
  position: relative;
  z-index: 1;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--clr-text-mid);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0 0 0.5rem;
  margin-bottom: var(--space-md);
  width: fit-content;
  border-bottom: 1px solid var(--clr-border);
}
.hero__badge svg {
  width: 17px;
  height: 17px;
  color: var(--clr-wine);
  flex-shrink: 0;
}
.hero__badge span {
  font-weight: 700;
  color: var(--clr-text);
}
.hero__badge-dot { display: none; }

/* Rotující slovo v hero — plná Samsung modrá */
.hero__word-rotate {
  display: inline-block;
  font-style: normal;
  color: var(--clr-wine);
  padding-right: 0.18em;
  padding-bottom: 0.08em;
  margin-right: -0.18em;
  overflow: visible;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hero__word-rotate.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
}

/* Plovoucí hero badge */
.hero__float-badge {
  position: absolute;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.hero__float-badge--light {
  top: 10%; left: -10%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--clr-text);
  border-radius: 12px 4px 12px 4px;
}
.hero__float-badge--wine {
  bottom: 15%; right: -10%;
  background: rgba(142, 54, 70, 0.85);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 4px 20px rgba(142, 54, 70, 0.30), inset 0 1px 0 rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 4px 12px 4px 12px;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero__title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin-bottom: var(--space-md);
  line-height: 1.15;
}
.hero__title em {
  font-style: italic;
  color: var(--clr-wine);
}

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--clr-text-mid);
  max-width: 560px;
  margin-bottom: var(--space-lg);
  line-height: 1.8;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--clr-text-light);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}
.hero__scroll svg { width: 20px; }

/* ============================================================
   KARTY SLUŽEB
   ============================================================ */
/* Wrapper pro karty s odznakem – overflow musí být visible */
.service-card-wrap {
  position: relative;
  padding-top: 0;
}
.service-card-wrap .service-card { overflow: visible; }
.service-card-badge {
  position: absolute;
  top: -13px;
  right: 20px;
  z-index: 3;
  background: var(--grad-text);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.85rem;
  border-radius: 100px;
  z-index: 2;
  box-shadow: var(--shadow-wine);
}

.service-card {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
  cursor: default;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-wine), var(--clr-tan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.service-card:hover {
  transform: translateY(-6px) rotate(0.5deg);
  box-shadow: var(--glass-shadow-hover);
  background: var(--glass-bg);
  border-color: rgba(255,255,255,0.7);
}
.service-card:hover::before { transform: scaleX(1); }

/* Karty s pevným barevným horním okrajem (ceník, balíčky) –
   nepoužívají hover ::before čáru, aby se nelámala přes zaoblené rohy */
.service-card[style*="border-top"]::before { content: none; }
.service-card[style*="border-top"] { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }

.service-card__icon {
  width: 56px;
  height: 56px;
  background: var(--clr-bg-2);
  border-radius: 16px 4px 16px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  transition: all var(--transition);
}
.service-card:hover .service-card__icon {
  background: linear-gradient(140deg, #8B78EE 0%, #6D5AD9 50%, #4A4C90 100%);
  color: #fff;
}
.service-card__icon svg { width: 26px; height: 26px; transition: color var(--transition); }
.service-card:hover .service-card__icon svg { stroke: #fff; }
.service-card__icon img { width: 28px; height: 28px; display: block; transition: filter var(--transition); }
.service-card:hover .service-card__icon img { filter: brightness(0) invert(1); }

.service-card__title {
  font-size: 1.2rem;
  margin-bottom: var(--space-xs);
}
.service-card__desc {
  color: var(--clr-text-mid);
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
}

/* ============================================================
   FEATURE LIST (přehled technologií / přínosů)
   ============================================================ */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--clr-text-mid);
}
.feature-list li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--clr-green-dark);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  margin-top: 1px;
}

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  counter-reset: steps;
}
.process-step {
  position: relative;
  padding: var(--space-lg);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
  counter-increment: steps;
}
.process-step::before {
  content: counter(steps, decimal-leading-zero);
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--clr-green-mid);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.process-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
  border-color: rgba(255,255,255,0.7);
  background: var(--glass-bg);
}
.process-step:hover::before { color: var(--clr-wine); }
.process-step--plain { counter-increment: none; }
.process-step--plain::before { content: none; }
.process-step__title { font-size: 1.05rem; margin-bottom: 0.5rem; }
.process-step__desc { color: var(--clr-text-mid); font-size: 0.9rem; }

/* Ceníkový pruh – odlišený od procesních karet, široký */
.pricing-band {
  margin-top: var(--space-xl);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-lg) var(--space-xl);
  background: linear-gradient(120deg, rgba(123,106,214,0.07), rgba(255,255,255,0.4));
  border: 1px solid rgba(123, 106, 214, 0.18);
  border-left: 4px solid var(--clr-wine);
  border-radius: var(--radius-md);
}
.pricing-band__text { flex: 1 1 420px; }
.pricing-band__text h3 { margin-bottom: var(--space-xs); display: flex; align-items: center; gap: 0.5rem; }
.pricing-band__text p { color: var(--clr-text-mid); margin: 0; font-size: 0.95rem; }
.pricing-band__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; flex-shrink: 0; }
@media (max-width: 600px) {
  .pricing-band {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md);
    gap: var(--space-md);
  }
  .pricing-band__text { flex: 1 1 auto; }
  .pricing-band__actions { width: 100%; }
  .pricing-band__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   ABOUT — fotka + text
   ============================================================ */
.about-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.about-image {
  position: relative;
}
.about-image__frame {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3/4;
  border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%;
  background: var(--clr-bg-3);
  margin: 0 auto;
  overflow: hidden;
  border: 4px solid var(--clr-tan);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-image__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Čistá fotka bez rámečku a pozadí */
.about-image__photo {
  max-width: 460px;
  margin: 0 auto;
}
.about-image__photo img {
  width: 100%;
  height: auto;
  display: block;
  /* jemné rozplynutí spodní i levé hrany do bílého podkladu */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 78%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 15%);
  mask-image:
    linear-gradient(to bottom, #000 78%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 15%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.about-image__badge {
  position: absolute;
  bottom: -10px;
  right: 20px;
  background: var(--grad-text);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  border-radius: 12px 4px 12px 4px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: var(--shadow-wine);
}

.about-content h2 { margin-bottom: var(--space-md); }
.about-content p { color: var(--clr-text-mid); margin-bottom: var(--space-sm); }

/* ============================================================
   STATS / HODNOTY
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
}
.stat-item {
  text-align: center;
  padding: var(--space-lg) var(--space-sm);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}
.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
  background: var(--glass-bg);
}
.stat-item__num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--clr-wine);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}
.stat-item__label {
  font-size: 0.85rem;
  color: var(--clr-text-light);
  font-weight: 600;
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  background:
    radial-gradient(ellipse 55% 80% at 82% 60%, rgba(142,134,214,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 12% 95%, rgba(88,86,214,0.35) 0%, transparent 60%),
    #26262B;
  color: #fff;
  padding-block: var(--space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner__title {
  color: #fff;
  margin-bottom: var(--space-sm);
}
.cta-banner__desc {
  color: rgba(255,255,255,0.8);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto var(--space-lg);
}
.cta-banner__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ============================================================
   FAQ / ACCORDION
   ============================================================ */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item.is-open { border-color: var(--clr-wine); }
.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
  text-align: left;
  gap: var(--space-sm);
}
.faq-btn svg {
  flex-shrink: 0;
  transition: transform var(--transition);
  stroke: var(--clr-wine);
}
.faq-item.is-open .faq-btn svg { transform: rotate(180deg); }
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-body p {
  padding: 0 var(--space-lg) var(--space-md);
  color: var(--clr-text-mid);
  font-size: 0.95rem;
}

/* ============================================================
   KONTAKTNÍ FORMULÁŘ
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.contact-info__icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(140deg, #8B78EE 0%, #6D5AD9 50%, #4A4C90 100%);
  border-radius: 12px 4px 12px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info__icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
.contact-info__icon img { width: 22px; height: 22px; display: block; filter: brightness(0) invert(1); }
.contact-info__label { font-size: 0.8rem; color: var(--clr-text-light); font-weight: 600; }
.contact-info__value { font-weight: 600; color: var(--clr-text); }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--space-md);
}
.form-group label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-text-mid);
  letter-spacing: 0.02em;
}
.form-group label .required {
  color: var(--clr-wine);
  margin-left: 2px;
}
.form-control {
  padding: 0.85rem 1.1rem;
  background: var(--clr-bg);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--clr-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.form-control:focus {
  outline: none;
  border-color: var(--clr-wine);
  box-shadow: 0 0 0 3px rgba(122,28,46,0.12);
}
.form-control::placeholder { color: var(--clr-text-light); }
.form-control.error {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}
textarea.form-control { resize: vertical; min-height: 140px; }

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  margin-bottom: var(--space-md);
}
.form-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--clr-border);
  border-radius: 4px;
  background: var(--clr-bg);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.form-checkbox input[type="checkbox"]:checked {
  background: var(--clr-wine);
  border-color: var(--clr-wine);
}
.form-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.form-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--clr-wine);
  outline-offset: 2px;
}
.form-checkbox span { font-size: 0.88rem; color: var(--clr-text-mid); line-height: 1.5; }
.form-checkbox a { color: var(--clr-wine); text-decoration: underline; }

.form-error {
  font-size: 0.8rem;
  color: #dc2626;
  display: none;
}
.form-error.show { display: block; }

/* ============================================================
   MODAL / TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 9999;
  background: var(--clr-wine);
  color: #fff;
  padding: var(--space-md) var(--space-lg);
  border-radius: 12px 4px 12px 4px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  max-width: 340px;
  transform: translateY(100px);
  opacity: 0;
  transition: all var(--transition);
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast svg { width: 22px; height: 22px; flex-shrink: 0; }
.toast__close {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 0;
  display: flex;
}
.toast__close:hover { color: #fff; }

/* ============================================================
   COOKIE CONSENT BAR – centrovaný modal
   ============================================================ */
#cookie-bar {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(20, 12, 15, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
#cookie-bar.show { display: flex; }
.cookie-bar__inner {
  background: var(--clr-text);
  color: #fff;
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  max-width: 560px;
  width: 100%;
}
.cookie-bar__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.cookie-bar__header strong {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: #fff;
}
.cookie-bar__icon { filter: brightness(0) invert(1); opacity: 0.9; }
.cookie-bar__text {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  margin: 0;
}
.cookie-bar__text a { color: var(--clr-tan); text-decoration: underline; }
.cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.25rem;
}
.btn--cookie-accept {
  background: var(--clr-wine);
  color: #fff;
  padding: 0.65rem 1.6rem;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all var(--transition);
}
.btn--cookie-accept:hover { background: var(--clr-wine-light); transform: translateY(-2px); }
.btn--cookie-settings {
  background: transparent;
  color: rgba(255,255,255,0.7);
  padding: 0.65rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition);
}
.btn--cookie-settings:hover { color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--cookie-reject {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: underline;
  padding: 0.4rem 0.5rem;
  transition: color var(--transition);
  margin-left: auto;
}
.btn--cookie-reject:hover { color: rgba(255,255,255,0.7); }

/* Cookie modal */
#cookie-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(44,36,32,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
#cookie-modal.show { display: flex; }
.cookie-modal__box {
  background: var(--clr-card);
  border-radius: var(--radius-lg);
  max-width: 540px;
  width: 100%;
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}
.cookie-modal__title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: var(--space-md);
}
.cookie-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--clr-border);
  gap: var(--space-sm);
}
.cookie-option:last-of-type { border-bottom: none; }
.cookie-option__info { flex: 1; }
.cookie-option__name { font-weight: 700; font-size: 0.95rem; }
.cookie-option__desc { font-size: 0.82rem; color: var(--clr-text-light); }

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--clr-border);
  border-radius: 100px;
  transition: background var(--transition);
  cursor: pointer;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background: var(--clr-wine); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle input:disabled + .toggle-slider { opacity: 0.6; cursor: not-allowed; }
.toggle input:focus-visible + .toggle-slider { outline: 2px solid var(--clr-wine); outline-offset: 2px; }

/* ============================================================
   ZÁPATÍ (FOOTER)
   ============================================================ */
.footer {
  background: #26262B;
  color: rgba(255,255,255,0.72);
  padding-top: var(--space-2xl);
}
.footer__logo-img {
  height: 42px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  margin-bottom: var(--space-sm);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
}
@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand   { grid-column: 1 / -1; }
  .footer__contact { grid-column: 1 / -1; }
}
.footer__brand h3 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  margin-bottom: var(--space-sm);
}
.footer__brand h3 span { color: var(--clr-wine-light); }
.footer__brand p { font-size: 0.9rem; line-height: 1.7; margin-bottom: var(--space-md); }
.footer__social {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.footer__social a {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  color: rgba(255,255,255,0.7);
}
.footer__social a:hover {
  background: var(--clr-wine);
  color: #fff;
  transform: translateY(-3px);
}
.footer__social svg { width: 32px; height: 32px; }
.footer__social img { width: 32px; height: 32px; display: block; filter: brightness(0) invert(1); opacity: 0.8; }
.footer__social a:hover img { opacity: 1; }

.footer__col h4 {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
}
.footer__links a {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--transition);
}
.footer__links a:hover { color: var(--clr-tan); }

.footer__contact p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}
.footer__contact svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--clr-tan); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-block: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
}
.footer__bottom a { color: rgba(255,255,255,0.5); transition: color var(--transition); }
.footer__bottom a:hover { color: var(--clr-tan); }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-start;
}
.footer__legal-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.footer__cookie-settings {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: 0.72rem;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 0;
  text-align: left;
  text-decoration: underline;
  transition: color var(--transition);
}
.footer__cookie-settings:hover { color: rgba(255,255,255,0.6); }

/* ============================================================
   PAGE LOADER
   ============================================================ */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 240, 231, 0.80);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}
.loader__logo {
  width: 80px;
  height: 80px;
  animation: loader-breathe 1.8s ease-in-out infinite;
}
@keyframes loader-breathe {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.93); }
}
.loader__bar {
  width: 140px;
  height: 3px;
  background: rgba(99, 54, 142, 0.15);
  border-radius: 100px;
  overflow: hidden;
}
.loader__bar-fill {
  height: 100%;
  width: 40%;
  background: var(--clr-wine);
  border-radius: 100px;
  animation: loader-sweep 1.6s ease-in-out infinite;
}
@keyframes loader-sweep {
  0%   { transform: translateX(-200%); }
  100% { transform: translateX(450%); }
}

/* ============================================================
   SLOVNÍČEK POJMŮ
   ============================================================ */
.glossary {
  background:
    linear-gradient(160deg, rgba(142,134,214,0.14) 0%, rgba(233,234,245,0.34) 55%, rgba(255,255,255,0.18) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
  border-top: 1px solid rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 -6px 24px rgba(92,80,170,0.08);
  padding: 0;
}
.glossary__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-text);
  padding: var(--space-lg) 0;
  gap: var(--space-sm);
  text-align: left;
  transition: color var(--transition);
}
.glossary__toggle:hover { color: var(--clr-wine); }
.glossary__toggle-label { display: flex; align-items: center; gap: 0.7rem; }
.glossary__toggle-label svg { stroke: var(--clr-wine); flex-shrink: 0; }
.glossary__icon {
  flex-shrink: 0;
  transition: transform var(--transition);
  stroke: currentColor;
}
.glossary__toggle[aria-expanded="true"] .glossary__icon { transform: rotate(180deg); }
.glossary__header {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.glossary__header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: 0.3rem;
}
.glossary__header p {
  color: var(--clr-text-mid);
  font-size: 0.95rem;
}
.glossary__content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1);
}
.glossary__content.is-open {
  max-height: 4000px;
  padding-bottom: var(--space-xl);
}
.glossary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}
.glossary__card {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: box-shadow var(--transition), transform var(--transition);
}
.glossary__card:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-3px);
}
.glossary__card-emoji {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
}
.glossary__card-emoji img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  display: block;
}
.glossary__card dt {
  font-weight: 700;
  color: var(--clr-wine);
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.glossary__card dd {
  font-size: 0.85rem;
  color: var(--clr-text-mid);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 640px) {
  .glossary__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TICKER – běžící pruh (decentní, před zápatím)
   ============================================================ */
.ticker {
  background: var(--clr-bg-3);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  padding: 0.6rem 0;
  overflow: hidden;
  position: relative;
}
.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(to right, var(--clr-bg-3), transparent); }
.ticker::after  { right: 0; background: linear-gradient(to left,  var(--clr-bg-3), transparent); }
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 36s linear infinite;
}
.ticker__track:hover { animation-play-state: paused; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--clr-text-light);
}
.ticker__item svg { opacity: 0.45; }
.ticker__sep {
  color: var(--clr-border);
  font-size: 0.65rem;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}
.portfolio-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  text-decoration: none;
  color: var(--clr-text);
  display: flex;
  flex-direction: column;
}
.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--glass-shadow-hover);
  background: var(--glass-bg);
}
.portfolio-card__thumb {
  aspect-ratio: 4/3;
  background: var(--clr-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--clr-text-light);
  position: relative;
  overflow: hidden;
}
.portfolio-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.portfolio-card__body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.portfolio-card__cat {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-wine);
  margin-bottom: 0.4rem;
}
.portfolio-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.portfolio-card__desc {
  font-size: 0.88rem;
  color: var(--clr-text-mid);
  flex: 1;
}
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-lg);
}
.portfolio-filter {
  padding: 0.4rem 1.1rem;
  border-radius: 2rem;
  border: 1.5px solid var(--clr-border);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-text-mid);
  cursor: pointer;
  transition: all var(--transition);
}
.portfolio-filter:hover,
.portfolio-filter.active {
  background: var(--clr-wine);
  border-color: var(--clr-wine);
  color: #fff;
}
.portfolio-placeholder {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--clr-bg-2), var(--clr-bg-3));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--clr-text-light);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ============================================================
   SCROLL ANIMACE (AOS-like)
   ============================================================ */
[data-anim] {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-anim="fade-up"]    { transform: translateY(40px); }
[data-anim="fade-left"]  { transform: translateX(-40px); }
[data-anim="fade-right"] { transform: translateX(40px); }
[data-anim="zoom"]       { transform: scale(0.9); }
[data-anim].in-view {
  opacity: 1;
  transform: none;
}

/* Zpoždění pro postupné zobrazování */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }

/* ============================================================
   STRÁNKA 404
   ============================================================ */
.page-404 {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  padding-top: var(--nav-height);
  background: linear-gradient(145deg, var(--clr-bg), var(--clr-bg-2));
}
.page-404__num {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 700;
  color: var(--clr-tan-light);
  line-height: 1;
  display: block;
}
.page-404__title { margin-bottom: var(--space-sm); }
.page-404__desc { color: var(--clr-text-mid); margin-bottom: var(--space-lg); }
.page-404__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); }

/* ============================================================
   PRÁVNÍ STRÁNKY
   ============================================================ */
.legal-page {
  padding-top: calc(var(--nav-height) + var(--space-xl));
  padding-bottom: var(--space-2xl);
  min-height: 100svh;
}
.legal-content {
  max-width: 780px;
  margin: 0 auto;
}
.legal-content h1 { margin-bottom: var(--space-md); }
.legal-content h2 {
  font-size: 1.3rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--clr-border);
}
.legal-content p, .legal-content li {
  color: var(--clr-text-mid);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.legal-content ul, .legal-content ol {
  padding-left: var(--space-md);
}
.legal-content ul li { list-style: disc; }
.legal-content ol li { list-style: decimal; }
.legal-content strong { color: var(--clr-text); }
.legal-meta {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--clr-wine);
  box-shadow: var(--glass-shadow);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-lg);
  font-size: 0.88rem;
  color: var(--clr-text-mid);
}

/* ============================================================
   HERO na podstránkách
   ============================================================ */
.page-hero {
  background: linear-gradient(145deg, var(--clr-bg-2) 0%, var(--clr-bg-3) 100%);
  padding-top: calc(var(--nav-height) + var(--space-xl));
  padding-bottom: var(--space-xl);
  text-align: center;
  position: relative;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  pointer-events: none;
  z-index: 0;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero__subtitle {
  color: var(--clr-text-mid);
  font-size: 1.1rem;
  max-width: 600px;
  margin: var(--space-sm) auto 0;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--clr-text-light);
  margin-bottom: var(--space-sm);
  justify-content: center;
}
.breadcrumb a { color: var(--clr-text-mid); text-decoration: none; }
.breadcrumb a:hover { color: var(--clr-wine); }
.breadcrumb span::before { content: '/'; margin-right: 0.5rem; }

/* ============================================================
   VLASTNÍ IKONY SVG
   ============================================================ */
/* Inline ikona v nadpisu (h3, h4) */
.icon-svg {
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.25em;
  display: inline-block;
  object-fit: contain;
  flex-shrink: 0;
}
/* Samostatná ikona nad kartou */
.icon-svg--card {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  display: block;
  margin-bottom: var(--space-sm);
}
/* Ikona ve tmavém (wine) boxu – zesvětlit */
.highlight-box--wine .icon-svg,
.highlight-box--wine .icon-svg--card {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ============================================================
   HIGHLIGHT BOXY
   ============================================================ */
.highlight-box {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.highlight-box--wine {
  background: linear-gradient(135deg, var(--clr-wine), var(--clr-wine-dark));
  color: #fff;
  border: none;
}
.highlight-box--wine h3,
.highlight-box--wine p { color: #fff; }
.highlight-box--wine p { opacity: 0.85; }

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (min-width: 640px) {
  #cookie-bar {
    flex-direction: row;
    align-items: center;
  }
  .cookie-bar__text { flex: 1; }

  .about-image__frame { max-width: 340px; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE — DESKTOP
   ============================================================ */
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr 0.7fr;
    align-items: center;
  }
  .about-split {
    grid-template-columns: 1fr 1.2fr;
  }
  .contact-grid {
    grid-template-columns: 1fr 1.5fr;
  }

  .nav__hamburger { display: none; }
  .nav__menu { display: flex; }
}

/* ============================================================
   RESPONSIVE — MOBILNÍ
   ============================================================ */
@media (max-width: 1023px) {
  .nav__menu {
    display: none;
  }
  .nav__hamburger { display: flex; }

  :root {
    --space-2xl: 4rem;
    --space-xl: 2.5rem;
  }

  #feather-wrap { opacity: 0.45; }
  #feather-wrap img,
  #feather-wrap svg { width: 130px; } /* tablet */

  .hero__scroll { display: none; }

  .toast {
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: var(--space-sm);
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
  .stats-grid    { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 128px;
    padding: var(--space-md) var(--space-xs);
  }
  .stat-item__num { font-size: 2rem; white-space: nowrap; }
  .stat-item__label { font-size: 0.78rem; }

  .hero {
    background:
      linear-gradient(to bottom, rgba(250,245,240,0.92) 0%, rgba(250,245,240,0.75) 60%, rgba(250,245,240,0.5) 100%),
      url('../images/hero_foto.png') center top / cover no-repeat;
  }

  #feather-wrap img,
  #feather-wrap svg { width: 90px; } /* mobil */
}

/* ============================================================
   FOCUS STYLY — PŘÍSTUPNOST
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--clr-wine);
  outline-offset: 3px;
}

/* Skip link pro klávesnicové uživatele */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-md);
  background: var(--clr-wine);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  z-index: 10000;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; }

/* Redukce pohybu */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #feather-wrap { display: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   PRINT STYLY
   ============================================================ */
@media print {
  .nav, #feather-wrap, #cookie-bar, #cookie-modal, .toast,
  .hero__scroll, .cta-banner { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}

/* ============================================================
   VLASTNÍ KURZOR MYŠI – HVĚZDIČKA
   ============================================================ */
/* Vlastní hvězdičkový kurzor vypnut – Samsung používá běžný kurzor */
#cursor-star { display: none !important; }

#cursor-star.cursor--hover {
  font-size: 26px;
  margin: -13px 0 0 -13px;
  color: var(--clr-wine-light);
  text-shadow:
    0 0 12px rgba(142,54,70,0.7),
    0 0 24px rgba(210,190,200,0.5);
}
#cursor-star.cursor--click {
  font-size: 16px;
  margin: -8px 0 0 -8px;
  color: var(--clr-wine-dark);
}

/* ============================================================
   JEMNÝ ZÁBLESK NA HLAVNÍM TLAČÍTKU
   ============================================================ */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%
  );
  animation: btn-shine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btn-shine {
  0%   { left: -100%; opacity: 0; }
  20%  { opacity: 1; }
  50%  { left: 150%; opacity: 0.4; }
  100% { left: 150%; opacity: 0; }
}

/* ============================================================
   DEKORATIVNÍ SYSTÉM 2025
   Bublinky · Oblouky · Propojovací linie · Foto rámeček
   ============================================================ */

:root {
  --clr-blush:      #FFD9C9;
  --clr-blush-mid:  #FFA88B;
  --clr-rose-bg:    #FFF5EF;
  --clr-deco-line:  rgba(108, 75, 244, 0.22);
}

/* ── Plovoucí dekorativní bublinky ── */
.deco-bubble {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.deco-bubble--wine  { background: rgba(74, 141, 194, 0.08); }
.deco-bubble--blush { background: rgba(250, 213, 181, 0.55); }
.deco-bubble--cream { background: rgba(235, 244, 255, 0.9); }
.deco-bubble--anim  { animation: bubble-drift 12s ease-in-out infinite; }
.deco-bubble--anim-2 { animation: bubble-drift 16s ease-in-out infinite reverse; }
@keyframes bubble-drift {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-18px) scale(1.03); }
}

/* ── Obloukový přechod sekce (arch nahoře) ── */
.section--arch-top {
  position: relative;
}
.section--arch-top::before {
  content: '';
  position: absolute;
  top: -40px; left: -5%; right: -5%;
  height: 80px;
  background: inherit;
  border-radius: 50% 50% 0 0 / 80px 80px 0 0;
  z-index: 1;
}

/* ── Obloukový spodní okraj sekce ── */
.section--arch-bottom {
  position: relative;
  overflow: visible;
}
.section--arch-bottom::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -5%; right: -5%;
  height: 80px;
  background: inherit;
  border-radius: 0 0 50% 50% / 0 0 80px 80px;
  z-index: 1;
}

/* ── Svislá propojovací přerušovaná linie ── */
.deco-connector {
  position: relative;
}
.deco-connector::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0; bottom: 0;
  width: 2px;
  border-left: 2px dashed var(--clr-deco-line);
  z-index: 0;
  pointer-events: none;
}

/* Uzlík na propojovací linii */
.deco-node {
  position: relative;
  z-index: 1;
}
.deco-node::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--clr-wine);
  box-shadow: 0 0 0 4px var(--clr-blush);
  z-index: 2;
}

/* ── Obloukový dekorativní rámeček za foto ── */
.photo-pop {
  position: relative;
  display: inline-block;
}
.photo-pop::before {
  content: '';
  position: absolute;
  bottom: 0; left: 8%;
  width: 84%; height: 88%;
  background: var(--clr-blush);
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg);
  z-index: 0;
}
.photo-pop::after {
  content: '';
  position: absolute;
  top: -10px; right: -10px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: transparent;
  border: 2.5px dashed var(--clr-wine-light);
  opacity: 0.5;
  z-index: 0;
}
.photo-pop img {
  position: relative;
  z-index: 1;
}

/* ── Dekorativní obloukový titulek ── */
.section-label--arch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-wine);
  margin-bottom: var(--space-sm);
}
.section-label--arch::before {
  content: '';
  display: inline-block;
  width: 28px; height: 14px;
  border: 2px solid var(--clr-blush-mid);
  border-bottom: none;
  border-radius: 28px 28px 0 0;
}

/* ── Drobné dekorativní hvězdičky / křížky ── */
.deco-star {
  position: absolute;
  pointer-events: none;
  color: var(--clr-blush-mid);
  font-size: 1.2rem;
  opacity: 0.7;
  z-index: 0;
  animation: star-spin 10s linear infinite;
}
@keyframes star-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Mobilní přizpůsobení dekorací ── */
@media (max-width: 768px) {
  .section--arch-top::before,
  .section--arch-bottom::after { height: 50px; top: -25px; bottom: -25px; }
  .deco-connector::before { left: 24px; }
}

/* ── Vlnité přechody mezi sekcemi ── */
.wave-divider {
  display: block;
  line-height: 0;
  position: relative;
  z-index: 5;
  margin: -80px 0;
  pointer-events: none;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 200px;
}
.section, .hero, .cta-banner {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .wave-divider { margin: -50px 0; }
  .wave-divider svg { height: 130px; }
}

/* ============================================================
   CALLOUT CITÁT
   ============================================================ */
.callout-quote {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--space-md);
}
.callout-quote p {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.5;
  color: var(--clr-text);
  margin: 0;
  font-style: italic;
}
.callout-quote strong { font-style: normal; color: var(--clr-wine); }
.callout-quote__cite {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--clr-tan);
}

/* ============================================================
   EYEBROW — jemný nadtitulek (bez pilulky)
   ============================================================ */
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-wine);
  margin-bottom: var(--space-sm);
  position: relative;
}

/* Zarovnaný header vlevo pro asymetrii */
.section__header--left {
  text-align: left;
  margin-left: 0;
  max-width: 640px;
}

/* ============================================================
   PAIN GRID — „Zní vám to povědomě" karty
   ============================================================ */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.pain-card {
  background: linear-gradient(150deg, rgba(142,134,214,0.16) 0%, rgba(233,234,245,0.34) 55%, rgba(255,255,255,0.20) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(92,80,170,0.14), inset 0 1px 0 rgba(255,255,255,0.75);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pain-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--clr-wine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.pain-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(43, 40, 36, 0.10);
  border-color: rgba(123, 106, 214, 0.30);
}
.pain-card:hover::before { transform: scaleX(1); }
.pain-card__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--clr-text-mid);
  margin-bottom: var(--space-md);
  position: relative;
  padding-left: 1.7rem;
  padding-top: 0.6rem;
}
.pain-card__quote::before {
  content: '“';
  position: absolute;
  left: 0; top: 0.35rem;
  font-size: 2.3rem;
  color: var(--clr-wine);
  opacity: 0.65;
  line-height: 1;
}
.pain-card__quote::after {
  content: '“';
  color: var(--clr-wine);
  opacity: 0.65;
  font-size: 2.3rem;
  line-height: 0;
  margin-left: 0.08em;
  vertical-align: -0.55em;
}
.pain-card__answer {
  color: var(--clr-text-mid);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   COVERFLOW — kolotoč karet (střed největší, boky se zmenšují)
   ============================================================ */
.coverflow {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  --cf-w: 300px;
}
.coverflow__stage {
  position: relative;
  height: 400px;
  perspective: 1400px;
}
.coverflow .pain-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cf-w);
  height: 340px;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease, box-shadow 0.3s;
  will-change: transform, opacity;
  cursor: pointer;
}
/* stavy nastavuje JS přes data-pos (-2..2) */
.coverflow .pain-card[data-pos="0"]   { transform: translate(-50%, -50%) scale(1);    opacity: 1;    z-index: 5; box-shadow: 0 24px 50px rgba(43,43,49,0.14); cursor: default; }
.coverflow .pain-card[data-pos="1"]   { transform: translate(calc(-50% + 250px), -50%) scale(0.82); opacity: 0.78; z-index: 4; }
.coverflow .pain-card[data-pos="-1"]  { transform: translate(calc(-50% - 250px), -50%) scale(0.82); opacity: 0.78; z-index: 4; }
.coverflow .pain-card[data-pos="2"]   { transform: translate(calc(-50% + 440px), -50%) scale(0.66); opacity: 0.5;  z-index: 3; }
.coverflow .pain-card[data-pos="-2"]  { transform: translate(calc(-50% - 440px), -50%) scale(0.66); opacity: 0.5;  z-index: 3; }
.coverflow .pain-card[data-pos="hidden"] { opacity: 0; pointer-events: none; z-index: 1; transform: translate(-50%, -50%) scale(0.5); }
.coverflow .pain-card[data-pos="0"]:hover { transform: translate(-50%, -50%) scale(1); }

.coverflow__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: #fff;
  color: var(--clr-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.coverflow__nav:hover { background: var(--clr-btn); color: #fff; }
.coverflow__nav--prev { left: 0; }
.coverflow__nav--next { right: 0; }

.coverflow__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-md);
}
.coverflow__dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--clr-border);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.coverflow__dots button[aria-selected="true"] {
  background: var(--clr-wine);
  transform: scale(1.25);
}

@media (max-width: 720px) {
  .coverflow { --cf-w: 260px; }
  .coverflow__stage { height: 380px; }
  .coverflow .pain-card[data-pos="1"]  { transform: translate(calc(-50% + 150px), -50%) scale(0.7); opacity: 0.5; }
  .coverflow .pain-card[data-pos="-1"] { transform: translate(calc(-50% - 150px), -50%) scale(0.7); opacity: 0.5; }
  .coverflow .pain-card[data-pos="2"], .coverflow .pain-card[data-pos="-2"] { opacity: 0; pointer-events: none; }
  .coverflow__nav--prev { left: -6px; }
  .coverflow__nav--next { right: -6px; }
}

/* Poznámka pod kartami — admin rozhraní */
.pain-note {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  max-width: none;
  padding: var(--space-md) var(--space-lg);
  background: var(--grad-accent-soft);
  border: 1px solid rgba(123, 106, 214, 0.15);
  border-radius: var(--radius-md);
  text-align: center;
}
.pain-note svg { flex-shrink: 0; stroke: var(--clr-wine); }
.pain-note p { margin: 0; color: var(--clr-text-mid); font-size: 0.95rem; line-height: 1.65; }

/* ============================================================
   SLUŽBY — obnovená mřížka (4 sloupce, leaf motiv)
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}
.services-grid .service-card {
  display: flex;
  flex-direction: column;
}
.services-grid .service-card .btn { margin-top: auto; align-self: flex-start; }

/* Zviditelněný horní teal proužek na kartách služeb */
.services-grid .service-card::before {
  transform: scaleX(1);
  opacity: 0.35;
  transition: opacity var(--transition);
  background: var(--clr-wine);
}
.services-grid .service-card:hover::before { opacity: 1; transform: scaleX(1); }

/* Vizuál v kartě služby (skleněná mini-ikona) */
.service-card__leaf {
  margin-bottom: var(--space-sm);
}
.service-card__leaf svg { width: 34px; height: 34px; display: block; color: var(--clr-wine); }
.service-card__leaf img { width: 76px; height: 76px; display: block; }
.services-grid .service-card:hover .service-card__leaf {
  transform: translateY(-4px) scale(1.04);
  transition: transform var(--transition);
}

/* Spodní poznámka služeb */
.services-note {
  text-align: center;
  max-width: 720px;
  margin: var(--space-lg) auto 0;
  color: var(--clr-text-light);
  font-size: 0.95rem;
}
.services-note a { color: var(--clr-wine); text-decoration: underline; text-underline-offset: 3px; }

/* ── Kompletní servis – vzdušný pruh se skleněnými vizuály ── */
.servis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}
.servis-item {
  text-align: center;
  padding: var(--space-sm);
}
.servis-item img {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-sm);
  display: block;
  transition: transform var(--transition);
}
.servis-item:hover img { transform: translateY(-6px) scale(1.05); }
.servis-item h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}
.servis-item p {
  color: var(--clr-text-mid);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 240px;
  margin: 0 auto;
}

/* ── Odkaz na slovníček pojmů (uprostřed stránek) ── */
.glossary-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  background: var(--grad-accent-soft);
  border: 1px solid rgba(123, 106, 214, 0.16);
  border-radius: 100px;
  color: var(--clr-text-mid);
  font-size: 0.95rem;
}
.glossary-hint svg { stroke: var(--clr-wine); flex-shrink: 0; }
.glossary-hint a {
  color: var(--clr-wine);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

/* ============================================================
   GRADIENTOVÉ AKCENTY — modré/fialové prvky → gradient (dle přílohy)
   ============================================================ */
:root {
  --grad-text: linear-gradient(160deg, #3A3A62 0%, #5B5F97 45%, #8E95C0 100%);
}

/* Text s gradientovou výplní (nadpisy sekcí i karet, zvýraznění, akcenty) */
.section__title,
.section__header h2,
.service-card__title,
.servis-item h3,
.portfolio-card__title,
.eyebrow,
.section__label,
.hero__word-rotate,
.stat-item__num,
.portfolio-card__cat,
.pf-modal__cat,
main p strong,
.pain-card__answer strong,
.callout-quote strong {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Odrážky a aktivní tečky → gradientová výplň */
.feature-list li::before {
  background: var(--grad-text);
}
.coverflow__dots button[aria-selected="true"] {
  background: var(--grad-text);
}


/* ── Portfolio náhledové karty s fotkou (úvodní stránka) ── */
.portfolio-card__logo-wrap {
  display: flex; align-items: center; justify-content: center;
  height: 240px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}
.portfolio-card__logo-wrap img { width: 100%; max-height: 230px; object-fit: contain; }
.portfolio-card__photo-wrap {
  height: 220px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  background: #eef0f3;
}
.portfolio-card__photo-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.portfolio-card:hover .portfolio-card__photo-wrap img { transform: scale(1.05); }


/* ===== OPRAVA MOBILNÍHO COVERFLOW ===== */
@media (max-width: 768px) {

    .coverflow {
        overflow: hidden;
    }

    .coverflow__stage {
        height: 330px;
        overflow: hidden;
    }

    .coverflow {
        --cf-w: min(88vw, 320px);
    }

    .coverflow .pain-card[data-pos="1"] {
        transform: translate(calc(-50% + 95px), -50%) scale(.82);
    }

    .coverflow .pain-card[data-pos="-1"] {
        transform: translate(calc(-50% - 95px), -50%) scale(.82);
    }

    .coverflow .pain-card[data-pos="2"],
    .coverflow .pain-card[data-pos="-2"] {
        opacity: 0;
        pointer-events: none;
    }

    .coverflow__nav {
        width: 40px;
        height: 40px;
    }
}

html,
body {
    overflow-x: clip;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}