:root { --navy: #101b35; --green: #08784e; --cream: #f7f5ef; --ink: #172033; --muted: #667085; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Arial, Helvetica, sans-serif; }
.topbar { min-height: 72px; padding: 0 7vw; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; }
.brand { color: #fff; text-decoration: none; font-size: 1.25rem; font-weight: 900; letter-spacing: .08em; }
nav { display: flex; gap: 22px; } nav a { color: #dce3ef; text-decoration: none; font-weight: 700; font-size: .9rem; }
.hero { min-height: 500px; padding: 100px 7vw 80px; background: linear-gradient(120deg, var(--cream) 0%, #e6f1ea 100%); }
.eyebrow { color: var(--green); font-weight: 900; letter-spacing: .15em; font-size: .75rem; }
h1, h2 { margin: 14px 0 22px; letter-spacing: -.035em; } h1 { max-width: 800px; font-size: clamp(3.2rem, 8vw, 6.5rem); line-height: .94; } h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1; }
.lead { max-width: 600px; font-size: 1.18rem; line-height: 1.55; color: var(--muted); margin-bottom: 34px; }
.button { display: inline-block; border: 0; border-radius: 7px; padding: 15px 21px; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.primary { color: #fff; background: var(--green); } .primary:hover { background: #05613e; }
.division-section { padding: 78px 7vw; background: #fff; }.division-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.division-card { border-top: 4px solid var(--green); padding: 18px 0; }.division-label { color: var(--green); font-size: .78rem; font-weight: 900; letter-spacing: .12em; }
ol { margin: 22px 0 0; padding-left: 24px; columns: 2; gap: 28px; } li { margin: 0 0 12px; line-height: 1.25; }
.access-section { margin: 60px 7vw; padding: 52px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; background: var(--navy); color: #fff; border-radius: 16px; }.access-copy p:not(.eyebrow) { max-width: 580px; color: #d4ddec; line-height: 1.55; }.small { font-size: .88rem; }
.login-card { padding: 28px; border-radius: 10px; background: #fff; color: var(--ink); display: grid; align-content: start; gap: 9px; }.login-card label { font-weight: 800; font-size: .9rem; margin-top: 7px; }.login-card input { width: 100%; padding: 13px; border: 1px solid #b8c0cf; border-radius: 6px; font: inherit; }.login-card button { margin-top: 13px; }.status { min-height: 1.25em; margin: 13px 0 0; line-height: 1.35; font-size: .9rem; }.status.error { color: #b42318; }.status.ok { color: #08784e; }
footer { padding: 30px 7vw; text-align: center; color: var(--muted); font-size: .85rem; }
@media (max-width: 720px) { .topbar { padding: 0 24px; }.hero, .division-section { padding: 68px 24px; }.division-grid, .access-section { grid-template-columns: 1fr; }.access-section { margin: 32px 24px; padding: 30px; gap: 25px; } ol { columns: 1; } }