<style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.6;
      color: #1f2933;
      background: #f5f7fa;
    }

    header {
      background: #102a43;
      color: #ffffff;
      padding: 48px 20px;
    }

    .container {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 20px;
    }

    nav {
      background: #ffffff;
      border-bottom: 1px solid #d9e2ec;
    }

    nav .container {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      padding-top: 14px;
      padding-bottom: 14px;
    }

    nav a {
      color: #102a43;
      text-decoration: none;
      font-weight: 600;
    }

    main {
      background: #ffffff;
      padding: 40px 0;
    }

    h1, h2, h3 {
      line-height: 1.25;
    }

    h1 {
      font-size: 2.2rem;
      margin: 0 0 16px;
    }

    h2 {
      margin-top: 40px;
      color: #102a43;
    }

    .lead {
      font-size: 1.15rem;
      max-width: 760px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
      margin-top: 24px;
    }

    .card {
      border: 1px solid #d9e2ec;
      border-radius: 10px;
      padding: 20px;
      background: #ffffff;
    }

    .card h3 {
      margin-top: 0;
    }

    a {
      color: #0b69a3;
    }

    .note {
      background: #eef8ff;
      border-left: 4px solid #0b69a3;
      padding: 16px 18px;
      margin: 28px 0;
    }

    footer {
      background: #102a43;
      color: #ffffff;
      padding: 28px 20px;
      font-size: 0.95rem;
    }

    footer a {
      color: #ffffff;
    }
  </style>