body {font-family: Arial, sans-serif; margin:0; background:#f7f9fc; color:#333;}
.container {max-width: 1100px; margin:auto; padding:20px;}
header {display:flex; justify-content:space-between; align-items:center; padding:10px 0;}
nav a {margin-left:15px; text-decoration:none; color:#333; font-weight:bold;}
.hero {display:flex; justify-content:space-between; align-items:center; min-height:70vh; padding:40px 0;}
.hero-left {max-width:50%;}
.hero-left .headline {font-size:2.5em; margin:0;}
.hero-left .accent {color:#2a7ae2;}
.hero-right {background:#fff; border:1px solid #ddd; padding:15px; border-radius:10px;}
.features {display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:20px;}
.card {background:#fff; padding:20px; border-radius:10px; box-shadow:0 2px 5px rgba(0,0,0,0.1);}
footer {text-align:center; padding:20px 0; margin-top:40px; border-top:1px solid #ddd;}
.monitor {position:fixed; bottom:80px; right:20px; width:280px; background:#1c1c1c; color:#fff; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.3); transition:all .3s ease; overflow:hidden;}
.monitor.collapsed {height:40px; width:40px; border-radius:50%; padding:0; overflow:hidden;}
.monitor.open {height:auto; width:280px;}
.topbar {background:#2c2c2c; padding:5px 10px; display:flex; align-items:center; justify-content:space-between;}
.circles {display:flex; gap:5px;}
.c {width:10px; height:10px; border-radius:50%; display:inline-block;}
.red{background:#ff5f56;} .yellow{background:#ffbd2e;} .green{background:#27c93f;}
.body {padding:10px;}
.launcher {position:fixed; bottom:20px; right:20px; width:50px; height:50px; cursor:pointer;}
.launcher img {width:100%; border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,0.3);}