/*------------------------RESET---------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;}
article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; }
/*------------------------------------------------------*/

::-moz-selection                                            {color: var(--clr-primary); background: var(--clr-secondary);}
::selection                                                 {color: var(--clr-primary); background: var(--clr-secondary);}

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

/*------------------------TYPOGRAFIE----------------------*/
html                                                        {font-size: var(--font-size); font-family: var(--font1); line-height: var(--line-height); letter-spacing: var(--font1-spacing);}
body                                                        {margin: 0; color: var(--clr-white); background: var(--clr-primary); font-weight: 400; overflow-x: hidden;}
h1, h2, h3                                                  {display: block; font-family: var(--font2); font-weight: 400; line-height: var(--font2-line-height);}
p                                                           {display: block;}
strong, b                                                   {font-family: var(--font2);}
a                                                           {color: var(--clr-secondary); transition: .25s ease-in-out;}
a:hover                                                     {color: var(--clr-secondary-light);}
:focus-visible                                              {outline: 2px solid var(--clr-secondary); outline-offset: 0.25em;}
img                                                         {display: block; max-width: 100%; height: auto;}

/*------------------------ROOT----------------------------*/
:root                                                       {
                                                            --font-size:                clamp(14px, calc(5px + 1vw), 22px);

                                                            --font1:                    "apparat-light", "apparat", sans-serif;
                                                            --line-height:              1.5;
                                                            --font1-spacing:            .05em;

                                                            --font2:                    "apparat", sans-serif;
                                                            --font2-line-height:        1.2;
                                                            --font2-spacing:            .06em;

                                                            --clr-primary:              #272102;
                                                            --clr-primary-90:           color-mix(in oklch, var(--clr-primary) 90%, white);
                                                            --clr-primary-80:           color-mix(in oklch, var(--clr-primary) 80%, white);
                                                            --clr-primary-60:           color-mix(in oklch, var(--clr-primary) 60%, white);
                                                            --clr-primary-40:           color-mix(in oklch, var(--clr-primary) 40%, white);
                                                            --clr-primary-20:           color-mix(in oklch, var(--clr-primary) 20%, white);
                                                            --clr-primary-10:           color-mix(in oklch, var(--clr-primary) 10%, white);

                                                            --clr-secondary:            #F58945;
                                                            --clr-secondary-light:      color-mix(in oklch, var(--clr-secondary) 75%, white);
                                                            --clr-secondary-hover:      color-mix(in oklch, var(--clr-secondary) 85%, white);

                                                            --clr-white:                #fffdf8;

                                                            --border-radius1:           0.15em;
                                                            --blur1:                    2px;

                                                            --wrapper-padding:          max(5vw, 1.5rem);
                                                            --wrapper-medium-max:       54.5rem;
                                                            }

/*------------------------LAYOUT--------------------------*/
.wrapper                                                    {display: block; width: 100%; padding: 0 var(--wrapper-padding); margin: 0 auto;}
.wrapper.medium                                             {max-width: calc(var(--wrapper-medium-max) + 2 * var(--wrapper-padding));}
.container                                                  {display: block; width: 100%; margin: 0 auto;}

/*------------------------MAIN----------------------------*/
.main                                                       {display: block; position: relative;}

/*------------------------HERO----------------------------*/
.section.hero                                               {display: flex; align-items: center; position: relative; min-height: 100vh; min-height: 100svh; padding: min(5rem, 4vw); overflow: hidden; isolation: isolate;}
.section.hero .back                                         {display: block; position: absolute; inset: 0; z-index: -1;}
.section.hero .back img                                     {display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 60%; filter: blur(var(--blur1)) saturate(.9); transform: scale(1.03);}
.section.hero .back::after                                  {content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--clr-primary) 72%, transparent), color-mix(in srgb, var(--clr-primary) 66%, transparent) 55%, color-mix(in srgb, var(--clr-primary) 80%, transparent));}
.section.hero .wrapper                                      {position: relative;}
.section.hero .container                                    {display: flex; flex-direction: column; align-items: center; position: relative; padding: min(4rem, 6vw); text-align: center;}
.section.hero .container::before                            {content: ""; position: absolute; inset: 0; z-index: -1; background: white; opacity: 0.12;}
.section.hero .subheadline                                  {display: block; order: -1; padding: 0.55em 4em 0.5em; color: var(--clr-secondary); background: linear-gradient(to right, transparent, rgb(255 255 255 / .15), transparent); font-family: var(--font2); font-size: 1rem; line-height: var(--line-height); letter-spacing: var(--font2-spacing); text-transform: uppercase;}
.section.hero h1                                            {display: block; width: 30.6rem; max-width: 100%; margin-top: 2.6rem;}
.section.hero h1 img                                        {display: block; width: 100%; height: auto;}
.section.hero .line                                         {display: block; width: 18rem; max-width: 70%; height: 2px; margin-top: 1.35rem; background: linear-gradient(to right, transparent, var(--clr-secondary) 15%, var(--clr-secondary) 85%, transparent);}
.section.hero .text                                         {display: block; max-width: 46em; margin-top: 1.3rem; font-size: 0.83rem; line-height: 1.5; text-wrap: pretty;}
.section.hero .info                                         {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em 1.6em; margin-top: 1.75rem; font-family: var(--font2); font-size: 0.95rem; line-height: 1.3;}
.section.hero .info li                                      {display: flex; align-items: center; gap: 0.3em;}
.section.hero .info .intext-icon                            {display: block; width: auto; height: 1.02em;}
.section.hero .buttons                                      {margin-top: 2.1rem;}
.section.hero .note                                         {display: block; margin-top: 0.95rem; font-size: 0.66rem; line-height: 1.4; color: rgb(255 253 248 / .9);}

/*------------------------KOMPONENTY----------------------*/
.buttons                                                    {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em;}
.button                                                     {display: inline-flex; align-items: center; justify-content: center; padding: 0.58em 1.3em 0.52em; border-radius: var(--border-radius1); font-family: var(--font2); font-size: 0.79rem; line-height: 1.2; letter-spacing: var(--font2-spacing); text-transform: uppercase; transition: .25s ease-in-out;}
.button.color0                                              {color: var(--clr-primary); background: var(--clr-secondary);}
.button.color0:hover                                        {color: var(--clr-primary); background: var(--clr-secondary-hover);}
  @media (max-width: 1080px) {
  .button                                                   {font-size: 1rem;}
  }

/*------------------------STAVY---------------------------*/
.js .anim                                                   {opacity: 0; transform: translateY(0.8rem); transition: opacity .9s ease-out, transform .9s ease-out;}
.js .show .anim                                             {opacity: 1; transform: none;}
.js .show .anim:nth-child(2)                                {transition-delay: .1s;}
.js .show .anim:nth-child(3)                                {transition-delay: .2s;}
.js .show .anim:nth-child(4)                                {transition-delay: .3s;}
.js .show .anim:nth-child(5)                                {transition-delay: .4s;}
.js .show .anim:nth-child(6)                                {transition-delay: .5s;}
.js .show .anim:nth-child(7)                                {transition-delay: .6s;}
  @media (prefers-reduced-motion: reduce) {
  .js .anim                                                 {opacity: 1; transform: none; transition: none;}
  }