:root { color-scheme: light; font-family: Inter, "Microsoft YaHei", sans-serif; color: #102744; background: #f4f9fb; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; background: linear-gradient(135deg, #f8fcfd, #eef7f8 55%, #f8fbfe); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #17b9c8; outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 2; padding: .6rem 1rem; background: #fff; }
.skip-link:focus-visible { top: 1rem; }
header, main, footer { max-width: 72rem; margin: auto; padding-inline: 1.25rem; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; padding-block: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; margin-right: auto; font-weight: 800; text-decoration: none; }
.brand-logo { width: 2.5rem; height: 2.5rem; object-fit: contain; border-radius: .35rem; }
.brand-logo, .footer-logo { mix-blend-mode: multiply; }
nav ul, .language-picker, .actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: 0; margin: 0; list-style: none; }
nav a { color: #244b69; text-decoration: none; }
nav a:hover { color: #007f92; }
button, .button { border: 1px solid #087e97; border-radius: .45rem; padding: .6rem .9rem; background: #fff; color: #075f77; font: inherit; cursor: pointer; text-decoration: none; transition: transform 160ms ease, background-color 160ms ease; }
button[aria-pressed="true"], .button.primary { background: #087e97; color: #fff; }
.button:hover, button:hover { transform: translateY(-1px); }
main { padding-bottom: 3rem; }
section { padding: 3.5rem 0; border-top: 1px solid #cce1e6; }
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: 4.5rem; border-top: 0; }
.hero::before { position: absolute; z-index: -1; inset: 1.5rem -2rem auto auto; width: 17rem; height: 17rem; content: ""; opacity: .55; background-image: linear-gradient(#7eced6 1px, transparent 1px), linear-gradient(90deg, #7eced6 1px, transparent 1px); background-size: 1.5rem 1.5rem; mask-image: radial-gradient(circle, #000 20%, transparent 70%); }
.eyebrow { color: #007f92; font-weight: 800; letter-spacing: .12em; }
h1 { max-width: 16ch; font-size: clamp(2.3rem, 6vw, 4.8rem); line-height: 1.12; margin: .25rem 0 1rem; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0 0 .7rem; }
.lead { max-width: 46rem; font-size: 1.12rem; }
.evidence-cards { display: grid; max-width: 1100px; gap: 24px; margin: 2rem auto 0; }
.evidence-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 355px; margin: 0; background: #f3f5f6; }
.evidence-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
.evidence-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.54 / 1; background: #f3f5f6; }
[data-evidence-image] { display: block; width: 100%; height: 100%; object-fit: contain; }
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
article { position: relative; overflow: hidden; padding: 1.5rem; background: #fff; border: 1px solid #cce1e6; border-radius: .8rem; box-shadow: 0 .7rem 1.8rem rgba(15, 64, 88, .06); }
article::before { display: block; width: .7rem; height: .7rem; margin-bottom: .9rem; border-radius: 50%; background: #11aabd; box-shadow: 1.1rem 0 #0a6886, 2.2rem 0 #83d4da; content: ""; }
.list-copy { color: #365d73; }
footer { display: flex; align-items: center; gap: .75rem; padding-block: 2rem; border-top: 1px solid #cce1e6; color: #31566a; }
.footer-logo { width: 2rem; height: 2rem; object-fit: contain; border-radius: .25rem; }
@media (min-width: 768px) { header, main, footer { padding-inline: 1.5rem; } header { padding-block: 1.25rem; } .hero { padding-top: 5.5rem; } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .evidence-card { grid-template-columns: 1fr; } .evidence-media { height: 220px; min-height: 220px; aspect-ratio: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }