* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
body {
    /* background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e); */
    background: linear-gradient(to right, #1a237e, #4a148c);
    font-family: Roboto, 'Assistant', Georgia, Arial, sans-serif, 'Montserrat', 'Verdana', Karantina;
    text-align: center;
    color: #ffffff;
}
h2 { font-size:30px; color:#ffffff; margin-bottom:20px; margin-top:10px; }
h3 { font-size:22px; color:#ffffff; margin-bottom:15px; }
a { text-decoration:none; cursor:pointer; font-size:24px; }
button { padding:0; outline:0; border:0; border-radius:15px; cursor:pointer; }
button:hover { will-change:transform; transform:scale(1.05); }
.dark { color:#2533c5; }
.darker { color:#1a237e; }

.hero {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent), url('img/ai_background.webp') center/cover no-repeat;
    padding: 20px; border-radius: 0 0 50px 50px;
    animation: fadeIn 1.5s ease-in-out;
}
.hero-title { font-size:50px; font-weight:bold; color:#ffcc00; margin-bottom:20px; text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5); animation:fadeInGlow 1s infinite alternate; }
.hero-content p { font-size:22px; font-weight:normal; max-width:70%; margin:15px auto; }
.hero-content .herop { font-size:24px; font-weight:bold; }
.slogan { font-size:22px; color:#FFF; margin-top:10px; margin-bottom:15px; }
.ailoveu-header { padding:5px; text-align:right; }
.ailoveu-header img { display:inline-block; padding:0; }
.icon { width:16px; height:16px; margin-left:10px; }
.social-share { margin-top:30px; }
.social-share-txt { margin-bottom:8px; }
.share-img { width:96px; height:32px; margin:0 8px; }
.hag-face-icon { border-radius:50px; width:64px; height:64px; }

.cta-button {
    background: linear-gradient(to right, #ffcc00, #ff8800);
    font-size: 24px;
    padding: 6px 15px;
    border: 1px solid #73AD21;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    color:#1a237e;
}
.cta-button:hover {
    background: linear-gradient(to right, #ff8800, #ff5500);
    will-change: transform;
    transform: scale(1.05);
    color:#FFF;
}
.cta-btn-link { margin:10px 12px; font-size:24px; font-weight:bold; color:#1a237e; }
.cta-btn-link:hover { color:#FFF; }

section {
    width: 86vw;
    max-width: 1000px;
    margin: 20px auto;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    font-size: 16px;
}

/* 🎨 Section Backgrounds */
.event-details, .testimonials, .faq-section, .whatsapp-group { background:#FFF; color:#1a237e; }
.bonuses { background:#ffcc80; color:#1a237e; animation: fadeIn 1.5s ease-in-out; }
.marketing ul { list-style:none; padding:0; }
.marketing li { font-size:18px; font-weight:bold; margin:10px 0; }
.event-details { animation: slideUp 1s ease-in-out; }
.event-details p { margin:12px 0; } 
.item {
    padding: 5px 15px;
    margin: 15px auto;
    border-radius: 20px;
    width: 80%;
    max-width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}
.item:hover { transform: scale(1.05); }
.faq { background: #ffc7e2; }
.bonus { background: rgba(255, 255, 255, 0.2); }
.testimonial, .video-item { background: #e3f2fd; }
.whatsapp-group p { margin-top:10px; }
.whatsapp-button { will-change:transform; position:fixed; bottom:20px; left:20px; padding:0; transition: transform 0.3s; }
.whatsapp-button:hover { transform: scale(1.1); }
.whatsapp-icon { margin: 0; border-radius: 15px; width:100px; height:32px; }

/* 🚀 Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInGlow { from { text-shadow: 2px 2px 10px rgba(255, 204, 0, 0.3); } to { text-shadow: 2px 2px 20px rgba(255, 204, 0, 0.9); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

.footer { background:#0D1321; color:#ffffff; text-align:center; padding:15px 20px; margin-top:30px; }
.footer p { margin-top:10px; }
.footer a { color:#FFD700; }
.footer .social-links a { font-size:24px; margin:0 10px; }

@media (min-width: 768px) {
    h3 { font-size: 26px; }
    section { width:70vw; margin:40px auto; font-size: 18px; }
    .marketing li { font-size:20px; }
    .whatsapp-icon { width:125px; height:40px; }
}