body {font-family: Arial, sans-serif; background: #f7f9fc; margin: 0; padding: 0;}
.header {background: #004aad; color: #fff; text-align: center; padding: 1rem;}
.logo {height: 50px;}
.hero {text-align: center; padding: 2rem; background: linear-gradient(135deg,#004aad,#0077ff); color:#fff;}
.hero .arrow-gif {width: 60px; margin: 10px auto; display: block;}
.btn {display:inline-block; background:#f9b234; color:#000; padding:10px 20px; border-radius:6px; text-decoration:none; font-weight:bold;}
.btn:hover {background:#ffc94b;}
.btn-gif {background-image:url('assets/button.gif'); background-size:cover; color:#fff;}
.article, .features, .faq, .cta {max-width:900px; margin:auto; padding:1rem; text-align:center;}
.loading-gif {width:20px; vertical-align:middle; margin-right:5px;}
/* Slider */
.slider {position: relative; max-width: 900px; margin: 20px auto; overflow: hidden; border-radius: 10px;}
.slides img {width: 100%; display: none;}
.slides img.active {display: block;}
.prev, .next {position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; border: none; padding: 10px; cursor: pointer; font-size: 24px; border-radius: 50%;}
.prev {left: 10px;}
.next {right: 10px;}
.dots {text-align: center; position: absolute; bottom: 10px; width: 100%;}
.dot {display: inline-block; height: 12px; width: 12px; margin: 0 5px; background: #bbb; border-radius: 50%; cursor: pointer;}
.dot.active {background: #004aad;}