/* =============== GOOGLE FONTS =============== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap');

/* =============== THEME =============== */
:root{
  --header-height: 3.5rem;

  --first-color: hsl(45, 100%, 55%);
  --first-color-alt: hsl(45, 100%, 50%);
  --title-color: hsl(45, 100%, 65%);
  --text-color: hsl(0, 0%, 100%);
  --text-color-light: hsl(0, 0%, 80%);

  --body-color: linear-gradient(135deg, hsl(0, 0%, 8%) 0%, hsl(0, 20%, 12%) 50%, hsl(0, 0%, 10%) 100%);
  --container-color: linear-gradient(136deg, hsl(0, 0%, 12%) 0%, hsl(0, 15%, 15%) 100%);

  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  --font-medium: 500;
  --font-semi-bold: 600;
  --font-black: 900;

  --mb-0-25: .25rem; --mb-0-5: .5rem; --mb-0-75: .75rem;
  --mb-1: 1rem; --mb-1-5: 1.5rem; --mb-2: 2rem; --mb-2-5: 2.5rem;

  --z-tooltip: 10;
  --z-fixed: 100;
}

@media screen and (min-width: 992px){
  :root{
    --biggest-font-size: 3.25rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.75rem;
    --normal-font-size: 1.125rem;
    --small-font-size: 1rem;
    --smaller-font-size: .938rem;
  }
}

/* =============== BASE =============== */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
}
h1,h2,h3,h4{color:var(--text-color); font-weight:var(--font-semi-bold);}
.section__title{color:var(--text-color);}
.hero__title{color:var(--text-color);}
.feature__title{color:var(--text-color);}
.businesses__title{color:var(--text-color);}
.about__title{color:var(--text-color);}
.download__title{color:var(--text-color);}
.footer__title{color:var(--text-color);}
ul{list-style:none;}
a{text-decoration:none;}
img{max-width:100%; height:auto;}
button,input{border:none; outline:none;}
button{cursor:pointer; font-family:var(--body-font); font-size:var(--normal-font-size);}

/* =============== UTIL / LAYOUT =============== */
.section{padding:4.5rem 0 2rem;}
.section__title{font-size:var(--h2-font-size); margin-bottom:var(--mb-2); text-align:center;}
.section__subtitle{
  display:block;
  font-size:var(--small-font-size);
  color:var(--title-color);
  text-transform:uppercase;
  font-weight:var(--font-semi-bold);
  margin-bottom:var(--mb-0-5);
  text-align:center;
}
.container{max-width:968px; margin-left:var(--mb-1-5); margin-right:var(--mb-1-5);}
.grid{display:grid;}
.main{overflow:hidden;}

/* =============== HEADER / NAV =============== */
.header{
  position:fixed; top:0; left:0; width:100%;
  background:transparent;
  z-index:var(--z-fixed);
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, color .3s ease;
}
.nav{ height:var(--header-height); display:flex; justify-content:space-between; align-items:center; }
.nav__logo{display:flex; align-items:center; column-gap:.5rem; font-weight:var(--font-medium);}
.nav__logo-img{width:2.5rem; height:auto; margin-right:4rem;}
.nav__logo span{
  font-weight:var(--font-semi-bold);
  color:var(--text-color);
}

.nav__link,.nav__logo,.nav__toggle,.nav__close{color:var(--text-color);}
.nav__toggle{font-size:1.25rem; cursor:pointer;}

@media (max-width:767px){
  .nav__menu{
    position:fixed; width:100%;
    top:-150%; left:0;
    padding:3.5rem 0;
    transition:.4s; z-index:var(--z-fixed);
    border-radius:0 0 1.5rem 1.5rem;
    background:var(--container-color);
  }
}
.nav__close{font-size:1.8rem; position:absolute; top:.5rem; right:.7rem; cursor:pointer;}
.nav__list{display:flex; flex-direction:column; align-items:center; row-gap:1.5rem;}
.nav__link{text-transform:uppercase; font-weight:var(--font-black); transition:.4s;}
.nav__link:hover{color:var(--text-color);}

.header:not(.scroll-header) .nav__logo,
.header:not(.scroll-header) .nav__link,
.header:not(.scroll-header) .nav__toggle,
.header:not(.scroll-header) .nav__close{ color:var(--text-color); }
.header:not(.scroll-header) .button--ghost{ color:var(--text-color); border-color:var(--title-color); }
.header:not(.scroll-header) .nav__lang-select{ color:var(--text-color); border-color:var(--title-color); }

