*{box-sizing:border-box}body{margin:0;font-family:Arial;color:#172033}header{padding:20px 5%;display:flex;gap:25px;align-items:center;border-bottom:1px solid #eee}.logo{font-size:28px;font-weight:bold}.logo b{color:#e51b2b}.logo small{display:block;font-size:11px;color:#777;font-weight:normal}header input{flex:1;padding:14px;border:1px solid #ddd;border-radius:8px}header a{color:#e51b2b}nav{padding:15px 5%;border-bottom:1px solid #eee}.hero{margin:25px 5%;padding:45px 7%;border-radius:14px;background:#22256c;color:#fff}.hero h1{font-size:40px}main{padding:25px 5%}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}article,.panel{border:1px solid #eee;border-radius:10px;padding:15px}article small,article strong{display:block;margin:8px 0}.pic{height:160px;background:#f5f6fa;display:flex;align-items:center;justify-content:center;font-size:70px;border-radius:8px}article strong{color:#e51b2b;font-size:20px}button{background:#e51b2b;color:#fff;border:0;border-radius:6px;padding:10px;cursor:pointer}.panel{margin:20px 0}.panel input{padding:12px;margin:5px;border:1px solid #ddd;border-radius:6px}.row{padding:12px;border-bottom:1px solid #eee}.row button{float:right;background:#ffecef;color:#d7192a}footer{margin-top:40px;padding:30px 5%;background:#101d36;color:#fff}@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:28px}header{flex-wrap:wrap}}