:root {
  --bg: #0f172a;           /* slate-900 */
  --panel: #0b2239;        /* deep blue */
  --brand: #1e5aa6;        /* brand blue */
  --brand-2: #ffd000;      /* golden accent */
  --text: #e2e8f0;         /* slate-200 */
  --muted: #94a3b8;        /* slate-400 */
  --ok: #22c55e;           /* green-500 */
  --warn: #f59e0b;         /* amber-500 */
  --err: #ef4444;          /* red-500 */
}
* { 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(--text); background: var(--bg); }

.container { max-width: 1120px; margin: 0 auto; padding: 1rem; }
header { background: linear-gradient(180deg, #0d2950 0%, #0b2239 100%); border-bottom: 1px solid #132b55; position: sticky; top: 0; z-index: 10; }
.navbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display:flex; align-items:center; gap:.75rem; font-weight: 700; font-size: 1.25rem; }
.brand .mark { width: 36px; height: 36px; background: var(--brand); border-radius: 6px; display:inline-flex; align-items:center; justify-content:center; color: #fff; font-weight:800; }
nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; padding:0; margin:0; }
nav a { color: var(--text); text-decoration: none; padding: .5rem .75rem; border-radius: .375rem; }
nav a:hover { background: #12315e; }

.hero { display:grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; padding: 2rem 0; }
.hero .panel { background: #0b2036; border: 1px solid #142d56; border-radius: 12px; padding: 1.25rem; }
.hero h1 { margin:.2rem 0 .5rem; font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem); }
.hero p { color: var(--muted); line-height: 1.6; }
.hero .cta { margin-top: 1rem; display:flex; gap:.75rem; flex-wrap: wrap; }
.button { background: var(--brand); color: white; padding: .75rem 1rem; border: none; border-radius: .5rem; cursor: pointer; font-weight: 600; text-decoration:none; display:inline-block; }
.button.secondary { background: transparent; border: 1px solid #264b86; }
.button:hover { filter: brightness(1.05); }

.grid { display:grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: #0b2036; border: 1px solid #142d56; border-radius: 12px; overflow: hidden; }
.card img { width: 100%; height: 180px; object-fit: cover; display:block; }
.card .content { padding: 1rem; }
.card h3 { margin: .2rem 0 .5rem; }
.badge { display:inline-block; padding:.25rem .5rem; border:1px solid #1f3f74; border-radius: 999px; font-size:.75rem; color:#cbd5e1 }

section { padding: 2rem 0; }
section h2 { margin: 0 0 1rem; font-size: 1.5rem; }
.lead { color: var(--muted); }

form { display:grid; gap: .75rem; max-width: 680px; }
label { font-weight:600; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea { width: 100%; padding: .75rem; border-radius: .5rem; border: 1px solid #234777; background: #061628; color: var(--text); }
input:focus, textarea:focus { outline: 2px solid #2a5db0; border-color:#2a5db0; }
small.hint { color: var(--muted); }
.checkline { display:flex; gap:.5rem; align-items: flex-start; }

.table-like { background:#081d32; border:1px solid #122e57; border-radius:12px; padding:1rem; }
.footer { margin-top: 2rem; padding: 2rem 0; color: #9fb3c8; border-top: 1px solid #152f59; background: #0a1e34; }
.footer a { color: #cfe1ff; }

/* Modal */
.modal { position: fixed; inset: 0; display:none; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.modal.show { display:flex; }
.modal .box { width:min(560px,92vw); background:#09203a; border:1px solid #14305a; border-radius:12px; padding:1rem 1.25rem; }
.modal .title { font-weight:700; margin-bottom: .25rem; }
.modal .actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top: .75rem; }

/* Responsive header */
.menu-toggle { display:none; }
@media (max-width: 800px){
  nav ul { display:none; }
  nav ul.open { display:flex; flex-direction:column; width:100%; }
  .menu-toggle { display:inline-flex; background:transparent; border:1px solid #234777; color:#e2e8f0; border-radius:.5rem; padding:.5rem .75rem; }
}