:root{
    --paper: #fbfbff;
    --ink: #0a0b10;
    --ink2: rgba(10,11,16,.78);
    --ink3: rgba(10,11,16,.56);
    --line: rgba(10,11,16,.14);

    --neoA: #00e5ff;
    --neoB: #7b61ff;
    --neoC: #00ff9a;

    --radius: 28px;
    --max: 1180px;

    --shadow: 0 22px 60px rgba(10,11,16,.10);
    --shadow2: 0 12px 34px rgba(10,11,16,.09);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
    margin:0;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.55;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    overflow-x:hidden;
}

/* Different vibe: “paper + security print” */
body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    background:
            radial-gradient(1000px 420px at 18% 12%, rgba(0,229,255,.10), transparent 60%),
            radial-gradient(900px 420px at 78% 18%, rgba(123,97,255,.10), transparent 60%),
            radial-gradient(800px 420px at 50% 92%, rgba(0,255,154,.07), transparent 62%),
            repeating-linear-gradient(0deg, rgba(10,11,16,.028), rgba(10,11,16,.028) 1px, transparent 1px, transparent 84px),
            repeating-linear-gradient(90deg, rgba(10,11,16,.020), rgba(10,11,16,.020) 1px, transparent 1px, transparent 84px);
    opacity:.65;
}

/* Skip link */
.vxB-skip{
    position:absolute; left:-999px; top:auto;
    width:1px; height:1px; overflow:hidden;
}
.vxB-skip:focus{
    left:18px; top:18px;
    width:auto; height:auto;
    padding:10px 12px;
    background:#fff;
    border:2px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow2);
    z-index: 9999;
}

/* Container */
.vxB-wrap{
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
}

/* TOP: merged hero + links */
.vxB-top{
    min-height: 100vh;
    display:flex;
    align-items:center;
    padding: 74px 0 46px;
}

/* Certificate frame */
.vxB-cert{
    position:relative;
    border-radius: var(--radius);
    background: rgba(255,255,255,.78);
    border: 2px solid rgba(10,11,16,.86);
    box-shadow: var(--shadow);
    overflow:hidden;
}

/* Decorative corners */
.vxB-cert::before{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:
            linear-gradient(90deg, rgba(10,11,16,.92) 0 0) left top / 48px 2px no-repeat,
            linear-gradient(180deg, rgba(10,11,16,.92) 0 0) left top / 2px 48px no-repeat,
            linear-gradient(90deg, rgba(10,11,16,.92) 0 0) right top / 48px 2px no-repeat,
            linear-gradient(180deg, rgba(10,11,16,.92) 0 0) right top / 2px 48px no-repeat,
            linear-gradient(90deg, rgba(10,11,16,.92) 0 0) left bottom / 48px 2px no-repeat,
            linear-gradient(180deg, rgba(10,11,16,.92) 0 0) left bottom / 2px 48px no-repeat,
            linear-gradient(90deg, rgba(10,11,16,.92) 0 0) right bottom / 48px 2px no-repeat,
            linear-gradient(180deg, rgba(10,11,16,.92) 0 0) right bottom / 2px 48px no-repeat;
    opacity:.55;
}

/* Holographic strip (very different accent) */
.vxB-holo{
    height: 14px;
    background: linear-gradient(90deg, rgba(0,229,255,.75), rgba(123,97,255,.70), rgba(0,255,154,.65), rgba(0,229,255,.75));
    filter: saturate(1.1);
}

.vxB-grid{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 0;
}

.vxB-left{
    padding: 26px 26px 26px;
    border-right: 1px dashed rgba(10,11,16,.18);
    position:relative;
}

.vxB-right{
    padding: 26px 26px 26px;
    position:relative;
}

.vxB-kicker{
    margin:0 0 10px;
    font-size: 12px;
    letter-spacing: .20em;
    text-transform: uppercase;
    color: var(--ink2);
}

.vxB-h1{
    margin:0 0 10px;
    font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
    font-size: clamp(44px, 5.6vw, 78px);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.vxB-sub{
    margin: 0 0 16px;
    font-size: clamp(16px, 2.1vw, 20px);
    color: var(--ink2);
    max-width: 90ch;
}

.vxB-callouts{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.vxB-chip{
    grid-column: span 6;
    padding: 12px 12px;
    border-radius: 18px;
    border: 1px solid rgba(10,11,16,.14);
    background: rgba(255,255,255,.86);
    box-shadow: 0 0 0 1px rgba(0,229,255,.08) inset;
}
.vxB-chip strong{
    display:block;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(10,11,16,.86);
    margin-bottom: 6px;
}
.vxB-chip span{
    display:block;
    font-size: 13.5px;
    color: var(--ink2);
}

/* “OFFICIAL” stamp */
.vxB-stamp{
    position:absolute;
    right: 18px;
    top: 18px;
    transform: rotate(-12deg);
    padding: 10px 12px;
    border-radius: 16px;
    border: 2px solid rgba(10,11,16,.88);
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 24px rgba(10,11,16,.08);
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(10,11,16,.90);
}
.vxB-stamp::after{
    content:"";
    display:block;
    height: 3px;
    margin-top: 6px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(0,229,255,.85), rgba(123,97,255,.85), rgba(0,255,154,.80));
    opacity:.85;
}

/* Right side: verified domains */
.vxB-title2{
    margin:0 0 10px;
    font-size: 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(10,11,16,.82);
}

.vxB-mini{
    margin: 0 0 14px;
    color: var(--ink2);
    font-size: 13.5px;
}

.vxB-list{
    list-style:none;
    padding:0;
    margin: 0;
    display:grid;
    gap: 10px;
}

.vxB-row{
    border-radius: 18px;
    border: 1px solid rgba(10,11,16,.16);
    background: rgba(255,255,255,.88);
    padding: 12px 12px;
    box-shadow: 0 0 0 1px rgba(123,97,255,.06) inset;
}

.vxB-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.vxB-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(10,11,16,.14);
    background: rgba(255,255,255,.92);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(10,11,16,.86);
    white-space:nowrap;
}

