*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#1f2328;background:#fff;line-height:1.6}
.container{max-width:960px;margin:0 auto;padding:16px}
h2 { margin-top: 24px; font-size: 1.25rem; }
.header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eaecef}
.header .brand{font-weight:700;color:#111;text-decoration:none;display:flex;align-items:center}
.header .brand .logo{display:block;height:28px}
.header nav a{margin-left:16px;color:#24292f;text-decoration:none}
.header nav a.active,.header nav a:hover{color:#0969da}
.hero{padding:32px 0}
.hero > h2{margin-top:24px}
.hero #hero-anim{position:relative;margin:8px 0 16px;border:1px solid #eaecef;border-radius:10px;overflow:hidden}
.hero #hero-anim .label{display:none}
.anim-caption{margin-top:6px;background:#dcf8c6;color:#075e54;font-weight:700;font-size:12px;padding:4px 8px;border-radius:12px;display:inline-block}
.wa-sim{position:relative;display:flex;height:260px;background:#e7f3ea}
.wa-sim .left{width:36%;border-right:1px solid #eaecef;padding:10px;display:flex;flex-direction:column;gap:8px; padding-top:40px;}
.wa-sim .left .chat{height:36px;border:1px solid #b7e1c0;border-radius:8px;background:#fff;position:relative}
.wa-sim .left .chat::after{content:attr(data-name);position:absolute;left:10px;top:8px;font-size:12px;color:#333}
.wa-sim .left .chat.active{outline:2px solid #34b7f1}
.wa-sim .right{flex:1;display:flex;flex-direction:column}
.wa-sim .right .header{height:44px;border-bottom:1px solid #cde9d5;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#dcf8c6}
.wa-sim .right .header .dots{opacity:.7}
.wa-sim .right .header .dots.pulse{animation:pulse 0.8s infinite}
.wa-sim .right .pane{flex:1;display:flex;align-items:center;justify-content:center;color:#2f4f3a;font-size:13px;position:relative}
.wa-sim .right .pane .adv-menu{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:70%;background:#fff;border:1px solid #b7e1c0;border-radius:8px;padding:8px}
.wa-sim .right .pane .adv-menu .row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-bottom:1px solid #eef6f0}
.wa-sim .right .pane .adv-menu .row:last-child{border-bottom:none}
.wa-sim .right .pane .adv-menu .row .ico{margin-right:6px}
.wa-sim .right .pane .adv-menu .row.switch .toggle{width:34px;height:18px;border-radius:20px;background:#e0e0e0;position:relative}
.wa-sim .right .pane .adv-menu .row.switch .toggle::after{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;left:2px;top:2px;transition:left .25s}
.wa-sim .right .pane .adv-menu.on .row.switch .toggle{background:#25D366}
.wa-sim .right .pane .adv-menu.on .row.switch .toggle::after{left:18px}
.wa-sim .right .pane .menu-dropdown{position:absolute;top:50px;right:12px;background:#fff;border:1px solid #b7e1c0;border-radius:8px;padding:4px 0;min-width:140px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.wa-sim .right .pane .menu-dropdown div{padding:8px 12px;font-size:13px;border-bottom:1px solid #eef6f0}
.wa-sim .right .pane .menu-dropdown div:last-child{border-bottom:none}
.wa-sim .right .pane .menu-dropdown div:first-child{font-weight:600}
.wa-sim .cursor{position:absolute;width:14px;height:14px;background:#111;border-radius:50%;box-shadow:0 0 0 2px #fff;transform:translate(8px,8px);transition:transform .35s ease;z-index:10}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:rgba(37,211,102,0.28);color:#075e54;font-weight:800;font-size:20px;opacity:0;pointer-events:none;transition:opacity .3s;text-shadow:0 1px 2px rgba(0,0,0,0.15)}
.overlay.show{opacity:1}
.overlay .sparkles{position:relative;height:40px;margin-bottom:10px}
.overlay .sparkle{position:absolute;font-size:24px;animation:sparkle 2s ease-in-out infinite}
.overlay .sparkle:nth-child(1){left:-30px;top:0;animation-delay:0s}
.overlay .sparkle:nth-child(2){left:30px;top:-10px;animation-delay:0.5s}
.overlay .sparkle:nth-child(3){left:-20px;top:20px;animation-delay:1s}
.overlay .sparkle:nth-child(4){left:20px;top:15px;animation-delay:1.5s}
@keyframes pulse{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}
@keyframes sparkle{0%{transform:scale(0) rotate(0deg);opacity:0}50%{transform:scale(1) rotate(180deg);opacity:1}100%{transform:scale(0) rotate(360deg);opacity:0}}
.lead{font-size:1.125rem;color:#3d424a}
.cta-buttons{display:flex;gap:12px;margin:16px 0}
.button{display:inline-block;padding:10px 16px;border:1px solid #d0d7de;border-radius:8px;color:#24292f;text-decoration:none;background:#fff}
.button.primary{background:#0969da;color:#fff;border-color:#0969da}
.button.primary:hover{background:#0759b8}
.note{color:#6e7781;font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{border:1px solid #eaecef;border-radius:10px;padding:16px;background:#fff}
.card h3{margin-top:0}
.faq details{margin-bottom:10px}
.footer{border-top:1px solid #eaecef;margin-top:24px;padding-top:16px;color:#6e7781}
label{display:block;margin:8px 0 6px;font-weight:600}
input,textarea{width:100%;padding:10px;border:1px solid #d0d7de;border-radius:6px;font:inherit}
@media (max-width: 768px) {
    .header nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        border-top: 1px solid #eaecef;
        z-index: 100;
    }
    .header nav.active {
        display: flex;
    }
    .header .menu-icon {
        display: block;
        cursor: pointer;
    }
    .grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 769px) {
    .header .menu-icon {
        display: none;
    }
}
.menu-icon div {
    width: 25px;
    height: 3px;
    background-color: #1f2328;
    margin: 5px 0;
}