.hero-section{
  background:radial-gradient(ellipse at 20% 30%,rgba(255,61,138,.18) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(6,212,196,.18) 0%,transparent 50%),var(--bg);
  overflow:hidden;
  padding:6rem 0 7rem;
  position:relative;
}
.hero-section::before{
  background:var(--gradAc);
  border-radius:50%;
  content:"";
  filter:blur(120px);
  height:400px;
  opacity:.25;
  position:absolute;
  right:5%;
  top:10%;
  width:400px;
}
.hero-section::after{
  background:var(--c2);
  border-radius:50%;
  content:"";
  filter:blur(140px);
  height:350px;
  left:5%;
  opacity:.2;
  position:absolute;
  top:40%;
  width:350px;
}
.hero-section .container{position:relative;z-index:2}
.hero-section h1{margin-bottom:1.5rem;max-width:980px}
.hero-section h1 span.hl{
  background:var(--gradAc);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-lead{
  color:var(--fg2);
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  margin-bottom:2.5rem;
  max-width:780px;
}
.heroTrust{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  margin-bottom:2.5rem;
}
.heroTrustItem{
  align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(6,212,196,.2);
  border-radius:14px;
  display:flex;
  gap:.85rem;
  padding:.85rem 1.25rem;
}
.heroTrustItem .icn{
  background:var(--gradAc);
  border-radius:10px;
  font-size:1.2rem;
  height:38px;
  align-items:center;
  display:flex;
  justify-content:center;
  width:38px;
}
.heroTrustItem strong{display:block;font-family:'Sora',sans-serif;font-size:1.05rem;color:#fff}
.heroTrustItem em{color:var(--fg2);font-size:.8rem;font-style:normal;text-transform:uppercase;letter-spacing:.05em}

.heroBadges{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.5rem;
}
.heroBadge{
  align-items:center;
  background:rgba(6,212,196,.08);
  border:1px solid rgba(6,212,196,.3);
  border-radius:999px;
  color:#fff;
  display:inline-flex;
  font-family:'Sora',sans-serif;
  font-size:.85rem;
  font-weight:600;
  gap:.5rem;
  padding:.55rem 1.1rem;
}
.heroBadge::before{
  background:var(--c2);
  border-radius:50%;
  box-shadow:0 0 12px var(--c2);
  content:"";
  height:8px;
  width:8px;
}

.registration{background:var(--bg)}
.registration h2{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.checklist{list-style:none;padding:0;margin:1.5rem 0}
.checklist li{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(6,212,196,.15);
  border-left:4px solid var(--c2);
  border-radius:12px;
  color:var(--fg2);
  margin-bottom:.75rem;
  padding:1rem 1.25rem;
  transition:.3s;
}
.checklist li:hover{border-left-color:var(--ac);transform:translateX(6px)}

.bonuses{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.cards-grid{
  display:grid;
  gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:3rem 0;
}
.info-card{
  background:linear-gradient(160deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%);
  border:1px solid rgba(6,212,196,.18);
  border-radius:var(--rad2);
  overflow:hidden;
  padding:0;
  position:relative;
  transition:.4s;
}
.info-card::before{
  background:var(--gradAc);
  content:"";
  height:3px;
  left:0;
  position:absolute;
  top:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:.4s;
  width:100%;
}
.info-card:hover{transform:translateY(-10px);border-color:var(--ac);box-shadow:var(--shdwAc)}
.info-card:hover::before{transform:scaleX(1)}
.info-card .content-image{margin:0;border-radius:0;box-shadow:none}
.info-card .content-image img{width:100%;height:auto;display:block}
.info-card h3{margin:1.5rem 1.5rem .75rem;color:#fff}
.info-card p{margin:0 1.5rem 1.75rem}

.feature-list{list-style:none;padding:0;margin:2rem 0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.feature-list li{
  background:rgba(6,212,196,.06);
  border-radius:12px;
  color:var(--fg);
  padding:1rem 1.25rem;
  position:relative;
  padding-left:3rem;
}
.feature-list li::before{
  background:var(--gradAc);
  border-radius:50%;
  color:#fff;
  content:"✓";
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.8rem;
  height:22px;
  left:1rem;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:22px;
}

.payments{background:var(--bg2)}
.payment-list{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin:2rem 0;
}
.payment-list dt{
  color:#fff;
  font-family:'Sora',sans-serif;
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:.4rem;
}
.payment-list dd{
  background:linear-gradient(135deg,rgba(6,212,196,.1) 0%,rgba(30,58,138,.1) 100%);
  border:1px solid rgba(6,212,196,.2);
  border-radius:14px;
  color:var(--fg2);
  margin:0 0 1rem;
  padding:1rem 1.25rem;
  transition:.3s;
}
.payment-list dd:hover{border-color:var(--ac);transform:translateY(-3px)}
.payment-list>div{display:flex;flex-direction:column}
.highlight-box{
  background:linear-gradient(135deg,rgba(255,61,138,.12) 0%,rgba(6,212,196,.12) 100%);
  border:1px solid rgba(255,61,138,.3);
  border-radius:var(--rad2);
  margin-top:2.5rem;
  padding:2rem;
  position:relative;
}
.highlight-box::before{
  background:var(--gradAc);
  border-radius:var(--rad2) 0 0 var(--rad2);
  content:"";
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:5px;
}
.highlight-box p{color:#fff;margin:0;font-size:1.05rem}

.games{background:var(--bg)}
.feature-block{
  background:linear-gradient(160deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.005) 100%);
  border:1px solid rgba(6,212,196,.15);
  border-radius:var(--rad2);
  margin:2rem 0;
  overflow:hidden;
  padding:2rem;
  transition:.3s;
}
.feature-block:hover{border-color:var(--ac);transform:translateX(8px)}
.feature-block h3{margin-top:0;color:#fff}
.feature-block .content-image{margin:-2rem -2rem 1.5rem;border-radius:0}

.security{background:var(--bg2)}
.security .container{
  background:radial-gradient(ellipse at top right,rgba(6,212,196,.08) 0%,transparent 60%);
  border:1px solid rgba(6,212,196,.15);
  border-radius:var(--rad2);
  padding:3rem;
}

.providers{background:var(--bg)}

.mobile{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}

.faq{background:var(--bg2)}
.accordion-item{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(6,212,196,.15);
  border-radius:var(--rad);
  margin-bottom:1rem;
  overflow:hidden;
  transition:.3s;
}
.accordion-item:hover{border-color:rgba(6,212,196,.4)}
.accordion-item.active{border-color:var(--ac);background:rgba(255,61,138,.05)}
.accordion-header{
  align-items:center;
  cursor:pointer;
  display:flex;
  font-size:1.1rem;
  justify-content:space-between;
  margin:0;
  padding:1.5rem 1.75rem;
  color:#fff;
}
.accordion-header::after{
  background:var(--gradAc);
  border-radius:50%;
  color:#fff;
  content:"+";
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  font-weight:700;
  height:36px;
  transition:.3s;
  width:36px;
}
.accordion-item.active .accordion-header::after{content:"−";transform:rotate(180deg)}
.accordion-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s,padding .4s;
}
.accordion-item.active .accordion-body{max-height:300px;padding:0 1.75rem 1.5rem}
.accordion-body p{margin:0}

@media(max-width:768px){
  section{padding:3rem 0}
  .hero-section{padding:4rem 0 5rem}
  .security .container{padding:1.75rem}
  .feature-block{padding:1.5rem}
  .feature-block .content-image{margin:-1.5rem -1.5rem 1.25rem}
  .heroTrust{gap:1rem}
}