*{box-sizing:border-box}body{margin:0;background:#f6f8fc;color:#101828;font-family:Inter,Arial,sans-serif}a{text-decoration:none;color:inherit}
.nav{height:70px;background:#fff;border-bottom:1px solid #e6e8ef;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;z-index:10}.logo{font-size:22px;font-weight:800}.logo b{color:#5b5cf0}.navlinks{display:flex;gap:25px;color:#667085;font-size:14px}
.hero{text-align:center;padding:65px 5% 42px;background:linear-gradient(#fff,#f6f8fc)}.badge{display:inline-block;border:1px solid #dedfff;background:#f8f8ff;color:#5556df;border-radius:30px;padding:7px 12px;font-size:11px;font-weight:800}.hero h1{font-size:clamp(38px,6vw,65px);line-height:1.05;letter-spacing:-2.5px;max-width:850px;margin:18px auto 14px}.hero p,.toolhero p{color:#667085;line-height:1.7;max-width:700px;margin:auto}.search{max-width:620px;margin:25px auto}.search input{width:100%;height:52px;border:1px solid #e0e3eb;border-radius:14px;padding:0 17px;font-size:15px;outline:0}.wrap{max-width:1200px;margin:auto;padding:25px 5% 75px}.section{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.section h2{margin:0}.section p{margin:0;color:#667085;font-size:13px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px;min-height:160px;display:flex;flex-direction:column;transition:.2s}.card:hover{transform:translateY(-3px);box-shadow:0 15px 35px #10182812;border-color:#d5d6ff}.ico{width:42px;height:42px;background:#f0efff;color:#5758df;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:11px;margin-bottom:15px}.card h3{font-size:16px;margin:0 0 7px}.card p{font-size:13px;color:#667085;line-height:1.5;margin:0}.go{margin-top:auto;padding-top:15px;color:#5758df;font-size:13px;font-weight:800}
.toolhero{background:#fff;padding:42px 5%;border-bottom:1px solid #e8e9ef}.toolhero h1{font-size:42px;letter-spacing:-1.5px;margin:13px 0 8px}.back{font-size:13px;color:#5758df;font-weight:800}.toolwrap{max-width:900px;margin:auto;padding:30px 5% 75px}.box{background:#fff;border:1px solid #e2e5eb;border-radius:22px;padding:25px;box-shadow:0 15px 45px #1018280d}.drop{border:2px dashed #cfd2ff;background:#fafaff;border-radius:16px;text-align:center;padding:38px 15px}.drop strong{display:block}.drop small{display:block;color:#667085;margin:8px 0 17px}.btn{border:0;background:#5b5cf0;color:#fff;border-radius:10px;padding:11px 16px;font-weight:800;cursor:pointer}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.gray{background:#eef0f6;color:#344054}.preview{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.preview img{max-width:100%;max-height:330px;border:1px solid #e2e5eb;border-radius:12px}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-top:18px}.field{display:flex;flex-direction:column;gap:6px;min-width:150px;flex:1}.field label{font-size:12px;font-weight:800;color:#475467}.field input,.field select,.field textarea{width:100%;border:1px solid #dfe3ea;border-radius:10px;padding:10px;font:inherit}.field textarea{min-height:220px;resize:vertical}.result{margin-top:18px;background:#f7f8fa;border:1px solid #e3e6eb;border-radius:11px;padding:13px;color:#475467;line-height:1.6}.notice{font-size:12px;color:#667085;margin-top:12px}.footer{background:#fff;border-top:1px solid #e6e8ef;padding:28px 5%;color:#667085;font-size:13px}.footin{max-width:1200px;margin:auto;display:flex;justify-content:space-between}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.navlinks{display:none}}@media(max-width:560px){.grid{grid-template-columns:1fr}.hero{padding-top:45px}.hero h1{font-size:40px}.toolhero h1{font-size:34px}.box{padding:17px}.footin{flex-direction:column;gap:8px}}