.scroll-header{
  background-color: rgba(20, 20, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(255,215,0,.1);
}
.scroll-header .nav__logo,
.scroll-header .nav__link,
.scroll-header .nav__toggle,
.scroll-header .nav__close{color:var(--text-color);}
.scroll-header .button--ghost{color:var(--text-color); border-color:var(--title-color);}

.show-menu{top:0;}

.active-link{position:relative;}
.active-link::before{
  content:''; position:absolute; bottom:-.75rem; left:45%;
  width:5px; height:5px; background-color:var(--title-color); border-radius:50%;
}

/* =============== HERO (layered) =============== */
.hero{
  overflow:hidden;
  height:100vh;
  position:relative;
}
.hero__section{
  position:relative;
  height:100vh;
  max-height:100vh;
  overflow:hidden;
}
.hero__container{
  position:relative;
  z-index:1;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-left:0;
  margin-right:auto;
  max-width:none;
  width:auto;
  padding-left:clamp(1rem, 4vw, 3rem);
}
.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:100vh;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.3);
  z-index:0;
}
.hero__data{
  position:relative;
  text-align:left;
  z-index:var(--z-tooltip);
  padding:clamp(1.5rem, 4vw, 3rem);
  padding-left:clamp(1.5rem, 5vw, 4rem);
  padding-right:clamp(1.5rem, 5vw, 4rem);
  margin-left:clamp(1rem, 4vw, 3rem);
  margin-right:clamp(1rem, 4vw, 3rem);
  justify-self:start;
  background:rgba(0, 0, 0, 0.25);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border-radius:1.5rem;
  border:1px solid rgba(255, 255, 255, 0.15);
  box-shadow:0 8px 32px rgba(0, 0, 0, 0.2);
  max-width:min(90%, calc(100% - clamp(2rem, 8vw, 6rem)));
  width:auto;
  min-width:280px;
  box-sizing:border-box;
  opacity:0;
}
.hero__title{
  display:flex;
  flex-direction:column;
  margin-bottom:var(--mb-1-5);
  line-height:1.1;
}
.hero__title-line{
  font-size:clamp(1.5rem, 6vw, 4rem);
  font-weight:var(--font-black);
  display:block;
  margin-bottom:0;
  font-family:var(--body-font);
  letter-spacing:-1px;
  line-height:1.1;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.hero__title-line--yellow{
  color:var(--title-color);
}
.hero__description{
  font-size:clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom:var(--mb-2);
  color:var(--text-color);
  line-height:1.8;
  font-weight:var(--font-medium);
}
.hero__buttons{
  display:flex;
  justify-content:flex-start;
  gap:1rem;
  flex-wrap:wrap;
}
.hero__buttons .button{
  font-size:clamp(1rem, 2vw, 1.25rem);
  padding:clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.hero__images{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:100vh;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero__images img{
  position:absolute;
  width:100%;
  height:100%;
  min-height:100vh;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.3);
  opacity:0;
}
@media (max-width:575px){
  .hero__data{
    max-width:calc(100% - 2rem);
    min-width:auto;
    margin-left:1rem;
    margin-right:1rem;
    padding:1.5rem;
    padding-left:1.25rem;
    padding-right:1.25rem;
    background:rgba(0, 0, 0, 0.25);
  }
}
@media (max-width:320px){
  .hero__data{
    max-width:calc(100% - 1.5rem);
    margin-left:0.75rem;
    margin-right:0.75rem;
    padding:1.25rem;
    padding-left:1rem;
    padding-right:1rem;
  }
}
@media (min-width:576px){
  .hero__data{
    max-width:min(45vw, calc(100% - clamp(3rem, 10vw, 8rem)));
    min-width:300px;
    margin-left:clamp(1.5rem, 5vw, 4rem);
    margin-right:clamp(1.5rem, 5vw, 4rem);
    padding:clamp(2rem, 4vw, 3.5rem);
    padding-left:clamp(2rem, 5vw, 4.5rem);
    padding-right:clamp(2rem, 5vw, 4.5rem);
  }
  .hero__images img{
    width:100%;
    height:100%;
    min-height:100vh;
  }
}
@media (min-width:1150px){
  .hero__data{
    max-width:min(35vw, calc(100% - clamp(4rem, 12vw, 10rem)));
    margin-left:clamp(2rem, 6vw, 5rem);
    margin-right:clamp(2rem, 6vw, 5rem);
    padding:clamp(2.5rem, 5vw, 4.5rem);
    padding-left:clamp(2.5rem, 7vw, 5.5rem);
    padding-right:clamp(2.5rem, 7vw, 5.5rem);
  }
}
@media (min-width:2048px) and (min-height:1100px){
  .hero__container{
    height:100%;
    max-height:100vh;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-left:0;
    margin-right:auto;
  }
}
@media (max-width:1150px) and (min-height:900px){
  .hero__container{
    height:100%;
    max-height:100vh;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-left:0;
    margin-right:auto;
  }
  .hero__data{align-self:center;}
}

/* =============== TOP CATS (Swiper) =============== */
.topcats__content{row-gap:1rem;}
.topcats__group{display:grid; position:relative; padding-top:2rem;}

.topcats__img{
  display:block;
  width:auto;
  height:auto;
  max-height:250px;
  max-width:100%;
  object-fit:contain;
  justify-self:center;
}

.topcats__indicator{
  width:8px; height:8px; background-color:var(--title-color); border-radius:50%;
  position:absolute; top:7rem; right:2rem;
}
.topcats__indicator::after{
  content:''; position:absolute; width:1px; height:48px; background-color:var(--title-color);
  top:-3rem; right:45%;
}
.topcats__details-img{position:absolute; right:.5rem;}
.topcats__details-title, .topcats__details-subtitle{display:block; font-size:var(--small-font-size); text-align:right;}
.topcats__subtitle{font-size:var(--h3-font-size); text-transform:uppercase; margin-bottom:var(--mb-1);}
.topcats__title{font-size:var(--biggest-font-size); font-weight:var(--font-black); line-height:109%; margin-bottom:var(--mb-1);}
.topcats__description{margin-bottom:var(--mb-1);}
.topcats__buttons{display:flex; justify-content:space-between;}

/* Swiper bullets */
.swiper-pagination{position:initial; margin-top:var(--mb-1);}
.swiper-pagination-bullet{width:5px; height:5px; background-color:var(--title-color); opacity:1;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 .5rem;}
.swiper-pagination-bullet-active{width:1.5rem; height:5px; border-radius:.5rem;}

/* =============== BUTTONS =============== */
.button{
  display:inline-block;
  background-color:var(--first-color);
  color:hsl(0, 0%, 10%);
  padding:1rem 1.75rem;
  border-radius:.5rem;
  font-weight:var(--font-medium);
  transition:.3s;
}
.button:hover{
  background-color:var(--first-color-alt);
  color:hsl(0, 0%, 10%);
}
.button__icon{ font-size:1.25rem; color:hsl(0, 0%, 10%); }
.button--ghost{
  border:2px solid var(--first-color);
  background:transparent;
  border-radius:3rem;
  padding:.75rem 1.5rem;
  color:var(--text-color);
}
.button--ghost:hover{
  background:transparent;
  border-color:var(--first-color-alt);
  color:var(--text-color);
}
.button--link{color:var(--title-color);}
.button--flex{display:inline-flex; align-items:center; column-gap:.5rem;}

/* =============== FEATURES =============== */
.features__container{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:2rem;}
.feature__card{
  background:var(--container-color);
  padding:2rem;
  border-radius:1rem;
  text-align:center;
  transition:.3s;
  border:1px solid rgba(255,215,0,.1);
}
.feature__card:hover{
  transform:translateY(-.5rem);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  border-color:var(--title-color);
}
.feature__icon{
  width:60px;
  height:60px;
  background:var(--first-color);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto var(--mb-1);
  font-size:1.5rem;
  color:hsl(0, 0%, 10%);
}
.feature__title{
  font-size:var(--h3-font-size);
  margin-bottom:var(--mb-0-75);
  color:var(--text-color);
}
.feature__description{
  font-size:var(--small-font-size);
  color:var(--text-color-light);
  line-height:1.6;
}

/* =============== GAMEPLAY MECHANICS SLIDER =============== */
.mechanics{
  padding:2.5rem;
  background:#1D1716;
  border-radius:1.5rem;
  border:1px solid rgba(255,215,0,.1);
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
.mechanics-swiper{
  overflow:hidden;
  padding:0;
  width:100%;
  height:auto !important;
}
.mechanics-swiper.swiper-autoheight,
.mechanics-swiper.swiper-autoheight[style]{
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
}
.mechanics-swiper .swiper-wrapper[style]{
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
}
.mechanics-swiper .swiper-slide[style]{
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
}
.mechanics-swiper .swiper-wrapper{
  display:flex;
  align-items:flex-start;
}
.mechanics-swiper .swiper-slide{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  flex-shrink:0;
  box-sizing:border-box;
}
.mechanics__content{
  row-gap:1rem;
  width:100%;
  max-width:100%;
  align-items:flex-start;
  height:auto;
  max-height:none;
}
.mechanics__group{
  display:grid;
  position:relative;
  padding-top:0;
  align-items:start;
  width:100%;
  height:auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
.mechanics__img{
  display:block;
  width:auto;
  height:auto !important;
  max-height:none !important;
  min-height:auto !important;
  max-width:100%;
  object-fit:contain;
  justify-self:center;
}
.mechanics__img video{
  width:100%;
  height:auto !important;
  max-height:none !important;
  min-height:auto !important;
  object-fit:contain;
  display:block;
}
.mechanics__indicator{
  width:10px;
  height:10px;
  background-color:var(--title-color);
  border-radius:50%;
  position:absolute;
  top:8rem;
  right:2.5rem;
  box-shadow:0 0 10px var(--title-color);
}
.mechanics__indicator::after{
  content:'';
  position:absolute;
  width:2px;
  height:50px;
  background-color:var(--title-color);
  top:-3.5rem;
  right:45%;
  box-shadow:0 0 5px var(--title-color);
}
.mechanics__subtitle{
  font-size:var(--h3-font-size);
  text-transform:uppercase;
  margin-bottom:var(--mb-1);
  color:var(--title-color);
  letter-spacing:2px;
}
.mechanics__title{
  font-size:var(--biggest-font-size);
  font-weight:var(--font-black);
  line-height:109%;
  margin-bottom:var(--mb-1-5);
  color:var(--text-color);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.mechanics__description{
  margin-bottom:var(--mb-2);
  color:var(--text-color-light);
  line-height:1.8;
  font-size:var(--normal-font-size);
}
.mechanics__buttons{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

/* Swiper bullets para mechanics */
.mechanics-swiper .swiper-pagination{
  position:initial;
  margin-top:var(--mb-2);
}
.mechanics-swiper .swiper-pagination-bullet{
  width:6px;
  height:6px;
  background-color:var(--text-color-light);
  opacity:1;
  transition:.3s;
}
.mechanics-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  margin:0 .6rem;
}
.mechanics-swiper .swiper-pagination-bullet-active{
  width:2rem;
  height:6px;
  border-radius:.5rem;
  background-color:var(--title-color);
  box-shadow:0 0 10px var(--title-color);
}

/* =============== TOP BUSINESSES =============== */
.businesses__container{
  display:flex;
  flex-direction:column;
  gap:3rem;
  max-width:900px;
  margin:0 auto;
}
.businesses__item{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:3rem;
  align-items:center;
  background:var(--container-color);
  border-radius:1.5rem;
  padding:2.5rem;
  border:1px solid rgba(255,215,0,.1);
  transition:.3s;
  position:relative;
  overflow:hidden;
}
.businesses__item::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:var(--title-color);
  transform:scaleY(0);
  transition:.3s;
}
.businesses__item:hover{
  transform:translateX(.5rem);
  box-shadow:0 15px 40px rgba(0,0,0,.4);
  border-color:var(--title-color);
}
.businesses__item:hover::before{
  transform:scaleY(1);
}
.businesses__image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.2);
  border-radius:1rem;
  padding:2rem;
  overflow:hidden;
}
.businesses__img{
  width:100%;
  max-width:250px;
  height:auto;
  object-fit:contain;
  transition:.3s;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.3));
}
.businesses__item:hover .businesses__img{
  transform:scale(1.05);
}
.businesses__content{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.businesses__badge{
  display:inline-block;
  background:var(--title-color);
  color:hsl(0, 0%, 10%);
  padding:.4rem 1rem;
  border-radius:2rem;
  font-size:var(--small-font-size);
  font-weight:var(--font-semi-bold);
  width:fit-content;
  text-transform:uppercase;
  letter-spacing:1px;
}
.businesses__name{
  font-size:var(--h1-font-size);
  color:var(--text-color);
  font-weight:var(--font-black);
  margin:0;
}
.businesses__description{
  font-size:var(--normal-font-size);
  color:var(--text-color-light);
  line-height:1.8;
  margin:0;
}
.businesses__link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--title-color);
  font-weight:var(--font-semi-bold);
  transition:.3s;
  width:fit-content;
  margin-top:.5rem;
}
.businesses__link:hover{
  color:var(--first-color);
  gap:.75rem;
}
.businesses__link i{
  font-size:1.2rem;
  transition:.3s;
}

