*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:#17283b;background:#f7f8fa;line-height:1.55}header{display:flex;justify-content:space-between;align-items:center;padding:18px 7%;background:#fff;border-bottom:1px solid #e7e9ee}header b{font-size:18px}header small{display:block;font-size:10px;letter-spacing:1.5px;color:#607080}nav{display:flex;gap:20px}a{text-decoration:none;color:#405164}.hero{padding:70px 7%;background:#eef5f1}.hero p,.panelhead p{font-size:12px;letter-spacing:2px;font-weight:bold;color:#2c7667}.hero h1{font-family:Georgia,serif;font-size:clamp(36px,6vw,64px);line-height:1.05;margin:10px 0 18px}.hero span{font-size:18px;color:#52606e}.cards{max-width:1300px;margin:auto;padding:50px 7%;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cards article{background:#fff;border:1px solid #e6e8eb;border-radius:18px;padding:26px;display:flex;flex-direction:column;min-height:330px}.cards i{font-size:30px;font-style:normal}.cards h2{font-family:Georgia,serif;font-size:23px}.cards p{flex:1;color:#596777}button{border:0;border-radius:999px;padding:13px 18px;background:#e99a1a;color:#1f2730;font-weight:bold;cursor:pointer}#panel{display:none;max-width:980px;margin:0 auto 50px;background:#fff;border:1px solid #e4e7eb;border-radius:18px;padding:28px}.panelhead{display:flex;justify-content:space-between;border-bottom:1px solid #e9ecef;margin-bottom:20px}.panelhead h2{font-family:Georgia,serif;margin-top:0}.x{background:transparent;color:#61707f;font-size:30px;padding:0}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.field{display:flex;flex-direction:column;gap:6px;font-weight:bold}.field input{padding:12px;border:1px solid #ccd4dc;border-radius:8px;font-size:15px}.result{margin-top:20px;padding:20px;background:#edf5f1;border-radius:12px}.result strong{font-size:24px;color:#173d45}#note{padding:42px 7%;background:#fff7e9;border-top:1px solid #f2dfb7}#note h2{font-family:Georgia,serif}footer{padding:24px 7%;background:#183447;color:#dbe7e7;font-size:13px}@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){nav{display:none}.cards{grid-template-columns:1fr;padding:35px 5%}.hero{padding:55px 5%}.grid{grid-template-columns:1fr}#panel{margin:0 5% 35px}}