*{box-sizing:border-box}

html,body{margin:0;padding:0;min-height:100%;}

body{
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  color:#171717;
  background:
    radial-gradient(ellipse at 15% 20%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 38%),
    radial-gradient(ellipse at 85% 80%,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 40%),
    linear-gradient(135deg,#e8e5df 0%,#f8f7f4 28%,#dedbd4 50%,#faf9f7 73%,#e3e0d9 100%);
  position:relative;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    repeating-linear-gradient(112deg,transparent 0,transparent 75px,rgba(100,100,100,.16) 76px,transparent 78px),
    repeating-linear-gradient(68deg,transparent 0,transparent 120px,rgba(255,255,255,.7) 121px,transparent 124px);
}

.page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:28px 16px 55px;
  position:relative;
  z-index:1;
}

.content{
  width:min(100%,520px);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.community-banner{
  width:100%;
  min-height:78px;
  margin-bottom:16px;
  padding:12px 18px;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
  background:linear-gradient(135deg,#087f42,#18b957);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.3);
}

.banner-icon{
  width:50px;
  height:50px;
  min-width:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
}

.banner-icon img{width:31px;height:31px}

.banner-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.banner-text strong{
  font-size:19px;
  line-height:1.1;
  letter-spacing:.2px;
}

.banner-text span{
  font-size:13px;
  line-height:1.25;
  opacity:.95;
}

.video-card{
  width:100%;
  max-width:400px;
  overflow:hidden;
  border-radius:16px;
  background:#000;
  box-shadow:0 18px 45px rgba(0,0,0,.24);
}

.vturb-player-placeholder{
  position:relative;
  width:100%;
  padding-top:177.7777777778%;
  background:#000;
}

.hide{display:none!important}

.community-button{
  width:100%;
  max-width:400px;
  margin-top:18px;
  border:0;
  border-radius:14px;
  min-height:58px;
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#087f42,#16b957);
  font-size:18px;
  font-weight:800;
  box-shadow:0 10px 26px rgba(8,127,66,.25);
  transition:.18s ease;
}

.community-button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(8,127,66,.32)}
.community-button:active{transform:translateY(0)}
.community-button img{width:28px;height:28px}

@media(max-width:480px){
  .page{padding:14px 10px 35px}
  .community-banner{min-height:72px;padding:11px 13px}
  .banner-icon{width:44px;height:44px;min-width:44px}
  .banner-icon img{width:27px;height:27px}
  .banner-text strong{font-size:16px}
  .banner-text span{font-size:12px}
  .video-card{border-radius:12px}
  .community-button{font-size:17px}
}