.vxB-dot{
    width: 9px; height: 9px; border-radius: 999px;
    background: linear-gradient(135deg, var(--neoA), var(--neoB));
    box-shadow: 0 0 16px rgba(0,229,255,.25);
    flex: 0 0 auto;
}

.vxB-copy{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    color: rgba(10,11,16,.92);
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px dashed rgba(10,11,16,.22);
    background: rgba(251,251,255,.90);
    word-break: break-all;
    user-select: all;
    cursor: text;
    outline: none;
}
.vxB-copy:focus{
    border-style: solid;
    border-color: rgba(0,229,255,.55);
    box-shadow: 0 0 0 2px rgba(0,229,255,.16);
}

.vxB-quick{
    margin-top: 14px;
    border-radius: 18px;
    border: 1px solid rgba(10,11,16,.14);
    background: rgba(255,255,255,.86);
    padding: 12px 12px;
}
.vxB-quick strong{
    display:block;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: rgba(10,11,16,.86);
}
.vxB-steps{
    margin:0;
    padding-left: 18px;
    color: var(--ink2);
    font-size: 13.5px;
}
.vxB-steps li{ margin: 6px 0; }

/* CTA nav */
.vxB-nav{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin-top: 16px;
}
.vxB-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 14px;
    border-radius: 16px;
    border: 2px solid rgba(10,11,16,.86);
    background: #fff;
    color: rgba(10,11,16,.92);
    text-decoration:none;
    font-weight: 650;
    letter-spacing: .02em;
    box-shadow: 0 12px 26px rgba(10,11,16,.08);
    transition: transform .12s ease;
}
.vxB-btn:hover{ transform: translateY(-1px); }
.vxB-btn:active{ transform: translateY(0px); }
.vxB-btn--alt{
    border-style: dashed;
    background: rgba(255,255,255,.86);
}

/* Page sections below */
.vxB-main{
    padding: 8px 0 92px;
}

.vxB-section{
    margin-top: 18px;
    border-radius: var(--radius);
    border: 1px solid rgba(10,11,16,.14);
    background: rgba(255,255,255,.70);
    box-shadow: var(--shadow2);
    overflow:hidden;
}

.vxB-head{
    padding: 18px 22px 0;
}
.vxB-h2{
    margin:0;
    font-size: 22px;
    letter-spacing: -0.01em;
}
.vxB-p{
    margin: 10px 0 0;
    color: var(--ink2);
    max-width: 98ch;
}
.vxB-body{
    padding: 14px 22px 22px;
}

.vxB-two{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.vxB-card{
    grid-column: span 6;
    border-radius: 22px;
    border: 1px solid rgba(10,11,16,.14);
    background: rgba(255,255,255,.88);
    padding: 14px 14px 12px;
}
.vxB-card h3{
    margin:0 0 8px;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.vxB-card p{
    margin:0;
    color: var(--ink2);
    font-size: 14px;
}

pre{
    margin: 12px 0 0;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(10,11,16,.14);
    background: rgba(251,251,255,.92);
    overflow:auto;
    color: rgba(10,11,16,.92);
    font-size: 12.5px;
    line-height: 1.5;
}

details{
    border-radius: 22px;
    border: 1px solid rgba(10,11,16,.14);
    background: rgba(255,255,255,.88);
    padding: 12px 14px;
}
details + details{ margin-top: 10px; }
summary{
    cursor:pointer;
    font-weight: 750;
    letter-spacing: .01em;
    list-style:none;
    color: rgba(10,11,16,.92);
}
summary::-webkit-details-marker{ display:none; }
summary::after{
    content:"›";
    float:right;
    transform: rotate(90deg);
    color: rgba(10,11,16,.70);
    transition: transform .12s ease;
}
details[open] summary::after{ transform: rotate(-90deg); }
details p{ margin: 10px 0 0; color: var(--ink2); }

.vxB-footer{
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto 70px;
    border-radius: var(--radius);
    border: 2px solid rgba(10,11,16,.86);
    background: rgba(255,255,255,.78);
    padding: 18px 22px;
    box-shadow: var(--shadow2);
    color: var(--ink2);
    font-size: 13px;
}
.vxB-footer strong{ color: rgba(10,11,16,.92); }

@media (max-width: 980px){
    .vxB-grid{ grid-template-columns: 1fr; }
    .vxB-left{ border-right: none; border-bottom: 1px dashed rgba(10,11,16,.18); }
    .vxB-chip{ grid-column: span 12; }
    .vxB-card{ grid-column: span 12; }
}

@media (prefers-reduced-motion: reduce){
    .vxB-btn, summary::after{ transition:none; }
}