/* Consolidated styles extracted from inline <style> blocks. */

/* Local webfonts (restored after styles extraction) */
@font-face{
  font-family:"Bodoni Moda";
  src:url("fonts/BodoniModa-VariableFont_opsz_wght.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("fonts/Manrope-VariableFont_wght.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

/* Optional local face: used for the orbit CTA ring. If the font isn't installed,
   the stack will fall back to system cursive fonts (no external downloads). */
@font-face{
  font-family:"Great Vibes";
  src:local("Great Vibes"), local("GreatVibes");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}


@font-face{
  font-family:"Great Vibes";
  src:url("fonts/GreatVibes-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* --- from CZ --- */

    .gradient-h1 {
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    .fw-backdrop {
      background: linear-gradient(90deg, #c9f4ff 0%, #ffffff 50%, #d9f2e4 100%);
    }
    .btn-login {
      @apply rounded-full border border-brand-600/25 bg-brand-50 px-4 py-2 text-sm font-semibold text-brand-700 transition-colors;
    }
    .btn-login:hover {
      @apply bg-brand-600 text-white shadow;
    }
    select:focus {
      outline: none;
      box-shadow: none;
    }
    #mobile-menu select:focus {
      outline: none;
      box-shadow: none;
    }
  
/* Off-canvas overlay for mobile menu */
#mobile-overlay{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:saturate(120%) blur(1px);display:none}
#mobile-overlay[data-open="true"]{display:block}
/* Focus styles */
:focus-visible{outline:2px solid #7a2cf6;outline-offset:2px}

/* --- Anchor behavior (added) --- */
html{scroll-behavior:smooth}
:root{--header-height:72px }
[data-anchor]{scroll-margin-top:var(--header-height)}
/* --- end --- */
.contact form .btn-submit:hover{ background:#d1d5db !important; }
.contact form .consent-row label{ display:inline-flex; align-items:center; gap:8px; }
.contact form .btn-submit:hover{ background:#d1d5db !important; color:#111827 !important; border-color:#cfd4da !important; }
.contact form .consent-row span{ line-height:1.25; }

/* --- from CZ --- */

    .cookies{position:fixed;left:16px;bottom:16px;z-index:50;max-width:360px }

/* --- from CZ #tailwind-frozen --- */
/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-green-50:oklch(98.2% .018 155.826);--color-green-200:oklch(92.5% .084 155.995);--color-green-700:oklch(52.7% .154 150.069);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-white:#fff;--spacing:.25rem;--container-lg:32rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--tracking-wide:.025em;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--drop-shadow-md:0 3px 3px #0000001f;--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.-top-3{top:calc(var(--spacing)*-3)}.top-0{top:calc(var(--spacing)*0)}.left-1{left:calc(var(--spacing)*1)}.left-1\/2{left:50%}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing)*0)}.mx-auto{margin-inline:auto}.my-12{margin-block:calc(var(--spacing)*12)}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-10{margin-top:calc(var(--spacing)*10)}.mt-12{margin-top:calc(var(--spacing)*12)}.mt-auto{margin-top:auto}.mr-3{margin-right:calc(var(--spacing)*3)}.mb-0{margin-bottom:calc(var(--spacing)*0)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.ml-5{margin-left:calc(var(--spacing)*5)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-1\.5{height:calc(var(--spacing)*1.5)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-full{height:100%}.w-1\.5{width:calc(var(--spacing)*1.5)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-none{max-width:none}.min-w-0{min-width:calc(var(--spacing)*0)}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.-translate-x-1{--tw-translate-x:calc(var(--spacing)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.cursor-not-allowed{cursor:not-allowed}.resize{resize:both}.list-outside{list-style-position:outside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.gap-10{gap:calc(var(--spacing)*10)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-300{border-color:var(--color-slate-300)}.bg-green-50{background-color:var(--color-green-50)}.bg-red-50{background-color:var(--color-red-50)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-50\/60{background-color:#f8fafc99}@supports (color:color-mix(in lab, red, red)){.bg-slate-50\/60{background-color:color-mix(in oklab,var(--color-slate-50)60%,transparent)}}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-300{background-color:var(--color-slate-300)}.bg-slate-900\/50{background-color:#0f172b80}@supports (color:color-mix(in lab, red, red)){.bg-slate-900\/50{background-color:color-mix(in oklab,var(--color-slate-900)50%,transparent)}}.bg-white{background-color:var(--color-white)}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.object-contain{object-fit:contain}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-6{padding-block:calc(var(--spacing)*6)}.py-12{padding-block:calc(var(--spacing)*12)}.py-14{padding-block:calc(var(--spacing)*14)}.py-16{padding-block:calc(var(--spacing)*16)}.pt-1{padding-top:calc(var(--spacing)*1)}.pt-3{padding-top:calc(var(--spacing)*3)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-8{padding-top:calc(var(--spacing)*8)}.pt-16{padding-top:calc(var(--spacing)*16)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pb-16{padding-bottom:calc(var(--spacing)*16)}.pl-5{padding-left:calc(var(--spacing)*5)}.text-center{text-align:center}.text-justify{text-align:justify}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.text-green-700{color:var(--color-green-700)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.drop-shadow-md{--tw-drop-shadow-size:drop-shadow(0 3px 3px var(--tw-drop-shadow-color,#0000001f));--tw-drop-shadow:drop-shadow(var(--drop-shadow-md));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select: text;user-select: text;}.focus-within\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media (hover:hover){.hover\:bg-slate-50:hover{background-color:var(--color-slate-50)}.hover\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow:hover{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:not-sr-only:focus{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.focus\:absolute:focus{position:absolute}.focus\:top-2:focus{top:calc(var(--spacing)*2)}.focus\:left-2:focus{left:calc(var(--spacing)*2)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.aria-pressed\:bg-white[aria-pressed=true]{background-color:var(--color-white)}.aria-pressed\:text-slate-900[aria-pressed=true]{color:var(--color-slate-900)}.aria-pressed\:shadow[aria-pressed=true]{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.aria-selected\:text-white[aria-selected=true]{color:var(--color-white)}@media (min-width:40rem){.sm\:col-span-1{grid-column:span 1/span 1}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:px-6{padding-inline:calc(var(--spacing)*6)}.sm\:py-20{padding-block:calc(var(--spacing)*20)}.sm\:pt-12{padding-top:calc(var(--spacing)*12)}.sm\:pb-20{padding-bottom:calc(var(--spacing)*20)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.sm\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (min-width:48rem){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:py-16{padding-block:calc(var(--spacing)*16)}}@media (min-width:64rem){.lg\:relative{position:relative}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:mb-0{margin-bottom:calc(var(--spacing)*0)}.lg\:w-1\/2{width:50%}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-start{align-items:flex-start}.lg\:justify-center{justify-content:center}.lg\:justify-start{justify-content:flex-start}.lg\:gap-8{gap:calc(var(--spacing)*8)}.lg\:px-8{padding-inline:calc(var(--spacing)*8)}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
/* btn-login explicit fallback */
.btn-login{border-radius:9999px;border:1px solid rgba(122,44,246,0.25);background-color:rgba(122,44,246,0.06);padding:0.5rem 1rem;font-size:0.875rem;line-height:1.25rem;font-weight:600;color:#5c1ff1;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-duration:150ms;text-decoration:none;display:inline-block;}.btn-login:hover{background-color:#7a2cf6;color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);}

/* --- from CZ #brand-fixes --- */

/* Mobile menu link color fix (safe: doesn't affect CTA/buttons) */
@media (max-width: 767.98px){
  nav a:not([class*="btn"]):not([class*="cta"]):not([class*="bg-"]):not([class*="bgbrand"]):not([class*="text-white"]) {
    color: #000 !important;
    text-decoration-color: #000 !important;
  }
}

/* Brand color fixes — desktop only */
@media (min-width: 768px){
  a:not([class*="text-"]):not([class*="!text-"]) {
    color: #5c1ff1;
    text-decoration-color: #5c1ff1;
  }
  a:hover, a:focus {
    color: #7a2cf6;
    text-decoration-color: #7a2cf6;
  }
}
/* Utility shims */
.text-brand-700 { color: #5c1ff1 !important; }
.text-brand-600 { color: #7a2cf6 !important; }
.bg-brand-600 { background-color: #7a2cf6 !important; }
.bg-brand-700 { background-color: #5c1ff1 !important; }
.border-brand-600 { border-color: #7a2cf6 !important; }

/* Mobile menu link color — force black on mobile nav links */
@media (max-width: 767.98px){
  nav a {
    color: #000 !important;
    text-decoration-color: #000 !important;
  }
  /* Keep primary CTA readable (white text) if it has bg */
  nav a[class*="bg-"], nav a[class*="btn"], nav a[class*="cta"], nav a.text-white {
    color: #fff !important;
    text-decoration-color: #fff !important;
  }
}

/* Desktop 'Přihlásit' — match mobile style */
.btn-login{
  border-radius: 9999px !important;
  border: 1px solid rgba(122,44,246,0.25) !important;
  background-color: rgba(122,44,246,0.06) !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 600 !important;
  color: #5c1ff1 !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: color .15s, background-color .15s, border-color .15s !important;
}
.btn-login:hover{
  background-color: #7a2cf6 !important;
  color: #fff !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
}

/* --- from CZ #mobile-menu-css-fixes --- */

/* Mobile-only tweaks for menu items */
@media (max-width: 768px) {
  /* Make sure the mobile menu links are clearly visible */
  #mobile-menu a,
  #mobile-menu button.lang,
  #mobile-menu .nav-link {
    color: #000 !important;
    text-align: center !important;
    display: block;
  }
  /* Sometimes anchors are wrapped in <li> elements; center them too */
  #mobile-menu li { text-align: center !important; }
  /* Ensure CTA/link rows inside the mobile panel are centered */
  #mobile-menu .menu-row,
  #mobile-menu .menu-items { justify-content: center !important; }
}

/* --- from CZ #mobile-cta-and-anchor-fixes --- */

@media (max-width: 768px) {
  /* Force white label for CTA inside the mobile menu panel */
  #mobile-menu a.cta,
  #mobile-menu .cta a,
  #mobile-menu .btn-cta,
  #mobile-menu .cta-button,
  #mobile-menu a.button,
  #mobile-menu button.cta,
  #mobile-menu .cta,
  #mobile-menu .cta > a {
    color: #fff !important;
  }
  /* If CTA uses SVG icon, force its fill to white too */
  #mobile-menu .cta svg,
  #mobile-menu .cta-button svg {
    fill: #fff !important;
    stroke: #fff !important;
  }

  /* Mobile anchor comfort: make anchored sections land clear of sticky header */
  [data-anchor] { scroll-margin-top: var(--header-height, 72px); }
}

/* --- from CZ #cta-hover-text-white --- */

/* Ensure primary CTA text remains white on hover */
a.bg-brand-600:hover,
a.hover\:bg-brand-700:hover,
button.bg-brand-600:hover,
button.hover\:bg-brand-700:hover,
a.btn:hover,
button.btn:hover,
a.button:hover,
button.button:hover {
  color:#fff !important;
}
/* Make sure SVG icons inside CTAs remain white on hover */
a.bg-brand-600:hover svg,
a.hover\:bg-brand-700:hover svg,
button.bg-brand-600:hover svg,
button.hover\:bg-brand-700:hover svg,
a.btn:hover svg,
button.btn:hover svg {
  fill:#fff !important;
  stroke:#fff !important;
}

/* --- from CZ #priklady-hidden-fix --- */

/* Limit to the Examples section so we don't affect other parts */
#priklady .hidden { display:none !important; }


@media (max-width: 768px) {
  /* Keep CTA button white; do NOT target plain 'Kontakt' link */
  #mobile-menu a.bg-brand-600,
  #mobile-menu .rounded-full.bg-brand-600 {
    color: #fff !important;
  }
  #mobile-menu a.bg-brand-600 svg {
    fill: #fff !important;
    stroke: #fff !important;
  }
}

/* --- from CZ --- */

/* Auto-shrink logo based on sticky header bar height */
.site-header .header-bar img[alt*="Logo"],
header .header-bar img[alt*="Logo"]{
  height: calc(var(--header-bar-h, 56px) - 18px);
  width: auto;
  margin: 6px 20px 6px 0;
  vertical-align: middle;
  align-self: center;
}

/* --- from CZ --- */

#domu .client-logos { margin-top: 1.5rem !important; }

/* --- from CZ --- */
/* lang flag tooltip bubble (scoped, minimal) */
.site-header a.lang-link{color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:none!important;}
.site-header a.lang-link:hover,.site-header a.lang-link:focus,.site-header a.lang-link:focus-visible{background-image:var(--gold-gradient)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;text-decoration:none!important;outline:none!important;box-shadow:none!important;}
.lang-flag{position:relative}
.lang-flag .flag-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:#6D28D9;color:#fff;font-size:12px;line-height:1;padding:6px 8px;border-radius:9999px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.lang-flag:focus .flag-tooltip,
.lang-flag:hover .flag-tooltip{opacity:1;transform:translateX(-50%) translateY(10px)}
.lang-flag .flag-tooltip::after{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border-width:6px;border-style:solid;border-color:transparent transparent #6D28D9 transparent}

/* --- from CZ #ls-patch-v1 --- */
.cookies a,.cookies a:link,.cookies a:visited,.cookies a:hover,.cookies a:active,.cookies a:focus,.cookies a:focus-visible{color:#fff!important;text-decoration:underline;}

/* --- from CZ #footer-align-mobile-center-desktop-left --- */

@media (min-width: 640px){
  footer .py-6.text-sm.text-slate-600{ text-align: left !important; }
}
@media (max-width: 639.98px){
  footer .py-6.text-sm.text-slate-600{ text-align: center !important; }
}

/* --- from CZ #footer-mobile-link-below --- */

@media (max-width: 639.98px){
  footer .py-6.text-sm.text-slate-600 a{
    display:block !important;
    text-align:center !important;
  }
}

/* --- from CZ #footer-desktop-center-cta --- */

/* Desktop/tablet: grid with 3 columns → © left, CTA truly centered */
@media (min-width: 640px){
  footer .py-6.text-sm.text-slate-600{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items: center !important;
    text-align: left !important; /* keeps © on the left */
  }
  footer .py-6.text-sm.text-slate-600 a{
    grid-column: 2 !important;
    justify-self: center !important;
    text-align: center !important;
    display: block !important;
  }
}
/* Mobile: two rows, both centered */
@media (max-width: 639.98px){
  footer .py-6.text-sm.text-slate-600{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
  }
  footer .py-6.text-sm.text-slate-600 a{
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
}

/* --- from CZ #lang-flag-mobile-spacing-v2 --- */

@media (max-width: 767.98px){
  /* Remove the dividers in the mobile menu (above the language flag and around CTA) */
  #mobile-menu .border-t.border-slate-200,
  #mobile-menu .border-b.border-slate-200,
  #mobile-menu hr {
    display: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Equalize vertical spacing above/below the language flag link */
  /* Common hrefs used by the language switcher (CZ -> EN root or ../) */
  #mobile-menu a[href="/"],
  #mobile-menu a[href="../"],
  #mobile-menu a[hreflang],
  #mobile-menu a.lang-flag {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;     /* keep visual gap between icon and text consistent */
    padding-top: 0.75rem !important;   /* 12px */
    padding-bottom: 0.75rem !important;/* 12px */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* --- from CZ #cookies-banner-link-style-v1 --- */

/* Cookie consent bar link styled bold & white; prevent visited purple */
#cookie-consent a, #cookie-consent a:visited,
.cookie-consent a, .cookie-consent a:visited,
#cookies a, #cookies a:visited,
#cookie-banner a, #cookie-banner a:visited,
.cookie-banner a, .cookie-banner a:visited {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* --- from CZ #cookies-banner-ui-tweak-v2 --- */

/* (a) Make cookie consent primary button clearly clickable */
#cookie-consent button, .cookie-consent button,
#cookie-banner button, .cookie-banner button,
#cookies button, .cookies button,
#cookie-consent .btn, .cookie-consent .btn,
#cookie-banner .btn, .cookie-banner .btn,
#cookies .btn, .cookies .btn,
#cookie-consent [role="button"], .cookie-consent [role="button"],
#cookie-banner [role="button"], .cookie-banner [role="button"],
#cookies [role="button"], .cookies [role="button"] {
  cursor: pointer !important;
}

/* (b) On very narrow displays, ensure equal side gaps and narrower banner */
@media (max-width: 400px) {
  #cookie-consent, .cookie-consent,
  #cookie-banner, .cookie-banner,
  #cookies, .cookies {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* --- from CZ #cookies-banner-mobile-gap-fix-v3 --- */

/* Ensure symmetric side gaps for cookie bar on very narrow screens */
@media (max-width: 420px) {
  #cookie-consent, .cookie-consent,
  #cookie-banner, .cookie-banner,
  #cookies, .cookies {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding-left: 12px !important;  /* keep inner text away from edge */
    padding-right: 12px !important;
    box-sizing: border-box !important;
    right: 16px !important; /* if positioned */
    left: 16px !important;  /* if positioned */
  }
}

/* --- from CZ #cookies-banner-mobile-gap-fix-v4 --- */

/* Ensure equal right/left gap on narrow mobiles, overriding base .cookies rule */
@media (max-width: 480px) {
  #cookies, .cookies {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* --- from CZ #cookies-accept-button-green-v1 --- */

/* V155: Cookie message + accept control text are black */
#cookies p,
#cookies p a{
  color: #000000 !important;
}
/* --- from CZ --- */

/* Prevent persistent "clicked" purple from browser :visited in header nav;
   active section color is controlled by JS via .text-brand-600 */
.site-header nav a[href^="#"]:visited { color: inherit; }

/* --- from CZ #no-text-caret-fix --- */

    /* Prevent caret/cursor focus in non-form text areas (matches hero behavior). */
    html, body { -webkit-user-select: text; user-select: text; }
    input, textarea, select, button { -webkit-user-select: auto; user-select: auto; }

/* --- from CZ #fix-v67-minimal --- */

/* Minimal fixes from V66 */
html, body { -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; }
#jak-pomaham a:hover,
#jak-pomaham a:active,
#jak-pomaham a:focus,
#jak-pomaham button:hover,
#jak-pomaham button:active,
#jak-pomaham button:focus { color:#ffffff !important; }

/* --- from CZ #fix-v68-minimal --- */

/* Allow text selection but hide caret */
html, body {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  caret-color: transparent;
}

/* Jak pomáhám – keep text white on hover/active/focus */
#jak-pomaham a:hover,
#jak-pomaham a:active,
#jak-pomaham a:focus,
#jak-pomaham button:hover,
#jak-pomaham button:active,
#jak-pomaham button:focus {
  color: #ffffff !important;
}

/* --- from CZ --- */

/* V72: header CTA outlined purple */
/* --- from CZ --- */

/* V76: Menu branding */
.site-header { background: #001d0d !important; }
.site-header a, .site-header button { color: #ffffff !important; }

/* Purple -> Gold in menu */
.site-header .bg-brand-600 {
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
}
.site-header .border-brand-600 {
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
}
.site-header .text-brand-600 {
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* V220: Desktop menu "Kontakt" should be white like other nav items */
.site-header .header-bar nav button[data-menu-cta="true"]{
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* V221: Desktop menu "Kontakt" hover should match other menu items (gold) */
.site-header .header-bar nav button[data-menu-cta="true"]:hover,
.site-header .header-bar nav button[data-menu-cta="true"]:focus,
.site-header .header-bar nav button[data-menu-cta="true"]:focus-visible{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* --- from CZ --- */

/* V77: Reservation CTA states */
/* --- from CZ --- */

/* V78: Full-height logo + gold title in header */
.site-header a[aria-label="Logo"]{
  display:flex;
  align-items:center;
  height:100%;
  gap:10px;
  transition: filter 150ms ease;
}
.site-header a[aria-label="Logo"]:hover{
  filter: drop-shadow(0 0 10px rgba(184,135,70,0.55)) drop-shadow(0 0 18px rgba(253,245,166,0.45));
}

.site-header a[aria-label="Logo"] img{
  height:100%;
  width:auto;
  max-height:100%;
  display:block;
}
.site-header .menu-logo-text{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight:700;
  letter-spacing:0.06em;
  white-space:nowrap;
}

/* --- from CZ --- */

/* V79: Menu hover + logo size + static reservation CTA */
.site-header a[aria-label="Logo"] img {
  height: 40px !important;
  max-height: 40px !important;
}

/* Hover on white menu items -> gold */
.site-header nav a:hover {
  color: #7a2cf6 !important;
}

/* Reservation CTA static (white text, no hover change) */
/* --- from CZ --- */

/* V80: Menu hover gold, logo text bg green, CTA text white */

/* Ensure menu item hover is gold (override any purple) */
.site-header nav a:hover {
  color: #7a2cf6 !important;
}

/* Logo text: dark green background + gold text */
.site-header .menu-logo-text {
  background: #001d0d !important;
  color: #7a2cf6 !important;
  padding: 4px 8px;
}

/* Reservation CTA: force white text always */
/* --- from CZ --- */

/* V81: Menu fixes (logo gold text, gold hover, CTA text white) */
.site-header{
  --st-gold: var(--gold, var(--gold-start));
  --st-green: #001d0d;
}

/* Logo text: gold, no frame */
.site-header .menu-logo-text{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Defensive: no border/frame on logo link */
.site-header a[aria-label="Logo"]{
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Menu item hover -> gold (override purple) */
.site-header nav a:hover,
.site-header nav a:focus,
.site-header nav a:focus-visible{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.site-header nav a:hover *,
.site-header nav a:focus *,
.site-header nav a:focus-visible *{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Reservation CTA text always white */
/* --- from CZ --- */

/* V82: Fix logo background + CTA text color */
/* Logo: keep gold text, remove any gold background/frame */
.site-header a[aria-label="Logo"]{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.site-header .menu-logo-text{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Reservation CTA: text always white (normal + hover) */
/* --- from CZ --- */

/* V84: Language tooltip gold + reservation CTA base state + menu hover gold */
/* 1) Language switch tooltip fill -> gold (override purple) */
.site-header .flag-tooltip{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
}

/* 2) Menu item hover -> gold (override any purple hover:text-brand-600) */
.site-header nav a:hover,
.site-header nav a:focus,
.site-header nav a:focus-visible{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.site-header nav a:hover *,
.site-header nav a:focus *,
.site-header nav a:focus-visible *{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
/* Extra-specific overrides for colon class names */
.site-header nav a.hover\:text-brand-600:hover,
.site-header nav a.hover\:text-brand-600:focus,
.site-header nav a.hover\:text-brand-600:focus-visible{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.site-header nav a[class*="hover:text-brand-600"]:hover,
.site-header nav a[class*="hover:text-brand-600"]:focus,
.site-header nav a[class*="hover:text-brand-600"]:focus-visible{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* 3) Reservation CTA: base state = gold border + green fill + white text */
.site-header button.st-nav-cta{
  background: var(--st-green) !important;
  background-color: var(--st-green) !important;
  border: 2px solid transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.site-header button.st-nav-cta *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* --- from CZ --- */

/* V85: Reservation CTA hover -> gold bg + white text */
.site-header button.st-nav-cta:hover{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.site-header button.st-nav-cta:hover *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* --- from CZ --- */

/* V86: Hero (green backdrop tint + gold CTA) */
.fw-backdrop{
  --st-gold: var(--gold);
  --st-green: #001d0d;
}
.fw-backdrop .hero-cta:not(.hero-cta--match){
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.fw-backdrop .hero-cta:not(.hero-cta--match):hover{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* --- from CZ --- */

/* V87: Global green sections + gold dividers + white/gold typography */
:root{
  --st-gold: var(--gold);
  --st-green: #001d0d;
  --st-green-2: #01311a;
  --st-rail-inset: 48px;
  --st-rail-width: 2px; /* header/footer gold line */
  --st-rail-width-side: calc(var(--st-rail-width) * 0.5); /* 50% narrower side rails */
  --st-rail-width-section: calc(var(--st-rail-width) * 0.25); /* 75% narrower section dividers */
}

/* 1) Header bottom divider */
.site-header{
  border-bottom: var(--st-rail-width-side) solid var(--st-gold) !important; /* V151: match side rail thickness */
}

/* 2) Section backgrounds + dividers */
body{
  background-color: var(--st-green) !important;
  color: #ffffff;
}
#main > section{
  background-color: var(--st-green) !important;
  border-top: 0 !important;
}
#main > section:first-of-type{
  border-top: 0 !important;
}
footer{
  background-color: var(--st-green) !important;
  border-top: var(--st-rail-width) solid var(--st-gold) !important;
}

/* V132: Constrain section/footer dividers to side rails (header divider stays full width) */
#main > section, footer{ position: relative; }
#main > section{ border-top-color: transparent !important; }
#main > section::before{
  content: "";
  position: absolute;
  left: var(--st-rail-inset);
  right: var(--st-rail-inset);
  top: 0;
  /* V150: Section divider thickness -75% (hairline) */
  height: 1px !important;
  transform: scaleY(0.25);
  transform-origin: top;
  background-image: var(--gold-gradient);
  pointer-events: none;
}
#main > section:first-of-type::before{ display:none; }
footer{ position: relative; z-index: 30; }
footer::before{ display:none !important; }
/* Keep hero gradient effect but in green tones */
#main .fw-backdrop{
  background: linear-gradient(90deg, var(--st-green) 0%, var(--st-green-2) 50%, var(--st-green) 100%) !important;
}

/* 3) Typography: black/gray -> white, purple/brand -> gold (scoped to content, not header) */
#main .text-slate-950,
#main .text-slate-900,
#main .text-slate-800,
#main .text-slate-700,
#main .text-slate-600,
#main .text-slate-500,
#main .text-slate-400,
#main .text-slate-300,
footer .text-slate-950,
footer .text-slate-900,
footer .text-slate-800,
footer .text-slate-700,
footer .text-slate-600,
footer .text-slate-500,
footer .text-slate-400,
footer .text-slate-300{
  color: #ffffff !important;
}

/* Brand (purple) text -> gold */
#main .text-brand-700,
#main .text-brand-600,
#main .text-brand-500,
footer .text-brand-700,
footer .text-brand-600,
footer .text-brand-500{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#main .hover\:text-brand-600:hover,
#main .hover\:text-brand-700:hover,
#main [class*="hover:text-brand-600"]:hover,
#main [class*="hover:text-brand-700"]:hover,
footer .hover\:text-brand-600:hover,
footer .hover\:text-brand-700:hover,
footer [class*="hover:text-brand-600"]:hover,
footer [class*="hover:text-brand-700"]:hover{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Common light backgrounds -> dark green so white typography stays readable */
#main .bg-white,
#main .bg-slate-50,
#main .bg-slate-100,
footer .bg-white,
footer .bg-slate-50,
footer .bg-slate-100{
  background-color: var(--st-green-2) !important;
}

/* Brand (purple) backgrounds/borders/rings inside content -> gold */
#main .bg-brand-700,
#main .bg-brand-600,
#main .bg-brand-50,
footer .bg-brand-700,
footer .bg-brand-600,
footer .bg-brand-50{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
}
#main .border-brand-600,
#main .border-brand-700,
footer .border-brand-600,
footer .border-brand-700{
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
}
#main .ring-brand-600,
#main .ring-brand-700,
footer .ring-brand-600,
footer .ring-brand-700{
  --tw-ring-color: var(--gold-start) !important;
}

/* --- from CZ --- */

/* V89: Typography stacks + hero image corners + dividers gray */
:root{
  --st-heading-font: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --st-body-font: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --st-divider: #6b7280; /* gray */
}

/* Body/text (incl. menu + buttons) */
body{
  font-family: var(--st-body-font) !important;
}
.site-header,
.site-header *,
button,
input,
select,
textarea{
  font-family: var(--st-body-font) !important;
}

/* Section headings */
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6{
  font-family: var(--st-heading-font) !important;
}

/* Hero image square corners */
#domu img[src*="maruska-hero.jpg"],
#home img[src*="maruska-hero.jpg"]{
  border-radius: 0 !important;
}

/* Dividers: gold -> gray (header + section separators) */
.site-header{
  border-bottom-color: var(--st-divider) !important;
}
#main > section{
  border-top-color: var(--st-divider) !important;
}
footer{
  border-top-color: var(--st-divider) !important;
}

/* --- from CZ --- */

/* V92: Hero glowing divider + hero CTA to match menu (gold border/green fill) with gold text pre-hover */
:root{
  --st-gold: var(--gold);
  --st-green: #001d0d;
}


/* V141: Hero H1 size + weight (Slyším Tě / I Hear You) */
#domu h1.st-hero-title,
#home h1.st-hero-title{
  font-weight: 400 !important;
  font-size: 3.56rem !important; /* 3.24rem * 1.1 */
  line-height: 1.05 !important;
}
@media (min-width: 640px){
  #domu h1.st-hero-title,
  #home h1.st-hero-title{
    font-size: 4.75rem !important; /* 4.32rem * 1.1 */
  }
}

/* Glowing gold line under hero H1 (width of text column) */
#domu .hero-divider,
#home .hero-divider{
  height: 2px;
  width: 100%;
  max-width: 36rem; /* approximate readable text width */
  margin: 16px 0 18px 0;
  background: linear-gradient(90deg, transparent 0%, var(--gold-start) 20%, var(--gold-end) 50%, var(--gold-start) 80%, transparent 100%);
  filter: blur(1.2px);
  border-radius: 999px;
}



/* Hero image: match approximate height of text on md+ while keeping aspect ratio */
#domu .hero-photo,
#home .hero-photo{
  width: 100%;
  max-width: 32rem;
  height: auto;
}
@media (min-width: 768px){
  #domu .hero-photo,
  #home .hero-photo{
    width: auto !important;
    max-width: 36rem !important;
    max-height: clamp(520px, 68vh, 820px) !important;
  }
}
/* Hero divider inside H1 (used between title lines) */
#domu h1 .hero-divider,
#home h1 .hero-divider{
  display: block;
  margin: 12px 0 12px 0;
}
/* Keep divider aligned with text column; don't affect right image column */
#domu .text-left .hero-divider,
#home .text-left .hero-divider{
  width: 100%;
}

/* Hero CTA match menu base: gold border + green bg; BUT text gold pre-hover */
#domu .hero-cta--match,
#home .hero-cta--match{
  background: var(--st-green) !important;
  background-color: var(--st-green) !important;
  border: 2px solid transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  border-radius: 0 !important; /* match menu CTA square */
}

/* Hover: full gold with white text (same as menu hover) */
#domu .hero-cta--match:hover,
#home .hero-cta--match:hover{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
#domu .hero-cta--match:hover *,
#home .hero-cta--match:hover *{
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* --- from CZ --- */

/* V93: Darker gray dividers + header nav focus/active cleanup + uniform section backgrounds */
:root{
  --st-divider: #4b5563; /* darker gray than before */
}

/* 1) Dividers (header + section separators) */
.site-header{ border-bottom-color: var(--st-divider) !important; }
#main > section{ border-top-color: var(--st-divider) !important; }
footer{ border-top-color: var(--st-divider) !important; }

/* 3) Uniform backgrounds for sections = menu background */
#main > section,
footer,
body{
  background-color: var(--st-green) !important;
}
/* Override previous hero gradient so hero matches menu background */
#main .fw-backdrop{
  background: var(--st-green) !important;
  background-color: var(--st-green) !important;
}

/* 2) Header nav: no gold "frame" on click/focus, only current section stays gold via scrollspy (.text-brand-600) */
.site-header nav a[href^="#"]:focus,
.site-header nav a[href^="#"]:focus-visible,
.site-header nav a[href^="#"]:active{
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Prevent focus state from turning link gold; keep it white unless scrollspy marks it as current */
.site-header nav a[href^="#"]:focus,
.site-header nav a[href^="#"]:focus-visible{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hover stays gold */
.site-header nav a[href^="#"]:hover{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* --- from CZ --- */

/* V95: Menu active item = gold text only (no frame) + scrollspy threshold at section top */
.site-header nav a.text-brand-600,
.site-header nav a.text-brand-600:hover,
.site-header nav a.text-brand-600:focus,
.site-header nav a.text-brand-600:focus-visible,
.site-header nav a.text-brand-600:active{
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* --- from CZ --- */

/* V97: Global palette update (bg + gold + divider) + hero divider color-mix */
:root{
  --bg: #0f1f1b;
  --gold-start: #B88746;
  --gold-end: #FDF5A6;
  --gold-gradient: linear-gradient(90deg, var(--gold-start) 0%, var(--gold-end) 100%);
  --side-pattern-url: url('../pictures/side-knot-pattern.png');
  --side-pattern-left-url: url('../pictures/side-knot-pattern-left.png');
  --side-pattern-right-url: url('../pictures/side-knot-pattern-right.png');
  --side-inset: 24px;
  --side-pattern-w: 28px;
  --gold: var(--gold-start);
  --divider: #00000073;

  /* Back-compat with earlier versions */
  --st-green: var(--bg);
  --st-gold: var(--gold);
  --st-divider: var(--divider);
}

/* 1) Background everywhere (header + sections + footer) */
body,
.site-header,
#main > section,
footer{
  background-color: var(--bg) !important;
}

/* 2/4) Replace any remaining "brand/purple" usage with new gold */
.text-brand-700, .text-brand-600, .text-brand-500,
.hover\:text-brand-700:hover, .hover\:text-brand-600:hover, .hover\:text-brand-500:hover,
[class*="text-brand-"], [class*="hover:text-brand-"]:hover{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.bg-brand-700, .bg-brand-600, .bg-brand-500, .bg-brand-50,
[class*="bg-brand-"]{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
}
.border-brand-700, .border-brand-600, .border-brand-500,
[class*="border-brand-"]{
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
}
.ring-brand-700, .ring-brand-600, .ring-brand-500,
[class*="ring-brand-"]{
  --tw-ring-color: var(--gold-start) !important;
}

/* 6) Dividers between header/sections/footer */
.site-header{ border-bottom-color: var(--divider) !important; }
#main > section{ border-top-color: var(--divider) !important; }
footer{ border-top-color: var(--divider) !important; }

/* Ensure hero backdrop uses bg (no tint) */
#main .fw-backdrop{
  background: var(--bg) !important;
  background-color: var(--bg) !important;
}

/* 3) Hero glowing divider: use color-mix */
#domu .hero-divider,
#home .hero-divider{
  --gold-soft: color-mix(in srgb, var(--gold-start) 18%, transparent);
  background: linear-gradient(90deg, transparent 0%, var(--gold-soft) 20%, var(--gold-start) 45%, var(--gold-end) 55%, var(--gold-soft) 80%, transparent 100%) !important;
  box-shadow: none !important;
}

/* Menu hover should be new gold */
.site-header nav a[href^="#"]:hover{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Active item gold stays new gold (no frame) */
.site-header nav a.text-brand-600,
.site-header nav a.text-brand-600:hover,
.site-header nav a.text-brand-600:focus,
.site-header nav a.text-brand-600:focus-visible,
.site-header nav a.text-brand-600:active{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* --- from CZ --- */

/* V99: Re-issue of prior V98 changes (divider tint + CTA gold + hero divider thickness + hero H1 sizing) */
:root{
  /* Divider = gray tinted by gold (fallback hex, then color-mix when supported) */
  --divider: #6b6761;
  --st-divider: var(--divider);
}
@supports (color: color-mix(in srgb, white 50%, black)) {
  :root{
    --divider: color-mix(in srgb, var(--gold) 25%, #6b7280 75%);
  }
}

/* Apply divider */
.site-header{ border-bottom-color: var(--divider) !important; }
#main > section{ border-top-color: var(--divider) !important; }
footer{ border-top-color: var(--divider) !important; }

/* Buttons: Rezervace termínu + Hero CTA into new gold */
.site-header .st-nav-cta,
#domu .hero-cta--match,
#home .hero-cta--match{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Keep hover readable (still gold + white) */
.site-header .st-nav-cta:hover,
#domu .hero-cta--match:hover,
#home .hero-cta--match:hover{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hero divider thickness x4 */
#domu .hero-divider,
#home .hero-divider{
  height: 8px !important;
}

/* Hero H1: +20% size and increased line-height to prevent overlap */
#domu h1,
#home h1{
  font-size: 3.56rem !important; /* 3.24rem * 1.1 */
  line-height: 1.2 !important;
}
@media (min-width: 640px){
  #domu h1,
  #home h1{
    font-size: 4.75rem !important; /* 4.32rem * 1.1 */
  }
}

/* --- from CZ --- */

/* V100: Menu gold idle + white hover/active + anchor/scrollspy alignment + CTA styles */
:root{
  --divider: #6b6761; /* keep from V99 (warm gray) */
  --st-divider: var(--divider);
}

/* 1) Menu items: idle gold, hover/click/active = white */
.site-header nav a[href^="#"]{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.site-header nav a[href^="#"]:hover,
.site-header nav a[href^="#"]:active,
.site-header nav a[href^=\"#\"]:active{
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  outline: none !important; /* remove frame */
  box-shadow: none !important;
}
/* Active section marker (setActive adds text-brand-600) */
.site-header nav a.text-brand-600,
.site-header nav a.text-brand-600:hover,
.site-header nav a.text-brand-600:focus,
.site-header nav a.text-brand-600:focus-visible,
.site-header nav a.text-brand-600:active{
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 3) Header CTA (Rezervace termínu) must use new gold */
.site-header .st-nav-cta{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* 4) Hero CTA: pre-hover = gold border + gold text + green fill, hover = gold fill + black text + glow */
#co-nabizim,
#what-i-offer{
  --bg: transparent;
}

#domu .hero-cta--match,
#home .hero-cta--match,
#co-nabizim .hero-cta--match,
#what-i-offer .hero-cta--match,
.site-header .hero-cta--match{
  background-color: var(--bg) !important;
  border: 2px solid transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#domu .hero-cta--match:hover,
#home .hero-cta--match:hover,
#co-nabizim .hero-cta--match:hover,
#what-i-offer .hero-cta--match:hover,
.site-header .hero-cta--match:hover{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  filter: drop-shadow(0 0 10px rgba(184,135,70,0.55)) drop-shadow(0 0 18px rgba(253,245,166,0.45)) !important;
}

/* Ensure hero CTA doesn't show focus frame either (match menu look) */
#domu .hero-cta--match:focus,
#domu .hero-cta--match:focus-visible,
#home .hero-cta--match:focus,
#home .hero-cta--match:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Section separators: use new gold gradient */
section.border-t.border-slate-200{
  border-top-width: 0 !important;
  border-top-color: transparent !important;
  border-image: none !important;
}

.site-header.border-b.border-slate-200{
  border-bottom-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
}
footer.border-t.border-slate-200{
  border-top-width: var(--st-rail-width) !important;
  border-top-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
}

/* --- from CZ --- */

/* V102: Fix persistent white nav item after click (override legacy focus color rules) */
.site-header nav a[href^="#"]:focus,
.site-header nav a[href^="#"]:focus-visible{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Keep active section white even if focused */
.site-header nav a.text-brand-600:focus,
.site-header nav a.text-brand-600:focus-visible{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- from CZ --- */

/* V103: Swap menu item colors (idle white, active/hover gold) + make header CTA match hero CTA */
.site-header nav a[href^="#"]{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Hover/click interaction -> gold */
.site-header nav a[href^="#"]:hover,
.site-header nav a[href^="#"]:active{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Prevent "stuck" color after click (focus remains white) */
.site-header nav a[href^="#"]:focus,
.site-header nav a[href^="#"]:focus-visible{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Active section (scrollspy adds text-brand-600) -> gold */
.site-header nav a.text-brand-600,
.site-header nav a.text-brand-600:hover,
.site-header nav a.text-brand-600:active,
.site-header nav a.text-brand-600:focus,
.site-header nav a.text-brand-600:focus-visible{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Mobile menu buttons (best effort to match desktop behavior) */
.site-header #mobile-menu nav button{
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}
.site-header #mobile-menu nav button:hover,
.site-header #mobile-menu nav button:active{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.site-header #mobile-menu nav button:focus,
.site-header #mobile-menu nav button:focus-visible{
  color: #ffffff !important;
}

/* Header CTA ("Rezervace termínu") match hero CTA look, keep original text/size */
.site-header .st-nav-cta{
  background-color: var(--bg) !important;
  border: 2px solid transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.site-header .st-nav-cta:hover{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* --- from CZ --- */

/* V105: Header CTA ("Rezervace termínu") — gold text default, white on hover, using new gold */
.site-header .st-nav-cta{
  background-color: var(--bg) !important;
  border: 2px solid transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.site-header .st-nav-cta:hover{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* --- from CZ --- */

/* V106: Force header CTA text gold by default (override any Tailwind text-white), white on hover */
.site-header button.st-nav-cta{
  background-color: var(--bg) !important;
  border: 2px solid transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.site-header button.st-nav-cta:hover{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* --- from CZ --- */

/* V117: Cursor-follow gold dot */
#cursor-dot{
  position: fixed;
  left: 0;
  top: 0;
  width: 2mm;
  height: 2mm;
  border-radius: 999px;
  background-color: var(--gold-start);
  background-image: var(--gold-gradient);
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 2147483647;
  opacity: 0;
  transform: translate3d(-9999px,-9999px,0);
  filter:
    drop-shadow(0 0 5px rgba(184,135,70,0.413))
    drop-shadow(0 0 9px rgba(253,245,166,0.385))
    drop-shadow(0 0 18px rgba(253,245,166,0.22));
  overflow: visible;
}
/* V131: Cursor comet tail (lags behind dot) */
#cursor-tail{
  position: fixed;
  left: 0;
  top: 0;
  height: 2.2mm;
  width: 18px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2147483646;
  opacity: 0;
  transform: translate3d(-9999px,-9999px,0);
  background-image: linear-gradient(90deg,
    rgba(184,135,70,0.00) 0%,
    rgba(184,135,70,0.10) 35%,
    rgba(253,245,166,0.60) 100%);
  filter: blur(0.8mm) drop-shadow(0 0 10px rgba(253,245,166,0.22));
  transform-origin: 100% 50%;
  will-change: transform, width, opacity;
}
/* V140: Curved elastic comet tail rendered on canvas (not a straight bar) */
#cursor-tail-canvas{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2147483646;
  opacity: 0;
}

#cursor-dot::before{
  content:none;
  display:none;
  position:absolute;
  left:50%;
  top:50%;
  width: 26mm;
  height: 26mm;
  transform: translate(-50%,-50%) rotate(15deg);
  border-radius: 999px;
  background-image:
    linear-gradient(90deg, rgba(253,245,166,0) 0%, rgba(253,245,166,0) 44%, rgba(253,245,166,0.95) 50%, rgba(253,245,166,0) 56%, rgba(253,245,166,0) 100%),
    linear-gradient(0deg,  rgba(253,245,166,0) 0%, rgba(253,245,166,0) 44%, rgba(253,245,166,0.95) 50%, rgba(253,245,166,0) 56%, rgba(253,245,166,0) 100%),
    linear-gradient(45deg, rgba(253,245,166,0) 0%, rgba(253,245,166,0) 44%, rgba(253,245,166,0.75) 50%, rgba(253,245,166,0) 56%, rgba(253,245,166,0) 100%),
    linear-gradient(-45deg,rgba(253,245,166,0) 0%, rgba(253,245,166,0) 44%, rgba(253,245,166,0.75) 50%, rgba(253,245,166,0) 56%, rgba(253,245,166,0) 100%);
  filter: blur(0.9mm);
  opacity: 0.95;
  pointer-events:none;
}
#cursor-dot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 8.3mm;
  height: 8.3mm;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background-image: radial-gradient(circle,
    rgba(253,245,166,0.55) 0%,
    rgba(253,245,166,0.396) 18%,
    rgba(184,135,70,0.319) 44%,
    rgba(184,135,70,0.00) 76%);
  filter: blur(0.88mm);
  opacity: 1;
  animation: st-cursor-pulse 3.2s ease-in-out infinite;
  will-change: opacity, transform;
  pointer-events:none;
}

/* V142: Slow pulse for cursor dot glow */
@keyframes st-cursor-pulse{
  0%, 100%{ opacity: 0.65; transform: translate(-50%,-50%) scale(0.95); }
  50%{ opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
}

/* V144: Slow blink for dot core (dot + tail requested to blink) */
#cursor-dot.st-cursor-visible{
  animation: st-cursor-dot-blink 3.2s ease-in-out infinite;
}
@keyframes st-cursor-dot-blink{
  0%, 100%{ opacity: 0; }
  45%, 55%{ opacity: 1; }
}
#cursor-tail-canvas.st-cursor-visible{
  animation: st-cursor-tail-blink 3.2s ease-in-out infinite;
}
@keyframes st-cursor-tail-blink{
  0%, 100%{ opacity: 0; }
  45%, 55%{ opacity: 1; }
}
@media (pointer: coarse){
  #cursor-dot, #cursor-tail, #cursor-tail-canvas{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  #cursor-dot, #cursor-tail, #cursor-tail-canvas{ display:none !important; }
}

/* V130: Side vertical lines — thin line in current gold */
body::before, body::after{
  content: "";
  position: fixed;
  top: calc(var(--header-height, 72px) + 2px);
  bottom: 0;
  width: var(--st-rail-width-side) !important;
  pointer-events: none;
  z-index: 20;
  opacity: 1;

  background-image: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Left: column offset from edge (gradient reversed) */
body::before{
  left: var(--st-rail-inset);
  background-color: var(--gold-start);
}

/* Right: column offset from edge */
body::after{
  right: var(--st-rail-inset);
  background-color: var(--gold-end);
}

/* V118: Header audio play button */
.audio-play-btn{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--gold-gradient) border-box;
  color: #000;
  transition: filter 150ms ease, transform 150ms ease;
}
.audio-play-btn:hover{
  filter: drop-shadow(0 0 10px rgba(184,135,70,0.55)) drop-shadow(0 0 18px rgba(253,245,166,0.45));
}
.audio-play-btn:active{
  transform: translateY(1px);
}
.audio-play-btn .audio-play-icon{
  width: 18px;
  height: 18px;
  fill: currentColor;
}


.audio-play-btn .icon-play{ fill: #000; }
.audio-play-btn .icon-pause{ display:none; }
.audio-play-btn.is-playing .icon-play{ display:none; }
.audio-play-btn.is-playing .icon-pause{ display:block; }

/* V147: Keep audio pause icon black (stop/II) same as play */
.site-header .audio-play-btn{ color: #000 !important; }
.site-header .audio-play-btn .icon-play,
.site-header .audio-play-btn .icon-pause{ fill: #000 !important; }

/* V218: Mobile menu audio button — gold fill */
#mobile-menu .audio-play-btn{
  background: var(--gold-gradient) !important;
  border: 1px solid transparent !important;
  color: #000 !important;
}

/* --- from CZ --- */

/* V145: CZ quick-fixes (hero word-spacing, hero divider full line + 50% opacity) */

/* Ensure Hero title is +10% bigger (Tailwind-safe) */
#domu h1.st-hero-title{ font-size: 3.56rem !important; } /* 3.24rem * 1.1 */
@media (min-width: 640px){
  #domu h1.st-hero-title{ font-size: 4.75rem !important; } /* 4.32rem * 1.1 */
}

/* +5% word spacing vs V151 for the two hero text lines */
#domu h1.st-hero-title > span.block{
  word-spacing: 0.079em !important; /* +5% vs V151 (0.075em -> 0.079em) */
}

/* Hero dividers: no fading at sides, same full length, 50% opacity */
#domu .hero-divider{
  width: 100% !important;
  max-width: none !important;
  background: var(--gold-gradient) !important;
  filter: none !important;
  opacity: 0.5 !important;
  border-radius: 0 !important;
}

/* --- from CZ #footer-contact-v1 --- */

.footer-contact{display:inline;line-height:1.4;}
.footer-contact .footer-line{display:inline;}
.footer-contact .footer-sep{display:inline;}
@media (max-width: 767.98px){
  .footer-contact{display:flex;flex-direction:column;align-items:center;gap:2px;}
  .footer-contact .footer-line{display:block; overflow-wrap:anywhere; word-break:break-word;}
  .footer-contact .footer-sep{display:none;}
}

/* --- from CZ --- */

/* V177: Tiles (Jak pomáhám + Co nabízím) — restore green background + rail-like borders */
.gold-gradient-frame{
  /* V180: gold rail-like frame with true L→R gradient on every side + square corners */
  --st-tile-bw: var(--st-rail-width-side);
  border: 0 !important;
  border-radius: 0 !important;
  background:
    var(--gold-gradient) top / 100% var(--st-tile-bw) no-repeat,
    var(--gold-gradient) bottom / 100% var(--st-tile-bw) no-repeat,
    var(--gold-gradient) left / var(--st-tile-bw) 100% no-repeat,
    var(--gold-gradient) right / var(--st-tile-bw) 100% no-repeat,
    var(--st-green) !important;
  background-color: var(--st-green) !important;
}

/* V179: Product card titles use the same font family as the menu (keep size/color) */
#co-nabizim h3,
#what-i-offer h3{
  font-family: var(--st-body-font) !important;
}

/* Product card divider (gold gradient line) */
.st-gold-hr{
  border: 0 !important;
  height: 1px !important;
  background: var(--gold-gradient) !important;
  opacity: 0.85;
}

/* V179: Prose spacing + first-line indent (My story / How I help) */
.st-prose p,
p.st-prose{
  text-indent: 0;
}
.st-prose p + p{
  margin-top: 1.2rem;
}

/* --- from EN #brand-fixes --- */



/* Mobile menu link color fix (safe: doesn't affect CTA/buttons) */
@media (max-width: 767.98px){
  nav a:not([class*="btn"]):not([class*="cta"]):not([class*="bg-"]):not([class*="bgbrand"]):not([class*="text-white"]) {
    color: #000 !important;
    text-decoration-color: #000 !important;
  }
}

/* Brand color fixes — desktop only */
@media (min-width: 768px){
  a:not([class*="text-"]):not([class*="!text-"]) {
    color: #5c1ff1;
    text-decoration-color: #5c1ff1;
  }
  a:hover, a:focus {
    color: #7a2cf6;
    text-decoration-color: #7a2cf6;
  }
}
/* Utility shims */
.text-brand-700 { color: #5c1ff1 !important; }
.text-brand-600 { color: #7a2cf6 !important; }
.bg-brand-600 { background-color: #7a2cf6 !important; }
.bg-brand-700 { background-color: #5c1ff1 !important; }
.border-brand-600 { border-color: #7a2cf6 !important; }

/* Mobile menu link color — force black on mobile nav links */
@media (max-width: 767.98px){
  nav a {
    color: #000 !important;
    text-decoration-color: #000 !important;
  }
  /* Keep primary CTA readable (white text) if it has bg */
  nav a[class*="bg-"], nav a[class*="btn"], nav a[class*="cta"], nav a.text-white {
    color: #fff !important;
    text-decoration-color: #fff !important;
  }
}

/* Desktop 'Login' — match mobile style */
.btn-login{
  border-radius: 9999px !important;
  border: 1px solid rgba(122,44,246,0.25) !important;
  background-color: rgba(122,44,246,0.06) !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 600 !important;
  color: #5c1ff1 !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: color .15s, background-color .15s, border-color .15s !important;
}
.btn-login:hover{
  background-color: #7a2cf6 !important;
  color: #fff !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
}


@media (max-width: 768px) {
  /* Keep CTA button white; do NOT target plain 'Contact' link */
  #mobile-menu a.bg-brand-600,
  #mobile-menu .rounded-full.bg-brand-600 {
    color: #fff !important;
  }
  #mobile-menu a.bg-brand-600 svg {
    fill: #fff !important;
    stroke: #fff !important;
  }
}

/* --- from EN #lang-flag-mobile-spacing-v2 --- */

@media (max-width: 767.98px){
  #mobile-menu .border-t.border-slate-200,
  #mobile-menu .border-b.border-slate-200,
  #mobile-menu hr {
    display: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #mobile-menu a[href="/"],
  #mobile-menu a[href="../"],
  #mobile-menu a[hreflang],
  #mobile-menu a.lang-flag {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* --- from EN #footer-desktop-center-cta --- */

@media (min-width: 640px){
  footer .py-6.text-sm.text-slate-600{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items: center !important;
    text-align: left !important;
  }
  footer .py-6.text-sm.text-slate-600 a{
    grid-column: 2 !important;
    justify-self: center !important;
    text-align: center !important;
    display: block !important;
  }
}
@media (max-width: 639.98px){
  footer .py-6.text-sm.text-slate-600{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
  }
  footer .py-6.text-sm.text-slate-600 a{
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
}

/* --- from EN #cookies-accept-button-green-v1 --- */

/* V141: Cookie bar accept button background matches page (dark green) */
#cookiesAccept{
  background-color: var(--st-green) !important;
  color: #ffffff !important;
}
#cookiesAccept:hover{
  filter: brightness(1.08);
}

/* --- from EN #cookies-banner-style-sync-en --- */

/* Make 'COOKIES' link bold & white (including visited) only inside cookie banner */
#cookie-consent a, #cookie-consent a:visited,
.cookie-consent a, .cookie-consent a:visited,
#cookies a, #cookies a:visited,
#cookie-banner a, #cookie-banner a:visited,
.cookie-banner a, .cookie-banner a:visited {
  color: #ffffff !important;
  font-weight: 700 !important;
}
/* Ensure consent button shows pointer cursor */
#cookie-consent button, .cookie-consent button,
#cookie-banner button, .cookie-banner button,
#cookies button, .cookies button,
#cookie-consent .btn, .cookie-consent .btn,
#cookie-banner .btn, .cookie-banner .btn,
#cookies .btn, .cookies .btn,
#cookie-consent [role="button"], .cookie-consent [role="button"],
#cookie-banner [role="button"], .cookie-banner [role="button"],
#cookies [role="button"], .cookies [role="button"] {
  cursor: pointer !important;
}

/* --- from EN --- */

/* V87: Global green sections + gold dividers + white/gold typography */
:root{
  --st-gold: var(--gold);
  --st-green: #001d0d;
  --st-green-2: #01311a;
  --st-rail-inset: 48px;
  --st-rail-width: 2px;
}

/* 1) Header bottom divider */
.site-header{
  border-bottom: var(--st-rail-width) solid var(--st-gold) !important;
}

/* 2) Section backgrounds + dividers */
body{
  background-color: var(--st-green) !important;
  color: #ffffff;
}
#main > section{
  background-color: var(--st-green) !important;
  border-top: 0 !important;
}
#main > section:first-of-type{
  border-top: 0 !important;
}
footer{
  background-color: var(--st-green) !important;
  border-top: var(--st-rail-width) solid var(--st-gold) !important;
}

/* V132: Constrain section/footer dividers to side rails (header divider stays full width) */
#main > section, footer{ position: relative; }
#main > section{ border-top-color: transparent !important; }
#main > section::before{
  content: "";
  position: absolute;
  left: var(--st-rail-inset);
  right: var(--st-rail-inset);
  top: 0;
  height: var(--st-rail-width);
  background-image: var(--gold-gradient);
  pointer-events: none;
}
#main > section:first-of-type::before{ display:none; }
footer{ position: relative; z-index: 30; }
footer::before{ display:none !important; }
/* Keep hero gradient effect but in green tones */
#main .fw-backdrop{
  background: linear-gradient(90deg, var(--st-green) 0%, var(--st-green-2) 50%, var(--st-green) 100%) !important;
}

/* 3) Typography: black/gray -> white, purple/brand -> gold (scoped to content, not header) */
#main .text-slate-950,
#main .text-slate-900,
#main .text-slate-800,
#main .text-slate-700,
#main .text-slate-600,
#main .text-slate-500,
#main .text-slate-400,
#main .text-slate-300,
footer .text-slate-950,
footer .text-slate-900,
footer .text-slate-800,
footer .text-slate-700,
footer .text-slate-600,
footer .text-slate-500,
footer .text-slate-400,
footer .text-slate-300{
  color: #ffffff !important;
}

/* Brand (purple) text -> gold */
#main .text-brand-700,
#main .text-brand-600,
#main .text-brand-500,
footer .text-brand-700,
footer .text-brand-600,
footer .text-brand-500{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#main .hover\:text-brand-600:hover,
#main .hover\:text-brand-700:hover,
#main [class*="hover:text-brand-600"]:hover,
#main [class*="hover:text-brand-700"]:hover,
footer .hover\:text-brand-600:hover,
footer .hover\:text-brand-700:hover,
footer [class*="hover:text-brand-600"]:hover,
footer [class*="hover:text-brand-700"]:hover{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Common light backgrounds -> dark green so white typography stays readable */
#main .bg-white,
#main .bg-slate-50,
#main .bg-slate-100,
footer .bg-white,
footer .bg-slate-50,
footer .bg-slate-100{
  background-color: var(--st-green-2) !important;
}

/* Brand (purple) backgrounds/borders/rings inside content -> gold */
#main .bg-brand-700,
#main .bg-brand-600,
#main .bg-brand-50,
footer .bg-brand-700,
footer .bg-brand-600,
footer .bg-brand-50{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
}
#main .border-brand-600,
#main .border-brand-700,
footer .border-brand-600,
footer .border-brand-700{
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
}
#main .ring-brand-600,
#main .ring-brand-700,
footer .ring-brand-600,
footer .ring-brand-700{
  --tw-ring-color: var(--gold-start) !important;
}

/* --- from EN --- */

/* V92: Hero glowing divider + hero CTA to match menu (gold border/green fill) with gold text pre-hover */
:root{
  --st-gold: var(--gold);
  --st-green: #001d0d;
}


/* V141: Hero H1 size + weight (Slyším Tě / I Hear You) */
#domu h1.st-hero-title,
#home h1.st-hero-title{
  font-weight: 400 !important;
  font-size: 2.7rem !important; /* 2.25rem * 1.2 */
  line-height: 1.05 !important;
}
@media (min-width: 640px){
  #domu h1.st-hero-title,
  #home h1.st-hero-title{
    font-size: 3.6rem !important; /* 3rem * 1.2 */
  }
}

/* Glowing gold line under hero H1 (width of text column) */
#domu .hero-divider,
#home .hero-divider{
  height: 2px;
  width: 100%;
  max-width: 36rem; /* approximate readable text width */
  margin: 16px 0 18px 0;
  background: linear-gradient(90deg, transparent 0%, var(--gold-start) 20%, var(--gold-end) 50%, var(--gold-start) 80%, transparent 100%);
  filter: blur(1.2px);
  border-radius: 999px;
}



/* Hero image: match approximate height of text on md+ while keeping aspect ratio */
#domu .hero-photo,
#home .hero-photo{
  width: 100%;
  max-width: 32rem;
  height: auto;
}
@media (min-width: 768px){
  #domu .hero-photo,
  #home .hero-photo{
    width: auto !important;
    max-width: 36rem !important;
    max-height: clamp(520px, 68vh, 820px) !important;
  }
}
/* Hero divider inside H1 (used between title lines) */
#domu h1 .hero-divider,
#home h1 .hero-divider{
  display: block;
  margin: 12px 0 12px 0;
}
/* Keep divider aligned with text column; don't affect right image column */
#domu .text-left .hero-divider,
#home .text-left .hero-divider{
  width: 100%;
}

/* Hero CTA match menu base: gold border + green bg; BUT text gold pre-hover */
#domu .hero-cta--match,
#home .hero-cta--match{
  background: var(--st-green) !important;
  background-color: var(--st-green) !important;
  border: 2px solid transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  border-radius: 0 !important; /* match menu CTA square */
}

/* Hover: full gold with white text (same as menu hover) */
#domu .hero-cta--match:hover,
#home .hero-cta--match:hover{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
#domu .hero-cta--match:hover *,
#home .hero-cta--match:hover *{
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* --- from EN --- */

/* V97: Global palette update (bg + gold + divider) + hero divider color-mix */
:root{
  --bg: #0f1f1b;
  --gold-start: #B88746;
  --gold-end: #FDF5A6;
  --gold-gradient: linear-gradient(90deg, var(--gold-start) 0%, var(--gold-end) 100%);
  --side-pattern-url: url('pictures/side-knot-pattern.png');
  --side-pattern-left-url: url('pictures/side-knot-pattern-left.png');
  --side-pattern-right-url: url('pictures/side-knot-pattern-right.png');
  --side-inset: 24px;
  --side-pattern-w: 28px;
  --gold: var(--gold-start);
  --divider: #00000073;

  /* Back-compat with earlier versions */
  --st-green: var(--bg);
  --st-gold: var(--gold);
  --st-divider: var(--divider);
}

/* 1) Background everywhere (header + sections + footer) */
body,
.site-header,
#main > section,
footer{
  background-color: var(--bg) !important;
}

/* 2/4) Replace any remaining "brand/purple" usage with new gold */
.text-brand-700, .text-brand-600, .text-brand-500,
.hover\:text-brand-700:hover, .hover\:text-brand-600:hover, .hover\:text-brand-500:hover,
[class*="text-brand-"], [class*="hover:text-brand-"]:hover{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.bg-brand-700, .bg-brand-600, .bg-brand-500, .bg-brand-50,
[class*="bg-brand-"]{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
}
.border-brand-700, .border-brand-600, .border-brand-500,
[class*="border-brand-"]{
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
}
.ring-brand-700, .ring-brand-600, .ring-brand-500,
[class*="ring-brand-"]{
  --tw-ring-color: var(--gold-start) !important;
}

/* 6) Dividers between header/sections/footer */
.site-header{ border-bottom-color: var(--divider) !important; }
#main > section{ border-top-color: var(--divider) !important; }
footer{ border-top-color: var(--divider) !important; }

/* Ensure hero backdrop uses bg (no tint) */
#main .fw-backdrop{
  background: var(--bg) !important;
  background-color: var(--bg) !important;
}

/* 3) Hero glowing divider: use color-mix */
#domu .hero-divider,
#home .hero-divider{
  --gold-soft: color-mix(in srgb, var(--gold-start) 18%, transparent);
  background: linear-gradient(90deg, transparent 0%, var(--gold-soft) 20%, var(--gold-start) 45%, var(--gold-end) 55%, var(--gold-soft) 80%, transparent 100%) !important;
  box-shadow: none !important;
}

/* Menu hover should be new gold */
.site-header nav a[href^="#"]:hover{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Active item gold stays new gold (no frame) */
.site-header nav a.text-brand-600,
.site-header nav a.text-brand-600:hover,
.site-header nav a.text-brand-600:focus,
.site-header nav a.text-brand-600:focus-visible,
.site-header nav a.text-brand-600:active{
  background-image: var(--gold-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* --- from EN --- */

/* V99: Re-issue of prior V98 changes (divider tint + CTA gold + hero divider thickness + hero H1 sizing) */
:root{
  /* Divider = gray tinted by gold (fallback hex, then color-mix when supported) */
  --divider: #6b6761;
  --st-divider: var(--divider);
}
@supports (color: color-mix(in srgb, white 50%, black)) {
  :root{
    --divider: color-mix(in srgb, var(--gold) 25%, #6b7280 75%);
  }
}

/* Apply divider */
.site-header{ border-bottom-color: var(--divider) !important; }
#main > section{ border-top-color: var(--divider) !important; }
footer{ border-top-color: var(--divider) !important; }

/* Buttons: Rezervace termínu + Hero CTA into new gold */
.site-header .st-nav-cta,
#domu .hero-cta--match,
#home .hero-cta--match{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Keep hover readable (still gold + white) */
.site-header .st-nav-cta:hover,
#domu .hero-cta--match:hover,
#home .hero-cta--match:hover{
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hero divider thickness x4 */
#domu .hero-divider,
#home .hero-divider{
  height: 8px !important;
}

/* Hero H1: +20% size and increased line-height to prevent overlap */
#domu h1,
#home h1{
  font-size: 2.7rem !important;   /* 2.25rem * 1.2 */
  line-height: 1.2 !important;
}
@media (min-width: 640px){
  #domu h1,
  #home h1{
    font-size: 3.6rem !important; /* 3rem * 1.2 */
  }
}

/* --- from EN --- */

/* V117: Cursor-follow gold dot */
#cursor-dot{
  position: fixed;
  left: 0;
  top: 0;
  width: 2mm;
  height: 2mm;
  border-radius: 999px;
  background-color: var(--gold-start);
  background-image: var(--gold-gradient);
  pointer-events: none;
  z-index: 2147483647;
  opacity: 0;
  transform: translate3d(-9999px,-9999px,0);
  filter:
    drop-shadow(0 0 5px rgba(184,135,70,0.413))
    drop-shadow(0 0 9px rgba(253,245,166,0.385))
    drop-shadow(0 0 18px rgba(253,245,166,0.22));
  overflow: visible;
  will-change: transform, opacity;
}
/* V131: Cursor comet tail (lags behind dot) */
#cursor-tail{
  position: fixed;
  left: 0;
  top: 0;
  height: 2.2mm;
  width: 18px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2147483646;
  opacity: 0;
  transform: translate3d(-9999px,-9999px,0);
  background-image: linear-gradient(90deg,
    rgba(184,135,70,0.00) 0%,
    rgba(184,135,70,0.10) 35%,
    rgba(253,245,166,0.60) 100%);
  filter: blur(0.8mm) drop-shadow(0 0 10px rgba(253,245,166,0.22));
  transform-origin: 100% 50%;
  will-change: transform, width, opacity;
}
/* V140: Curved elastic comet tail rendered on canvas (not a straight bar) */
#cursor-tail-canvas{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2147483646;
  opacity: 0;
}

#cursor-dot::before{
  content:none;
  display:none;
  position:absolute;
  left:50%;
  top:50%;
  width: 26mm;
  height: 26mm;
  transform: translate(-50%,-50%) rotate(15deg);
  border-radius: 999px;
  background-image:
    linear-gradient(90deg, rgba(253,245,166,0) 0%, rgba(253,245,166,0) 44%, rgba(253,245,166,0.95) 50%, rgba(253,245,166,0) 56%, rgba(253,245,166,0) 100%),
    linear-gradient(0deg,  rgba(253,245,166,0) 0%, rgba(253,245,166,0) 44%, rgba(253,245,166,0.95) 50%, rgba(253,245,166,0) 56%, rgba(253,245,166,0) 100%),
    linear-gradient(45deg, rgba(253,245,166,0) 0%, rgba(253,245,166,0) 44%, rgba(253,245,166,0.75) 50%, rgba(253,245,166,0) 56%, rgba(253,245,166,0) 100%),
    linear-gradient(-45deg,rgba(253,245,166,0) 0%, rgba(253,245,166,0) 44%, rgba(253,245,166,0.75) 50%, rgba(253,245,166,0) 56%, rgba(253,245,166,0) 100%);
  filter: blur(0.9mm);
  opacity: 0.95;
  pointer-events:none;
}
#cursor-dot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 8.3mm;
  height: 8.3mm;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background-image: radial-gradient(circle,
    rgba(253,245,166,0.55) 0%,
    rgba(253,245,166,0.396) 18%,
    rgba(184,135,70,0.319) 44%,
    rgba(184,135,70,0.00) 76%);
  filter: blur(0.88mm);
  opacity: 1;
  animation: st-cursor-pulse 2.6s ease-in-out infinite;
  will-change: opacity, transform;
  pointer-events:none;
}

/* V142: Slow pulse for cursor dot glow */
@keyframes st-cursor-pulse{
  0%, 100%{ opacity: 0.65; transform: translate(-50%,-50%) scale(0.95); }
  50%{ opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
}
@media (pointer: coarse){
  #cursor-dot, #cursor-tail, #cursor-tail-canvas{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  #cursor-dot, #cursor-tail, #cursor-tail-canvas{ display:none !important; }
}

/* V130: Side vertical lines — thin line in current gold */
body::before, body::after{
  content: "";
  position: fixed;
  top: calc(var(--header-height, 72px) + 2px);
  bottom: 0;
  width: var(--st-rail-width);
  pointer-events: none;
  z-index: 20;
  opacity: 1;

  background-image: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Left: column offset from edge (gradient reversed) */
body::before{
  left: var(--st-rail-inset);
  background-color: var(--gold-start);
}

/* Right: column offset from edge */
body::after{
  right: var(--st-rail-inset);
  background-color: var(--gold-end);
}

/* V118: Header audio play button */
.audio-play-btn{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--gold-gradient) border-box;
  color: #000;
  transition: filter 150ms ease, transform 150ms ease;
}
.audio-play-btn:hover{
  filter: drop-shadow(0 0 10px rgba(184,135,70,0.55)) drop-shadow(0 0 18px rgba(253,245,166,0.45));
}
.audio-play-btn:active{
  transform: translateY(1px);
}
.audio-play-btn .audio-play-icon{
  width: 18px;
  height: 18px;
  fill: currentColor;
}


.audio-play-btn .icon-play{ fill: #000; }
.audio-play-btn .icon-pause{ display:none; }
.audio-play-btn.is-playing .icon-play{ display:none; }
.audio-play-btn.is-playing .icon-pause{ display:block; }

/* Global pointer cursor for interactive elements */
a[href],
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"]{
  cursor: pointer !important;
}
button:disabled,
input:disabled,
[aria-disabled="true"]{
  cursor: not-allowed !important;
}


/* V187: Menu — hover and active item in bold */
.site-header nav a[href^="#"]:hover,
.site-header nav a.is-active,
.site-header nav a[aria-current="page"],
.site-header #mobile-menu nav button:hover,
.site-header #mobile-menu nav button.is-active{
  font-weight: var(--font-weight-bold);
}

/* V186: Align Hero typography to V180 (CZ hero look) */
#domu h1.st-hero-title,
#home h1.st-hero-title{
  font-family: var(--st-heading-font) !important;
  font-weight: 400 !important;
  font-size: 3.56rem !important; /* V180: 3.24rem * 1.1 */
  line-height: 1.05 !important;
}
@media (min-width: 640px){
  #domu h1.st-hero-title,
  #home h1.st-hero-title{
    font-size: 4.75rem !important; /* V180: 4.32rem * 1.1 */
  }
}

/* V186: Make quote tiles in "Jak pomáhám" match width of "Co nabízím" tiles */
#jak-pomaham > .container,
#how-i-help > .container{
  max-width: 80rem !important; /* match max-w-7xl */
}
@media (min-width: 640px){
  #jak-pomaham > .container,
  #how-i-help > .container{
    padding-left: 1.5rem !important;  /* match sm:px-6 */
    padding-right: 1.5rem !important;
  }
}
@media (min-width: 1024px){
  #jak-pomaham > .container,
  #how-i-help > .container{
    padding-left: 2rem !important;  /* match lg:px-8 */
    padding-right: 2rem !important;
  }
}
#jak-pomaham .st-quote-grid,
#how-i-help .st-quote-grid{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- cursor pointer for interactive elements (v188) --- */
a[href],
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"]{
  cursor: pointer;
}
button:disabled,
input:disabled,
[aria-disabled="true"]{
  cursor: not-allowed;
}


/* ===========================
   V190 patches (baseline V188)
   Scope: (1) phone reveal button not overridden by LiveSupp activation script,
          (2) nav item not staying highlighted after click,
          (3) hero CTA “První sezení …” matches header CTA.
   =========================== */

/* (2) Prevent persistent nav highlight after mouse click (keep keyboard focus-visible) */
.site-header nav a:focus:not(:focus-visible):not(:hover),
.site-header nav a:focus:not(:focus-visible):not(:hover) * {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* (3) Hero CTA: match header CTA (outline + gradient text on green fill) */
#domu .hero-cta--match,
#home .hero-cta--match {
  background-color: var(--bg) !important;
  background-image: var(--gold-gradient) !important;
  border: 2px solid transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

#domu .hero-cta--match:hover,
#home .hero-cta--match:hover,
#domu .hero-cta--match:focus-visible,
#home .hero-cta--match:focus-visible {
  background-color: var(--gold-start) !important;
  background-image: var(--gold-gradient) !important;
  border-color: transparent !important;
  border-image: var(--gold-gradient) 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* (2) Cursor: always pointer on interactive elements */
a,
button,
[role="button"],
input[type="button"],
input[type="submit"] {
  cursor: pointer;
}


/* V192: Hero CTA hover — black label only for hero button */
#domu .hero-cta.hero-cta--match:hover,
#home .hero-cta.hero-cta--match:hover{
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* V192: Menu — no layout shift (do not change font-weight on hover/active) */
.site-header nav a[href^="#"]:hover,
.site-header nav a.is-active,
.site-header nav a[aria-current="page"],
.site-header #mobile-menu nav button:hover,
.site-header #mobile-menu nav button.is-active{
  font-weight: var(--font-weight-medium) !important;
}

/* V192: Prevent mouse focus from "sticking" menu highlight after click */
.site-header nav a[href^="#"]:focus:not(:focus-visible):not(:hover){
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* V193: Menu — keep items white; gold only on hover (disable scrollspy active color) */
.site-header nav a.text-brand-600:not(:hover):not(:focus):not(:focus-visible),
.site-header nav a.is-active:not(:hover):not(:focus):not(:focus-visible),
.site-header nav a[aria-current="page"]:not(:hover):not(:focus):not(:focus-visible){
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration-color: currentColor !important;
}


/* Orbit CTA (Jak pomáhám) */
.st-orbit-cta {
  --size: clamp(230px, 34vw, 380px);
  --ring-pad: 0px;
  --tree-scale: 0.70848;       /* -20% vs hover size */
  --tree-scale-hover: 0.97416; /* hover size */
  --spin-duration: 16s;

  position: relative;
  width: var(--size);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  --tree-offset-x: 0%;
  --tree-offset-y: calc(4.00% - 2px);
  --tree-offset-y-hover: 4.30%;
  outline-offset: 6px;
}

.st-orbit-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.st-orbit-ring {
  inset: 0;
  animation: stOrbitSpin var(--spin-duration) linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}

.st-orbit-cta:hover .st-orbit-ring,
.st-orbit-cta:focus-visible .st-orbit-ring,
.st-orbit-cta:active .st-orbit-ring {
  animation-play-state: paused;
}

.st-orbit-ring svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.st-orbit-ring text {
  font-family: 'Great Vibes', Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
  font-size: 4.86px;
  fill: url(#stOrbitGold);
}

.st-orbit-treeWrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform: translate(var(--tree-offset-x), var(--tree-offset-y));
  transform-origin: 50% 50%;
  transition: transform 520ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
  backface-visibility: hidden;
}

.st-orbit-cta:hover .st-orbit-treeWrap,
.st-orbit-cta:focus-visible .st-orbit-treeWrap,
.st-orbit-cta:active .st-orbit-treeWrap {
  transform: translate(var(--tree-offset-x), var(--tree-offset-y-hover));
}

.st-orbit-tree {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(0) scale(var(--tree-scale));
  transform-origin: 50% 50%;
  transition: transform 520ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
  backface-visibility: hidden;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.28));
}

.st-orbit-cta:hover .st-orbit-tree,
.st-orbit-cta:focus-visible .st-orbit-tree {
  transform: translateZ(0) scale(var(--tree-scale-hover));
}

.st-orbit-cta:active .st-orbit-tree {
  transform: translateZ(0) scale(calc(var(--tree-scale-hover) * 0.985));
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .st-orbit-ring { animation: none; }
  .st-orbit-tree { transition: none; }
  .st-orbit-treeWrap { transition: none; }
}

@keyframes stOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Jak pomáhám / How I help: show tissue image only when expanded (inside the extra content) */
#jak-pomaham #more-jak-pomaham,
#how-i-help #more-how-i-help {
  position: relative;
}

/* V197: "Jak pomáhám" – orbit CTA sticky while expanded (More/Less) */

@media (min-width:768px){
  .st-help-rightcol{align-self:stretch; position:relative;}
  .st-orbit-cta.is-sticky{
    position: sticky;
    top: var(--st-orbit-sticky-top, 50vh);
  }
}

/* --- V209: Responsive fixes (mobile/tablet) --- */

/* Prevent horizontal overflow (common causes: fixed 100vw layers, long words, flex children) */
html, body { max-width: 100%; overflow-x: hidden; }
#main { max-width: 100%; overflow-x: hidden; }

/* 100vw can create a few px overflow due to scrollbars; use 100% for viewport-fixed layers */
#cursor-tail-canvas{ right: 0; bottom: 0; width: 100%; height: 100%; }

/* Allow flex children in header to shrink instead of forcing overflow */
.site-header .header-bar > *{ min-width: 0; }
.site-header a[aria-label="Logo"]{ min-width: 0; }

@media (max-width: 767.98px){
  /* Mobile menu panel: match dark header look and keep contrast */
  #mobile-menu{ background:#001d0d !important; border-color: rgba(255,255,255,0.12) !important; }
  #mobile-menu nav{ color:#fff !important; }
  #mobile-menu a,
  #mobile-menu button,
  #mobile-menu .nav-link{ color:#fff !important; }
  #mobile-menu .border-t.border-slate-200,
  #mobile-menu .border-b.border-slate-200,
  #mobile-menu hr{ border-color: rgba(255,255,255,0.12) !important; }

  /* Buttons in the mobile menu: desktop-like text links with subtle hover */
  #mobile-menu nav button{ background: transparent !important; }
  #mobile-menu nav button:hover{ background-color: rgba(255,255,255,0.06) !important; }
  #mobile-menu nav button:active{ background-color: rgba(255,255,255,0.10) !important; }

  /* Burger hover background must make sense on dark header */
  #burger:hover{ background: rgba(255,255,255,0.08) !important; }
  #burger:active{ background: rgba(255,255,255,0.12) !important; }

  /* Safer wrapping on small screens */
  main p, main li, main h1, main h2, main h3{ overflow-wrap: anywhere; word-break: break-word; }
}

@media (max-width: 639.98px){
  /* Reduce header pressure on narrow screens */
  .site-header .header-bar{ padding-left: 12px !important; padding-right: 12px !important; }
  .site-header a[aria-label="Logo"] img{ margin-right: 10px !important; }
  .site-header .menu-logo-text{ font-size: 14px !important; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 389.98px){
  /* Ultra-narrow devices: hide logo text to avoid overflow */
  .site-header .menu-logo-text{ display:none !important; }
  .site-header a[aria-label="Logo"] img{ margin-right: 0 !important; }
}

/* --- end V209 --- */

/* --- V210: Mobile menu + header tweaks --- */
@media (max-width: 767.98px){
  /* 2) Remove side vertical gold lines on mobile */
  body::before,
  body::after{
    display: none !important;
  }

  /* 3) Always show logo text in header (keep compact to avoid overflow) */
  .site-header .menu-logo-text{
    display: inline-block !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    max-width: clamp(120px, 42vw, 200px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-header a[aria-label="Logo"] img{
    height: 32px !important;
    max-height: 32px !important;
  }

  /* 1a) Mobile header CTA before burger: gold text */
  .site-header .st-mobile-header-cta{
    background: transparent !important;
    border: 1px solid rgba(253,245,166,0.55) !important;
    line-height: 1.1;

    background-image: var(--gold-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
  .site-header .st-mobile-header-cta:focus-visible{
    outline: 2px solid rgba(253,245,166,0.75);
    outline-offset: 2px;
  }

  /* 1b) Mobile menu language link in gold */
  #mobile-menu a.lang-link{
    background-image: var(--gold-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
}

@media (max-width: 389.98px){
  /* Override V209 ultra-narrow hiding: keep logo text visible */
  .site-header .menu-logo-text{ display: inline-block !important; }
}

/* --- end V210 --- */

/* --- V214: Header/menu visibility hotfix (keep header visible on scroll + avoid duplicate burger handlers) --- */
/* Fix: header is fixed to viewport with explicit z-index; main content is padded by measured header height.
   Note: JS handler de-duplication is done in HTML (removed duplicate burger listeners). */

.site-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important; /* ensure header stays above scrolling content */
}

/* Keep content from sliding under fixed header */
#main{
  padding-top: var(--header-height, 72px);
}

@media (max-width: 767.98px){
  /* Desktop-only header groups must stay hidden on mobile */
  .site-header .md\:flex{ display: none !important; }

  /* Mobile CTA + burger must be visible on mobile */
  .site-header .st-mobile-header-cta.md\:hidden{ display: inline-flex !important; }
  .site-header #burger.md\:hidden{ display: inline-flex !important; }

  /* Mobile menu container respects .hidden toggle */
  .site-header #mobile-menu.md\:hidden.hidden{ display: none !important; }
  .site-header #mobile-menu.md\:hidden:not(.hidden){ display: block !important; }
}

@media (min-width: 768px){
  /* Desktop-only header groups must be visible on desktop */
  .site-header .md\:flex{ display: flex !important; }

  /* Hide mobile-only controls on desktop */
  .site-header .st-mobile-header-cta.md\:hidden,
  .site-header #burger.md\:hidden,
  .site-header #mobile-menu.md\:hidden{ display: none !important; }
}
/* --- end V214 --- */


/* V222: Mobile footer bottom padding — keep equal top/bottom spacing while still respecting iOS safe area */
@media (max-width: 767.98px){
  footer#kontakt .py-6{
    /* Keep the existing vertical padding from .py-6, add only the iOS safe area inset if present */
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

/* --- V223: Inline-style cleanup (moved repeated inline styles into CSS classes) --- */
.st-inline-iconbox-48{ width:48px; height:48px; padding:2px; box-sizing:border-box; }
.st-inline-img-contain{ width:100%; height:100%; object-fit:contain; display:block; }
.st-inline-tile-head{ height:40px; display:flex; flex-direction:column; justify-content:flex-start; }
.st-inline-hr-gold{ border:none; border-top:1px solid var(--st-gold); opacity:0.75; }
.st-inline-grid-span-center{ grid-column: 1 / -1; justify-self: center; text-align: center; }

/* --- V226: Fix logo title visibility + mobile footer safe padding (EN+CZ) --- */
/* Logo text was becoming invisible because earlier rules used `background: transparent` which resets background-image.
   Re-assert gradient text styling here without using the background shorthand. */
.site-header .menu-logo-text{
  background-image: var(--gold-gradient) !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

@media (max-width: 767.98px){
  /* Ensure footer content is not clipped by mobile browser UI / chat launcher.
     Apply to both language variants (CZ #kontakt, EN #contact). */
  footer#kontakt .py-6,
  footer#contact .py-6{
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom) + 1.75rem);
  }
}

/* --- V227: Tiles (Jak pomáhám + Co nabízím) — match page background (remove green fill) --- */
/* Keep the existing gold rail frame, but use the same background as the page/section behind the tiles. */
#jak-pomaham .gold-gradient-frame,
#co-nabizim .gold-gradient-frame,
#how-i-help .gold-gradient-frame,
#what-i-offer .gold-gradient-frame{
  background:
    var(--gold-gradient) top / 100% var(--st-tile-bw) no-repeat,
    var(--gold-gradient) bottom / 100% var(--st-tile-bw) no-repeat,
    var(--gold-gradient) left / var(--st-tile-bw) 100% no-repeat,
    var(--gold-gradient) right / var(--st-tile-bw) 100% no-repeat,
    transparent !important;
  background-color: transparent !important;
}


/* --- V228: Mobile logo title size + cookies link underline + cookies safe-area --- */
/* 1) Header logo text size on mobile: +30% vs V210 (12px -> 15.6px) */
@media (max-width: 767.98px){
  .site-header .menu-logo-text{ font-size: 15.6px !important; }
}

/* 2) Cookie bar: force COOKIES link underline to black (avoid visited purple), keep text color inherited */
#cookies a, #cookies a:visited,
.cookies a, .cookies a:visited{
  color: inherit !important;
  text-decoration-color: #000000 !important;
}

/* 3) Cookie bar: ensure fully visible above mobile browser UI / safe area */
@media (max-width: 767.98px){
  #cookies, .cookies{
    /* NOTE: --vv-bottom is set via VisualViewport JS (0px if unsupported) */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 20px + var(--vv-bottom, 0px)) !important;
  }
}

/* --- V231: Cookie bar bottom gap on mobile to match side gap (extra breathing room) --- */
@media (max-width: 767.98px){
  #cookies, .cookies{
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 32px + var(--vv-bottom, 0px)) !important;
  }
}