<style>
    :root{
      --navy:#0B1F33;
      --slate:#3A4A5E;
      --white:#FFFFFF;

      --signal:#1F8FFF;
      --teal:#1FB6A6;

      --success:#1E9E5A;
      --warning:#F5A524;
      --risk:#D64545;
      --muted:#9AA5B1;

      --radius:16px;
      --shadow: 0 10px 30px rgba(11,31,51,.10);
      --shadow2: 0 6px 18px rgba(11,31,51,.08);
      --max: 1100px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--navy);
      background: var(--white);
      line-height: 1.4;
    }

    a{ color: inherit; text-decoration: none; }
    a:focus-visible, button:focus-visible{ outline: 3px solid rgba(31,143,255,.35); outline-offset: 2px; border-radius: 10px; }

    /* Layout */
    .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 20px; }

    header{
      position: sticky;
      top: 0;
      background: rgba(255,255,255,.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(58,74,94,.12);
      z-index: 50;
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 0;
      gap: 16px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width: 170px;
    }

    .brand-dot{
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--signal);
      box-shadow: 0 0 0 6px rgba(31,143,255,.12);
    }

    .brand span{
      font-weight: 700;
      letter-spacing: .01em;
    }

    .navlinks{
      display:flex;
      align-items:center;
      gap: 16px;
      color: var(--slate);
      font-weight: 500;
      font-size: 14px;
    }
    .navlinks a{
      padding: 8px 10px;
      border-radius: 10px;
    }
    .navlinks a:hover{ background: rgba(58,74,94,.08); color: var(--navy); }

    .cta{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width: 170px;
      justify-content: flex-end;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 14px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:active{ transform: translateY(1px); }

    .btn-primary{
      background: var(--signal);
      color: var(--white);
      box-shadow: 0 10px 22px rgba(31,143,255,.20);
    }
    .btn-primary:hover{ box-shadow: 0 12px 26px rgba(31,143,255,.26); }

    .btn-ghost{
      background: transparent;
      border-color: rgba(58,74,94,.18);
      color: var(--navy);
    }
    .btn-ghost:hover{ background: rgba(58,74,94,.06); border-color: rgba(58,74,94,.28); }

    /* Hero */
    .hero{
      padding: 48px 0 22px;
    }

    .heroGrid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 22px;
      align-items: start;
    }

    .logoCard{
      border: 1px solid rgba(58,74,94,.14);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
      background: #fff;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: 340px;
    }

    /* Huge logo */
    .logoCard img{
      width: min(680px, 100%);
      height: auto;
      display:block;
    }

    .headline{
      margin: 10px 0 10px;
      font-size: clamp(28px, 3.4vw, 44px);
      line-height: 1.15;
      letter-spacing: -0.02em;
      font-weight: 700;
    }

    .subhead{
      margin: 0 0 18px;
      color: var(--slate);
      font-size: 16px;
      max-width: 56ch;
      line-height: 1.45;
    }

    .pillRow{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      margin: 0 0 18px;
    }
    .pill{
      font-size: 12px;
      font-weight: 600;
      color: var(--navy);
      border: 1px solid rgba(58,74,94,.18);
      background: rgba(58,74,94,.04);
      padding: 8px 10px;
      border-radius: 999px;
    }
    .pill b{ font-weight: 700; }

    .heroActions{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      align-items:center;
    }

    /* Sections */
    section{ padding: 30px 0; }
    .sectionTitle{
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .sectionHint{
      margin: 0 0 18px;
      color: var(--slate);
      max-width: 70ch;
    }

    .cards{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .card{
      border: 1px solid rgba(58,74,94,.14);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: var(--shadow2);
      padding: 16px;
      min-height: 150px;
    }
    .card h3{
      margin: 0 0 6px;
      font-size: 14px;
      font-weight: 700;
    }
    .card p{
      margin: 0;
      color: var(--slate);
      font-size: 14px;
      line-height: 1.45;
    }

    .kpiRow{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
    }
    .kpi{
      border-radius: var(--radius);
      border: 1px solid rgba(58,74,94,.14);
      padding: 16px;
      background: rgba(11,31,51,.03);
    }
    .kpi .num{
      font-size: 22px;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }
    .kpi .lbl{
      font-size: 13px;
      font-weight: 600;
      color: var(--slate);
    }

    .callout{
      border-radius: var(--radius);
      border: 1px solid rgba(31,143,255,.22);
      background: rgba(31,143,255,.06);
      padding: 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
    }
    .callout strong{
      font-size: 14px;
      display:block;
      margin-bottom: 4px;
    }
    .callout span{
      color: var(--slate);
      font-size: 14px;
      line-height: 1.45;
    }

    footer{
      padding: 28px 0 40px;
      border-top: 1px solid rgba(58,74,94,.12);
      color: var(--slate);
      font-size: 13px;
    }
    .foot{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }
    .foot a{
      color: var(--slate);
      font-weight: 600;
      padding: 6px 10px;
      border-radius: 10px;
    }
    .foot a:hover{ background: rgba(58,74,94,.06); color: var(--navy); }

    /* Responsive */
    @media (max-width: 920px){
      .heroGrid{ grid-template-columns: 1fr; }
      .cta{ min-width: auto; }
      .brand{ min-width: auto; }
      .cards{ grid-template-columns: 1fr; }
      .kpiRow{ grid-template-columns: 1fr; }
      .logoCard{ min-height: 260px; }
    }
    @media (max-width: 620px){
      .navlinks{ display:none; }
      .logoCard img{ width: 100%; }
    }
  </style>