* {margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', sans-serif;}
body {background:#f9fafb; color:#333; overflow-x:hidden;}

.whatsappduvida {
    right: 30px;
    bottom: 20px;
    position: fixed;
    z-index: 9999;
    width: 70px;
    height: 70px;
    border-radius: 100% !important;
    background-image: url(https://karaokeapp.com.br/img/wpp.png);
    background-size: 100%;
    background-repeat: no-repeat;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.5);
}
/* ===== Hero Section ===== */
header {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 2rem;
  background-image: url(https://karaokeapp.com.br/img/background.webp);
  background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: fill;
}
header video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: -1;
    background-image: url(https://karaokeapp.com.br/img/background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
header h1 {font-size:3rem; font-weight:700; animation: fadeDown 1s ease;}
header p {
    font-size: 2rem;
    margin: 1rem 0 1rem;
    animation: fadeUp 1.2s ease;
    text-shadow: 2px 1px black;
    font-weight: bold;
}
.btn-store {display:inline-block; margin:0.5rem; padding:0.9rem 1.6rem; border-radius:50px; background:#fff; color:#111; font-weight:600; text-decoration:none; transition:0.3s; box-shadow:0 4px 12px rgba(0,0,0,0.2);}
.btn-store:hover {transform:scale(1.05);}
@keyframes fadeDown {from{opacity:0; transform:translateY(-30px);} to{opacity:1; transform:translateY(0);}}
@keyframes fadeUp {from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);}}
/* ===== Sections ===== */
section {padding:5rem 2rem; max-width:1200px; margin:auto;}
h2 {text-align:center; font-size:2rem; margin-bottom:3rem; font-weight:700;}
.features {display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem;}
.feature {background:#fff; border-radius:20px; padding:2rem; text-align:center; box-shadow:0 10px 25px rgba(0,0,0,0.08); transition:0.3s;}
.feature:hover {transform:translateY(-8px); box-shadow:0 12px 30px rgba(0,0,0,0.12);}
.feature h3 {margin:1rem 0; color:#3b82f6; font-size:1.3rem;}
.feature p {font-size:0.95rem; color:#555;}
.content-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem;}
.content-card {background:#fff; border-radius:18px; padding:1.25rem 1.25rem 1.1rem; box-shadow:0 8px 22px rgba(0,0,0,0.06); transition:transform .2s, box-shadow .2s;}
.content-card:hover {transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,0.12);}
.content-card h3 {font-size:1.05rem; margin-bottom:.35rem; color:#111;}
.content-card p {font-size:0.9rem; color:#555;}
.badge {display:inline-block; font-size:.72rem; padding:.25rem .55rem; border-radius:999px; background:#eef2ff; color:#4f46e5; margin-bottom:.6rem;}
.testimonials {display:flex; flex-wrap:wrap; gap:2rem; justify-content:center;}
.testimonial {flex:1 1 320px; background:#fff; border-radius:20px; padding:2rem; box-shadow:0 8px 20px rgba(0,0,0,0.08); position:relative;}
.testimonial::before {content:'\201C'; font-size:4rem; color:#9333ea; position:absolute; top:-10px; left:15px; opacity:0.2;}
.testimonial p {font-style:italic; margin-bottom:1.2rem;}
.testimonial h4 {color:#3b82f6; font-weight:600;}
.cta {
    text-align: center;
    background: linear-gradient(135deg, #3b82f6, #9333ea);
    color: #fff;
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
}
.cta h2 {font-size:2.2rem; margin-bottom:1.5rem;}
.cta .btn-store {background:#fff; color:#111;}
footer {text-align:center; padding:2rem; background:#111; color:#eee; font-size:0.9rem;}
footer a {color:#60a5fa; text-decoration:none; margin:0 5px;}
/* Smooth scroll */
html {scroll-behavior:smooth;}
/* On mobile, force center */
 @media (max-width: 480px) {
    .whatsappduvida {
        right: 10px;
        bottom: 10px;
    }
}