/* ---------- RESET / BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:#000;
  color:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* ---------- UTILITIES ---------- */
.btn{
  display:inline-block;
  text-align:center;
  cursor:pointer;
  text-decoration:none;
}
.btn-primary{
  background:#e9324a;
  color:#fff;
  padding:.75em 1.5em;
  border-radius:30px;
  font-size:1em;
  border:none;
}
.btn-outline{
  border:2px solid #fff;
  color:#fff;
  padding:.65em 1.35em;
  border-radius:30px;
  font-size:1em;
}
.small-text{font-size:.75em;line-height:1}
/* ---------- NAVBAR ---------- */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1em 5%;
}
.logo{height:40px}
.nav-buttons a{margin-left:1em}

/* ---------- HERO ---------- */
.hero{display:flex;align-items:center;padding:4em 5%}
.hero-inner{max-width:500px}
.hero h1{font-size:3em;margin-bottom:.4em}
.hero .highlight{display:block;font-size:1.2em}
.email-form{display:flex;margin-top:1em}
.email-form input{
  flex:1;padding:.8em;border:none;border-radius:30px 0 0 30px;
  background:rgba(0,0,0,.55);color:#fff
}
.email-form button{border-radius:0 30px 30px 0;padding:.8em 1.6em}

/* ---------- FEATURES ---------- */
.features{
  display:flex;justify-content:center;gap:2em;padding:3em 5%;
  flex-wrap:wrap
}
.feature-item{
  background:#111;border-radius:10px;max-width:300px;text-align:center;
  padding:1.5em
}
.feature-item img{width:180px;margin:-55px auto 1em auto;display:block}

/* ---------- GAMES ---------- */
.games{text-align:center;padding:3em 5%}
.game-logos,.providers-logos{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1em;margin-top:1em
}
.game-logos img{max-height:160px}
.providers-logos img{max-height:40px}

/* ---------- CTA ---------- */
.cta{text-align:center;padding:3em 5% 2em}
.cta h3{font-size:1.4em;margin-bottom:1.2em;text-transform:uppercase;letter-spacing:.4px}
.text-green{color:#00ff4f}
.cta-btn{padding:.9em 3.5em;font-weight:700;font-size:.92em;border-radius:12px}

/* ---------- INFO BANNER ---------- */
.info-banner{
  position:relative;margin:1.5em auto 2.5em;max-width:520px;background:#000;
  padding:1.4em 1.8em;text-align:center;border:2px solid transparent;
  border-radius:8px;border-image:linear-gradient(90deg,#00ff4f 0%,#ff0066 100%) 1;
  font-size:.94em;line-height:1.45
}
.info-banner p{font-weight:700;margin-bottom:.45em}
.info-banner::before{
  content:"";position:absolute;top:-14px;left:-14px;width:44px;height:44px;
  background:url("../images/flower.png") center/contain no-repeat
}

/* ---------- BENEFITS ---------- */
.benefits{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.2em;
  padding:2.2em 5% 3.5em;max-width:1000px;margin:0 auto
}
.benefit-item{
  flex:1 1 220px;background:#1a1a1a;border-radius:8px;padding:1.6em 1.4em;
  text-align:center;font-size:.9em;line-height:1.45
}
.benefit-item h4{font-size:1em;margin-bottom:.6em}

/* ---------- PAYMENTS ---------- */
.payments{text-align:center;padding:2em 5%}
.payment-logos img{height:40px;margin:0 .5em}

/* ---------- TESTIMONIALS ---------- */
.testimonials{text-align:center;padding:4em 5%}
.testimonials h2{font-size:1.5em;margin-bottom:2em;letter-spacing:.5px}
.testimonial-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5em}
.testimonial-card{
  background:#111;border-radius:10px;max-width:160px;position:relative;
  text-align:center;font-size:.8em;line-height:1.35;padding:2.5em 1.2em 1.2em
}
.avatar{
  width:64px;height:64px;border-radius:50%;object-fit:cover;border:4px solid #000;
  position:absolute;top:-32px;left:50%;transform:translateX(-50%)
}
.testimonial-card h4{margin-top:38px;font-size:1em}
.location{color:#aaa;font-size:.72em;margin:.2em 0 .7em}
.quote{color:#ddd;font-size:.75em}

/* ---------- FOOTER ---------- */
footer{background:#000;color:#aaa;padding:3em 5%;font-size:.9em}
.footer-top{
  display:flex;flex-direction:column;gap:2.5em;max-width:1200px;margin:0 auto
}
/* logo-блок */
.footer-main-logo{height:48px;margin-bottom:.5em}
.slogan{color:#fff;font-size:.85em;margin-top:.4em}
/* колонки */
.footer-columns{display:flex;flex-wrap:wrap;gap:2em 4em}
.footer-column h4{color:#fff;margin-bottom:.6em;font-size:.95em}
.footer-column a{display:block;color:#aaa;margin:.25em 0;font-size:.8em;text-decoration:none}
.footer-column a:hover{text-decoration:underline}
/* соц-иконки */
.footer-social h4{margin-bottom:.6em;color:#fff}
.footer-social img{width:32px;height:32px;margin-right:.75em}
/* bottom */
.footer-bottom{
  border-top:1px solid #333;margin-top:2.5em;padding-top:1.5em;line-height:1.5
}
.footer-bottom a{color:#e9324a;text-decoration:none}
.footer-bottom a:hover{text-decoration:underline}

/* ---------- MEDIA QUERIES ---------- */
@media(max-width:992px){
  .hero{padding:3em 5%}
}
@media(max-width:768px){
  .navbar{flex-direction:column;gap:1em}
  .nav-buttons a{margin-left:0}
  .hero{flex-direction:column;text-align:center}
  .hero-inner{max-width:90%;padding:3em 0}
  .hero h1{font-size:2.3em}
  .hero .highlight{font-size:1.05em}
  .email-form{flex-direction:column}
  .email-form input{border-radius:30px;margin-bottom:.8em}
  .email-form button{border-radius:30px}
  .feature-item img{width:140px;margin:-40px auto .8em}
  .game-logos img{max-height:120px}
  .cta h3{font-size:1.2em}
  .cta-btn{padding:.8em 2.4em}
  .testimonial-card{max-width:46%}
}
@media(max-width:600px){
  .info-banner{max-width:92%;font-size:.88em}
  .info-banner::before{width:36px;height:36px;top:-12px;left:-12px}
  .benefit-item{flex:1 1 46%}
  .payment-logos img{height:32px}
}
@media(max-width:420px){
  .benefit-item{flex:1 1 100%}
  .testimonial-card{max-width:100%}
  .footer-columns{flex-direction:column}
  .nav-buttons a{width:100%;margin:.4em 0}
}