:root {
  --navy: #003662;
  --charcoal: #36454F;
  --gold: #C2A14D;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:#fff; color:var(--charcoal); font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a { color: var(--navy); text-decoration: none; }
.container { max-width: 1040px; margin: 0 auto; padding: 20px; }

header { border-bottom: 4px solid var(--gold); }
.brand { display:flex; align-items:center; gap:14px; padding: 18px 0; }
.brand img { height: 54px; }
.brand-tag { color: var(--gold); font-weight:700; font-size: 16px; }

.hero { display:grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items:center; padding: 24px 0; }
.hero h1 { margin:0; color: var(--navy); font-size: 40px; line-height:1.15; }
.hero p { font-size:18px; line-height:1.6; margin: 10px 0 0; }
.hero .cta { display:inline-block; margin-top: 14px; background: var(--navy); color:#fff; border:2px solid var(--gold); padding:12px 18px; border-radius:8px; font-weight:700; }

.section-title { color: var(--navy); font-size: 22px; margin: 26px 0 10px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.card { border:1px solid #e5e7eb; border-radius:10px; padding:14px; background:#fff; }
.card h3 { margin: 6px 0 6px; color: var(--navy); }

.banner { margin: 10px 0 4px; border:1px solid var(--gold); border-radius: 10px; overflow:hidden; }
.banner img { width:100%; height:auto; display:block; }

.footer { margin-top: 28px; border-top:1px solid #e5e7eb; padding: 14px 0; font-size: 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }