:root {
    --navy: #142238;
    --blue: #087fe7;
    --teal: #13b8b5;
    --green: #24c795;
    --muted: #627184;
    --background: #ffffff;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--background); color: var(--navy); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0; display: flex; justify-content: space-between; align-items: center; }
.brand-mini { font-size: 16px; font-weight: 800; letter-spacing: .11em; text-decoration: none; color: var(--navy); }
.brand-dot { color: var(--teal); }
.language-switch { display: flex; align-items: center; gap: 12px; color: #a1acb7; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.language-switch a { color: var(--muted); text-decoration: none; padding: 6px 2px; }
.language-switch a[aria-current="page"] { color: var(--blue); }
.language-switch a:focus-visible, .brand-mini:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; border-radius: 3px; }
.main-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 42px 24px 90px; }
.hero { width: min(980px, 100%); text-align: center; }
.hero-logo { width: min(100%, 850px); height: auto; display: block; margin: 0 auto -14px; }
.status { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid #dbe8ed; border-radius: 999px; background: #f7fbfc; color: #286d7a; font-size: 12px; font-weight: 700; letter-spacing: .045em; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
h1 { margin: 26px 0 15px; font-size: clamp(28px, 4vw, 46px); line-height: 1.18; letter-spacing: -.035em; }
p { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.8; }
.accent-rule { width: 74px; height: 4px; margin: 33px auto 0; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--teal), var(--green)); }
.site-footer { padding: 22px 24px 30px; text-align: center; font-size: 12px; color: #8290a0; letter-spacing: .025em; }
@media (max-width: 600px) { .site-header { width: calc(100% - 36px); padding: 21px 0; } .main-content { padding: 20px 20px 70px; } .hero-logo { width: 115%; max-width: none; margin-left: -7.5%; margin-bottom: -6px; } h1 { margin-top: 22px; } }
@media (prefers-reduced-motion: no-preference) { .language-switch a { transition: color .2s ease; } .language-switch a:hover { color: var(--teal); } }