:root { --deep-blue: #1F4E79; --olive: #6B8E23; --accent: #FFD24C; --dark: #0F2A43; --bg: #f7fafc; --text: #1a2a3a; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--deep-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.header { background: white; border-bottom: 1px solid #e7eef5; position: sticky; top: 0; z-index: 10; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.nav { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { height:36px; width:auto; }
.brand-title { font-weight:800; font-size: 1.05rem; color: var(--dark);}
.nav-links a { margin: 0 8px; font-weight: 600; }
.hero { background: linear-gradient(180deg, #ffffff 0%, #f2f7fb 100%); padding: 36px 0 24px; }
.hero h1 { font-size: clamp(26px, 4vw, 40px); margin:0; color: var(--dark);}
.hero p { font-size: 1.05rem; line-height: 1.6; color: #3a4a5a; }
.hero-inner { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; align-items:center; }
.cta-row { display:flex; gap:12px; flex-wrap: wrap; margin-top: 12px; }
.btn { display:inline-block; padding: 11px 14px; border-radius: 10px; font-weight:700; border:2px solid var(--deep-blue); color:white; background: var(--deep-blue);}
.btn.alt { background: transparent; color: var(--deep-blue);}
.hero-card { background: white; border:1px solid #e6eef5; border-radius: 14px; padding: 16px; box-shadow: 0 8px 24px rgba(20,60,120,0.06);}
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 12px; }
.stat { background:white; border:1px solid #e6eef5; border-radius:12px; padding:16px; text-align:center; }
.stat h3 { margin:5px 0 0; font-size: 1.3rem; color: var(--dark);}
.stat span { display:block; color:#5a6a7a; font-size: 0.9rem; }
.section { padding: 24px 0; }
.card-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.card { background:white; border:1px solid #e6eef5; border-radius:12px; padding:16px; }
.card h4 { margin: 0 0 6px 0; }
.badge { display:inline-block; padding:4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef5ff; color: var(--deep-blue);}
.searchbar { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; }
.searchbar input, .searchbar select { padding:10px; border:1px solid #d7e2ee; border-radius:10px; background:white; }
.footer { background:#0f2337; color:#eaf2ff; padding:22px 0; margin-top: 26px; }
.footer a { color:#eaf2ff; text-decoration: underline; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid #e6eef5; padding:10px; text-align:left; }
.notice { background:#fffbe6; border:1px solid #ffe18a; color:#614a00; padding:10px 12px; border-radius:10px; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2,1fr); } .card-grid { grid-template-columns: 1fr; } }