:root {
    --brand: #1e6091;
    --brand-dark: #144a72;
    --brand-soft: #e8f1f9;
    --ink: #1f2937;
    --muted: #5b6779;
}

body { font-family: 'Inter', -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: white; }

.nav-bar { background: white; border-bottom: 1px solid #eef1f4; }
.nav-bar .container { display: flex; align-items: center; padding: 12px 20px; gap: 24px; }
.nav-bar img { height: 54px; display: block; }
.nav-bar nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-bar nav a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav-bar nav a:hover { color: var(--brand); }
.btn-brand { background: var(--brand); color: #ffffff !important; border: none; padding: 9px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; font-size: 14px; display: inline-block; box-shadow: 0 2px 6px rgba(30,96,145,.25); }
.btn-brand:hover { background: var(--brand-dark); color: #ffffff !important; }
.btn-ghost { background: white; color: var(--brand); border: 1.5px solid var(--brand); padding: 8px 18px; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 14px; display: inline-block; }
.btn-ghost:hover { background: var(--brand-soft); color: var(--brand-dark); }

.hero { background: linear-gradient(135deg, #0f3a5e 0%, #1e6091 60%, #2c8bc4 100%); color: white; padding: 90px 0 110px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 24px 24px; opacity: .4; }
.hero .container { position: relative; z-index: 1; max-width: 880px; text-align: center; }
.hero .eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #c1ddf2; margin-bottom: 18px; }
.hero h1 { font-size: 54px; font-weight: 800; line-height: 1.1; margin-bottom: 22px; letter-spacing: -.02em; }
.hero p.lead { font-size: 19px; line-height: 1.55; color: #dbe9f5; max-width: 680px; margin: 0 auto 36px; }
.hero .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .actions .btn-brand { background: white; color: var(--brand-dark) !important; padding: 13px 28px; font-size: 15px; }
.hero .actions .btn-brand:hover { background: #eaf3fb; color: var(--brand-dark) !important; }
.hero .actions .btn-ghost { background: transparent; color: white; border-color: rgba(255,255,255,.5); padding: 12px 28px; font-size: 15px; }
.hero .actions .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: white; color: white; }

section { padding: 80px 0; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-head h2 { font-size: 36px; font-weight: 700; margin-bottom: 14px; letter-spacing: -.01em; }
.section-head p { color: var(--muted); font-size: 16px; line-height: 1.6; }

.features { background: #f8fafc; }
.feature { text-align: center; padding: 24px; }
.feature .icon { width: 64px; height: 64px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 30px; }
.feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.workflow .step { background: white; border: 1px solid #e6ebf1; border-radius: 14px; padding: 24px; position: relative; height: 100%; }
.workflow .step .n { position: absolute; top: -16px; left: 24px; width: 34px; height: 34px; background: var(--brand); color: white; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.workflow .step h4 { font-size: 15px; font-weight: 700; margin: 8px 0 8px; padding-right: 8px; }
.workflow .step p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; }
.workflow .step.cta { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: white; border: none; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.workflow .step.cta h4 { color: white; font-size: 18px; margin-top: 0; }
.workflow .step.cta p { color: #cbe1f1; margin-bottom: 14px; }
.workflow .step.cta a { color: white; text-decoration: underline; font-weight: 600; font-size: 14px; }

.contact { background: var(--brand-soft); padding: 60px 0; text-align: center; }
.contact h3 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.contact p { color: var(--muted); margin-bottom: 18px; }
.contact a { color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.contact a:hover { text-decoration: underline; }

footer.landing-footer { background: #0f3a5e; color: #c1ddf2; padding: 50px 0 30px; }
footer.landing-footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; align-items: start; }
footer.landing-footer h5 { color: white; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
footer.landing-footer a { color: #c1ddf2; text-decoration: none; display: block; font-size: 14px; line-height: 2; }
footer.landing-footer a:hover { color: white; }
footer.landing-footer .sponsors { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
footer.landing-footer .sponsors img { background: white; padding: 8px 12px; border-radius: 8px; height: 48px; }
footer.landing-footer .disclaimer { font-size: 12px; color: #9ec4e1; line-height: 1.6; border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; margin-top: 28px; text-align: center; }

@media (max-width: 900px) {
    footer.landing-footer .container { grid-template-columns: 1fr; }
    .hero h1 { font-size: 40px; }
}