:root{
  --bg:#0a0a0a;
  --card:#141414;
  --muted:#9e9e9e;
  --text:#f1f1f1;
  --primary:#ff007f;
  --primary-2:#a445ff;
  --success:#00e676;
  --danger:#ff3b3b;
  --ring:rgba(255,0,127,0.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

.bg-lights{position:fixed;inset:0;z-index:-1;overflow:hidden;filter:saturate(120%)}
.bg-lights span{
  position:absolute;display:block;width:52vmin;height:52vmin;border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,0,127,.35), transparent 70%);
  animation: float 14s ease-in-out infinite;
}
.bg-lights span:nth-child(1){top:-10%;left:-10%;animation-duration:16s}
.bg-lights span:nth-child(2){top:10%;right:-15%;background:radial-gradient(closest-side, rgba(164,69,255,.3),transparent 70%);animation-duration:18s}
.bg-lights span:nth-child(3){bottom:-15%;left:5%;background:radial-gradient(closest-side, rgba(0,230,118,.25),transparent 70%)}
.bg-lights span:nth-child(4){bottom:10%;right:10%;opacity:.7}
.bg-lights span:nth-child(5){top:35%;left:40%;width:40vmin;height:40vmin;opacity:.6}
@keyframes float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-30px) translateX(15px)}}

.app-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;
  background:linear-gradient(90deg, rgba(10,10,10,.85), rgba(10,10,10,.6));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-logo{width:56px;height:56px;border-radius:14px;border:2px solid var(--primary);object-fit:cover}
.app-title{font-weight:800;font-size:1.25rem;letter-spacing:.2px}
.app-subtitle{color:var(--success);font-weight:600;font-size:.9rem}

.container{max-width:980px;margin:0 auto;padding:18px}
.video-card{margin:18px 0}
.video-card.small{margin:0}
.video-wrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(255,0,127,0.35), 0 6px 20px rgba(164,69,255,0.25);}
.video-wrap::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.video-wrap video{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:16/6}
.play-overlay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:999px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(10px);
  border:2px solid var(--primary);
  font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  box-shadow:0 0 28px var(--ring);
  pointer-events:none;color:#fff
}
.play-overlay i{font-size:1rem}

.section{background:rgba(20,20,20,.9);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px;margin:18px 0;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.section h2{margin:0 0 6px;font-weight:800;color:var(--primary)}
.section p{margin:0;color:#f1f1f1}

.video-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:18px 0}
@media(min-width:720px){.video-grid{grid-template-columns:1fr 1fr}}

.list-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#151515,#1f1f1f);border:1px solid rgba(255,255,255,.06)}
.list-item img{width:60px;height:60px;border-radius:10px;object-fit:cover}
.list-item-title{font-weight:700}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;justify-content:center;align-items:center;z-index:1000}
.modal-content{
  width:92%;max-width:440px;padding:26px;border-radius:18px;text-align:center;
  background:rgba(18,18,18,.9);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 36px rgba(255,0,127,.55), 0 10px 30px rgba(0,0,0,.6);
  animation:pop .4s ease
}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.lock-icon{font-size:3.2rem;color:var(--primary);text-shadow:0 0 18px var(--ring);margin-bottom:6px}
.lock-icon.fail{color:var(--danger)}
.modal-content h1{margin:.25rem 0 .15rem;font-size:1.65rem;font-weight:800}
.modal-content small{color:var(--muted)}
.modal-content p{color:#f1f1f1}
.modal-content input{
  width:100%;padding:14px;margin-top:18px;font-size:1rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);background:#1c1c1c;color:#fff
}
.modal-content .price{margin-top:12px;color:#f1f1f1}
.modal-content .price span{color:var(--primary);font-weight:800}
.modal-content button{
  margin-top:18px;width:100%;padding:14px 16px;border:none;border-radius:12px;cursor:pointer;
  font-weight:800;font-size:1rem;color:#fff;letter-spacing:.3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  box-shadow:0 0 28px var(--ring);
  position:relative;transition:transform .2s ease, box-shadow .2s ease
}
.modal-content button:hover{transform:scale(1.05);box-shadow:0 0 36px var(--ring)}
.modal-content button.loading::after{
  content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;
  border:3px solid #fff;border-top:3px solid var(--primary);border-radius:50%;animation:spin .6s linear infinite
}
.modal-content .note{margin-top:12px;font-size:.8rem;color:#b5b5b5}
@keyframes spin{to{transform:rotate(360deg)}}
#loadingOverlay{display:none;position:fixed;inset:0;z-index:2000;justify-content:center;align-items:center;
  background:rgba(0,0,0,.94);font-weight:800;font-size:1.2rem;letter-spacing:.4px}
.video-card,.section,.list-item{opacity:0;transform:translateY(16px);animation:reveal .6s ease forwards}
.video-card{animation-delay:.05s}.section{animation-delay:.12s}.video-grid .video-card.small:nth-child(1){animation-delay:.18s}.list-item{animation-delay:.22s}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}

/* Small 18+ icon with neon sparkle */
.lock-icon.age-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 2.2rem; /* slightly smaller than before */
  font-weight: bold;
  color: var(--primary);
  animation: neonPulse 1.5s ease-in-out infinite;
  position: relative;
  cursor: default;
}

.lock-icon.age-icon sup {
  font-size: 1.2rem; /* smaller + */
  position: relative;
  top: -0.35rem;
  color: var(--primary-2);
  overflow: visible;
}

/* Neon sparkle on the + sign */
.lock-icon.age-icon sup::after {
  content: '✦';
  position: absolute;
  top: -6px;
  right: -5px;
  font-size: 0.7rem;
  color: #ff00ff; /* neon magenta, matches gradient */
  opacity: 0;
  transform: scale(0.5);
  animation: sparkle 1.5s infinite;
}

@keyframes sparkle {
  0%, 70%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  80% { opacity: 1; transform: scale(1) rotate(15deg); }
  85% { opacity: 0.7; transform: scale(1.1) rotate(-10deg); }
  90% { opacity: 1; transform: scale(1) rotate(0deg); }
}