:root{
  --brand: #1F3A5F;
  --accent: #A1C7FF;
  --accent2: #2AA198;
  --n900: #0B0E14;
  --n700: #2A2F3A;
  --n400: #7C8799;
  --n200: #D7DFEA;
  --n100: #EEF3FA;
  --white: #FFFFFF;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--n900); background: var(--white); }
img { max-width:100%; height:auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.header { position: sticky; top:0; z-index: 1000; background: rgba(255,255,255,0.9); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--n200); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:150px; height:auto; }

.nav { display:flex; gap:14px; align-items:center; }
.nav a { padding:10px 14px; border-radius: 10px; }
.nav a.active, .nav a:hover { background: var(--n100); }

.btn { display:inline-block; padding:12px 18px; border-radius: 12px; background: var(--brand); color: var(--white); box-shadow: var(--shadow); transition: transform .1s ease; }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn.outline { background: var(--white); border:1px solid var(--brand); color: var(--brand); }

.hero { background: linear-gradient(160deg, var(--n100), var(--white)); border-bottom:1px solid var(--n200); }
.hero-content { display:grid; grid-template-columns: repeat(2,1fr); gap:40px; padding: 64px 0; align-items:center; }
.hero .card { background: var(--white); border:1px solid var(--n200); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }

.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }

.section { padding: 56px 0; }
.section h2 { font-size: 32px; margin: 0 0 16px 0; }
.muted { color: var(--n700); }

.card { background: var(--white); border:1px solid var(--n200); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.badge { display:inline-block; padding:6px 10px; background: var(--n100); color: var(--n700); border-radius:999px; font-size: 12px; }

.footer { background: var(--n100); border-top:1px solid var(--n200); }
.footer-inner { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:24px; padding: 40px 0; }
.footer a { color: var(--n700); }
.copy { border-top: 1px solid var(--n200); padding: 16px 0; color: var(--n700); font-size: 14px; }

.topbar { background: var(--brand); color: var(--white); font-size: 14px; padding: 8px 0; text-align:center; }
.announce { color: var(--white); }

.cta-strip { display:flex; gap:12px; align-items:center; }
.icon { width:20px; height:20px; display:inline-block; background: var(--accent2); border-radius:6px; margin-right:6px; }

.hero-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.hero-list li { display:flex; align-items:center; gap:10px; }
.hero-list .dot { width:10px; height:10px; background: var(--accent2); border-radius:999px; }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { border:1px solid var(--n200); padding:12px; text-align:left; }
.table th { background: var(--n100); }

.notice { background: #FFFCE8; border:1px solid #F6E27A; padding: 12px 14px; border-radius: 8px; }

@media (max-width: 960px){
  .hero-content { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .nav { display:none; }
  .mobile-nav-btn { display:inline-block; }
}
@media (min-width: 961px){
  .mobile-nav-btn { display:none; }
}