:root{
  --ink:#0e1626;
  --ink-2:#121d31;
  --panel:#16213a;
  --grape:#2b1b4d;
  --grape-2:#3a2766;
  --lemon:#e6f73a;
  --lemon-soft:#eef98a;
  --txt:#f4f6fb;
  --txt-dim:#9aa6bd;
  --line:#23304b;
  --rad:16px;
  --shell:1280px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--ink);
  color:var(--txt);
  font-family:'Barlow',-apple-system,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%}

a{color:inherit;text-decoration:none;cursor:pointer}

button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}

.wrap{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 24px;
}

.topline{
  background:var(--grape);
  padding:14px 0;
  position:relative;
  z-index:40;
}
.topline__inner{
  display:flex;
  align-items:center;
  gap:26px;
}
.topline__brand img{height:30px;width:auto}
.topline__menu{
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:8px;
  flex:1;
  flex-wrap:wrap;
}
.topline__link{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:.04em;
  color:var(--txt);
  white-space:nowrap;
  transition:color .18s;
}
.topline__link:hover{color:var(--lemon)}
.topline__link--on{color:var(--lemon)}
.topline__act{display:flex;gap:12px;align-items:center}

.pill{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  letter-spacing:.05em;
  border-radius:999px;
  padding:13px 26px;
  font-size:15px;
  transition:transform .15s,box-shadow .2s,background .2s;
  white-space:nowrap;
}
.pill:hover{transform:translateY(-1px)}
.pill--solid{background:var(--lemon);color:#1c1c1c;box-shadow:0 6px 18px rgba(230,247,58,.25)}
.pill--solid:hover{box-shadow:0 8px 24px rgba(230,247,58,.4)}
.pill--ghost{background:#f3f4f7;color:#1c1c1c}
.pill--ghost:hover{background:#fff}
.pill--light{background:#f3f4f7;color:#1c1c1c}

.banner{
  position:relative;
  background:#2a1748;
  overflow:hidden;
}
.banner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('../img/header-bg.webp');
  background-size:cover;
  background-position:center right;
  z-index:0;
}
.banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,#2a1748 18%,rgba(42,23,72,.86) 30%,rgba(42,23,72,0) 46%);
  z-index:1;
}
.banner__inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  min-height:300px;
  padding-top:34px;
  padding-bottom:54px;
}
.banner__copy{max-width:400px}
h1{
  font-family:'Barlow Condensed',sans-serif;
  font-size:38px;
  line-height:1.05;
  font-weight:700;
  margin-bottom:16px;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.banner__lead{
  font-family:'Barlow Condensed',sans-serif;
  font-size:29px;
  font-weight:700;
  line-height:1.14;
  margin-bottom:26px;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.banner__cta{padding:15px 46px;font-size:16px}
.tabline{
  position:relative;
  margin:26px 0 8px;
  background:linear-gradient(180deg,var(--grape-2),var(--grape));
  border-radius:38px;
  padding:18px 30px;
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}
.tabline__item{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:.05em;
  color:var(--txt);
  display:flex;
  align-items:center;
  gap:6px;
  transition:color .18s;
}
.tabline__item:first-child{color:var(--lemon)}
.tabline__item:hover{color:var(--lemon)}
.tabline__item--more svg{opacity:.85}
.tabline__star{
  margin-left:auto;
  color:rgba(255,255,255,.45);
  transition:color .18s,transform .18s;
}
.tabline__star:hover{color:var(--lemon);transform:scale(1.08)}

.shelf{margin:30px 0 10px}
.shelf__title{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:24px;
  letter-spacing:.02em;
  margin:0 0 16px;
  color:var(--txt);
}

.grid{display:grid;gap:22px}
.grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{cursor:pointer}
.card__art{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:1/1;
  background:var(--panel);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.card__art--wide{aspect-ratio:16/10}
.card__art img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.card:hover .card__art img{transform:scale(1.06)}
.card__badge{
  position:absolute;
  top:12px;left:16px;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.06em;
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  z-index:2;
}
.card__tag{
  position:absolute;
  top:0;left:0;
  background:linear-gradient(135deg,#7b3fb0,#5a2d8c);
  color:#fff;
  font-size:13px;
  font-weight:600;
  padding:5px 14px 6px;
  border-bottom-right-radius:14px;
  z-index:3;
}
.card__play{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.9);
  background:var(--lemon);
  color:#1c1c1c;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  letter-spacing:.08em;
  font-size:16px;
  padding:14px 42px;
  border-radius:999px;
  opacity:0;
  transition:opacity .22s,transform .22s;
  z-index:4;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  pointer-events:none;
}
.card:hover .card__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.card__name{
  display:block;
  margin-top:12px;
  font-size:16px;
  color:var(--txt);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pays{margin:48px 0 20px;border-top:1px solid var(--line);padding-top:34px}
.pays__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:26px;
}
.pays__cell{
  flex:0 0 auto;
  opacity:.9;
  transition:opacity .2s,transform .2s;
}
.pays__cell:hover{opacity:1;transform:translateY(-2px)}
.pays__cell img{height:30px;width:auto}

.article{padding:40px 0 30px;background:var(--ink)}
.article__stamp{
  font-size:14px;
  color:var(--txt-dim);
  margin-bottom:22px;
}
.article__body{
  color:#cdd5e4;
  font-size:16.5px;
  line-height:1.72;
}
.article__body p{margin:0 0 18px}
.article__body h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:28px;
  font-weight:700;
  color:#fff;
  margin:34px 0 14px;
  letter-spacing:.01em;
}
.article__body h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;
  font-weight:600;
  color:#eef1f7;
  margin:26px 0 12px;
}
.article__body ul,
.article__body ol{margin:0 0 20px;padding-left:22px}
.article__body li{margin-bottom:8px}
.article__body table{
  width:100%;
  border-collapse:collapse;
  margin:8px 0 24px;
  font-size:15.5px;
  background:var(--ink-2);
  border-radius:10px;
  overflow:hidden;
}
.article__body th,
.article__body td{
  text-align:left;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
}
.article__body th{
  background:var(--grape-2);
  color:#fff;
  font-weight:600;
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.03em;
}
.article__body tr:last-child td{border-bottom:none}
.article__body td{color:#bcc6d8}
.article__figure{text-align:center;margin:24px 0}
.article__figure img{
  display:inline-block;
  max-width:760px;
  width:100%;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.foot{background:#0a0f1c;padding:46px 0 30px;margin-top:30px}
.foot__social{display:flex;justify-content:center;gap:16px;margin-bottom:30px}
.foot__icon{
  width:48px;height:48px;
  border-radius:50%;
  background:#1c2842;
  display:flex;align-items:center;justify-content:center;
  color:#cfd8ea;
  transition:background .2s,color .2s,transform .2s;
}
.foot__icon:hover{background:#27375a;color:var(--lemon);transform:translateY(-2px)}

.foot__apps{display:flex;justify-content:center;gap:14px;margin-bottom:40px}
.foot__store{
  display:inline-flex;
  transition:transform .2s,opacity .2s;
  opacity:.95;
}
.foot__store:hover{transform:translateY(-2px);opacity:1}
.foot__store img{height:40px;width:auto;display:block}

.foot__cols{display:flex;gap:120px;margin-bottom:46px;justify-content:center}
.foot__list{list-style:none}
.foot__list li{margin-bottom:14px}
.foot__list a{color:#c4cde0;font-size:16px;transition:color .18s}
.foot__list a:hover{color:var(--lemon)}

.foot__brands{
  display:flex;
  flex-wrap:wrap;
  gap:30px 36px;
  align-items:center;
  justify-content:center;
  margin-bottom:40px;
  padding-bottom:14px;
}
.foot__brand{
  flex:0 0 auto;
  opacity:.7;
  transition:opacity .2s,transform .2s;
}
.foot__brand:hover{opacity:1;transform:translateY(-2px)}
.foot__brand img{height:26px;width:auto;max-width:130px}

.foot__base{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:26px;
  gap:24px;
}
.foot__mail{color:#c4cde0;font-size:16px;transition:color .18s}
.foot__mail:hover{color:var(--lemon)}
.foot__rights{color:var(--txt-dim);font-size:15px;text-align:center;line-height:1.5}
.foot__sign{display:flex;align-items:center;gap:14px}
.foot__sign img{height:24px;width:auto}
.foot__age{
  width:34px;height:34px;
  border-radius:50%;
  border:2px solid var(--txt-dim);
  color:var(--txt-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
}

@media(max-width:1100px){
  .topline__inner{flex-wrap:wrap;justify-content:space-between}
  .topline__menu{order:3;width:100%;margin-left:0;margin-top:12px;justify-content:center}
  .foot__cols{gap:80px}
  .tabline__star{display:none}
}

@media(max-width:860px){
  .grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .banner__inner{min-height:auto;padding:30px 0 50px}
  h1{font-size:32px}
  .banner__lead{font-size:24px}
  .tabline{gap:18px;padding:16px 20px;border-radius:26px}
  .tabline__item{font-size:16px}
  .pays__row{justify-content:center;gap:22px}
  .foot__cols{flex-direction:row;gap:50px;justify-content:center}
  .foot__base{flex-direction:column;text-align:center}
  .article__body h2{font-size:24px}
  body{padding-bottom:78px}
  .topline__inner{flex-wrap:wrap;justify-content:center;gap:0}
  .topline__brand{order:1;width:100%;display:flex;justify-content:center}
  .topline__menu{display:none}
  .topline__act{
    order:3;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:90;
    width:100%;
    justify-content:center;
    gap:12px;
    padding:12px 16px;
    background:var(--grape);
    box-shadow:0 -6px 18px rgba(0,0,0,.35);
  }
  .topline__act .pill{flex:1;max-width:240px;text-align:center;padding:14px 18px}
}

@media(max-width:560px){
  .wrap{padding:0 16px}
  .grid--four{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .foot__cols{flex-direction:column;gap:30px;align-items:center}
  .foot__apps{flex-direction:column;align-items:center}
  .article__body{font-size:16px}
}