/* =============== ABOUT =============== */
.about__container{row-gap:2rem;}
.about__image{justify-self:center;}
.about__img{
  width:280px;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.3));
}
.about__data{text-align:center;}
.about__description{
  margin-bottom:var(--mb-2);
  line-height:1.8;
  color:var(--text-color);
}
.about__stats{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-bottom:var(--mb-2);
  flex-wrap:wrap;
}
.about__stat{
  text-align:center;
}
.about__stat-number{
  display:block;
  font-size:var(--h1-font-size);
  font-weight:var(--font-black);
  color:var(--title-color);
  margin-bottom:var(--mb-0-25);
}
.about__stat-label{
  font-size:var(--small-font-size);
  color:var(--text-color-light);
}

@media (min-width:767px){
  .about__container{grid-template-columns:repeat(2,1fr); align-items:center;}
  .about__data{text-align:initial;}
  .about__stats{justify-content:flex-start;}
  .about__img{width:350px;}
}

/* =============== DOWNLOAD =============== */
.download{
  background:var(--container-color);
  border-radius:2rem;
  padding:4rem 2rem;
}
.download__container{text-align:center;}
.download__content{max-width:600px; margin:0 auto;}
.download__title{
  font-size:var(--h1-font-size);
  margin-bottom:var(--mb-1);
  color:var(--title-color);
}
.download__description{
  font-size:var(--normal-font-size);
  color:var(--text-color-light);
  margin-bottom:var(--mb-2-5);
  line-height:1.8;
}
.download__buttons{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}
.download__button{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.5rem;
  background:var(--first-color);
  border-radius:.75rem;
  transition:.3s;
  min-width:200px;
  color:hsl(0, 0%, 10%);
}
.download__button:hover{
  background:var(--first-color-alt);
  transform:translateY(-.25rem);
  box-shadow:0 10px 25px rgba(0,0,0,.3);
  color:hsl(0, 0%, 10%);
}
.download__button-text{
  display:flex;
  flex-direction:column;
  text-align:left;
}
.download__button-label{
  font-size:var(--smaller-font-size);
  color:hsl(0, 0%, 30%);
}
.download__button-name{
  font-size:var(--normal-font-size);
  font-weight:var(--font-semi-bold);
  color:hsl(0, 0%, 10%);
}
.download__button .button__icon{
  font-size:2rem;
  color:hsl(0, 0%, 10%);
}

