@font-face {
  font-family: "Plus Jakarta Sans";
  src: url(../fonts/plus-jakarta-sans.woff2) format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --navy: #0c0844;
  --navy-deep: #09043f;
  --yellow: #fff556;
  --yellow-soft: #fff99a;
  --blue: #2b73ff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--navy);
  background-image: url(../img/bg-mobile.webp);
  background-repeat: no-repeat;
  background-size: 100%;
}

body.is-locked {
  overflow: hidden;
}

.page {
  background-image: url(../img/bg-overlay-mobile.webp);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top center;
}

/* ---------- Header / nav ---------- */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 16px;
  max-width: 1272px;
  width: 100%;
  margin: 0 auto;
}

.nav__logo,
.nav__logo img {
  height: 30px;
}

.nav__burger {
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.nav__burger img {
  width: 24px;
  height: 24px;
}

.nav__links {
  display: none;
}

.drawer {
  position: fixed;
  inset: 0;
  display: flex;
  opacity: 0;
  z-index: 999;
  background: rgb(16 16 16 / 0.9);
  backdrop-filter: blur(2px);
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer__panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  padding: 40px 16px;
  gap: 64px;
}

.drawer__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer__head img:first-child {
  height: 30px;
}

.drawer__close {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.drawer__panel ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.drawer__panel li {
  list-style: none;
}

.drawer__panel li > a {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px;
}

.drawer__panel li > a.is-active {
  color: #ffcb33;
}

/* ---------- Hero ---------- */

.deco {
  position: relative;
}

.deco img {
  position: absolute;
  object-fit: contain;
}

.deco__left {
  left: -10px;
  top: 93px;
  width: 48px;
  height: 48px;
}

.deco__center {
  right: 133px;
  top: -37px;
  width: 36px;
  height: 41px;
}

.deco__right {
  right: 0;
  top: 94px;
  width: 30px;
  height: 46px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  flex-direction: column;
  gap: 20px;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.hero h1 {
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  z-index: 1;
}

.hero__sub {
  color: #d7d7d7;
  text-align: center;
  text-shadow: 0 0 15px rgb(0 0 0 / 0.9);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.26px;
  z-index: 1;
}

.hero__deck {
  display: none;
  max-width: 264px;
  width: 100%;
  position: relative;
  height: 123px;
}

/* ---------- Brand card ---------- */

.card {
  display: flex;
  flex-direction: column;
  max-width: 343px;
  width: 100%;
  padding-bottom: 12px;
  border-radius: 8px;
  outline: 1px solid rgb(255 255 255 / 0.5);
  background: linear-gradient(207deg, #100f4d 47.78%, #bf2fff 166.52%);
  box-shadow: 0 0 8px 0 rgb(255 255 255 / 0.5);
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9.27px 9.1px 0;
}

.card__logo {
  width: 150px;
  height: 100px;
  object-fit: contain;
}

.card__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.52px;
  padding: 0 2.653px;
}

.card__rating img {
  width: 10.612px;
  height: 9.338px;
}

.card__rating p {
  color: #fff;
  text-align: center;
  font-size: 10.612px;
  font-weight: 700;
}

.card__text {
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  max-width: 144px;
  width: 100%;
  margin: 0 auto;
}

.card__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card__cta {
  display: flex;
  width: 100%;
  padding: 4.41px;
  justify-content: center;
  align-items: center;
  border-radius: 3.032px;
  border: 0.379px solid #fffab3;
  background: linear-gradient(180deg, var(--yellow-soft) -11.7%, var(--yellow) 100%);
  height: 38px;
  cursor: pointer;
  max-width: 144px;
  margin: 0 auto;
  color: #1f1903;
  text-align: center;
  font-size: 6.822px;
  font-weight: 700;
  text-decoration: none;
}

/* Hero deck — kiçildilmiş kart variantı */

.deck-card {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  max-width: 130px;
  padding-bottom: 9.512px;
  gap: 0;
  border-radius: 4.756px;
  outline: 0.793px solid rgb(255 255 255 / 0.5);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    left 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.deck-card.pos-1 {
  left: 0;
  transform: scale(1);
  z-index: 3;
  cursor: default;
}

.deck-card.pos-2 {
  left: 78px;
  transform: scale(0.89);
  z-index: 2;
}

.deck-card.pos-3 {
  left: 150px;
  transform: scale(0.77);
  z-index: 1;
}

.deck-card .card__cta {
  width: calc(100% - 12.12px);
  height: 17.8px;
  pointer-events: none;
}

.deck-card.pos-1 .card__cta {
  pointer-events: all;
  cursor: pointer;
}

.deck-card .card__text {
  font-size: 6.064px;
  font-weight: 700;
  line-height: 9.854px;
  padding: 2.27px 6.06px 6.06px;
}

.deck-card .card__logo {
  width: 56.851px;
  height: 37.901px;
}

.deck-card .card__actions {
  gap: 3.79px;
}

/* ---------- Trust bar ---------- */

.trust {
  padding: 12px 0;
}

.trust__inner {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px;
  background: rgb(255 252 245 / 0.15);
}

.trust__inner img {
  object-fit: contain;
  height: 20px;
}

.trust__inner a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
}

/* ---------- Brand grid ---------- */

.grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 15px;
  padding: 24px 16px;
}

.grid .card {
  padding-bottom: 16px;
}

.grid .card__top {
  padding: 22px 24px 0;
}

.grid .card__rating {
  gap: 4px;
  padding: 0 7px;
}

.grid .card__rating img {
  width: 28px;
  height: 24px;
}

.grid .card__rating p {
  font-size: 28px;
  font-weight: 700;
}

.grid .card__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  max-width: 400px;
  width: calc(100% - 32px);
  padding: 6px 0 16px;
}

.grid .card__actions {
  gap: 10px;
}

.grid .card__cta {
  max-width: 400px;
  width: calc(100% - 32px);
  height: 47px;
  border-radius: 8px;
  border: 1px solid #fffab3;
  font-size: 18px;
}

/* ---------- Article (daxili səhifələr) ---------- */

.article {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article h1 {
  color: #fff;
  text-shadow: 0 0 5px rgb(255 255 255 / 0.3);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
}

.article__body {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article__body p,
.article__body li,
.article__body a,
.article__body h2 {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.article__body h2 {
  font-weight: 700;
  line-height: 20px;
}

.article__body li {
  padding-left: 5px;
  list-style-position: inside;
}

/* ---------- Footer ---------- */

footer {
  background: linear-gradient(252deg, var(--navy-deep) 0%, #0f0c4a 97.26%);
  backdrop-filter: blur(5px);
  margin-top: 56px;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 56px 16px 20px;
  max-width: 1272px;
  width: 100%;
  margin: 0 auto;
}

.footer__block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

.footer__block p,
.footer__block a {
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer__links a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px;
}

.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__legal p {
  color: #8c8c8c;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

/* ---------- Cookie banner ---------- */

.cookie {
  display: none;
  max-width: 360px;
  width: calc(100% - 9px);
  flex-direction: column;
  gap: 8px;
  position: fixed;
  bottom: 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}

.cookie.is-visible {
  display: flex;
}

.cookie p,
.cookie a {
  color: #000;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
}

.cookie__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
}

.cookie__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  height: 38px;
  border: none;
  border-radius: 12px;
}

.cookie__btn span {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.26px;
}

.cookie__btn--accept {
  background: #000635;
}

.cookie__btn--reject {
  border: 1px solid #000635;
  background-color: transparent;
}

.cookie__btn--reject span {
  color: #000635;
}

/* ---------- Age gate ---------- */

.agegate {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 12;
  background: rgb(4 0 48 / 0.9);
  backdrop-filter: blur(10px);
}

.agegate.is-hidden {
  display: none;
}

.agegate__box {
  max-width: 343px;
  width: calc(100% - 16px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 14px 0 rgb(32 31 34 / 0.2);
}

.agegate__box.is-hidden {
  display: none;
}

.agegate__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agegate__copy p,
.agegate__copy a {
  color: #180055;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
}

.agegate__copy span {
  color: #180055;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.agegate__copy a {
  text-decoration: underline;
}

.agegate__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.agegate button {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: none;
  border-radius: 8px;
  height: 40px;
  color: #180055;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.3px;
}

.agegate__enter {
  background: var(--blue);
  color: #fff;
}

.agegate__exit {
  border: 1px solid #180055;
  background-color: transparent;
}

.agegate__denied {
  max-width: 343px;
  width: calc(100% - 32px);
  display: none;
  flex-direction: column;
  padding: 16px 0;
  gap: 8px;
}

.agegate__denied.is-visible {
  display: flex;
}

.agegate__denied span,
.agegate__denied p {
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.agegate__denied span {
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
}

/* ---------- Turnstile gate ---------- */

.gate {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9;
  background: rgb(4 0 48 / 0.9);
  backdrop-filter: blur(15px);
}

.gate.is-open {
  display: flex;
}

.gate__box {
  width: calc(100% - 32px);
  max-width: 408px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  border-radius: 16px;
  outline: 1px solid #d38ffe;
  background: #fff;
}

.gate__widget {
  display: flex;
  justify-content: center;
  min-height: 65px;
}

.gate__box button {
  max-width: 326px;
  width: 100%;
  height: 50px;
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  cursor: pointer;
  border: none;
}

.gate__box button:disabled {
  background: #c3c3c3;
  cursor: not-allowed;
}

/* ---------- Redirect (interstitial) səhifəsi ---------- */

.redirect {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 24px 16px;
  text-align: center;
}

.redirect__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 420px;
  width: 100%;
  padding: 32px 24px;
  border-radius: 16px;
  outline: 1px solid rgb(255 255 255 / 0.5);
  background: linear-gradient(207deg, #100f4d 47.78%, #bf2fff 166.52%);
}

.redirect__box img {
  height: 56px;
  object-fit: contain;
}

.redirect__box h1 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.redirect__box p {
  color: #d7d7d7;
  font-size: 14px;
  line-height: 22px;
}

.redirect__bar {
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.2);
  overflow: hidden;
}

.redirect__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--yellow-soft) -11.7%, var(--yellow) 100%);
  animation: redirect-fill var(--redirect-duration, 1200ms) linear forwards;
}

@keyframes redirect-fill {
  to {
    width: 100%;
  }
}

.redirect__fallback {
  color: #fff;
  font-size: 13px;
}

.redirect__fallback a {
  color: var(--yellow);
}

/* ---------- Breakpoints ---------- */

@media (min-width: 700px) {
  .deco__left {
    width: 80px;
    height: 80px;
    left: -15px;
  }

  .deco__center {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 70px;
  }

  .deco__right {
    width: 43px;
    height: 64px;
  }
}

@media (min-width: 950px) {
  body {
    background-image: url(../img/bg-desktop.webp);
  }

  .page {
    background-image: url(../img/bg-overlay-desktop.webp);
  }

  .nav {
    padding: 24px 16px;
  }

  .nav__logo,
  .nav__logo img {
    height: 40px;
  }

  .nav__links {
    display: flex;
    align-items: center;
    gap: 56px;
  }

  .nav__links li {
    display: flex;
    align-items: center;
    list-style: none;
  }

  .nav__links li > a {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 4px;
    text-decoration: none;
    transition: color 0.3s;
  }

  .nav__links li > a.is-active,
  .nav__links li > a:hover {
    color: #ffcb33;
  }

  .nav__burger {
    display: none;
  }

  .drawer {
    display: none;
  }

  .hero {
    max-width: 1272px;
    width: 100%;
    margin: 0 auto;
    padding: 86.5px 16px;
    gap: 72px;
  }

  .deco__left {
    top: 24px;
  }

  .deco__center {
    top: 36px;
  }

  .deco__right {
    top: 315px;
  }

  .hero h1 {
    font-size: 48px;
    font-weight: 800;
  }

  .hero__sub {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.4px;
  }

  .hero__deck {
    max-width: 520px;
    height: 255px;
    display: flex;
  }

  .deck-card {
    max-width: 270px;
    padding-bottom: 11.37px;
    border-radius: 5.684px;
    outline: 0.711px solid rgb(255 255 255 / 0.5);
    box-shadow: 0 0 5.684px 0 rgb(255 255 255 / 0.5);
  }

  .deck-card.pos-2 {
    left: 150px;
    transform: scale(0.926);
  }

  .deck-card.pos-3 {
    left: 280px;
    transform: scale(0.852);
  }

  .deck-card .card__cta {
    max-width: 230px;
    height: 33px;
    font-size: 12.789px;
  }

  .deck-card .card__text {
    font-size: 12.789px;
    line-height: 18.474px;
    width: 100%;
    max-width: 300px;
    padding: 4.26px 19.89px 11.37px;
  }

  .deck-card .card__logo {
    width: 117.237px;
    height: 78.158px;
  }

  .deck-card .card__actions {
    gap: 9.56px;
  }

  .deck-card .card__top {
    padding: 16.26px 19.895px 0;
  }

  .deck-card .card__rating {
    padding: 0 9.947px;
  }

  .deck-card .card__rating img {
    width: 19.895px;
    height: 17.505px;
  }

  .deck-card .card__rating p {
    font-size: 22.737px;
  }

  .grid {
    gap: 50px 40px;
    padding: 40px 16px;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
  }

  .card {
    max-width: 380px;
  }

  .grid .card__logo {
    width: 165px;
    height: 110px;
  }

  .grid .card__top {
    padding: 22px 28px 0;
  }

  .grid .card__text,
  .grid .card__cta {
    width: calc(100% - 56px);
  }

  .grid .card__text {
    font-size: 18px;
    line-height: 26px;
  }

  .grid .card__rating {
    padding: 0 14px;
  }

  .grid .card__rating p {
    font-size: 32px;
  }

  .trust {
    padding: 20px 0;
  }

  .trust__inner {
    padding: 20px 64px;
  }

  .trust__inner img,
  .trust__inner a {
    height: 48px;
  }

  footer {
    margin-top: 100px;
  }

  .footer__inner {
    gap: 40px;
  }

  .footer__block p,
  .footer__block a {
    font-size: 15px;
    line-height: 24px;
  }

  .footer__links {
    flex-direction: row;
    gap: 56px;
    margin: 16px 0;
    flex-wrap: wrap;
  }

  .footer__links a {
    font-size: 16px;
  }

  .footer__legal {
    flex-direction: row;
    padding: 0 32px;
    justify-content: space-between;
  }

  .article {
    max-width: 1272px;
    width: 100%;
    margin: 0 auto;
    gap: 24px;
    padding: 36px 16px;
  }

  .article h1 {
    font-size: 40px;
    line-height: 56px;
  }

  .article__body {
    gap: 20px;
  }

  .article__body p,
  .article__body li,
  .article__body a,
  .article__body h2 {
    font-size: 16px;
    line-height: 26px;
  }

  .cookie {
    max-width: 407px;
    padding: 12px 16px;
    left: auto;
    transform: none;
    right: 6px;
  }

  .cookie__btn {
    height: 48px;
  }

  .cookie__btn span {
    font-size: 15px;
    line-height: 24px;
  }

  .agegate__box,
  .agegate__denied {
    max-width: 546px;
  }

  .agegate__copy p,
  .agegate__copy a {
    font-size: 15px;
    line-height: 24px;
  }

  .agegate__copy span {
    font-size: 20px;
    line-height: 30px;
  }

  .agegate button {
    height: 48px;
  }
}

@media (min-width: 1200px) {
  .hero {
    flex-direction: row;
  }

  .hero__copy {
    max-width: 618px;
    gap: 20px;
  }

  .hero h1,
  .hero__sub {
    text-align: start;
  }

  .hero__sub {
    padding-right: 14px;
  }

  .deco__left {
    width: 150px;
    height: 150px;
    left: -28px;
  }

  .deco__center {
    top: -34px;
    width: 88px;
    height: 99px;
  }

  .deco__right {
    width: 67px;
    height: 100px;
  }
}

@media (min-width: 1600px) {
  .trust__inner {
    justify-content: space-around;
  }
}