
    :root {
      --brand: #0b5cab;
      --brand-dark: #083d74;
      --ink: #132033;
      --muted: #546376;
      --line: #d9e3ef;
      --soft: #f4f8fc;
      --accent: #eaf3ff;
      --card: #ffffff;
      --ok: #0e7a54;
      --warn: #a45a06;
      --shadow: 0 14px 34px rgba(10, 43, 79, 0.08);
      --radius: 18px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--ink);
      background: linear-gradient(180deg, #eef4fb 0%, #f8fbfe 160px, #f4f8fc 100%);
      line-height: 1.75;
    }
    a { color: var(--brand); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 28px 18px 60px;
    }
    .hero {
      background: linear-gradient(135deg, #0b5cab 0%, #0a427c 55%, #082f5d 100%);
      color: #fff;
      border-radius: 26px;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .hero::after {
      content: "";
      position: absolute;
      right: -90px;
      top: -90px;
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
      pointer-events: none;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.35fr 0.95fr;
      gap: 24px;
      padding: 34px;
      align-items: center;
    }
    .eyebrow {
      display: inline-block;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 14px;
    }
    h1, h2, h3 { line-height: 1.2; }
    h1 {
      font-size: 40px;
      margin: 0 0 16px;
      letter-spacing: -0.02em;
    }
    .hero p {
      font-size: 17px;
      margin: 0 0 16px;
      color: rgba(255,255,255,0.92);
      max-width: 760px;
    }
    .hero-points {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
    }
    .hero-points li {
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px;
      padding: 9px 12px;
      font-size: 13px;
    }
    .hero-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 22px;
      padding: 18px;
      backdrop-filter: blur(8px);
    }
    .metric-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }
    .metric {
      background: rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 14px;
      min-height: 90px;
    }
    .metric strong {
      display: block;
      font-size: 24px;
      margin-bottom: 6px;
    }
    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 20px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 18px;
      border-radius: 999px;
      font-weight: 700;
      border: 1px solid transparent;
      transition: 0.2s ease;
    }
    .btn-primary {
      background: #fff;
      color: var(--brand-dark);
    }
    .btn-secondary {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,0.32);
    }
    .btn-blue {
      background: var(--brand);
      color: #fff;
    }
    .btn-outline {
      border-color: var(--line);
      color: var(--brand-dark);
      background: #fff;
    }
    .section {
      margin-top: 26px;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 30px;
    }
    .toc {
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }
    .toc h2 { margin-top: 0; }
    .toc-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .toc ol {
      margin: 0;
      padding-left: 20px;
    }
    .toc li { margin: 10px 0; }
    .intro-note {
      margin-top: 18px;
      border-left: 4px solid var(--brand);
      background: var(--accent);
      border-radius: 14px;
      padding: 16px 18px;
    }
    .subhead {
      color: var(--muted);
      font-size: 18px;
      max-width: 860px;
      margin: 6px 0 0;
    }
    .section h2 {
      margin: 0 0 12px;
      font-size: 32px;
      letter-spacing: -0.02em;
    }
    .section h3 {
      margin: 28px 0 12px;
      font-size: 24px;
      letter-spacing: -0.01em;
    }
    .card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin: 20px 0 6px;
    }
    .card {
      background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 18px;
    }
    .card h4 {
      margin: 0 0 10px;
      font-size: 18px;
      color: var(--brand-dark);
    }
    .checklist,
    .compact-list {
      margin: 0;
      padding-left: 20px;
    }
    .checklist li,
    .compact-list li { margin: 8px 0; }
    .spec-table,
    .rfq-table {
      width: 100%;
      border-collapse: collapse;
      margin: 18px 0 8px;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid var(--line);
    }
    .spec-table th,
    .spec-table td,
    .rfq-table th,
    .rfq-table td {
      padding: 14px 14px;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
      text-align: left;
    }
    .spec-table th,
    .rfq-table th {
      background: #edf4fb;
      color: var(--brand-dark);
      font-size: 14px;
    }
    .spec-table tr:last-child td,
    .rfq-table tr:last-child td { border-bottom: none; }
    .figure {
      margin: 26px 0;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 18px;
    }
    .figure svg {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 14px;
    }
    .figcaption {
      margin-top: 12px;
      font-size: 14px;
      color: var(--muted);
    }
    .callout {
      border-left: 4px solid var(--ok);
      background: #effaf5;
      border-radius: 14px;
      padding: 16px 18px;
      margin: 18px 0;
    }
    .warn {
      border-left-color: var(--warn);
      background: #fff7ec;
    }
    .quote-box {
      background: linear-gradient(180deg, #0d4e93 0%, #083d74 100%);
      color: #fff;
      border-radius: 22px;
      padding: 22px;
      margin: 26px 0;
    }
    .quote-box p {
      margin: 0;
      font-size: 18px;
    }
    .persona-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin: 18px 0;
    }
    .persona {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 18px;
    }
    .persona h4 {
      margin: 0 0 10px;
      font-size: 18px;
      color: var(--brand-dark);
    }
    .final-cta {
      background: linear-gradient(135deg, #eaf3ff 0%, #ffffff 100%);
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 24px;
      margin-top: 24px;
    }
    .faq-item {
      border-top: 1px solid var(--line);
      padding: 18px 0;
    }
    .faq-item:first-of-type { border-top: none; padding-top: 0; }
    .faq-item h3 {
      margin: 0 0 8px;
      font-size: 22px;
    }
    .footnote {
      margin-top: 24px;
      font-size: 13px;
      color: var(--muted);
    }
    .top-link {
      display: inline-block;
      margin-top: 14px;
      font-weight: 700;
    }
    @media (max-width: 960px) {
      .hero-grid,
      .card-grid,
      .persona-grid,
      .toc-grid { grid-template-columns: 1fr; }
      h1 { font-size: 32px; }
      .section h2 { font-size: 28px; }
    }
    @media (max-width: 640px) {
      .wrap { padding: 14px 12px 40px; }
      .hero-grid, .section { padding: 20px; }
      .metric-grid { grid-template-columns: 1fr; }
      .spec-table, .rfq-table { display: block; overflow-x: auto; }
    }
  