.topwrap{
      width:min(1100px, 92vw);
      margin: 56px auto 96px;
      text-align:center;
    }

    /* top split lines with round gradient logo in the middle */
    .topsplitbar{
      display:flex;
      align-items:center;
      gap: clamp(18px, 4vw, 32px);
      margin: 16px 0 28px;
    }
    .topsplitbar .topline{
      height:2px;
      background: var(--line);
      flex:1;
      border-radius:2px;
    }
    .toplogo-badge{
      width:72px; height: 72px;
      border-radius:50%;
      background: conic-gradient(from 220deg, var(--pink), var(--orange), var(--pink));
      display:grid; place-items:center;
      box-shadow: 0 8px 24px rgba(17, 12, 46, .12);
    }
    .toplogo-badge img{
      width:44px; height: 44px;
      display:block;
    }

    h1{
      margin:.25rem 0 .65rem;
      font-weight: 800;
      font-size: clamp(18px, 3.2vw, 26px);
      line-height:1.15;
      letter-spacing:-.01em;
    }
    .topsub{
      margin: 0 auto 26px;
      max-width: 62ch;
      color: var(--muted);
      font-size: clamp(14px, 2vw, 16px);
      line-height:1.7;
    }
    .topcta{
      display:inline-block;
      background: var(--btn);
      color:#fff;
      text-decoration:none;
      font-weight: 800;
      padding: 16px 26px;
      border-radius: 9999px;
      box-shadow: 0 6px 16px rgba(2,8,23,.12);
      transition: transform .15s ease, filter .15s ease;
    }
    .topcta:hover{ transform: translateY(-1px); filter: brightness(1.03); }
    .topcta:focus-visible{ outline:3px solid #a3bffa; outline-offset:3px; }

    @media (max-width: 560px){
      .topwrap{ margin: 40px auto 72px; }
      .toplogo-badge{ width:72px; height: 72px; }
      .toplogo-badge img{ width:44px; height: 44px; }
    }