:root {
      --brand:#0b5cab;
      --brand-dark:#083a70;
      --ink:#102033;
      --muted:#526174;
      --line:#d8e3ef;
      --bg:#eff5fb;
      --card:#ffffff;
      --soft:#f6faff;
      --accent:#e8f1ff;
      --ok:#0f766e;
      --warn:#9a3412;
      --shadow:0 14px 34px rgba(16,32,51,.08);
      --radius:20px;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      color:var(--ink);
      background:linear-gradient(180deg,#edf4fb 0%, #f8fbff 100%);
      line-height:1.75;
    }
    a { color:var(--brand); text-decoration:none; }
    a:hover { text-decoration:underline; }
    .shell { max-width:1180px; margin:0 auto; padding:24px; }
    .hero {
      background:linear-gradient(135deg,#0b5cab 0%, #1d7bd0 50%, #dcecff 100%);
      color:#fff;
      border-radius:28px;
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero::after {
      content:"";
      position:absolute;
      right:-100px;
      bottom:-100px;
      width:280px;
      height:280px;
      border-radius:50%;
      background:rgba(255,255,255,.12);
      filter:blur(10px);
    }
    .hero-grid {
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:24px;
      padding:42px;
      align-items:center;
    }
    .eyebrow {
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.25);
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:.04em;
      font-weight:700;
    }
    .hero h1 {
      margin:18px 0 14px;
      color:#fff;
      font-size:42px;
      line-height:1.18;
      max-width:13ch;
    }
    .hero p {
      margin:0;
      font-size:18px;
      color:rgba(255,255,255,.95);
      max-width:60ch;
    }
    .hero p a,
    .hero p a:visited {
      color:#fff2a8;
      font-weight:700;
      border-bottom:2px solid rgba(255,242,168,.5);
    }
    .hero p a:hover {
      color:#ffffff;
      border-bottom-color:#ffffff;
      text-decoration:none;
    }
    .cta-row {
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:22px;
    }
    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:12px 18px;
      border-radius:999px;
      font-weight:700;
      border:1px solid rgba(255,255,255,.22);
      transition:.2s ease;
    }
    .btn:hover { transform:translateY(-1px); text-decoration:none; }
    .btn-primary { background:#fff; color:var(--brand-dark); }
    .btn-secondary { color:#fff; background:rgba(255,255,255,.12); }
    .hero-card {
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.24);
      border-radius:22px;
      padding:22px;
      backdrop-filter:blur(6px);
    }
    .hero-card h2 {
      margin:0 0 10px;
      color:#fff;
      font-size:18px;
    }
    .hero-card ul { margin:0; padding-left:18px; }
    .hero-card li { margin:6px 0; }
    .main {
      display:grid;
      grid-template-columns:minmax(0,1fr) 320px;
      gap:26px;
      margin-top:24px;
      align-items:start;
    }
    .content {
      background:var(--card);
      border:1px solid var(--line);
      border-radius:24px;
      box-shadow:var(--shadow);
      padding:34px;
    }
    .toc {
      position:sticky;
      top:18px;
      background:var(--card);
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow);
      padding:22px;
    }
    .toc h2 {
      margin:0 0 10px;
      font-size:18px;
    }
    .toc ol {
      margin:0;
      padding-left:20px;
      font-size:14px;
      color:var(--muted);
    }
    .toc li + li { margin-top:8px; }
    .intro-note, .support-box, .rfq-box, .keyword-box {
      background:var(--soft);
      border:1px solid #d2e2f4;
      border-radius:18px;
      padding:18px 20px;
      margin:18px 0 26px;
    }
    .intro-note strong, .support-box strong, .rfq-box strong, .keyword-box strong {
      color:var(--brand-dark);
    }
    .stats {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
      margin:24px 0 18px;
    }
    .stat {
      background:linear-gradient(180deg,#f9fcff 0%, #edf5ff 100%);
      border:1px solid #d6e5f6;
      border-radius:18px;
      padding:18px;
    }
    .stat .k {
      font-size:12px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.05em;
      font-weight:700;
      margin-bottom:6px;
    }
    .stat .v {
      font-size:26px;
      font-weight:800;
      color:var(--brand-dark);
    }
    h2, h3 { color:var(--ink); line-height:1.25; scroll-margin-top:90px; }
    h2 { font-size:30px; margin:32px 0 14px; }
    h3 { font-size:22px; margin:24px 0 10px; }
    p { margin:0 0 16px; }
    ul, ol { margin:0 0 18px; }
    li + li { margin-top:8px; }
    .figure {
      margin:28px 0;
      border:1px solid var(--line);
      border-radius:20px;
      overflow:hidden;
      background:#fff;
    }
    .figure .svg-wrap { padding:18px; background:linear-gradient(180deg,#fbfdff 0%, #f4f9ff 100%); }
    .figure figcaption {
      padding:12px 16px;
      border-top:1px solid var(--line);
      color:var(--muted);
      font-size:14px;
      background:#f8fbff;
    }
    .grid-3 {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
      margin:18px 0 24px;
    }
    .card {
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      padding:18px;
    }
    .card h3 { margin-top:0; font-size:20px; }
    .pill {
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:6px 11px;
      background:var(--accent);
      color:var(--brand-dark);
      font-weight:700;
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .spec-table {
      width:100%;
      border-collapse:collapse;
      margin:18px 0 24px;
      font-size:15px;
      overflow:hidden;
      border-radius:16px;
      border:1px solid var(--line);
    }
    .spec-table th,
    .spec-table td {
      border-bottom:1px solid var(--line);
      padding:12px 14px;
      text-align:left;
      vertical-align:top;
    }
    .spec-table th {
      background:#eef5ff;
      color:var(--brand-dark);
      font-size:14px;
    }
    .spec-table tr:nth-child(even) td { background:#fbfdff; }
    .cta-panel {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
      margin:22px 0 10px;
    }
    .cta-card {
      border:1px solid var(--line);
      border-radius:18px;
      padding:20px;
      background:linear-gradient(180deg,#ffffff 0%, #f6fbff 100%);
    }
    .cta-card p { margin-bottom:12px; }
    .cta-card a {
      display:inline-flex;
      font-weight:700;
      align-items:center;
    }
    .faq {
      border-top:1px solid var(--line);
      padding-top:14px;
    }
    .faq-item {
      border:1px solid var(--line);
      border-radius:16px;
      padding:16px 18px;
      background:#fbfdff;
      margin:12px 0;
    }
    .muted { color:var(--muted); }
    .footer-cta {
      background:linear-gradient(135deg,#0d4f96 0%, #1c74c5 55%, #dcecff 100%);
      color:#fff;
      border-radius:22px;
      padding:28px;
      margin-top:24px;
    }
    .footer-cta h2 { color:#fff; margin-top:0; }
    .footer-cta p { color:rgba(255,255,255,.94); }
    .footer-cta a { color:#fff; }
    .footer-cta .btn-primary {
      background:#ffd978;
      color:#083a70;
      border-color:rgba(255,217,120,.95);
      box-shadow:0 8px 20px rgba(8,58,112,.16);
    }
    .footer-cta .btn-primary:hover {
      background:#ffe6a4;
      color:#062b55;
    }
    .footer-cta .btn-secondary {
      background:rgba(255,255,255,.14);
      color:#ffffff;
      border-color:rgba(255,255,255,.28);
    }
    code.inline {
      background:#eef5ff;
      padding:1px 6px;
      border-radius:8px;
      font-family:Consolas, Monaco, monospace;
      font-size:14px;
      color:var(--brand-dark);
    }
    svg { width:100%; height:auto; display:block; }
    @media (max-width: 980px) {
      .hero-grid, .main, .grid-3, .cta-panel, .stats { grid-template-columns:1fr; }
      .toc { position:static; }
      .hero h1 { max-width:none; font-size:34px; }
    }
    @media (max-width: 640px) {
      .shell { padding:14px; }
      .content, .toc { padding:20px; }
      .hero-grid { padding:24px; }
      .hero h1 { font-size:30px; }
      h2 { font-size:26px; }
      h3 { font-size:20px; }
    }