/* =============== FOOTER =============== */
.footer{position:relative; overflow:hidden;}
.footer__container{row-gap:2rem; position:relative; z-index:1;}
.footer__logo{
  display:flex; align-items:center; column-gap:.5rem; margin-bottom:var(--mb-1);
  font-weight:var(--font-medium); color:var(--text-color);
}
.footer__logo-img{width:20px;}
.footer__description{
  font-size:var(--small-font-size);
  color:var(--text-color-light);
  line-height:1.6;
  margin-top:var(--mb-1);
}
.footer__social{display:flex; column-gap:.75rem;}
.footer__social-link{display:inline-flex; background:var(--container-color); padding:.25rem; border-radius:.25rem; color:var(--text-color); font-size:1rem;}
.footer__social-link:hover{background:var(--body-color);}
.footer__title{font-size:var(--h3-font-size); margin-bottom:var(--mb-1);}
.footer__links{display:grid; row-gap:.35rem;}
.footer__link{font-size:var(--small-font-size); color:var(--text-color); transition:.3s;}
.footer__link:hover{color:var(--title-color);}
.scrollup__icon{font-size:1.25rem; color:var(--text-color);}
.footer__copy{display:block; text-align:center; font-size:var(--smaller-font-size); margin-top:4.5rem;}

@media (max-width:767px){
  .footer__img-one, .footer__img-two{display:none;}
  .footer__container{grid-template-columns:1fr; justify-items:center; text-align:center;}
}
@media (min-width:768px){
  .footer__container{
    grid-template-columns:repeat(4, minmax(0,1fr));
    justify-items:start; align-items:start; column-gap:2rem;
  }
  .footer__content{text-align:left;}
  .footer__logo-img{width:3.25rem; height:auto; margin-right:1rem;}
}

/* =============== SCROLL UP =============== */
.scrollup{
  position:fixed; right:1rem; bottom:-20%;
  display:inline-flex; padding:.3rem; border-radius:.25rem;
  background:var(--container-color); opacity:.8; transition:.4s; z-index:var(--z-tooltip);
}
.scrollup:hover{background:var(--title-color); opacity:1;}
.show-scroll{bottom:3rem;}

/* =============== SCROLLBAR =============== */
::-webkit-scrollbar{width:.6rem; background:#1a1a1a;}
::-webkit-scrollbar-thumb{background:#3a3a3a; border-radius:.5rem;}

/* =============== RESPONSIVE EXTRAS =============== */
@media (max-width:320px){
  .container{margin-left:var(--mb-1); margin-right:var(--mb-1);}
  .topcats__img{max-height:200px;}
  .topcats__buttons{flex-direction:column; width:max-content; row-gap:1rem;}
  .features__container{grid-template-columns:.8fr; justify-content:center;}
  .businesses__item{
    grid-template-columns:1fr;
    text-align:center;
  }
  .businesses__image{
    margin-bottom:var(--mb-1-5);
  }
}
@media (min-width:576px){
  .about__container{grid-template-columns:.8fr; justify-content:center;}
  .businesses__item{
    grid-template-columns:200px 1fr;
    gap:2rem;
    padding:2rem;
  }
  .businesses__img{
    max-width:180px;
  }
}
@media (min-width:767px){
  body{margin:0;}
  .section{padding:7rem 0 2rem;}
  .nav{height:calc(var(--header-height) + 1.5rem);}
  .nav__close,.nav__toggle{display:none;}
  .nav__list{flex-direction:row; column-gap:3rem;}
  .nav__link{text-transform:initial; font-weight:initial;}

  .hero__title{font-size:3.5rem;}
  .hero__img{width:400px;}

  .mechanics__content{
    padding:0;
    grid-template-columns:repeat(2,1fr);
    gap:4rem;
    align-items:flex-start;
    height:auto;
    max-height:none;
  }
  .mechanics__group{
    height:auto;
    max-height:none;
    overflow:visible;
  }
  .mechanics__img{
    max-height:none;
    height:auto;
    min-height:auto;
  }
  .mechanics__img video{
    max-height:none;
    height:auto;
    min-height:auto;
  }

  .features__container{grid-template-columns:repeat(3,1fr);}
  .businesses__item{
    grid-template-columns:250px 1fr;
    gap:2.5rem;
    padding:2rem;
  }
  .businesses__img{
    max-width:200px;
  }
  
  .about__container{grid-template-columns:repeat(2,1fr); align-items:center;}
  .about__data{text-align:initial;}
  .about__img{width:350px;}
  .about__stats{justify-content:flex-start;}

  .download{padding:5rem 3rem;}
}
@media (min-width:992px){
  .container{margin-left:auto; margin-right:auto;}
  .section__title{font-size:var(--h1-font-size); margin-bottom:3rem;}

  .hero__title{font-size:var(--biggest-font-size);}
  .hero__img{width:500px;}

  .mechanics-swiper{
    height:auto !important;
    min-height:auto;
    max-height:none;
  }
  .mechanics-swiper .swiper-wrapper{
    height:auto !important;
    min-height:auto;
    max-height:none;
  }
  .mechanics-swiper .swiper-slide{
    height:auto !important;
    min-height:auto;
    max-height:none !important;
  }
  .mechanics__content{
    padding-top:0;
    gap:5rem;
    align-items:flex-start;
    height:auto;
    max-height:none;
  }
  .mechanics__group{
    padding-top:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    min-height:auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .mechanics__img{
    max-height:none !important;
    height:auto !important;
    min-height:auto !important;
    transform:translateY(0);
  }
  .mechanics__img video{
    max-height:none !important;
    height:auto !important;
    min-height:auto !important;
    width:100%;
    object-fit:contain;
    display:block;
  }
  .mechanics__indicator{
    bottom:20%;
    left:48%;
    top:initial;
    right:initial;
  }
  .mechanics__indicator::after{
    top:0;
    height:80px;
  }
  .mechanics__data{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .mechanics__title{
    margin-bottom:var(--mb-2);
    font-size:var(--biggest-font-size);
  }
  .mechanics__description{
    margin-bottom:var(--mb-2-5);
    padding-right:2rem;
    font-size:1.1rem;
  }

  .features__container{grid-template-columns:repeat(3,1fr); gap:3rem;}
  .businesses__container{gap:4rem;}
  .businesses__item{
    grid-template-columns:350px 1fr;
    gap:4rem;
    padding:3rem;
  }
  .businesses__img{
    max-width:300px;
  }
  
  .about__container{column-gap:7rem;}
  .about__img{width:400px;}
  .about__description{padding-right:2rem;}
  
  .download{padding:6rem 4rem;}
  .download__title{font-size:2.5rem;}
  
  .footer__copy{margin-top:6rem;}
}
@media (min-width:1200px){
  .hero__img{width:600px;}
  .mechanics-swiper{
    height:auto !important;
    max-height:none;
  }
  .mechanics-swiper .swiper-wrapper{
    height:auto !important;
    max-height:none;
  }
  .mechanics-swiper .swiper-slide{
    height:auto !important;
    max-height:none !important;
  }
  .mechanics__group{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .mechanics__img{
    max-height:none !important;
    height:auto !important;
    min-height:auto !important;
  }
  .mechanics__img video{
    max-height:none !important;
    height:auto !important;
    min-height:auto !important;
    width:100%;
    object-fit:contain;
  }
}

@keyframes floating{
  0%{transform:translateY(0);}
  50%{transform:translateY(15px);}
  100%{transform:translateY(0);}
}
@keyframes floating-1{
  0%{transform:rotate(-25deg) scale(1) translateY(0);}
  50%{transform:rotate(-25deg) scale(1) translateY(15px);}
  100%{transform:rotate(-25deg) scale(1) translateY(0);}
}
@keyframes floating-2{
  0%{transform:rotate(20deg) scale(1) translateY(0);}
  50%{transform:rotate(20deg) scale(1) translateY(15px);}
  100%{transform:rotate(20deg) scale(1) translateY(0);}
}
@keyframes floating-3{
  0%{transform:rotate(-15deg) scale(1) translateY(0);}
  50%{transform:rotate(-15deg) scale(1) translateY(15px);}
  100%{transform:rotate(-15deg) scale(1) translateY(0);}
}
@keyframes floating-4{
  0%{transform:rotate(30deg) scale(1) translateY(0);}
  50%{transform:rotate(30deg) scale(1) translateY(15px);}
  100%{transform:rotate(30deg) scale(1) translateY(0);}
}
@keyframes floating-5{
  0%{transform:rotate(-20deg) scale(1) translateY(0);}
  50%{transform:rotate(-20deg) scale(1) translateY(15px);}
  100%{transform:rotate(-20deg) scale(1) translateY(0);}
}
@keyframes floating-6{
  0%{transform:rotate(25deg) scale(1) translateY(0);}
  50%{transform:rotate(25deg) scale(1) translateY(15px);}
  100%{transform:rotate(25deg) scale(1) translateY(0);}
}

.lang-switcher { display: flex; align-items: center; }
.nav__lang-select{
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: .5rem;
  padding: .35rem .6rem;
  font: inherit;
  color: inherit;
}
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.nav__lang-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: .6rem;
  padding: .4rem 2rem .4rem .6rem;
  font: inherit;
  color: inherit;
  line-height: 1;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 1rem;
}

.nav__lang-select:focus,
.nav__lang-select:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,215,0,.25);
}

.nav__lang-select option{
  background: #1a1a1a;
  color: var(--title-color);
}

.header:not(.scroll-header) .nav__lang-select{
  color: var(--title-color);
  border-color: var(--title-color);
  background-color: transparent;
}

.scroll-header .nav__lang-select{
  color: var(--title-color);
  border-color: var(--title-color);
  background-color: rgba(30,30,30,.6);
  backdrop-filter: blur(6px);
}

.nav__menu.show-menu .nav__link,
.nav__menu.show-menu .button--ghost,
.nav__menu.show-menu .nav__close,
.nav__menu.show-menu .nav__lang-select{
  color: var(--title-color) !important;
  border-color: var(--title-color) !important;
}

@media (max-width: 767px){
  .nav__menu{ visibility: hidden; opacity: 0; pointer-events: none; }
  .nav__menu.show-menu{ visibility: visible; opacity: 1; pointer-events: auto; }
}