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; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
html {scroll-behavior: smooth;}
body { padding: 0; margin: 0; font-weight: 700; background-color: #000; font-family: "realistwide", sans-serif; font-style: normal; }

:root{ --menu-ease: cubic-bezier(.2,.9,.3,1); --menu-bg: #ffffff; --menu-text: #111; }
.mobile {display: none !important;}
#pagewrap {margin: 0 auto; position: relative;}
.hero-title{margin: 0; color: #ffffff;}
.gradient-word, .gradient-word span { background: linear-gradient( 90deg, #F78147 0%, #E03EC4 35%,#966AE8 70%,#33B6D5 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; }
#hero-slider { position: relative; aspect-ratio: 1920/880; width: 100%; overflow: hidden; background-color: #000; }
.slides{ aspect-ratio: 1920/880; width:100%; position:relative; }
.slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform: scale(1.06) translateZ(0); transition: opacity .9s cubic-bezier(.4,0,.2,1), transform 2.2s cubic-bezier(.2,.8,.2,1); will-change: transform, opacity; }
.slide.active{ opacity:1; transform:scale(1); z-index:2; }
.slide::after{ content:''; position:absolute; inset:-20%; background: radial-gradient(60% 40% at 70% 30%, rgba(255,120,255,.25), transparent 70%); opacity:.6; mix-blend-mode:screen; pointer-events:none; }
.slider_nav { position:absolute; z-index: 10; display: flex; align-items: end; /*background: rgba(17, 17, 17, 0.10);*/ justify-content: center;}
.nav{ border-radius:50%; background:rgba(0,0,0,.45); cursor:pointer; transition: background .25s ease, transform .25s ease; z-index: 999; }
.nav:hover{ background-color:rgba(255,255,255,.12); transform:scale(1.05); }

.paginationContainer { display: flex; flex-direction: column; color: #F5F5F5; text-align: center; font-weight: 400; line-height: normal; border: 1px solid #F5F5F5; padding: 0.8vw; border-radius: 1vw;}
.pagination{ display:flex; z-index: 999; }
/* .pagination .dot{ background:rgba(255,255,255,.35); position:relative; overflow:hidden; }
.pagination .dot::after{ content:''; position:absolute; inset:0; background:#fff; transform:translateX(-100%); }
.pagination .dot.active::after{ animation: progress 7s linear forwards; } */


.pagination .dot{
  /* width: 60px; */
  /* height: 60px; */
  border: 0;
  border-radius: 50%;
  background: #9A6CF4;
  cursor: pointer;
  padding: 0;

  transition:
    transform .25s cubic-bezier(.2,.9,.3,1),
    background-color .25s ease,
    box-shadow .25s ease;
}

.pagination .dot.active{
  background: #F5F5F5;
}

.pagination .dot:hover{
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(154, 108, 244, 0.35);
}

.pagination .dot.active:hover{
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.2);
}

@keyframes progress{ to{ transform:translateX(0); } }
.slide { width: 100%; aspect-ratio: 1920/880; background-size: cover; }
.slide.slide1 {background-image: url('/images/hero_baner1.png');}
.slide.slide2 {background-image: url('/images/hero_baner2.png');}
.slide.slide3 {background-image: url('/images/hero_baner3_2.png');}
.slide .hero-title { position: absolute; }
.kapsel { position: absolute; aspect-ratio: 361/337; }
.kapsel img {width: 100%;}
.menu-wrapper { position:fixed; display:flex; align-items: center; z-index:100; background: #A275FF; }
.menu-toggle{ display:flex; align-items:center; justify-content: center; background:#111; padding: 0; border:none; cursor:pointer; color: #A275FF; text-align: center; font-style: normal; line-height: normal; }
.menu-wrapper.open .menu-toggle svg{ transform:rotate(-180deg); }
.menu-dropdown{ position:absolute; display:flex; flex-direction:column; opacity:0; pointer-events:none; }
.menu-dropdown a { position:relative; width:fit-content; background:var(--menu-bg); color:var(--menu-text);font-weight:600;text-decoration:none; opacity:0; transition: opacity .25s ease, transform .35s var(--menu-ease), background .3s ease; will-change: transform, opacity; }
.menu-wrapper.open .menu-dropdown { opacity:1; pointer-events:auto; }
.menu-wrapper.open .menu-dropdown a { opacity:1; transform:translateY(0); }
.menu-wrapper.open .menu-dropdown a:nth-child(1){ transition-delay:.05s }
.menu-wrapper.open .menu-dropdown a:nth-child(2){ transition-delay:.10s }
.menu-wrapper.open .menu-dropdown a:nth-child(3){ transition-delay:.15s }
.menu-wrapper.open .menu-dropdown a:nth-child(4){ transition-delay:.20s }
.menu-wrapper.open .menu-dropdown a:nth-child(5){ transition-delay:.25s }
.menu-wrapper.open .menu-dropdown a:nth-child(6){ transition-delay:.30s }
.menu-wrapper.open .menu-dropdown a:nth-child(7){ transition-delay:.35s }
.menu-wrapper.open.closing .menu-dropdown a { opacity:0; pointer-events:none; }
.menu-wrapper.open.closing .menu-dropdown a:nth-child(1){ transition-delay:.30s }
.menu-wrapper.open.closing .menu-dropdown a:nth-child(2){ transition-delay:.25s }
.menu-wrapper.open.closing .menu-dropdown a:nth-child(3){ transition-delay:.20s }
.menu-wrapper.open.closing .menu-dropdown a:nth-child(4){ transition-delay:.15s }
.menu-wrapper.open.closing .menu-dropdown a:nth-child(5){ transition-delay:.10s }
.menu-wrapper.open.closing .menu-dropdown a:nth-child(6){ transition-delay:.05s }
.menu-wrapper.open.closing .menu-dropdown a:nth-child(7){ transition-delay:0s }
.menu-wrapper.open.closing .menu-dropdown{ opacity:1; }
@media (hover:hover) and (pointer:fine) { 
    .menu-dropdown a{ overflow:hidden;}
    .menu-dropdown a::before{ content:''; position:absolute; inset:0; background:linear-gradient( 120deg,transparent 30%,rgba(180,120,255,.25), rgba(255,120,200,.35), transparent 70%); opacity:0; transform:translateX(-60%); transition: transform .6s var(--menu-ease), opacity .3s ease; }
    .menu-dropdown a:hover::before{ opacity:1; transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){ .menu-dropdown, .menu-dropdown a{ transition:none !important; } }
.menu-wrapper #logo {aspect-ratio: 221/50;}
.menu-wrapper .masz_wiecej {color: #111; font-weight: 400; line-height: normal;}
#made_for_zappka {position: absolute; z-index: 10;}
#socials {position: absolute; z-index: 10; display: flex;}
.scroll_next { aspect-ratio: 336/60; position: absolute;  display: flex; align-items: center; justify-content: center;  background: url('/images/bg_next_left.png') top left, url('/images/bg_next_right.png') top right; background-repeat: no-repeat;  cursor: pointer; background-size: contain; text-decoration: none;}
.scroll_next:hover{ filter: brightness(1.5);}
.scroll_next .scroll_next_txt {color: #7D7E81; font-style: normal; font-weight: 400; line-height: normal;}
.scroll_top { aspect-ratio: 336/60; position: absolute; display: flex; align-items: center; justify-content: center;  background: url('/images/bg_top_left.png') top left, url('/images/bg_top_right.png') top right; background-repeat: no-repeat; background-size: contain; cursor: pointer; text-decoration: none;}
.scroll_top:hover{ filter: brightness(1.5);}
.scroll_top .scroll_top_txt {color: #7D7E81; font-style: normal; font-weight: 400; line-height: normal;}
#section2 {aspect-ratio: 1920/1080; position: relative; display: flex; background: #222325; display: flex; align-items: center; justify-content: center; flex-direction: column;}
#section2 .row {display: flex;}
#section2 .masz_wiecej {color: #A275FF; font-weight: 700; }
#section2 .logotype_triki {text-align: right;}
#section2 .triki_kapsle {display:inline-block;}
#section2 .triki_kapsle img {width: 100%;   display:block; transform-origin: center center; animation: kapselBreath 4.5s ease-in-out infinite; filter: drop-shadow(0 0 0 rgba(80,255,150,0));}

@keyframes kapselBreath{
  0%{
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(80,255,150,0));
  }
  40%{
    transform: scale(1.03);
    filter: drop-shadow(0 0 18px rgba(80,255,150,.35));
  }
  70%{
    transform: scale(1.015);
    filter: drop-shadow(0 0 10px rgba(80,255,150,.2));
  }
  100%{
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(80,255,150,0));
  }
}

#section2 .row .desc { aspect-ratio: 694/445; background-image: url('/images/bg_folder.png'); background-size: contain; background-repeat: no-repeat;}
#section2 .row .desc .desc_content { color: #966AE8; text-align: justify; font-weight: 400;}
#section2 .row .desc .desc_content .desc_title {font-weight: 700; }
#section2 .triki_icon img {width: 100%;}
#section3 {aspect-ratio: 1920/700; background-image: url('/images/bg_section3.svg'); background-size: contain; background-repeat: no-repeat; position: relative; display: flex; align-items: center;}
#section3 #finger {transform: rotate(15deg);   transform-origin: center bottom;  animation: fingerSwing 3.2s ease-in-out infinite;}
@keyframes fingerSwing {
  0% {
    transform: rotate(15deg);
  }
  25% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  75% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(15deg);
  }
}
#section3 .txt { display: inline-block; }
#section3 .txt .line {line-height: 1.15em}
#section3_next.scroll_next {background: url('/images/bg_next_left2.png') top left, url('/images/bg_next_right2.png') top right; background-repeat: no-repeat; background-size: contain;}
#section4 {aspect-ratio: 1920/700; background-image: url('/images/bg_section4.png'); background-size: contain; background-repeat: no-repeat; position: relative; display: flex; align-items: center;}
#section4 .triki_icon {position: absolute;}
#section4 .txt {color: #FFF; text-align: right; font-weight: 700; line-height: normal; transform: rotate(-90deg); position: absolute; }
#section5 {position: relative; aspect-ratio: 1920/1398; background-color: #222325; background-image: url('/images/bg_section5.svg'); background-size: contain; background-repeat: no-repeat;}
#section5_next {/*background-image: url('/images/section4_next.png');*/ background-size: contain; background-repeat: no-repeat;}
#section5_next .scroll_next_txt {color: #f5f5f5;}
#section5 .section_header {position: absolute;  display: flex; align-items: end; }
#section5 .section_header .title {color: #F5F5F5; font-weight: 700; }
#section5 .section_header .subtitle {color: #F5F5F5; text-align: justify;  font-weight: 700; }
#section5 #btn_sprawdz_gry {display: inline-block; position: absolute; }
#section5 #btn_sprawdz_gry img {width: 100%; display:block; transition: transform .35s cubic-bezier(.2,.9,.3,1), filter .35s cubic-bezier(.2,.9,.3,1);}
#section5 #btn_sprawdz_gry:hover img{ transform: translateY(-3px) scale(1.03); filter: drop-shadow(0 10px 28px rgba(180,80,255,.45)); }
/* .games-header { display:flex; align-items:flex-end; } */
/* .games-header h2{ margin:0; } */
/* .games-header h2 span{ background:linear-gradient(90deg,#ff5fd8,#9b5cff); -webkit-background-clip:text; color:transparent; } */
/* .games-header p { color:#b8b8c8; margin:0; } */
.scroller-wrapper{ position: absolute; }
.scroller { display:flex; overflow-x:auto; padding-bottom: 0; scroll-behavior:smooth; scrollbar-width:none; }
.scroller::-webkit-scrollbar{ display:none }
.card-img{ position:relative; overflow:hidden; aspect-ratio:16/9; }
#section5 .card-img {aspect-ratio: 498/718;}
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.9,.3,1); }
.card:hover img{ transform:scale(1.05); }
.card-img .btn{ position: absolute; display: flex; background: #F5F5F5; flex-direction: column; justify-content: center; color: #111; text-align: center; font-weight: 600; line-height: normal; cursor: pointer; transition: transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s cubic-bezier(.2,.9,.3,1);}
.card-img .btn:hover {transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25);}
.badge { position:absolute; background: #FFD900; display: flex; flex-direction: column; justify-content: center; color: #111;text-align: center; font-weight: 600; line-height: normal; }
.card-footer { display:flex; justify-content:space-between; align-items:center; }
.card-footer h3 { color: #F5F5F5; text-align: justify; font-weight: 700; }
.card .desc {color: #7D7E81; text-align: justify;}
.tag { display: flex; flex-direction: column; justify-content: center; color: #F5F5F5; text-align: center; font-weight: 400; line-height: normal; transition: background-color .7s cubic-bezier(.2,.9,.3,1), color .7s cubic-bezier(.2,.9,.3,1);}
/* .tag:hover {background-color: #f5f5f5; color: #000;} */
.scrollbar { position:relative; background:transparent; }
.scrollbar-thumb{ position:absolute; background:#f5f5f5; transition:transform .1s linear; }
.scroll-nav{ position: absolute; display:flex; align-items:center; }
.scroll-center { display: flex; flex-direction: column; text-align: center; color: #F5F5F5; font-weight: 400; line-height: normal;}
.scroll-nav button{ border: none; background: transparent; color:#fff; cursor:pointer; background-size: contain; background-repeat: no-repeat; }
.scroll-nav button.js-prev {background-image: url('/images/slider_prev.svg'); filter: brightness(1); transition: filter .3s ease;}
.scroll-nav button.js-next {background-image: url('/images/slider_next.svg'); filter: brightness(1); transition: filter .3s ease;}
.scroll-nav button.js-prev:hover, .scroll-nav button.js-next:hover {filter: brightness(1.6);}
.scroll-nav span { opacity:.7; }
.games-cta a { display:inline-flex; align-items:center; background:linear-gradient(90deg,#ff5fd8,#9b5cff); color:#000; font-weight:700; text-decoration:none; }
.scroller-fade{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease; z-index:5; }
.scroller-wrapper.is-resetting .scroller-fade{ opacity:1; }
#section6 {position: relative; aspect-ratio: 1920/640; background-color: #222325;}
#section6 .content {display: flex; margin: 0 auto; flex-direction: column;}
#section6 .txt {color: #F5F5F5;}
#section6 #tryby_gry {display: flex; }
#section6 #tryby_gry .tryb {position: relative; width: 100%; opacity: 0; transform: translateY(40px); transition: opacity .7s cubic-bezier(.2,.9,.3,1), transform .7s cubic-bezier(.2,.9,.3,1);}
#section6 #tryby_gry .tryb.is-visible{ opacity: 1; transform: translateY(0); }
#section6 #tryby_gry .tryb:nth-child(1){ transition-delay: .0s; }
#section6 #tryby_gry .tryb:nth-child(2){ transition-delay: .15s; }
#section6 #tryby_gry .tryb:nth-child(3){ transition-delay: .3s; }
#section6 #tryby_gry .btn_sprawdz {position: absolute;  display: flex; background: #111;  flex-direction: column; justify-content: center; font-weight: 600; text-align: center;cursor: pointer; transition: transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s cubic-bezier(.2,.9,.3,1), background-color .25s ease;}
#section6 #tryby_gry .tryb .btn_sprawdz:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
#section6 #tryby_gry .tryb svg{
  transition: transform .6s cubic-bezier(.2,.9,.3,1);
}

#section6 #tryby_gry .tryb:hover svg{
  transform: translateY(-4px);
}
#section6 #tryby_gry .btn_sprawdz:active{ transform: translateY(-1px) scale(.97); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
#section6 #tryby_gry .title {position: absolute; color: #111; text-align: justify; font-weight: 700; }
#section6 #tryby_gry .tryb_txt {position: absolute;  color: #111; font-weight: 400;}
#section6 #tryby_gry .tryb_txt strong {font-weight: 700;}
#section6 #tryby_gry .tryb.trening .btn_sprawdz {color: #EA5C8B;}
#section6 #tryby_gry .tryb.ranking .btn_sprawdz {color: #A063E2;}
#section6 #tryby_gry .tryb.wyzwanie .btn_sprawdz {color: #45A7D8;}
#section7 {position: relative; aspect-ratio: 1920/1080; background: url("/images/img_section7.png") top left, url("/images/bg_section7.png") top left; background-repeat: no-repeat, repeat; background-color: #111; background-size: contain;}
#section7_next.scroll_next {background: url('/images/bg_next_left2.png') top left, url('/images/bg_next_right2.png') top right; background-repeat: no-repeat; background-size: contain;}
#section7 .txt { color: #A275FF; font-weight: 700; position: absolute;}
#section7 #pricetag1, #section7 #pricetag2 { aspect-ratio: 1/1; position: absolute;} 
#section7 #pricetag1 img, #section7 #pricetag2 img {width: 100%; display:block; transform-origin: center center; animation: priceFloat 5.5s cubic-bezier(.4,0,.2,1) infinite;}
#section7 #pricetag2 img{
  animation-delay: 1.2s;
}

@keyframes priceFloat{
  0%{
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  }
  40%{
    transform: translateY(-6px) scale(1.1);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.25));
  }
  70%{
    transform: translateY(-3px) scale(1.05);
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
  }
  100%{
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  }
}
#section7 .desc {position: absolute;  color: #A275FF; text-align: justify;}
#section7 .desc .line1 { font-weight: 700; }
#section7 .desc .line2 { font-weight: 400;}
#section7 .desc .line2 strong {font-weight: 700;}
#section7 #btn_jak_zdobyc_triki { display: inline-block;}
#section7 #btn_jak_zdobyc_triki img {width: 100%; transition: transform .35s cubic-bezier(.2,.9,.3,1), filter .35s cubic-bezier(.2,.9,.3,1);}
#section7 #btn_jak_zdobyc_triki:hover img{ transform: translateY(-3px) scale(1.03); filter: drop-shadow(0 10px 28px rgba(180,80,255,.45)); }
#section7 #tylko_w_zabka {position: absolute;}
#section7 #tylko_w_zabka img {width: 100%;}
#section8 {aspect-ratio: 1920/700; background-image: url('/images/bg_section8.png'); background-size: contain; background-repeat: no-repeat; position: relative; display: flex; align-items: center;}
#section8 #tongue {position: absolute;}
#section8 #tongue img {width: 100%; display: block;transform-origin: center bottom; animation: emojiIdle 4.8s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes emojiIdle{
  0%{
    transform: rotate(0deg) translateY(0);
  }
  30%{
    transform: rotate(-3deg) translateY(-4px);
  }
  55%{
    transform: rotate(2deg) translateY(-2px);
  }
  100%{
    transform: rotate(0deg) translateY(0);
  }
}
#section8 .triki_icon {position: absolute;}
#section8 .txt {color: #FFF; text-align: right; font-weight: 700; line-height: normal; transform: rotate(-90deg); position: absolute;}
#section9 {position: relative; aspect-ratio: 1920/1394; background-color: #111;}
#section9_next {background-image: url('/images/section9_next.png'); background-size: contain; background-repeat: no-repeat;}
#section9_next .scroll_next_txt {color: #f5f5f5;}
#section9 .txt {position: absolute;}
#jak_korzystac {color: #A275FF; position: absolute; display: flex; }
#jak_korzystac #col1 {display: flex; flex-direction: column; }
#jak_korzystac #col1 .row1 {background: #222325;}
#jak_korzystac #col1 .row1 .content {display: flex; flex-direction: column;}
#jak_korzystac #col1 .row1 .krok {display: flex; color: #A275FF; font-weight: 400;}
#jak_korzystac #col1 .row1 .krok .number img {max-width: 100%;}
#jak_korzystac #col1 .row1 .krok .krok_txt .icons {display: flex;}
#jak_korzystac #col1 .row2 {background: #222325; display: flex; align-items: center; justify-content: center;}
#jak_korzystac #col1 .row2 div {display: flex; flex-direction: column; align-items: center; color: #A275FF; text-align: center; font-weight: 600; }
#jak_korzystac #col2 {display: flex; flex-direction: column;}
#jak_korzystac #col2 .row1 {background: #222325; position: relative;}
#jak_korzystac #col2 .row1 #arrow_right {position: absolute;}
#jak_korzystac #col2 .row1 #triki_img {position: absolute;}
#jak_korzystac #col2 .row1 #txt {color: #A275FF; text-align: justify; font-weight: 400;  position: absolute;}
#jak_korzystac #col2 .row1 #line {position: absolute;}
#jak_korzystac #col2 .row2 {display: flex;}
#jak_korzystac #col2 .triki_kapsle {color: #A275FF; background: #222325; position: relative;}
#jak_korzystac #col2 .row2 .row2_col1 {background: url('/images/unBx_mniejszy_1.png'); background-size: contain; background-repeat: no-repeat; position: relative;}
#jak_korzystac #col2 .row2 .row2_col1 {display: flex; justify-content: center; align-items: center; justify-items: center;}
/* #jak_korzystac #col2 .row2 .row2_col1 #qrcode {position: absolute;} */
#jak_korzystac #col2 .row2 .row2_col1 #arrow_left {position: absolute;}
#jak_korzystac #col2 .row2 .row2_col1 #qr_txt {position: absolute; color: #A275FF; text-align: justify; font-weight: 400;}
#jak_korzystac #col2 .row2 .row2_col2, #jak_korzystac #col2 .row2 .row2_col2_mobile {background: #222325; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #A275FF;}
#jak_korzystac #col2 .row3 {display: flex;}
#jak_korzystac #col2 .row3 .row3_col1 {background: #222325; display: flex;  color: #A275FF; text-align: center; font-weight: 600; }
#jak_korzystac #col2 .row3 .row3_col1 div {display: flex; flex-direction: column; justify-content: center; align-items: center;}
#jak_korzystac #col2 .row3 .row3_col2 {background: #222325; display: flex; flex-direction: column; color: #A275FF; text-align: center; font-weight: 400;}
#jak_korzystac #col2 .row3 .row3_col2 .zawartosc_row {display: flex; align-items: center; justify-content: center;}
#jak_korzystac #col2 .row3 .row3_col2 .zawartosc_item {display: flex; flex-direction: column;}
#jak_korzystac #col2 .row3 .row3_col2 .zawartosc_item .img { display: flex; align-items: center;}
#section10 {position: relative; aspect-ratio: 1920/1080; background-image: url('/images/bg_section10.png'); background-size: contain;}
#section10 .title {color: #F5F5F5; display: flex; align-items: end; position: absolute; }
#section10 .subtitle {position: relative;}
#footer {position: relative; aspect-ratio: 1920/700; background-image: url('/images/bg_footer.svg'); background-size: contain; background-repeat: no-repeat; background-color: #222325;}
#footer #footer_top {color: #F5F5F5; font-weight: 400; background: #222325;  position: absolute; display: flex; align-items: center;}
#footer #menu {position: absolute; display: flex;}
#footer #menu .line {background-color: #fff;}
#footer #copyright {color: #7D7E81; font-weight: 400; line-height: normal; position: absolute;}
#footer #menu a {color: #F5F5F5; font-weight: 400; line-height: normal; text-decoration: none;}
#footer #menu a:hover {color: #ccc;}

/* maska */
.g-text-reveal .line{
  display:block;
  overflow:hidden;
}

.g-text-reveal.is-done .line{
  overflow: visible;
}

/* animowany tekst */
.g-text-reveal .inner{
  display:inline-block;
  transform: translateY(120%);
}

/* reveal */
.g-text-reveal.is-visible .inner{
  animation: textReveal .9s cubic-bezier(.2,.9,.3,1) forwards;
}

/* stagger */
.g-text-reveal .line:nth-child(1) .inner{ animation-delay: .0s; }
.g-text-reveal .line:nth-child(2) .inner{ animation-delay: .14s; }
.g-text-reveal .line:nth-child(3) .inner{ animation-delay: .28s; }

@keyframes textReveal{
  from{ transform: translateY(120%); }
  to{ transform: translateY(0); }
}

:root {
    --s8: 0.417vw;
    --s12: 0.633vw;
    --f16: 0.833vw;
    --s18: 0.938vw;
    --s20: 1.042vw;
    --s22: 1.146vw;
    --s24: 1.25vw;
    --s25: 1.302vw;
    --s28: 1.458vw;
    --s30: 1.563vw;
    --s32: 1.667vw;
    --s44: 2.292vw;
    --s46: 2.396vw;
    --s56: 2.917vw;   
    --s66: 3.438vw;
}


#pagewrap {max-width: 100%;}
.hero-title{ font-size: 4.792vw; line-height: 1.02; letter-spacing: -0.02em; }
.slider_nav { bottom: 6.875vw; /*left: 12.448vw;*/ width: 100%; border-radius: var(--s32); /*backdrop-filter: blur(var(--s24));*/ }
.nav { width: var(--s44); height: var(--s44); backdrop-filter:blur(0.313vw); border: none; background-size: contain;}
.nav.prev{ margin-right: var(--s28); }
.nav.next{ margin-left: var(--s28); }
.nav.prev {background-image: url('slider_prev.svg'); filter: brightness(1); transition: filter .3s ease;}
.nav.next {background-image: url('slider_next.svg'); filter: brightness(1); transition: filter .3s ease;}

.paginationContainer { gap: 0.26vw; font-size: var(--f16); }
.pagination { /*margin-bottom: 0.26vw;*/ gap: 1.094vw; }
/* .pagination .dot{ width:var(--s32); height: 0.104vw; } */
.pagination .dot{ width:var(--s12); height: var(--s12); }
/* .pagination .dot.active{ width:var(--s56); } */
.slide .hero-title { top: 19.323vw; left: 12.552vw; }
.kapsel { width: 18.802vw; top: 13.594vw; right: 21.042vw; }
.menu-wrapper{ top: 4.323vw; left: 10.885vw; width: 33.854vw; height: 5.417vw; border-radius: var(--f16) var(--s56) var(--s56) var(--f16); }
.menu-toggle { width: 7.344vw; height: var(--s44); border-radius: var(--s22); font-size: var(--s18); line-height: var(--s18);}
.menu-toggle svg { margin-top: 0.208vw; margin-left: var(--s30); }
.menu-dropdown{ top: 4.323vw; left: 24.74vw; width: 14.583vw; gap: var(--s8); }
.menu-dropdown a { padding:var(--f16) 1.771vw; border-radius:52.031vw; font-size: var(--f16); transform:translateY(-0.521vw);}
.menu-wrapper.open.closing .menu-dropdown a { transform:translateY(-0.521vw); }
@media (hover:hover) and (pointer:fine) { 
    .menu-dropdown a:hover{ transform:translateY(-0.156vw) scale(1.015); }
}
.menu-wrapper #logo {width: 11.51vw; margin-left: 1.771vw;}
.menu-wrapper .masz_wiecej { font-size: var(--s18); margin-left: var(--s30); margin-right: var(--s32);}
#made_for_zappka { top: 37.24vw; left: 79.635vw; width: 7.604vw;}
#section1 .icon_fb {width: 2.292vw; filter: invert(0); transition: filter .3s ease;}
#section1 .icon_ig {width: 2.292vw; filter: invert(0); transition: filter .3s ease;}
#section1 .icon_fb:hover, #section1 .icon_ig:hover {filter: invert(0.4);}
#socials { top: 5.885vw; left: 81.458vw;  gap: var(--s25);}
.scroll_next {width: 17.5vw; top: 0; left: 11.927vw; gap: 1.615vw;}
.scroll_next .scroll_next_txt {font-size: var(--f16);}
.scroll_next .next_arrow {width: var(--s25);}
.scroll_top { width: 17.5vw; bottom: 0; left: 11.927vw; gap: 1.615vw;}
.scroll_top .scroll_top_txt {font-size: var(--f16);}
.scroll_top .top_arrow {width: var(--s25);}
#section2 {padding-top: var(--s56); gap: var(--s66);}
#section2 .row { gap: var(--s66);}
#section2 .masz_wiecej {font-size: 4.271vw; line-height: 4.167vw; width: 37.969vw;}
#section2 .logotype_triki {width: 36.146vw;}
#section2 .logotype_triki img {width: 33.698vw;}
#section2 .row .desc {width: 36.146vw;}
#section2 .row .desc .desc_content {padding: 0.156vw 2.031vw 0 2.031vw; font-size: var(--s18); line-height: var(--s22); letter-spacing: -0.028vw; }
#section2 .row .desc .desc_content .desc_title {margin-top: 1.094vw; font-size: var(--s24); line-height: var(--s24); /*height: 2.188vw;*/ margin-bottom: 0.313vw;}
#section2 .triki_kapsle {margin-left: -1.51vw; width: 37.969vw;}
#section2 .triki_icon {margin-top: 2.188vw; width: 3.021vw}
#section3 #finger {width: 13.021vw; margin-left: 10.833vw;}
#section3 .txt {font-size: 4.167vw; margin-left: 12.656vw;}
#section3 .txt .line2 {margin-top: -0.6vw;}
#section4 .triki_icon {width: 3.021vw; top: 28.49vw; left: 84.271vw;}
#section4 .txt {font-size: var(--f16); top: 27.708vw; left: 9.375vw;}
#section5 .section_header {top: 9.479vw; left: 12.552vw; gap: var(--s30);}
#section5 .section_header .title {font-size: 4.271vw; line-height: 4.167vw;}
#section5 .section_header .subtitle {font-size: var(--s24); line-height: var(--s24); margin-bottom: 0.365vw;}
#section5 #btn_sprawdz_gry {width: 16.042vw; height: var(--s66); left: 12.656vw; top: 67.74vw;}
/* .games-header { gap:var(--s24); margin-bottom:var(--s32); } */
/* .games-header h2{ font-size:2.5vw; } */
/* .games-header p { max-width:18.75vw; } */
.scroller-wrapper { top: 17.448vw; width: 100%;} 
.scroller { gap: 2.604vw; padding-left: 3.177vw; padding-right: 3.177vw; }
.card{ flex:0 0 25.938vw; }
.card-img {border-radius:var(--s28);}
.card-img .btn { bottom: var(--s20); right: var(--s20); width: 6.406vw; height: 2.344vw; border-radius: var(--s56); backdrop-filter: blur(var(--f16)); font-size: var(--s18); }
.badge { top:var(--s20); right:var(--s20); border-radius: var(--s56); backdrop-filter: blur(var(--f16)); width: 6.406vw; height: 2.344vw; font-size: var(--s18); }
.card-footer {margin-top: var(--s25);}
.card-footer h3 { font-size: var(--s24); line-height: var(--s24); margin-left: var(--s20); }
.card .desc {margin-top: 1vw; font-size: 0.65vw; line-height: 0.8vw; margin-left: var(--s20); margin-right: var(--s20);}
.tag { width: 6.406vw; height: var(--s44); border-radius: var(--s22); border: 0.104vw solid #F5F5F5; font-size: var(--s18); margin-right: var(--s20);}
.scrollbar { height: 0.469vw; width: 8.49vw; border-radius: 0.625vw; border: 0.052vw solid #7D7E81;}
.scrollbar-thumb {top: 0.208vw; height:0.156vw; width:0.521vw; border-radius: 0.625vw; }
.scroll-nav { left: 12.604vw; top: 20.833vw; width: 31.25vw; gap:0.625vw; margin-top:var(--f16); }
#section5 .scroll-nav {top: 45.5vw;}
.scroll-center { font-size: var(--f16); gap: 0.208vw; }
.scroll-nav button{ width:var(--s44); height:var(--s44); }
.scroll-nav span { font-size:0.729vw; }
.games-cta{ margin-top:var(--s32) }
.games-cta a { gap:0.625vw; padding:var(--s18) var(--s28); border-radius:52.031vw; }
.scroller-fade { background: radial-gradient(46.875vw 11.458vw at 50% 50%, rgba(0,0,0,.75), rgba(0,0,0,.95)); }
#section6 {padding-top: 1.51vw;}
#section6 .content {width: 74.688vw; margin-top: 5vw;}
#section6 .txt {font-size: 4.271vw; line-height: 4.167vw;}
#section6 #tryby_gry {gap: 3.021vw; margin-top: 5.729vw;}
#section6 #tryby_gry .btn_sprawdz {bottom: var(--s18); right: var(--s20); width: 6.406vw; height: 2.344vw; border-radius: var(--s56); backdrop-filter: blur(var(--f16)); font-size: 0.938vw;}
#section6 #tryby_gry .title {font-size: 2.5vw; line-height: var(--s24); top: 2.344vw; left: 1.615vw;}
#section6 #tryby_gry .tryb_txt {width: 19.688vw; font-size: var(--s18); line-height: var(--s20); letter-spacing: -0.028vw; left: 1.615vw; top: 5.26vw;}
#section7 .txt { font-size: 4.271vw; line-height: 4.167vw; top: 9.479vw; left: 12.552vw; }
#section7 #pricetag1, #section7 #pricetag2 {width: 8.333vw;}
#section7 #pricetag1 {top: 13.333vw; left: 59.688vw;}
#section7 #pricetag2 {top: 35.625vw; left: 45.26vw;}
#section7 .desc {top: 21.667vw; left: 12.656vw;}
#section7 .desc .line1 {font-size: var(--s24); line-height: var(--s22); width: 32.083vw; height: 2.135vw;}
#section7 .desc .line2 {font-size: var(--s18); line-height: var(--s22); width: 32.083vw; height: 2.031vw;}
#section7 #btn_jak_zdobyc_triki {width: 20.729vw; height: var(--s66); margin-top: 4.531vw;}
#section7 #tylko_w_zabka { width: 11.302vw; height: var(--s66); top: 46.51vw; left: 12.656vw;}
#section8 #tongue {width: 10.847vw; left: 75.573vw; top: -3.5vw;}
#section8 .triki_icon {width: 3.021vw; top: 28.49vw; left: 84.271vw;}
#section8 .txt {font-size: var(--f16); top: 27.708vw; left: 9.375vw;}
#section9 .txt { font-size: 4.271vw; line-height: 4.167vw; top: 9.531vw; left: 9.531vw; }
#jak_korzystac {width: 74.688vw; height: 3.594vw; top: 16.823vw; left: 12.656vw; gap: var(--s30);}
#jak_korzystac #col1 {gap: var(--s30); height: 49.063vw;}
#jak_korzystac #col1 .row1 {width: 28.281vw; height: 32.188vw; border-radius: var(--s46);}
#jak_korzystac #col1 .row1 .content {margin-top: 3.229vw; gap: var(--s32);}
#jak_korzystac #col1 .row1 .krok {gap: 0.781vw; font-size: var(--s18); line-height: var(--s22); padding: 0 2.708vw; letter-spacing: -0.019vw;}
#jak_korzystac #col1 .row1 .krok .number {flex: 0 0 1.875vw;}
#jak_korzystac #col1 .row1 .krok .krok_txt .icons {margin-top: 0.521vw; gap: var(--s8);}
#jak_korzystac #col1 .row1 .krok .krok_txt .icons #icon_zappka {width: 2.604vw;}
#jak_korzystac #col1 .row1 .krok .krok_txt .icons #icon_appstore  {width: 7.604vw;}
#jak_korzystac #col1 .row1 .krok .krok_txt .icons #icon_googleplay  {width: 8.438vw;}
#jak_korzystac #col1 .row2 {width: 28.281vw; height: 15.313vw; border-radius: var(--s46); gap: var(--s28);}
#jak_korzystac #col1 .row2 #triki_front {width: 10.313vw;}
#jak_korzystac #col1 .row2 #triki_back {width: 10.625vw;}
#jak_korzystac #col1 .row2 div {gap: 0.573vw; font-size: var(--f16); line-height: var(--s22);}
#jak_korzystac #col2 {gap: var(--s30); height: 49.063vw;}
#jak_korzystac #col2 .row1 {width: 44.74vw; height: 15.313vw; border-radius: var(--s46);}
#jak_korzystac #col2 .row1 #arrow_right {top: var(--s66); left: 3.385vw; width: var(--s46);}
#jak_korzystac #col2 .row1 #triki_img {top: 1.979vw; left: 22.813vw; width: 19.01vw}
#jak_korzystac #col2 .row1 #txt {font-size: var(--s18); line-height: var(--s22);  top: 6.354vw; left: 3.385vw;}
#jak_korzystac #col2 .row1 #line {width: 28.906vw; height: 0.104vw; left: 3.385vw; top: 11.667vw;}
#jak_korzystac #col2 .row2 {gap: var(--s30);}
#jak_korzystac #col2 .row2 .row2_col1 {width: 28.281vw; height: 15.313vw; border-radius: var(--s46);}
#jak_korzystac #col2 .row2 .row2_col1 #qrcode {top: 3.281vw; left: 3.542vw; width: 8.802vw;}
#jak_korzystac #col2 .row2 .row2_col1 #arrow_left { top: 9.688vw; left: 13.49vw; width: var(--s46);}
#jak_korzystac #col2 .row2 .row2_col1 #qr_txt { /*top: 3.073vw; left: 13.49vw;*/ font-size: var(--s18); line-height: var(--s22);}
#jak_korzystac #col2 .row2 .row2_col2 {width: 14.896vw; height: 15.313vw; border-radius: var(--s46); font-size: 1.771vw; line-height: 1.771vw; gap: 1.719vw;}
#jak_korzystac #col2 .row2 .row2_col2 #icon_bluetooth {width: 6.875vw;}
#jak_korzystac #col2 .row3 {gap: 1.406vw;}
#jak_korzystac #col2 .row3 .row3_col1 {width: 8.958vw; height: 15.313vw; border-radius: var(--s46); padding-left: 5.938vw; gap: 0.885vw; font-size: var(--f16); line-height: var(--s22);}
#jak_korzystac #col2 .row3 .row3_col1 div {gap: 0.573vw;}
#jak_korzystac #col2 .row3 .row3_col1 #triki_side {width: 2.5vw;}
#jak_korzystac #col2 .row3 .row3_col1 #triki_line {width: 0.521vw;}
#jak_korzystac #col2 .row3 .row3_col2 {width: 28.281vw; height: 15.469vw; border-radius: var(--s46); font-size: var(--s18); line-height: var(--s22);}
#jak_korzystac #col2 .row3 .row3_col2 .title {margin-top: 2.5vw;}
#jak_korzystac #col2 .row3 .row3_col2 .zawartosc_row { gap: 3.333vw; margin-top: 1.979vw;}
#jak_korzystac #col2 .row3 .row3_col2 .zawartosc_item { font-size: var(--f16); gap: var(--s46);}
#jak_korzystac #col2 .row3 .row3_col2 .zawartosc_item .img {height: 4.792vw;}
#jak_korzystac #col2 .row3 .row3_col2 #zawartosc_instrukcja {width: 5.417vw;}
#jak_korzystac #col2 .row3 .row3_col2 #zawartosc_triki {width: 4.792vw;}
#section10 .title {font-size: 4.271vw; line-height: 4.167vw; gap: var(--s32); top: 9.635vw; left: 12.917vw;}
#section10 .subtitle {font-size: var(--s24); line-height: var(--s24);  top: -0.417vw;}
#section10 .card {flex: 0 0 36.406vw;}
#section10 .scroll-nav {top: 27.604vw;}
#footer #footer_top {font-size: var(--s22); line-height: var(--s25); border-radius: var(--s24) 4.063vw 4.063vw var(--s24); width: 54.479vw; height: 8.229vw; top: 3.75vw; left: 9.74vw; gap: 2.448vw; }
#footer #footer_top #logotype_triki {width: 22.396vw; margin-left: 2.865vw;}
#footer #footer_top #tylko_w_zabka {width: 11.302vw;}
#footer #socials {top: 6.615vw; left: 80.99vw;}
#footer #menu { top: 14.271vw; left: 12.604vw;  gap: var(--s22);}
#footer #menu .line {width: 0.052vw; height: 0.885vw; }
#footer #menu a {font-size: var(--f16);}
#footer #copyright { font-size: var(--f16);  bottom: 2.656vw; left: 12.604vw;}
#footer .icon_fb {width: 2.292vw; filter: invert(0); transition: filter .3s ease;}
#footer .icon_ig {width: 2.292vw; filter: invert(0); transition: filter .3s ease;}
#footer .icon_fb:hover, #footer .icon_ig:hover {filter: invert(0.4);}

#faq{
  width: 74.688vw; margin: 0 auto; margin-top: 5vw; margin-bottom: 5vw;
  color:#9B6CFF;
}

#faq h2{
  margin:0;
  font-size: 4.271vw;
  line-height: 4.167vw;
  font-weight:800;
  color:#9B6CFF;
}

#faq .faq-lead{
  margin: 0.938vw 0 3.646vw;
  font-size: var(--s24);
  line-height: var(--s24);
  color:#9B6CFF;
}

.faq-list{
  display:flex;
  flex-direction:column;
  gap: 1.3vw;
}

.faq-item{
  background:#232426;
  border-radius: 2.396vw;
  overflow:hidden;
  transition:
    background-color .3s ease,
    border-radius .3s cubic-bezier(.2,.9,.3,1);
}

.faq-item.is-open{
  border-radius: 2.396vw;
}

.faq-question{
  width:100%;
  min-height:5vw;
  padding:0 1.563vw 0 3.021vw;
  border:0;
  background:transparent;
  color:#A779FF;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.563vw;
  font-size: 1.25vw;
  text-align:left;
}

.faq-toggle{
  flex:0 0 auto;
  min-width: 7.917vw;
  height: 2.5vw;
  padding:0 1.146vw;

  border-radius:999px;
  background:#101011;
  color:#A779FF;

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 0.938vw;

  font-size: 0.938vw;
  font-weight:700;

  transition:
    background-color .25s ease,
    color .25s ease,
    transform .25s cubic-bezier(.2,.9,.3,1);
}

.faq-item.is-open .faq-toggle{
  background:#A779FF;
  color:#111;
}

.faq-question:hover .faq-toggle{
  transform:scale(1.04);
}

.faq-arrow{
  width:1.042vw;
  height:1.042vw;

  display:flex;

  align-items:center;

  justify-content:center;

  transition: transform .3s cubic-bezier(.2,.9,.3,1);

}

.faq-arrow svg{

  width:100%;

  height:100%;

  display:block;

}

/* stan otwarty */

.faq-item.is-open .faq-arrow{

  transform: rotate(180deg);

}

.faq-answer {
  max-height:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.9,.3,1);
}

.faq-answer > div{
  padding:0 3.021vw 2.292vw;
  color:#A779FF;
  font-size: 0.938vw;
  line-height: 1.146vw;
  font-weight: normal;
}

.faq-answer strong {font-weight: 700;}
.faq-answer ol {list-style: circle;}
.faq-answer ol li {margin-left: 2vw;}


.cookie-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;

  display: grid;
  grid-template-columns: 3.75vw 1fr auto;
  gap: 2.1875vw;
  align-items: start;

  padding: 2.2917vw 10vw;

  background: rgba(14,14,15,.96);
  color: #7d7e81;

  box-shadow: 0 -1.0417vw 4.1667vw rgba(0,0,0,.45);

  transform: translateY(100%);
  opacity: 0;

  transition:
    transform .55s cubic-bezier(.2,.9,.3,1),
    opacity .35s ease;
}

.cookie-bar.is-visible{
  transform: translateY(0);
  opacity: 1;
}

.cookie-icon{
  font-size: 2.5vw;
  line-height: 1;

  color: #9B6CFF;

  filter: drop-shadow(0 0 0.9375vw rgba(155,108,255,.25));
}

.cookie-icon img {width: 2.448vw;}

.cookie-content{
  max-width: 90vw;
}

.cookie-content p{
  margin: 0;

  font-size: clamp(14px, 0.7292vw, 18px);
  line-height: 1.35;
  font-weight: 600;
}

.cookie-content .line2 {display: flex; align-items: end; gap: 3vw;}

.cookie-content a{
  color: #7d7e81;

  text-decoration: underline;
  text-underline-offset: 0.1563vw;
}

.cookie-details{
  margin-top: 2.1875vw;
}

.cookie-details strong{
  display: block;

  margin-bottom: 0.4167vw;

  color: #7d7e81;

  font-size: clamp(15px, 0.7813vw, 19px);
  font-weight: 800;
}

.cookie-actions{
  display: flex;
  align-items: center;
  gap: 0.9375vw;

  white-space: nowrap;
}

.cookie-actions button{
  height: 2.5vw;
  min-height: 48px;

  padding: 0 1.7708vw;

  border-radius: 999vw;
  border: 0.1042vw solid #9B6CFF;

  cursor: pointer;

  font: inherit;
  font-size: clamp(16px, 0.9375vw, 20px);
  font-weight: 800;

  transition:
    transform .25s cubic-bezier(.2,.9,.3,1),
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

.cookie-accept{
  background: #9B6CFF;
  color: #111;
}

.cookie-reject{
  background: transparent;
  color: #9B6CFF;
}

.cookie-actions button:hover{
  transform: translateY(-0.1042vw) scale(1.03);

  box-shadow:
    0 0.625vw 1.4583vw rgba(155,108,255,.25);
}

.cookie-actions button:active{
  transform: scale(.97);
}

@media only screen and (max-width: 767px) {
    html {overflow-x: hidden;}
    body {overflow-x: hidden;}    
    .mobile {display: block !important;}
    .desktop {display: none !important;}

    #section1 {aspect-ratio: 393/852;}
    #hero-slider {aspect-ratio: 393/852;}
    .slide { width: 100%; aspect-ratio: 393/852; background-size: cover; }
    .slide.slide1 {background-image: url('/images/hero_baner1_mobile.png');}
    .slide.slide2 {background-image: url('/images/hero_baner1_mobile.png');}
    .slide.slide3 {background-image: url('/images/hero_baner1_mobile.png');}


    #pagewrap {max-width: 100%;}
  .hero-title{ font-size: 11.196vw; line-height: 1.02; letter-spacing: -0.02em; }
  .slider_nav { bottom: 7.084vw; left: 4.58vw; border-radius: 6.577vw; }
  .nav { width: 9.043vw; height: 9.043vw; padding: 0; }
    .nav.prev{ margin-right: 2.349vw; }
    .nav.next{ margin-left: 2.349vw; }
    .paginationContainer { gap: 1.26vw; font-size: 3.562vw; }
    .pagination { /*margin-bottom: 0.26vw;*/ gap: 3.16vw; }
    .pagination .dot{ width: 2vw; height: 2vw; }
  /* .pagination .dot{ width: 6.107vw; height: 0.763vw; border-radius: 2.466vw;} */
  /* .pagination .dot.active{ width: 8.107vw; } */
  .slide .hero-title { top: 131.043vw; left: 5.598vw; }
  .kapsel { width: 57.506vw; top: 55.98vw; right: 21.997vw; }
  .menu-wrapper{ top: 8.142vw; left: 2.036vw; width: 95.929vw; height: 14.758vw; border-radius: 2.356vw 8.247vw 8.247vw 2.356vw; }
    .menu-toggle { width: 16.794vw; height: 7.634vw; border-radius: 4.299vw; font-size: 3.308vw; line-height: 3.308vw;}
    .menu-toggle svg { margin-top: 0.208vw; margin-left: var(--s30); }
  .menu-dropdown{ top: 15vw; left: 51vw; width: 41vw; gap: 3vw; align-items: end;}
    .menu-dropdown a { padding: 2vw 4vw; border-radius:52.031vw; font-size: 3.308vw; line-height: 3.308vw; transform:translateY(-0.521vw);}
    .menu-wrapper.open.closing .menu-dropdown a { transform:translateY(-0.521vw); }
    @media (hover:hover) and (pointer:fine) { 
        .menu-dropdown a:hover{ transform:translateY(-0.156vw) scale(1.015); }
    }
  .menu-wrapper #logo {width: 36.132vw; margin-left: 3.308vw;}
  .menu-wrapper .masz_wiecej { font-size: 3.308vw; margin-left: 2.799vw; margin-right: 4.071vw;}
  #made_for_zappka { top: 37.24vw; left: 79.635vw; width: 7.604vw; display: none;}
  #section1 .icon_fb {width: 7.561vw;}
  #section1 .icon_ig {width: 7.534vw;}
  #socials { top: 188.55vw; left: 74.809vw;  gap: 4.275vw;}

  .scroll_next {width: 40.076vw; top: 0; left: 2.29vw; gap: 6.239vw;}
  .scroll_next .scroll_next_txt {font-size: 3.562vw;}
  .scroll_next .next_arrow {width: 5.419vw;}
  .scroll_top { width: 40.076vw; bottom: 0; left: 2.29vw; gap: 6.239vw;}
  .scroll_top .scroll_top_txt {font-size: 3.562vw;}
  .scroll_top .top_arrow {width: 5.419vw;}

  .scroll_next { aspect-ratio: 158/52; background: url('/images/bg_next_mobile.png'); background-repeat: no-repeat; background-size: contain;}
  .scroll_top { aspect-ratio: 158/51;  background: url('/images/bg_top_mobile.png'); background-repeat: no-repeat; background-size: contain;}
  #section3_next.scroll_next {background: url('/images/bg_next_mobile2.png'); background-repeat: no-repeat; background-size: contain;}
  #section7_next.scroll_next {background: url('/images/bg_next_mobile2.png'); background-repeat: no-repeat; background-size: contain;}


#section2 {padding-top: 32.061vw; gap: 8.397vw; padding-left: 5.344vw; align-items: start;}
#section2 .row { gap: 0; flex-direction: column;}
#section2 .masz_wiecej {font-size: 11.196vw; line-height: 11.196vw; width: 88.804vw; order: 1; margin-top: 1.781vw;}
#section2 .logotype_triki {width: calc(100vw - 5.344vw); text-align: left; order: 0;}
#section2 .logotype_triki img {width: 52.672vw;}
#section2 .row .desc {width: 88.804vw; order: 3; aspect-ratio: 349/412; background-image: url('/images/bg_folder_mobile.png'); margin-top: 9.16vw; margin-bottom: 11.705vw;}
#section2 .row .desc .desc_content {padding: 0.156vw 6.87vw 0 6.87vw; font-size: 4.071vw; line-height: 4.58vw; letter-spacing: -0.163vw; }
#section2 .row .desc .desc_content .desc_title {margin-top: 3.817vw; font-size: 4.58vw; line-height: 6.107vw; /*height: 10.687vw;*/ margin-bottom: 0.313vw;}
#section2 .triki_kapsle {margin-left: 0; width: 116.2vw; order: 2;}
#section2 .triki_icon {margin-top: 5.5vw; width: 11.705vw}
#section3 {aspect-ratio: 393/426;}
#section3 #finger {width: 29.008vw; margin-left: 0; position: absolute; top: 62.595vw; left: 60.56vw;}
#section3 .txt {font-size: 11.167vw; margin-left: 5.344vw;}
#section4 {aspect-ratio: 393/426; background-image: url('/images/bg_section4_mobile.png');}
#section4 .triki_icon {width: 3.021vw; top: 28.49vw; left: 84.271vw; display: none;}
#section4 .txt {font-size: var(--f16); top: 27.708vw; left: 9.375vw; display: none;}
#section5 {aspect-ratio: 393/900;}
#section5 .section_header {top: 30.28vw; left: 5.344vw; gap: 2.799vw; flex-direction: column; align-items: start;}
#section5 .section_header .title {font-size: 11.196vw; line-height: 11.196vw;}
#section5 .section_header .subtitle {font-size: 5.089vw; line-height: 5.598vw; margin-bottom: 8.087vw;}
#section5 #btn_sprawdz_gry {width: 49.109vw; height: 11.196vw; left: 4.58vw; top: 209.293vw;}
#section5 .scroll-nav {top: 125vw;}
#section5_next {aspect-ratio: 158/52; /*background-image: url('/images/section4_next_mobile.png');*/ background-size: contain; background-repeat: no-repeat;}
#section9_next {aspect-ratio: 158/52; background-image: url('/images/section9_next_mobile.png'); background-size: contain; background-repeat: no-repeat;}

.scroller-wrapper { top: 68.646vw; width: 100%;} 
    .scroller { gap: 2.604vw; padding-left: 3.177vw; padding-right: 3.177vw; }
.card{ flex:0 0 67.684vw; }
.card-img {border-radius:6.616vw;}
.card-img .btn { bottom: 2.941vw; right: 2.799vw; width: 19.593vw; height: 7.125vw; border-radius: 8.939vw; backdrop-filter: blur(2.552vw); font-size: 3.053vw; }
.badge { top: 2.941vw; right: 2.799vw; border-radius: 6.616vw; backdrop-filter: blur(2.552vw); width: 19.593vw; height: 7.125vw; font-size: 3.053vw; }
.card-footer {margin-top: 3.397vw;}
.card-footer h3 { font-size: 3.562vw; line-height: 3.562vw; margin-left: 2.718vw; }
.card .desc {margin-top: 3vw; font-size: 2.25vw; line-height: 2.5vw; margin-left: 2.718vw; margin-right: 2.718vw;}

.tag { width: 19.593vw; height: 7.125vw; border-radius: 6.616vw; border: 0.254vw solid #F5F5F5; font-size: 3.053vw; margin-right: 2.799vw;}
.scrollbar { height: 2.036vw; width: 26.209vw; border-radius: 2.466vw; border: 0.254vw solid #7D7E81;}
.scrollbar-thumb {top: 0.45vw; height:1.156vw; width:6.107vw; border-radius: 2.466vw; }
.scroll-nav { left: 4.58vw; top: 57.506vw; width: 49.109vw; gap: 1.527vw; margin-top: 0; }
.scroll-center { font-size: 3.562vw; gap: 0.208vw; }
.scroll-nav button{ width:9.043vw; height:9.043vw; }
.scroll-nav span { font-size: 3.562vw; }
.scroller-fade { background: radial-gradient(46.875vw 11.458vw at 50% 50%, rgba(0,0,0,.75), rgba(0,0,0,.95)); }
#section6 {padding-top: 6.361vw; aspect-ratio: 393/845;}
#section6 .content {width: 88.804vw; margin-top: 10vw;}
#section6 .txt {font-size: 11.196vw; line-height: 11.196vw;}
#section6 .txt .gradient-word:after {content: '\A'; white-space: pre; }
#section6 #tryby_gry {gap: 5.43vw; margin-top: 11.45vw; flex-direction: column;}
#section6 #tryby_gry .btn_sprawdz {bottom: 4.239vw; right: 4.326vw; width: 25.954vw; height: 8.397vw; border-radius: 10.585vw; backdrop-filter: blur(3.031vw); font-size: 3.562vw;}
#section6 #tryby_gry .title {font-size: 8.651vw; line-height: 5.089vw; top: 8.491vw; left: 7.089vw;}
#section6 #tryby_gry .tryb_txt {width: 75.064vw; font-size: 4.071vw; line-height: 4.58vw; letter-spacing: -0.077vw; left: 6.893vw; top: 19.127vw;}
#section7 {aspect-ratio: 393/1086; background: url("/images/img_section7_mobile.png") bottom right, url("/images/bg_section7.png") top left; background-repeat: no-repeat, repeat; background-size: contain;}
#section7 .txt { font-size: 11.196vw; line-height: 11.196vw; top: 30.534vw; left: 5.344vw; }
#section7 #pricetag1, #section7 #pricetag2 {width: 25.275vw;}
#section7 #pricetag1 {top: 138.501vw; left: 66.412vw;}
#section7 #pricetag2 {top: 191.682vw; left: 5.344vw;}
#section7 .desc {top: 73.282vw; left: 5.344vw;}
#section7 .desc .line1 {font-size: 5.089vw; line-height: 5.598vw; width: 88.804vw; height: 10.433vw;}
#section7 .desc .line2 {font-size: 4.071vw; line-height: 4.58vw; width: 88.804vw; height: 26.718vw; letter-spacing: -0.141vw;}
#section7 #btn_jak_zdobyc_triki {width: 71.756vw; height: 11.196vw; margin-top: 0vw;}
#section7 #tylko_w_zabka { width: 35.369vw; height: 11.196vw; top: 138.677vw; left: 4.58vw;}
#section8 {aspect-ratio: 393/426; background-image: url('/images/bg_section8_mobile.png');}
#section8 #tongue {width: 29.262vw; left: 60.56vw; top: -11vw;}
#section8 .triki_icon {width: 3.021vw; top: 28.49vw; left: 84.271vw; display: none;}
#section8 .txt {font-size: var(--f16); top: 27.708vw; left: 9.375vw; display: none;}
#section9 {aspect-ratio: 393/1765;}
#section9 .txt { font-size: 11.196vw; line-height: 11.196vw; top: 30.534vw; left: 5.344vw; width: 88.804vw;}
#jak_korzystac {width: 88.804vw; height: auto; top: 63.868vw; left: 5.344vw; gap: 5.089vw; flex-direction: column;}
#jak_korzystac #col1 {gap: var(--s30); height: auto;}
#jak_korzystac #col1 .row1 {width: 88.804vw; height: 101.018vw; border-radius: 7.634vw;}
#jak_korzystac #col1 .row1 .content {margin-top: 7.634vw; gap: 4.7vw;}
#jak_korzystac #col1 .row1 .krok {gap: 2.636vw; font-size: 3.165vw; line-height: 3.868vw; padding: 0 6.87vw; letter-spacing: -0.095vw;}
#jak_korzystac #col1 .row1 .krok .number {flex: 0 0 6.33vw;}
#jak_korzystac #col1 .row1 .krok .krok_txt .icons {margin-top: 3.053vw; gap: 1.399vw;}
#jak_korzystac #col1 .row1 .krok .krok_txt .icons #icon_zappka {width: 8.801vw;}
#jak_korzystac #col1 .row1 .krok .krok_txt .icons #icon_appstore  {width: 25.66vw;}
#jak_korzystac #col1 .row1 .krok .krok_txt .icons #icon_googleplay  {width: 28.483vw;}

#jak_korzystac #col1 .row2 {width: 88.804vw; height: 15.313vw; border-radius: 7.634vw; gap: var(--s28); display: none;}

#jak_korzystac #col2 .triki_kapsle {width: 88.804vw; display: flex !important; flex-direction: row; border-radius: 7.634vw; justify-content: center; padding: 7.847vw 0; gap: 4.522vw;}
#jak_korzystac #col2 .triki_kapsle #triki_front {width: 32.423vw;}
#jak_korzystac #col2 .triki_kapsle div {display: flex; flex-direction: column; align-items: center; gap: 1.781vw;}
#jak_korzystac #col2 .triki_kapsle #triki_back {width: 33.349vw;}

#jak_korzystac #col1 .row2 #triki_front {width: 10.313vw;}
#jak_korzystac #col1 .row2 #triki_back {width: 10.625vw;}
#jak_korzystac #col1 .row2 div {gap: 0.573vw; font-size: var(--f16); line-height: var(--s22);}

#jak_korzystac #col2 {gap: 5.089vw; height: auto}
#jak_korzystac #col2 .row1 {width: 88.804vw; height: 48.092vw; border-radius: 7.634vw;}
#jak_korzystac #col2 .row1 #arrow_right {top: 31.333vw; left: 6.87vw; width: 6.107vw;}
#jak_korzystac #col2 .row1 #triki_img {top: 16.575vw; left: 37.405vw; width: 45.293vw}
#jak_korzystac #col2 .row1 #txt {font-size: 3.308vw; line-height: 3.562vw;  top: 6.107vw; left: 6.87vw; width: 75vw;}
#jak_korzystac #col2 .row1 #line {width: 53.181vw; height: 0.254vw; left: 6.87vw; top: 39.476vw;}

#jak_korzystac #col2 .row2 {gap: 5.089vw; flex-direction: row;}
#jak_korzystac #col2 .row2_col1 {width: 88.904vw; height: 48.601vw; border-radius: 7.634vw; background-image: url('/images/unBx_mniejszy_1.png'); background-size: contain;}
#jak_korzystac #col2 .row2_col1.mobile { display: flex !important; flex-direction: column; justify-content: center; align-items: center; font-size: 3.308vw; line-height: 3.562vw; gap: 3.562vw;}
#jak_korzystac #col2 .row2_col1.mobile .btn_wchodze {color: #000; font-size: 3.562vw; line-height: 3.562vw; font-weight: 600; line-height: normal; text-decoration: none; display: flex; align-items: center; justify-content: center; border-radius: 25.191vw; background: #A275FF; width: 33.333vw; height: 11.196vw; text-align: center; gap: 4.835vw;}
#jak_korzystac #col2 .row2_col1.mobile .btn_wchodze svg {width: 1.696vw;}

#jak_korzystac #col2 .row2 .row2_col1 #qrcode {top: 3.281vw; left: 3.542vw; width: 8.802vw;}
#jak_korzystac #col2 .row2 .row2_col1 #arrow_left { top: 9.688vw; left: 13.49vw; width: 7.634vw;}
#jak_korzystac #col2 .row2 .row2_col1 #qr_txt { top: 3.073vw; left: 13.49vw; font-size: var(--s24); line-height: var(--s22);}

#jak_korzystac #col2 .row2 .row2_col2, #jak_korzystac #col2 .row2 .row2_col2_mobile {width: 41.73vw; height: 48.092vw; border-radius: 7.634vw; font-size: 5.089vw; line-height: 5.598vw; gap: 5.598vw;}
#jak_korzystac #col2 .row2 .row2_col2_mobile {display: flex !important; flex-direction: row; gap: 2.545vw;}
#jak_korzystac #col2 .row2 .row2_col2 #icon_bluetooth {width: 21.579vw;}
    #jak_korzystac #col2 .row2_col2_mobile {gap: 0vw;}
    #jak_korzystac #col2 .row2_col2_mobile {width: 8.958vw; height: 15.313vw; border-radius: 7.634vw; padding-left: 10vw; gap: 0vw; font-size: 1.308vw; line-height: 3.562vw;}
    #jak_korzystac #col2 .row2_col2_mobile div {gap: 1.5vw; font-size: 3.308vw; line-height: 3.562vw; display: flex; flex-direction: column;}
    #jak_korzystac #col2 .row2_col2_mobile #triki_side {width: 7.967vw;}
    #jak_korzystac #col2 .row2_col2_mobile #triki_line {height: 32.695vw;}
#jak_korzystac #col2 .row3 .row3_col2 {width: 88.804vw; height: 48.048vw; border-radius: 7.634vw; font-size: 3.308vw; line-height: 3.562vw;}
#jak_korzystac #col2 .row3 .row3_col2 .title {margin-top: 7.634vw;}
#jak_korzystac #col2 .row3 .row3_col2 .zawartosc_row { gap: 10.463vw; margin-top: 5.979vw;}
#jak_korzystac #col2 .row3 .row3_col2 .zawartosc_item { font-size: 3.308vw; gap: 6.211vw;}
#jak_korzystac #col2 .row3 .row3_col2 .zawartosc_item .img {height: 15.04vw;}
#jak_korzystac #col2 .row3 .row3_col2 #zawartosc_instrukcja {width: 17.002vw;}
#jak_korzystac #col2 .row3 .row3_col2 #zawartosc_triki {width: 15.04vw;}
#section10 {aspect-ratio: 393/730; background: url('/images/bg_section10_mobile_top.png') top left, url('/images/bg_section10_mobile_bottom.png') bottom left; background-repeat: no-repeat, no-repeat; background-size: contain;}
#section10 .title {font-size: 11.196vw; line-height: 11.196vw; gap: 2.799vw; top: 31.265vw; left: 6.094vw; flex-direction: column; align-items: start;}
#section10 .subtitle {font-size: 5.089vw; line-height: 5.598vw;  top: 0vw;}
#section10 .scroller-wrapper {top: 85.209vw;}
#section10 .card {flex: 0 0 67.684vw;}
#section10 .scroll-nav {top: 58.743vw;}
#footer {aspect-ratio: 393/426;}
#footer #footer_top {font-size: var(--s22); line-height: var(--s25); border-radius: var(--s24) 4.063vw 4.063vw var(--s24); width: 95.929vw; height: 14.758vw; top: 8.142vw; left: 2.036vw; gap: 26.972vw; }
#footer #footer_top #logotype_triki {width: 35.989vw; margin-left: 3.308vw;}
#footer #footer_top .txt {display: none;}
#footer #footer_top #tylko_w_zabka {width: 25.7vw; float: right;}
#footer #socials {top: 27.735vw; left: 5.344vw; gap: 4.275vw}
#footer #menu { top: 41.985vw; left: 5.344vw;  gap: 4.326vw;}
#footer #menu .line {width: 0.254vw; height: 3.562vw; }
#footer #menu a {font-size: 3.562vw;}
#footer #copyright { font-size: 3.562vw;  bottom: 3.817vw; left: 5.344vw;}
#footer .icon_fb {width: 7.561vw;}
#footer .icon_ig {width: 7.534vw;}
   
.cookie-content .line2 {display: block;}
.cookie-content .line2 .cookie-actions {margin-top: 3vw; margin-bottom: 3vw;}
#faq h2 {font-size: 11.196vw; line-height: 11.196vw;}
#faq .faq-lead { font-size: 5.089vw; line-height: 5.598vw; }
#faq {width: 88.804vw;}
.faq-list { gap: 2.3vw;}
.faq-question {font-size: 2.25vw; min-height: 7vw;}
.faq-toggle {font-size: 1.938vw; height: 3.5vw; padding: 0 2.146vw; }
.faq-answer > div { font-size: 1.938vw; line-height: 2.146vw;}

}




.video-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .35s cubic-bezier(.2,.9,.3,1),
    visibility .35s ease;
}

.video-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-overlay__backdrop{
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 20% 20%, rgba(255, 0, 200, .18), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(0, 180, 255, .18), transparent 30%),
    rgba(0, 0, 0, .72);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  opacity: 0;
  transition: opacity .35s cubic-bezier(.2,.9,.3,1);
}

.video-overlay.is-open .video-overlay__backdrop{
  opacity: 1;
}

.video-modal{
  position: relative;
  z-index: 2;

  width: 28.125vw;
  max-width: 28.125vw;
  max-height: 90vh;
  transform: translateY(1.25vw) scale(.96);
  opacity: 0;

  transition:
    transform .4s cubic-bezier(.2,.9,.3,1),
    opacity .35s ease;

  border-radius: 1.25vw;
  overflow: hidden;
}

.video-overlay.is-open .video-modal{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.video-modal__topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 12px 0 20px;

  background: rgba(34, 34, 34, .94);
  color: rgba(255,255,255,.92);

  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  width: 13.021vw;
  margin-left: 13.438vw;
}

.video-modal__title{
  font-size: 0.729vw;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.833vw;
}

.video-modal__close{
  width: 1.667vw;
  height: 1.667vw;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
  font-size: 1.146vw;
  line-height: 1;
  cursor: pointer;

  transition:
    transform .2s cubic-bezier(.2,.9,.3,1),
    background-color .2s ease,
    color .2s ease;
}

.video-modal__close:hover{
  transform: scale(1.06);
  background: rgba(255,255,255,.14);
  color: #fff;
}

.video-modal__body{
  background: #111;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0,0,0,.45);
}

.video-modal__player{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9/16;
  background: #000;
}

/* opcjonalnie – trochę ładniejszy focus */
.video-modal__close:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media only screen and (max-width: 767px) {
  .video-modal{
    width: 90vw;
    max-width: 90vw;
    max-height: 90vh;
  }

  .video-modal__topbar{
    min-height: 10vw;
    width: 35vw;
    margin-left: 48vw;
  }

  .video-modal__title{
    font-size: 2.729vw;
  }

  .video-modal__close {
    width: 5.667vw;
    height: 5.667vw;
    font-size: 3.146vw;
  }

}