{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #f8f9fa; } .container { max-width: 500px; margin: 0 auto; background: white; padding: 25px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); } .profile { text-align: center; margin-bottom: 25px; } .profile-pic { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #2980b9; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .profile-name { font-size: 24px; font-weight: 700; margin: 20px 0 8px; color: #2c3e50; } .profile-description { color: #7f8c8d; margin-bottom: 25px; font-size: 16px; font-weight: 500; } .featured-video { margin-bottom: 30px; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.1); } .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 75px; padding: 0 20px; margin: 18px 0; color: white; text-decoration: none; font-weight: 600; border-radius: 12px; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; } .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); } .btn-main { background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%); } .btn-video { background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%); } .btn-help { background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%); } .btn-info { background: linear-gradient(135deg, #e67e22 0%, #d35400 100%); } .btn-shop { background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); } .btn-extras { background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%); } .btn-content { display: flex; align-items: center; width: 100%; height: 100%; position: relative; z-index: 2; } .btn-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: white; position: absolute; transition: all 0.3s; border-radius: 10px; } .btn-icon-left { left: 15px; background: rgba(255,255,255,0.15); } .btn-icon-right { right: 15px; } .btn-text { flex-grow: 1; text-align: center; font-size: 15px; padding: 0 75px; line-height: 1.4; } .video-icon { width: 44px; height: 44px; right: 15px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all 0.3s; } .btn:hover .video-icon { transform: scale(1.1); background: rgba(255,255,255,0.3); } .divider { height: 1px; background: linear-gradient(to right, transparent, rgba(189,195,199,0.3), transparent); margin: 25px 0; border: none; } .video-container { display: none; margin: 20px 0; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.1); } .section-title { text-align: center; margin: 35px 0 20px; font-size: 20px; font-weight: 700; color: #2c3e50; position: relative; } .section-title:after { content: ""; display: block; width: 60px; height: 3px; background: linear-gradient(to right, #2980b9, #2c3e50); margin: 10px auto 0; border-radius: 3px; } .rocket-icon { font-size: 28px; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .btn-main:hover .rocket-icon { animation: launch 0.8s forwards; } @keyframes launch { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(15deg); } 100% { transform: translateY(-50px) rotate(30deg) scale(1.2); opacity: 0; } } .legal-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.1); text-align: center; font-size: 12px; color: #7f8c8d; line-height: 1.6; } .legal-links { margin: 10px 0; } .legal-links a { color: #2980b9; text-decoration: none; margin: 0 10px; } .legal-links a:hover { text-decoration: underline; } .disclaimer { font-size: 11px; margin-top: 15px; font-style: italic; color: #95a5a6; } @media (max-width: 480px) { .btn { min-height: 70px; padding: 0 15px; } .btn-text { font-size: 14px; padding: 0 65px; } .btn-icon { width: 40px; height: 40px; font-size: 20px; } .video-icon { width: 40px; height: 40px; font-size: 18px; } .rocket-icon { font-size: 24px; } }