*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins',sans-serif;
  background:#f3f3f6;
  color:#111;
  overflow-x:hidden;
}

/* background */
.bg-layer{position:fixed;inset:0;z-index:-1}
.bg-image{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.62;
  filter:brightness(.92) contrast(1.08) saturate(1.1);
}

/* layout */
.container{
  max-width:620px;
  margin:0 auto;
  padding:0 16px;
}

/* hero */
.hero{
  text-align:center;
  padding:18px 0 10px;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.logo-wrapper{max-width:320px}
.logo{width:100%;display:block}

.hero-title{
  font-size:1.7rem;
  font-weight:900;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.hero-card{
  max-width:520px;
  background:rgba(0,0,0,.55);
  color:#fff;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

/* video */
.creative-section{padding:16px 0 24px}
.video-wrapper{
  position:relative;
  max-width:520px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.18);

  opacity:0;
  transform:translateY(14px);
  transition:.35s ease;
  cursor:pointer;
}
.creative-video{width:100%;display:block}

.play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
.play-overlay.hidden{
  opacity:0;
  visibility:hidden;
}
.play-btn-img{width:78px;height:auto}

/* CTA */
.cta-block{text-align:center;margin-top:16px}

/* Telegram-blue CTA + pulse light (твоя просьба) */
.join-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:20px 0;

  background: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%);
  color:#ffffff;

  font-size:1.2rem;
  font-weight:900;
  letter-spacing:.2px;

  border:none;
  border-radius:16px;
  text-decoration:none;
  cursor:pointer;

  box-shadow:
    0 12px 32px rgba(34,158,217,.45),
    inset 0 0 0 1px rgba(255,255,255,.18);

  position:relative;
  overflow:hidden;

  transition:transform .3s ease, box-shadow .3s ease;
}
.join-btn:hover{
  transform: translateY(-3px);
  box-shadow:
    0 18px 40px rgba(34,158,217,.55),
    inset 0 0 0 1px rgba(255,255,255,.25);
}
.join-btn:active{transform: scale(.97)}

.join-btn::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-60%;
  width:220%;
  height:220%;
  background: radial-gradient(
    circle,
    rgba(255,255,255,.25) 0%,
    rgba(255,255,255,0) 58%
  );
  opacity:0;
  animation:ctaPulse 2.6s infinite;
  pointer-events:none;
}
@keyframes ctaPulse{
  0%{opacity:0}
  30%{opacity:.4}
  60%{opacity:0}
  100%{opacity:0}
}

/* live + profit */
.live-profit{
  margin:12px auto 0;
  max-width:520px;
  padding:14px 16px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  text-align:center;
}

.live-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:900;
  color:#111;
}

.live-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  animation:pulseGreen 1.4s infinite;
}
@keyframes pulseGreen{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

.profit-main{display:block;margin-top:6px;font-weight:900;color:#111}
.profit-sub{display:block;margin-top:6px;font-size:.9rem;color:#444}

.profit-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.profit-cell{
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:10px 8px;

  opacity:0;
  transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.profit-cell.is-show{
  opacity:1;
  transform:translateY(0);
}

.profit-cell.is-active{
  border-color: rgba(34,158,217,.55);
  box-shadow:
    0 10px 26px rgba(34,158,217,.22),
    inset 0 0 0 1px rgba(34,158,217,.18);
}

.profit-label{font-size:.78rem;font-weight:800;color:#444}
.profit-value{
  margin-top:4px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
  font-weight:900;
  color:#111;
}
.profit-value .cur{font-size:.9rem;opacity:.9}
.profit-value span[id]{font-size:1.12rem;line-height:1}

/* benefits */
.benefits{padding:26px 0 34px}
.section-title{
  font-size:1.35rem;
  font-weight:900;
  text-align:center;
  color:#111;
  margin-bottom:14px;
}
.benefits-grid{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}
.benefit-item{
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:16px;
  padding:18px 16px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  text-align:center;
}
.benefit-item h3{margin:0 0 6px;font-weight:900}
.benefit-item p{margin:0;color:#333;font-weight:600}

/* footer */
.footer{
  text-align:center;
  padding:12px 0;
  font-size:.95rem;
  color:#111;
}

/* mobile */
@media(max-width:480px){
  .logo-wrapper{max-width:260px}
  .video-wrapper{max-width:440px}
  .benefit-item{max-width:440px}
  .profit-grid{grid-template-columns:1fr}
  .join-btn{font-size:1.08rem;padding:18px 0}
}