*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;color:#14213d;line-height:1.6;background:#f7f9fc}
a{color:#0b5fa5}header{background:#0f2a4a;color:#fff;padding:14px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
header a{color:#fff;text-decoration:none;font-weight:600}.logo{font-size:22px}.wrap{max-width:1080px;margin:auto;padding:20px}
.hero{background:#fff;border-radius:14px;padding:28px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.hero h1{font-size:32px;line-height:1.25;margin:8px 0}.badge{display:inline-block;background:#e6f4ea;color:#137333;padding:4px 12px;border-radius:20px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:18px 0}
.card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.05);text-decoration:none;color:inherit;display:block}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1)}.card b{font-size:18px}
.toolbox{background:#fff;border-radius:14px;padding:22px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
input,select,textarea{width:100%;padding:10px;margin:6px 0;border:1px solid #cbd5e1;border-radius:8px;font-size:16px}
button{background:#0b5fa5;color:#fff;border:0;padding:11px 18px;border-radius:8px;font-size:16px;cursor:pointer;margin:6px 6px 6px 0}
button:hover{background:#084a82}.out{margin-top:12px;word-break:break-word}
.maker{background:#fff;border-radius:14px;padding:22px;display:flex;gap:16px;margin:22px 0;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.pt{width:64px;height:64px;min-width:64px;background:#0f2a4a;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px}
footer{background:#0f2a4a;color:#fff;padding:26px 20px;margin-top:26px}footer a{color:#cfe6ff}
nav.bread{font-size:14px;color:#555}.urdu{color:#333}
@media(max-width:600px){.hero h1{font-size:26px}.maker{flex-direction:column}}