:root {
    color-scheme: light;
    --ink: #263238;
    --muted: #546e7a;
    --primary: #3f51b5;
    --paper: #f4f4f4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #5c6bc0; outline-offset: 5px; }
.site-header, main, footer { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding-block: 28px; border-bottom: 1px solid #cfd8dc; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 29px; font-weight: 800; letter-spacing: -1.5px; }
.brand img { border-radius: 10px; }
.brand-dot { color: var(--primary); }
.office-link { font-size: 14px; font-weight: 650; padding: 10px 0; }
.office-link span { margin-left: 15px; }
.hero { padding: 76px 0 58px; max-width: 790px; }
.eyebrow, .section-label { font-size: 11px; font-weight: 750; letter-spacing: 2px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--primary); margin: 0 0 24px; }
.eyebrow > span { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
h1 { margin: 0; font-size: clamp(44px, 6.3vw, 78px); line-height: 1.06; letter-spacing: -.055em; font-weight: 650; }
h1 > span { color: var(--primary); }
.hero-description { max-width: 500px; font-size: 18px; line-height: 1.65; color: var(--muted); margin: 25px 0; }
.primary-link { display: inline-flex; gap: 35px; align-items: center; background: var(--primary); color: white; padding: 15px 22px; border-radius: 8px; font-weight: 650; font-size: 14px; }
.access-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 22px; padding-bottom: 64px; }
.panel { padding: 32px; border-radius: 18px; }
.workers { background: white; border: 1px solid #cfd8dc; scroll-margin-top: 24px; }
.section-label { color: var(--muted); margin-bottom: 23px; }
h2 { font-size: 30px; letter-spacing: -1px; line-height: 1.18; margin: 0 0 13px; }
.panel p { color: var(--muted); line-height: 1.65; font-size: 15px; margin: 0; }
.worker-options { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.access-option { display: flex; gap: 13px; padding: 17px 0 0; border-top: 1px solid #cfd8dc; }
.option-icon { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #e8eaf6; color: var(--primary); font-size: 21px; }
.access-option strong { display: block; font-size: 16px; margin: 4px 0 10px; }
.option-description { display: block; color: var(--muted); font-size: 13px; line-height: 1.65; }
.option-action { display: block; color: var(--primary); margin-top: 18px; font-size: 13px; font-weight: 750; }
.option-action span { margin-left: 8px; }
.office { display: flex; flex-direction: column; background: linear-gradient(135deg, #283593 0%, #3f51b5 58%, #5c6bc0 100%); color: white; }
.office .section-label { color: #e8eaf6; }
.office p { color: #ffffff; margin-bottom: 25px; }
.office-button { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: auto; border: 1px solid #9fa8da; padding: 14px 17px; border-radius: 8px; font-size: 14px; font-weight: 650; }
a:hover .option-action, .office-link:hover { text-decoration: underline; }
.primary-link:hover { background: #283593; }
.office-button:hover { background: #283593; }
footer { border-top: 1px solid #cfd8dc; padding-block: 24px; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--muted); }
footer > :first-child { font-weight: 750; }
footer a { font-weight: 650; }
footer a:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 850px) {
    .access-grid { grid-template-columns: 1fr; }
    .office-button { margin-top: 4px; }
}
@media (max-width: 540px) {
    .site-header, main, footer { width: calc(100% - 36px); }
    .site-header { padding-block: 20px; }
    .hero { padding-block: 48px 38px; }
    .hero-description { font-size: 16px; }
    .panel { padding: 25px; }
    .worker-options { grid-template-columns: 1fr; gap: 23px; }
    .access-grid { padding-bottom: 38px; }
    h2 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }