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

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

  /*========== Colors ==========*/
  --title-color: hsl(0, 0%, 95%);
  --text-color: hsl(0, 0%, 70%);
  --text-color-light: hsl(0, 0%, 60%);
  --body-color: hsl(0, 0%, 0%);
  --container-color: hsl(0, 0%, 8%);

  /*========== Font and typography ==========*/
  --body-font: "Poppins", sans-serif;
  --second-font: "Montserrat", sans-serif;
  --biggest-font-size: 2.75rem;
  --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 weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Logo sizing ==========*/
  --logo-h-mobile: 28px;
  --logo-h-desktop: 34px;
  --footer-logo-h-mobile: 34px;
  --footer-logo-h-desktop: 42px;

  /*========== z index ===========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1152px) {
  :root {
    --biggest-font-size: 5.5rem;
    --h1-font-size: 2.5rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* { box-sizing: border-box; padding: 0; margin: 0; }
html { scroll-behavior: smooth; }
body, button, input { font-family: var(--body-font); font-size: var(--normal-font-size); color: var(--text-color); }
body { background-color: var(--body-color); }
button, input { outline: none; border: none; }
h1, h2, h3, h4 { color: var(--title-color); font-family: var(--second-font); font-weight: var(--font-semi-bold); }
ul { list-style: none; }
a { text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/*=============== REUSABLE CSS CLASSES ===============*/
.container { max-width: 1120px; margin-inline: 1.5rem; }
.grid { display: grid; gap: 1.5rem; }
.section { padding-block: 5rem 1rem; }
.section__title { text-align: center; font-size: var(--h1-font-size); margin-bottom: 1.5rem; }
.main { overflow: hidden; }

/*=============== HEADER & NAV ===============*/
.header{
  position: fixed; width: 100%; background-color: transparent;
  top: 0; left: 0; z-index: var(--z-fixed);
}
.nav{
  height: var(--header-height);
  display: flex; justify-content: space-between; align-items: center;
}

/* LOGO IMAGE STYLES */
.nav__logo{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 0;
}
.nav__logo-img{
  height: var(--logo-h-mobile);
  width: auto;
  object-fit: contain;
}

@media screen and (min-width: 1023px){
  .nav__logo-img{ height: var(--logo-h-desktop); }
}

.nav__toggle, .nav__close{ display: flex; font-size: 1.25rem; color: var(--title-color); cursor: pointer; }

/* Mobile menu */
@media screen and (max-width: 1023px){
  .nav__menu{
    position: fixed; top: -100%; left: 0; width: 100%;
    background-color: hsla(0, 0%, 0%, .3);
    padding-block: 4rem; backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: top .4s;
  }
}
.nav__list{ text-align: center; display: flex; flex-direction: column; row-gap: 2.5rem; }
.nav__link{ position: relative; color: var(--title-color); font-family: var(--second-font); font-weight: var(--font-medium); }
.nav__link::after{
  content: ''; width: 0; height: 2px; background-color: var(--title-color);
  position: absolute; left: 0; bottom: -0.5rem; transition: width .3s;
}
.nav__close{ position: absolute; top: 1rem; right: 1.5rem; }

/* Show menu */
.show-menu{ top: 0; }

/* Blur header */
.blur-header::after{
  content: ''; position: absolute; width: 100%; height: 100%;
  background-color: hsla(0, 0%, 0%, .3);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  top: 0; left: 0; z-index: -1;
}

/* Active link */
.active-link::after{ width: 70%; }

/*=============== BACK CHIP (new) ===============*/
.backchip{
  position: fixed;
  top: calc(var(--header-height) + 0.75rem);
  left: 1rem;
  z-index: calc(var(--z-fixed) + 1);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .75rem;
  background: hsla(0, 0%, 100%, .12);
  border: 1px solid hsla(0, 0%, 100%, .14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--title-color);
  font-family: var(--second-font);
  font-weight: var(--font-medium);
  border-radius: 9999px;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.backchip i{ font-size: 1.05rem; }
.backchip:hover{ transform: translateY(-1px); background: hsla(0,0%,100%,.18); border-color: hsla(0,0%,100%,.22); }
.backchip:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}
@media (max-width: 480px){
  .backchip{ padding: .45rem .65rem; font-size: .9rem; }
  .backchip i{ font-size: 1rem; }
}

/*=============== EXPLORE ===============*/
.explore{ position: relative; }
.explore__image{ position: absolute; overflow: hidden; }
.explore__img{ width: 100%; height: 333px; object-fit: cover; object-position: center; }
.explore__shadow{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg,
    hsl(0, 0%, 0%) .5%,
    hsla(0, 0%, 0%, 0) 40%,
    hsla(0, 0%, 0%, 0) 60%,
    hsl(0, 0%, 0%) 92%
  );
}
.explore__content{
  position: relative; padding-top: 16rem; text-align: center; row-gap: 2.5rem;
  display: flex; justify-content: center;
}
.explore__description{ flex: 1; text-align: left; padding-left: 0rem; }

/*=============== JOIN ===============*/
.join__container{
  display: flex; flex-direction: row; row-gap: 3rem;
  padding-bottom: 2.5rem; align-items: center; justify-content: space-between;
}
.join__data{ text-align: left; flex: 1; padding-left: 0rem; }
.join__description{ margin-bottom: 2rem; }

/* Carousel */
.join__slider{ flex: 2; max-width: 50%; }

.slider{
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: 12px; background: #000;
}
.slider__track{
  display: flex; width: 100%; height: 100%;
  transform: translateX(0); transition: transform 600ms ease;
}
.slider__slide{
  width: 100%; flex: 0 0 100%; object-fit: cover;
  user-select: none; pointer-events: none;
}

/* Controls */
.slider__btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: hsla(0, 0%, 100%, .15);
  padding: .4rem .6rem; cursor: pointer;
  color: var(--title-color); font-size: 1.25rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: .5rem; transition: opacity .2s, transform .2s; opacity: .8;
}
.slider__btn:hover{ opacity: 1; transform: translateY(-50%) scale(1.05); }
.slider__btn--prev{ left: .5rem; }
.slider__btn--next{ right: .5rem; }

/* Dots */
.slider__dots{
  position: absolute; bottom: .5rem; left: 0; right: 0;
  display: flex; gap: .4rem; justify-content: center;
}
.slider__dots button{
  width: .5rem; height: .5rem; border-radius: 999px; border: none;
  background: hsla(0, 0%, 100%, .35); cursor: pointer;
  transition: transform .2s, background .2s;
}
.slider__dots button.is-active{ background: hsla(0, 0%, 100%, .9); transform: scale(1.15); }

.slider:hover .slider__btn{ opacity: 1; }

/*=============== FOOTER ===============*/
.footer{ padding-block: 2.5rem; background-color: var(--container-color); }
.footer__container { display: grid; }
.footer__content{
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  row-gap: 3.5rem;
}

.footer__logo{
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin-bottom: 1rem;
}
.footer__logo-img{
  height: var(--footer-logo-h-mobile);
  width: auto;
  object-fit: contain;
}

.footer__data{ grid-template-columns: repeat(2, max-content); gap: 2.5rem 3.5rem; }
.footer__title{ font-size: var(--h3-font-size); margin-bottom: 1rem; }
.footer__links{ display: grid; row-gap: .75rem; }
.footer__link{ color: var(--text-color); transition: color .4s; }
.footer__link:hover{ color: var(--title-color); }

.footer__group{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2rem;
  margin-top: 5rem;
}

.footer__social{
  display: flex;
  justify-content: center;
  column-gap: 1.5rem; /* consistent spacing on mobile */
}
.footer__social-link{
  color: var(--text-color);
  font-size: 1.2rem;
  transition: color .4s, transform .4s;
}
.footer__social-link:hover{ color: var(--title-color); transform: translateY(-.25rem); }

.footer__copy{
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  text-align: center;
}

@media screen and (min-width: 1023px){
  .footer__logo-img{ height: var(--footer-logo-h-desktop); }
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{ width: .6rem; border-radius: .5rem; background-color: hsl(0, 0%, 10%); }
::-webkit-scrollbar-thumb{ border-radius: .5rem; background-color: hsl(0, 0%, 20%); }
::-webkit-scrollbar-thumb:hover{ background-color: hsl(0, 0%, 30%); }

/*=============== SCROLL UP ===============*/
.scrollup{
  position: fixed; right: 1rem; bottom: -50%;
  background-color: hsla(0, 0%, 100%, .1);
  padding: 6px; display: inline-flex; color: var(--title-color);
  font-size: 1.25rem; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  z-index: var(--z-tooltip); transition: bottom .4s, transform .4s;
}
.scrollup:hover{ transform: translateY(-.25rem); }
.show-scroll{ bottom: 3rem; }

/*=============== BREAKPOINTS ===============*/
@media screen and (max-width: 340px) {
  .container { margin-inline: 1rem; }
  .footer__data { grid-template-columns: max-content; }
}

@media screen and (min-width: 576px) {
  .explore__content,
  .join__container {
    grid-template-columns: 380px;
    justify-content: center;
  }
  .footer__data{ grid-template-columns: repeat(3, max-content); }
}

@media screen and (min-width: 768px){
  .join__container{
    grid-template-columns: repeat(2, 350px);
    align-items: center;
  }
  .join__data,
  .join__data .section__title{ text-align: initial; }
  .explore__img{ width: 100vw; }
  .join__slider{ order: -1; }

  .footer__content{
    grid-template-columns: repeat(2, max-content);
    justify-content: space-between;
    align-items: start;
  }
  .footer__group{
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  .footer__copy{ order: -1; }
}

@media screen and (min-width:1023px){
  .nav__close, .nav__toggle{ display: none; }
  .nav__list{ flex-direction: row; column-gap: 4rem; }

  .footer__data{
    grid-template-columns: repeat(4, max-content);
    column-gap: 4.5rem;
  }

  .footer__social{
    column-gap: 2rem; /* more spacing on desktop */
  }
  .footer__social-link{
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 1152px){
  .container{ margin-inline: auto; }
  .section{ padding-block: 7rem 2rem; }
  .nav{ height: calc(var(--header-height) + 1.5rem); }
  .blur-header::after{ backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
  .explore__img{ height: 600px; }
  .explore__content{ padding-top: 28rem; grid-template-columns: 670px 1fr; }
  .explore__data, .explore__data .section__title{ text-align: initial; }
  .explore__user{ justify-content: flex-end; align-self: flex-end; margin-bottom: 1.25rem; }

  .footer{ padding-block: 5rem 3rem; }
  .footer__title{ margin-bottom: 1.5rem; }
  .footer__group{ margin-top: 7rem; }
  .scrollup{ right: 3rem; }
}

/* ===== MOBILE FIXES FOR JOIN SLIDER ===== */
@media screen and (max-width: 767px) {
  .join__container {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: center;
    row-gap: 1.25rem;
    padding-bottom: 2rem;
  }
  .join__slider {
    order: -1;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .slider {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }
  .slider__slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .join__data,
  .join__data .section__title {
    text-align: center;
  }
  .join__data { padding: 0 .5rem; }
  .slider__btn {
    top: auto;
    bottom: .5rem;
    transform: none;
    padding: .35rem .55rem;
    font-size: 1.05rem;
    opacity: .9;
  }
  .slider__btn--prev { left: .5rem; }
  .slider__btn--next { right: .5rem; }
  .slider__dots {
    bottom: .5rem;
    gap: .35rem;
  }
  .slider__dots button {
    width: .45rem;
    height: .45rem;
  }
}