:root { color-scheme:light; font-family: "Segoe UI", Arial, sans-serif; background:#e9edf0; color:#233f56; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 50% 12%, #faf9f5 0, transparent 65%), #e9edf0; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.3; background-image:linear-gradient(#718ba51a 1px,transparent 1px),linear-gradient(90deg,#718ba51a 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(#000,transparent 75%); }
main { position:relative; width:min(100%,800px); padding:68px 28px 56px; margin:auto; text-align:center; }
.brand { display:flex; align-items:center; flex-direction:column; gap:12px; }
.vcds-logo { width:216px; height:auto; }
.diag-logo { width:146px; height:auto; }
.divider { display:flex; align-items:center; justify-content:center; margin:36px auto 28px; width:120px; height:1px; background:linear-gradient(90deg,transparent,#527088,transparent); }
.divider span { width:5px; height:5px; background:#81accb; transform:rotate(45deg); }
h1 { margin:0; font-size:clamp(26px,3.4vw,42px); font-weight:500; line-height:1.24; letter-spacing:-1.15px; text-wrap:balance; }
.languages { margin:36px auto 0; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:480px; }
.language { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:27px 24px; border:1px solid #c8d4de; border-radius:16px; background:linear-gradient(135deg,#ffffffd9,#f2f5f7); color:#376b91; text-decoration:none; box-shadow:0 12px 30px #28445b0c,inset 0 1px #fff; transition:transform .2s,border-color .2s,background .2s,box-shadow .2s; }
.language img { width:90px; height:60px; object-fit:cover; border-radius:4px; box-shadow:0 2px 12px #0003; }
.language svg { width:24px; height:24px; flex:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.language:hover { transform:translateY(-4px); border-color:#7195b2; background:#e3eef6; box-shadow:0 16px 32px #28445b1a; color:#174d75; }
.language:hover svg { transform:translateX(3px); }
.language:focus-visible { outline:3px solid #246da2; outline-offset:5px; }
footer { position:relative; padding:24px 28px 30px; border-top:1px solid #29486015; color:#596a78; font-size:11px; line-height:1.9; text-align:center; }
@media(max-width:520px) { main { padding:40px 22px; } .vcds-logo { width:178px; } .diag-logo { width:120px; } h1 { letter-spacing:-.65px; } .languages { gap:12px; margin-top:28px; } .language { padding:22px 16px; gap:12px; border-radius:12px; } .language img { width:72px; height:48px; } .language svg { width:20px; } footer { padding:20px; font-size:10px; } }
@media(max-width:350px) { .language { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }
/* Mid-tone blue: between the dark and pale concepts. */
:root { background:#7e9fbe; color:#163b58; }
body { background:radial-gradient(ellipse at 50% 22%, #a9c3d8 0, #8bafce 48%, #7397bb 100%); }
body::before { opacity:.22; }
.vcds-logo { width:240px; }
.diag-logo { width:160px; }
.divider { background:linear-gradient(90deg,transparent,#497997,transparent); }
.divider span { background:#2d719f; }
.language { background:linear-gradient(135deg,#cfdee8,#b8d0e0); border-color:#7fabc8; color:#1b6495; box-shadow:0 12px 28px #244c6b1a,inset 0 1px #e5f0f6; }
.language:hover { background:#d4e5ee; border-color:#2b79b0; color:#13486f; box-shadow:0 16px 30px #244c6b28; }
footer { background:#7197b21c; border-top-color:#365f7a26; color:#294b64; }
@media(max-width:520px) { .vcds-logo { width:200px; } .diag-logo { width:134px; } }