.brand-logo-text {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.1;
  text-align: left;
}

.brand-subtext {
  color: #fbb03b; /* оранжевый, как на примере */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.brand-maintext {
  color: #000;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
}

header {
    background-position: 0;
    background-size: cover;
}

header:before {
    --tw-gradient-from: var(--body_color);
    --tw-gradient-to: rgba(255, 255, 255, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    bottom: 0;
    content: "";
    height: 50px;
    position: absolute;
    width: 100%;
    z-index: 10;
}

header div {
    color: #222222; 
    text-shadow: none;
}

header p {
    text-shadow: none;
    color: #333333;
}

header a {
    --tw-border-opacity: 1;
    --tw-gradient-from: #FFB800; 
    --tw-gradient-to: #FF9900;   
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    border-color: #FFB800;
    border-radius: 12px;
    border-width: 1px;
    display: inline-block;
    line-height: 60px;
    padding-left: 60px;
    padding-right: 60px;
    position: relative;
    box-shadow: 0 4px 0 #D88A00, 0 0 15px rgba(255, 179, 0, .4), inset 0 3px 0 #FFF1B8;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
    color: #222222;
    font-weight: bold;
    font-family: Rubik, sans-serif;
    font-size: 18px;
}

@media (min-width: 768px) {
    header a {
        line-height: 76px;
    }
}

header a:before {
    bottom: -27px;
    content: url(/files/star-left.png);
    left: 20px;
    position: absolute;
}

@media (min-width: 768px) {
    header a:before {
        bottom: -35px;
    }
}

header a:after {
    content: url(/files/star-right.png);
    position: absolute;
    right: 20px;
    top: -36px;
}

@media (min-width: 768px) {
    header a:after {
        top: -45px;
    }
}

header a:hover {
    --tw-gradient-from: #FFC000;
    --tw-gradient-to: #FF8C00;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    box-shadow: 0 4px 0 #BB7500, 0 0 18px rgba(255, 179, 0, .5), inset 0 3px 0 #FFE083;
}

header a:hover:after,
header a:hover:before {
    --tw-scale-x: 1.5;
    --tw-scale-y: 1.5;
    transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

header .bonuses {
    color: #FF9900;
}