*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#333}.navbar{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);position:fixed;top:0;left:0;right:0;z-index:1000}.nav-container{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.nav-logo h2{color:#1877f2;font-size:1.5rem;font-weight:700}.nav-menu{display:flex;gap:1rem}.btn{padding:.5rem 1.5rem;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .3s ease}.btn-primary{background:#1877f2;color:white}.btn-primary:hover{background:#166fe5}.btn-outline{background:transparent;color:#1877f2;border:1px solid #1877f2}.btn-outline:hover{background:#1877f2;color:white}.btn-large{padding:.75rem 2rem;font-size:1rem}.btn-facebook{background:#1877f2;color:white;width:100%;justify-content:center;display:flex;align-items:center;gap:.5rem}.btn-facebook:hover{background:#166fe5}.fb-icon{background:white;color:#1877f2;width:20px;height:20px;border-radius:50%;justify-content:center;font-weight:700;font-size:14px}.fb-icon,.hero{display:flex;align-items:center}.hero{margin-top:80px;padding:4rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:white;min-height:600px}.hero-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;grid-gap:4rem;gap:4rem;align-items:center}.hero-content h1{font-size:3rem;font-weight:700;margin-bottom:1rem;line-height:1.2}.hero-subtitle{font-size:1.2rem;margin-bottom:2rem;opacity:.9}.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap}.hero-image{display:flex;justify-content:center;align-items:center}.dashboard-preview{background:rgba(255,255,255,.95);border-radius:12px;padding:1.5rem;color:#333;box-shadow:0 8px 32px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:400px}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e0e0e0}.dashboard-header h3{font-size:1.2rem;font-weight:600;color:#333;margin:0}.status-indicator{color:#22c55e;font-size:.9rem;font-weight:500}.dashboard-stats{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem;margin-bottom:1.5rem}.stat-card{background:#f8f9fa;padding:1rem;border-radius:8px;text-align:center}.stat-number{font-size:1.5rem;font-weight:700;color:#1877f2;margin-bottom:.25rem}.stat-label{font-size:.8rem;color:#666;margin-bottom:.25rem}.stat-change{font-size:.75rem;font-weight:500}.stat-change.positive{color:#22c55e}.dashboard-chart{background:#f8f9fa;border-radius:8px;padding:1rem}.chart-bars{display:flex;align-items:flex-end;gap:.5rem;height:60px;justify-content:space-between}.bar{background:linear-gradient(0deg,#1877f2,#667eea);border-radius:2px;width:100%;min-height:8px;opacity:.8;transition:opacity .3s ease}.bar:hover{opacity:1}.features{padding:4rem 2rem;background:#f8f9fa}.container{max-width:1200px;margin:0 auto}.features h2{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#333}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:2rem;gap:2rem}.feature-card{background:white;padding:2rem;border-radius:12px;text-align:center;box-shadow:0 4px 6px rgba(0,0,0,.1);transition:transform .3s ease}.feature-card:hover{transform:translateY(-5px)}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-card h3{font-size:1.5rem;margin-bottom:1rem;color:#333}.feature-card p{color:#666;line-height:1.6}.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5)}.modal.show{display:flex;align-items:center;justify-content:center}.modal-content{background-color:white;padding:2rem;border-radius:12px;width:90%;max-width:400px;position:relative}.close{position:absolute;top:1rem;right:1rem;font-size:1.5rem;cursor:pointer;color:#666}.close:hover{color:#333}.modal-content h2{margin-bottom:2rem;text-align:center;color:#333}.success-banner{position:fixed;top:80px;left:0;right:0;background:#d4edda;color:#155724;text-align:center;padding:1rem;z-index:1500;border-bottom:1px solid #c3e6cb}@media (max-width:768px){.hero-container{grid-template-columns:1fr;gap:2rem}.hero-content h1{font-size:2rem}.nav-container{padding:1rem}.features h2{font-size:2rem}}