@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
:root{--bg:#f7f8fa;--panel:#ffffff;--ink:#222831;--muted:#5c6670;--accent:#5a7ca5;--line:#e5e9ef;--shadow:0 10px 24px rgba(0,0,0,.06);--radius:16px}
*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--ink);font-family:'Poppins',sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:'Montserrat',sans-serif}
.header{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg,#ffffff,#f3f5f7);border-bottom:1px solid var(--line)}
.nav{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px}.brand__logo{width:40px;height:40px;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow);color:var(--accent);font-weight:700}
.brand__name{font-weight:700;color:#2a2f36}
.menu{display:flex;gap:18px}.menu a{color:#2f3640;text-decoration:none;font-weight:600;padding:10px 12px;border-radius:10px}.menu a:hover{background:#edf0f4}
.hamburger{display:none;cursor:pointer;padding:8px 10px;border-radius:10px;background:#edf0f4}
.hero{padding:56px 16px}.wrap{max-width:1120px;margin:0 auto}
.hero__card{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;border:1px solid var(--line)}
.hero__title{font-size:2.2rem}.hero__subtitle{color:var(--muted);margin:10px 0 16px}
.pill{display:inline-block;background:#e8edf3;color:#2d3a4a;padding:7px 12px;border-radius:999px;font-weight:600;margin-bottom:10px}
.btn{border:0;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer;background:var(--accent);color:#fff;box-shadow:var(--shadow);transition:.2s}
.btn--ghost{background:#fff;color:var(--accent);border:2px solid var(--accent)}.btn:hover{transform:translateY(-2px)}
.section{padding:28px 16px}.grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);border:1px solid var(--line);min-height:140px;transition:.2s}.card:hover{transform:translateY(-3px)}
.badge{display:inline-block;background:#eef2f6;color:#4d5966;padding:4px 10px;border-radius:999px;font-size:.82rem;margin-bottom:8px}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.table th,.table td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--line)}.table th{background:#f3f6f9;font-weight:700}.table tr:last-child td{border-bottom:0}
.footer{background:#f0f2f5;border-top:1px solid var(--line);color:#6b7480;text-align:center;padding:18px;margin-top:40px}
.form{max-width:700px;margin:0 auto;background:#fff;padding:20px;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line)}
.input,.textarea{width:100%;padding:12px 14px;border-radius:10px;border:2px solid #e6ebf1;background:#fff;margin:8px 0;outline:none}
.input:focus,.textarea:focus{border-color:var(--accent)}.textarea{min-height:120px;resize:vertical}
@media (max-width:900px){.hero__card{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.menu{display:none}.hamburger{display:block}.nav.open .menu{display:flex;flex-direction:column;gap:8px;background:#eef2f6;padding:10px;border-radius:10px;margin-top:10px}}