:root {
    --hub-ink: #102b49;
    --hub-muted: #647b92;
    --hub-line: #d9e6f0;
    --hub-blue: #197cc6;
    --hub-blue-dark: #0b4d86;
    --hub-sky: #35b8e7;
    --hub-mint: #18a77a;
    --hub-surface: #ffffff;
    --hub-background: #eff6fb;
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--hub-ink);
    background:
        radial-gradient(circle at 90% 5%, rgba(53, 184, 231, 0.12), transparent 26%),
        linear-gradient(180deg, #f9fcff 0%, var(--hub-background) 100%);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
.hub-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.hub-skip-link {
    position: fixed; z-index: 50; top: 10px; inset-inline-start: 10px; padding: 10px 14px;
    color: #fff; background: var(--hub-ink); border-radius: 10px; transform: translateY(-160%);
}
.hub-skip-link:focus { transform: translateY(0); }

.hub-header { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid rgba(21, 103, 165, 0.12); }
.hub-header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hub-brand { display: inline-flex; align-items: center; gap: 11px; }
.hub-brand img { width: 36px; height: 40px; object-fit: contain; }
.hub-brand > span { display: flex; flex-direction: column; font-size: 17px; line-height: 1; font-weight: 850; letter-spacing: 0.04em; }
.hub-brand small { margin-top: 6px; color: #748aa0; font-size: 9px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.hub-header-meta { display: flex; align-items: center; gap: 12px; }
.hub-environment {
    height: 37px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px;
    color: #557089; background: #f3f8fc; border: 1px solid var(--hub-line);
    border-radius: 11px; font-size: 10px; font-weight: 850; letter-spacing: 0.1em;
}
.hub-environment i { width: 7px; height: 7px; background: var(--hub-mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(24, 167, 122, 0.1); }
.hub-locale-form { margin: 0; }
.hub-locale-form button {
    min-width: 43px; height: 37px; padding: 0 10px; color: var(--hub-blue-dark); background: #e9f5fc;
    border: 1px solid #d1e7f5; border-radius: 11px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 850;
}
.hub-locale-form button:hover { color: #fff; background: var(--hub-blue); }

.hub-main { flex: 1; padding: 48px 0 32px; }
.hub-intro { max-width: 760px; margin-bottom: 30px; }
.hub-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--hub-blue); font-size: 10px; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; }
.hub-eyebrow i { width: 8px; height: 8px; background: var(--hub-mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(24, 167, 122, 0.12); }
.hub-intro h1 { margin: 13px 0 9px; font-size: clamp(34px, 4.5vw, 52px); line-height: 1.04; letter-spacing: -0.045em; }
.hub-intro p { margin: 0; color: var(--hub-muted); font-size: 15px; line-height: 1.65; }

.hub-access-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hub-access-card {
    min-height: 270px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between;
    background: var(--hub-surface); border: 1px solid var(--hub-line); border-radius: 22px;
    box-shadow: 0 16px 38px rgba(16, 77, 126, 0.07);
}
.hub-card-topline { display: flex; align-items: flex-start; justify-content: space-between; }
.hub-card-topline > small { color: #9dafbf; font-size: 10px; font-weight: 850; }
.hub-card-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--hub-blue); background: #e9f5fc; border-radius: 13px; }
.hub-card-icon svg { width: 21px; fill: currentColor; }
.hub-card-audience { color: var(--hub-blue); font-size: 9px; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.hub-access-card h2 { margin: 7px 0 7px; font-size: 23px; letter-spacing: -0.03em; }
.hub-access-card p { margin: 0; color: var(--hub-muted); font-size: 12px; line-height: 1.58; }
.hub-access-card > a {
    min-height: 43px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between;
    color: var(--hub-blue-dark); background: #edf6fc; border-radius: 12px; font-size: 12px; font-weight: 850;
}
.hub-access-card > a:hover { background: #dff0fa; }
.hub-access-card > a span { font-size: 17px; }
.hub-access-card-platform { color: #fff; background: linear-gradient(145deg, #0a3e6e, #1679b9); border-color: transparent; }
.hub-access-card-platform .hub-card-icon { color: #fff; background: rgba(255, 255, 255, 0.13); }
.hub-access-card-platform .hub-card-topline > small, .hub-access-card-platform p { color: rgba(255, 255, 255, 0.68); }
.hub-access-card-platform .hub-card-audience { color: #77daf5; }
.hub-access-card-platform > a { color: #0b4d86; background: #fff; }
.hub-access-card-fleet .hub-card-icon { color: #1089bd; background: #e7f8fd; }
.hub-access-card-passenger .hub-card-icon { color: var(--hub-mint); background: #e8f8f2; }

.hub-shortcuts {
    margin-top: 18px; padding: 18px 20px; display: grid; grid-template-columns: 190px 1fr;
    align-items: center; gap: 22px; background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--hub-line); border-radius: 18px;
}
.hub-shortcuts-heading > span { color: var(--hub-blue); font-size: 9px; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.hub-shortcuts-heading h2 { margin: 5px 0 0; font-size: 18px; letter-spacing: -0.02em; }
.hub-shortcuts-list { display: grid; grid-template-columns: repeat(4, 1fr); }
.hub-shortcuts-list a { min-width: 0; padding: 6px 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-inline-start: 1px solid var(--hub-line); }
.hub-shortcuts-list a:first-child { border-inline-start: 0; }
.hub-shortcuts-list a > i { width: 27px; height: 27px; display: grid; place-items: center; color: var(--hub-blue); background: #eaf5fb; border-radius: 8px; font-size: 8px; font-style: normal; font-weight: 850; }
.hub-shortcuts-list a > span { min-width: 0; font-size: 11px; font-weight: 800; }
.hub-shortcuts-list small { margin-top: 3px; display: block; overflow: hidden; color: #8193a5; font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.hub-shortcuts-list b { color: var(--hub-blue); font-size: 14px; }

.hub-footer { padding: 17px 0; color: #7a8fa3; border-top: 1px solid rgba(30, 104, 161, 0.1); font-size: 10px; }
.hub-footer .hub-shell { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hub-footer p { margin: 0; }

[dir="rtl"] .hub-access-card > a span,
[dir="rtl"] .hub-shortcuts-list b { transform: scaleX(-1); }

@media (max-width: 900px) {
    .hub-main { padding-top: 38px; }
    .hub-access-grid { grid-template-columns: 1fr 1fr; }
    .hub-access-card-platform { grid-column: 1 / -1; min-height: 235px; }
    .hub-shortcuts { grid-template-columns: 1fr; }
    .hub-shortcuts-list { grid-template-columns: 1fr 1fr; gap: 10px 0; }
    .hub-shortcuts-list a:nth-child(3) { border-inline-start: 0; }
}

@media (max-width: 620px) {
    .hub-shell { width: min(100% - 28px, 1180px); }
    .hub-header-inner { min-height: 68px; }
    .hub-brand img { width: 31px; height: 35px; }
    .hub-brand small { display: none; }
    .hub-environment { display: none; }
    .hub-main { padding: 34px 0 24px; }
    .hub-intro { margin-bottom: 24px; }
    .hub-intro h1 { font-size: 38px; }
    .hub-access-grid { grid-template-columns: 1fr; }
    .hub-access-card-platform { grid-column: auto; }
    .hub-access-card { min-height: 250px; }
    .hub-shortcuts-list { grid-template-columns: 1fr; }
    .hub-shortcuts-list a, .hub-shortcuts-list a:nth-child(3) { padding: 10px 4px; border-inline-start: 0; border-top: 1px solid var(--hub-line); }
    .hub-shortcuts-list a:first-child { border-top: 0; }
    .hub-footer .hub-shell { align-items: flex-start; flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}