:root{--brand:#0a6efd;--ink:#1d2939;--muted:#667085;--bg:#f8fafc;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);}
a{color:var(--brand);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
nav{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:10}
nav .container{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.brand{font-weight:700;letter-spacing:.2px}
.menu a{margin:0 12px;padding:8px 10px;border-radius:10px}
.menu a.active,.menu a:hover{background:#eef2ff}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;margin:20px 0 28px}
.hero img{width:100%;height:auto;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.08)}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:0 8px 22px rgba(0,0,0,.04)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
h1{font-size:2rem;margin:.2rem 0 1rem}
h2{font-size:1.4rem;margin:1.2rem 0 .4rem}
footer{margin-top:40px;padding:16px 0;border-top:1px solid #e5e7eb;color:var(--muted);background:#fff}
figure{margin:0}
figcaption{font-size:.9rem;color:var(--muted);margin-top:6px}
button,.btn{background:var(--brand);color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;box-shadow:0 2px 8px rgba(10,110,253,.2)}
input,textarea{width:100%;padding:10px 12px;border:1px solid #d0d5dd;border-radius:10px;font-size:1rem}
textarea{min-height:140px}
label{display:block;font-size:.95rem;color:var(--muted);margin:8px 0 6px}
.placeholder{width:100%;height:180px;border:2px dashed #d0d5dd;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#999;font-size:.9rem}
.img-75{max-width:75%;margin:auto;display:block}