body{font-family:Arial,sans-serif;color:#555;margin:0;padding:0;background:linear-gradient(to bottom,#f2f9ff,#e6f1ff)}
img{width:100%;height:auto}
@media only screen and (max-width: 600px) {
img{width:100%;height:auto}
}
.container{max-width:800px;margin:0 auto;padding:40px 20px;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,0.1)}
.main-title{font-size:36px;font-weight:700;color:#0077b6;margin-top:0;margin-bottom:30px;text-align:center}
.intro-text{font-size:18px;font-weight:700;margin:0 40px;text-align:center}
.faq-title{text-align:center;font-size:24px;color:#0077b6;margin-bottom:20px}
.services-title{font-size:24px;font-weight:700;color:#0077b6;margin-bottom:20px;text-align:center}
.services-list li::before{content:"➤";margin-right:10px;color:#0077b6}
.services-list li{font-size:16px;margin-bottom:10px}
.additional-info{font-size:14px;margin:10px 0 0 100px;text-align:left;color:#777;font-style:italic}
.image-container{text-align:center;margin-bottom:30px;background:radial-gradient(circle,#fff,#d9f0ff,#9ec9e6);border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.1);padding:20px}
.screenshot-image{max-width:100%;height:auto;margin:10px}
@media (min-width: 768px) {
.screenshot-image{max-width:350px}
}
.image-container{text-align:center;margin-bottom:30px;padding:20px;background:radial-gradient(circle,#fff,#d9f0ff,#9ec9e6);border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.1)}
.faq-title{text-align:center;color:#0077b6;margin-bottom:20px}
.dialog-container{margin-bottom:30px}
.dialog-text{font-size:16px;margin-bottom:10px;color:#000}
.speaker1{font-weight:700;color:#0077b6}
.speaker2{font-weight:700;color:#555}
.a-into{font-size:20px;color:#000;text-align:center;max-width:800px;margin:0 auto;padding:20px;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,0.1)}
.a-info{font-size:20px;color:#000;text-align:center;max-width:800px;margin:0 auto;padding:40px 20px;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,0.1);border-radius:0 0 30px 30px}
.a-info a{display:block;margin-bottom:10px;color:#0077b6;text-decoration:none}
.a-info a:hover{color:#005b8c}
.footer-info{font-size:12px;color:#999;text-align:center;margin-top:20px;margin-bottom:20px}
label{display:block;font-size:18px;font-weight:700;margin-bottom:10px}
input[type="number"]{width:97%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:5px;margin-bottom:20px}
button{display:block;width:100%;padding:10px 20px;font-size:18px;background-color:#0077b6;color:#fff;border:none;border-radius:5px;cursor:pointer;margin-bottom:20px}
button:hover{background-color:#005b8c}
#result{font-size:20px;font-weight:700;text-align:center;margin-top:30px}
@media (max-width: 767px) {
.container{padding:20px}
.main-title{font-size:28px}
label,input[type="number"],button,#result{font-size:16px}
}
.no-js-message{color:red;font-weight:700;margin:0 40px;text-align:center}