@font-face {
  font-family: "Portal Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/roboto-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Portal Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.landing-body { font-family: "Portal Roboto", Arial, sans-serif; }
.landing-page { display: flex; flex-direction: column; min-height: 100dvh; }
.landing-page .public-header, .landing-page .public-footer { background: #0955a0; }
.landing-page .public-header-inner { width: min(1390px, calc(100% - 48px)); grid-template-columns: 248px minmax(400px, 1fr) auto; gap: 42px; }
.landing-page .public-brand { display: grid; gap: 0; width: 218px; }
.landing-page .public-brand img { width: 218px; height: 28px; max-width: 100%; }
.landing-page .public-brand small { margin: 0 0 0 47px; font-size: 6.5px; font-weight: 500; text-transform: uppercase; white-space: nowrap; }
.landing-page .public-nav { justify-content: flex-start; gap: 46px; }
.landing-page .public-nav a { font-size: 15px; }
.landing-page .support-link { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 16px; font-size: 14px; }
.landing-page .public-header .ui-icon, .landing-page .landing-mobile-nav .ui-icon { filter: brightness(0) invert(1); }
.landing-page .support-link .ui-icon { width: 18px; height: 18px; opacity: .7; }
.landing-page .public-clock { grid-template-columns: 22px auto; column-gap: 12px; min-width: 124px; padding-left: 22px; }
.landing-page .public-clock .ui-icon { grid-row: 1 / 3; align-self: center; width: 21px; height: 21px; opacity: .7; }
.landing-page .public-clock strong { font-size: 14px; font-weight: 500; }
.landing-page .public-clock span { font-size: 13px; }
.landing-page .landing-content { width: min(1302px, calc(100% - 64px)); padding: 37px 0 44px; }
.landing-page .landing-hero { min-height: 470px; grid-template-columns: minmax(0, 1fr) 536px; }
.landing-page .landing-hero::before {
  inset: 130px 42% 0 0;
  opacity: .16;
  background-color: #0764cc;
  background-blend-mode: luminosity;
  mask-image: linear-gradient(to right, #000 48%, transparent 100%), linear-gradient(to bottom, transparent, #000 42%);
  mask-composite: intersect;
  pointer-events: none;
}
.landing-page .landing-intro { min-height: 468px; padding: 54px 48px 38px; }
.landing-page .landing-intro h1 { font-size: 38px; font-weight: 500; line-height: 50px; }
.landing-page .landing-intro h1 span { margin-top: 0; }
.landing-page .welcome-break { display: none; }
.landing-page .landing-intro > p { max-width: 435px; margin-top: 23px; font-size: 18px; line-height: 28px; }
.landing-page .landing-features { right: 50px; bottom: 60px; left: 69px; grid-template-columns: 248px minmax(0, 1fr); gap: 38px; }
.landing-page .landing-features > div { gap: 18px; }
.landing-page .feature-mark { width: 60px; height: 60px; flex-basis: 60px; }
.landing-page .landing-features strong { font-size: 14px; font-weight: 500; }
.landing-page .landing-features small { margin-top: 4px; font-size: 13px; line-height: 18px; }
.landing-page .feature-mark .ui-icon, .landing-page .landing-advantages .ui-icon { width: 30px; height: 30px; }
.landing-page .landing-qr { width: calc(100% - 48px); min-height: 304px; padding: 30px 24px 24px; }
.landing-page .landing-qr h2 { margin-bottom: 23px; font-size: 20px; line-height: 25px; font-weight: 500; }
.landing-page .qr-launch-panel { min-height: 196px; grid-template-rows: 85px auto; row-gap: 27px; padding: 25px 16px 16px; }
.landing-page .qr-device-mark { width: 72px; height: 85px; }
.landing-page .qr-device-mark .ui-icon { width: 64px; height: 64px; }
.landing-page .qr-camera-button { min-height: 40px; padding: 8px 10px; line-height: 22px; font-size: 14px; gap: 8px; }
.landing-page .qr-camera-button .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.landing-page .landing-roles { margin: 30px 49px 0; }
.landing-page .landing-role { min-height: 116px; padding: 20px 30px; grid-template-columns: 68px minmax(0, 1fr) 46px; gap: 20px; }
.landing-page .landing-role strong { font-size: 20px; font-weight: 500; line-height: 25px; }
.landing-page .landing-role small { max-width: 245px; margin-top: 5px; font-size: 13px; line-height: 19px; }
.landing-page .landing-role b .ui-icon { width: 24px; height: 24px; }
.landing-page .role-avatar { border: 0; background: transparent; }
.landing-page .role-avatar .ui-icon { width: 46px; height: 46px; }
.landing-page .landing-role-dispatcher { color: #087782; background: #effafa; border-color: #bee5e4; }
.landing-page .landing-role-dispatcher .role-avatar { background: transparent; }
.landing-page .landing-role-dispatcher .ui-icon { filter: brightness(0) saturate(100%) invert(35%) sepia(74%) saturate(689%) hue-rotate(139deg) brightness(91%) contrast(96%); }
.landing-page .landing-roles:has(.landing-role-dispatcher) .landing-role { grid-template-columns: 46px minmax(0, 1fr) 32px; gap: 16px; padding: 20px; }
.landing-page .landing-roles:has(.landing-role-dispatcher) .landing-role b { width: 32px; height: 32px; }
.landing-page .landing-advantages { padding: 38px 48px 0; }
.landing-page .landing-advantages h2 { margin-bottom: 27px; line-height: 25px; }
.landing-page .landing-advantages > div { gap: 26px; }
.landing-page .landing-advantages article { gap: 15px; }
.landing-page .landing-advantages article > span { width: 55px; height: 55px; flex-basis: 55px; }
.landing-page .landing-advantages strong { font-size: 13px; font-weight: 500; }
.landing-page .landing-advantages small { font-size: 12px; line-height: 18px; }
.landing-page .public-footer { margin-top: auto; }
.landing-page .qr-device-mark .ui-icon, .landing-page .feature-mark .ui-icon,
.landing-page .landing-role-master b .ui-icon, .landing-page .landing-advantages .ui-icon { filter: brightness(0) saturate(100%) invert(26%) sepia(97%) saturate(4452%) hue-rotate(208deg) brightness(96%) contrast(106%); }
.landing-page .landing-role-driver b .ui-icon { filter: brightness(0) saturate(100%) invert(36%) sepia(92%) saturate(1321%) hue-rotate(123deg) brightness(93%) contrast(103%); }

:root[data-theme="dark"] .landing-page .public-header, :root[data-theme="dark"] .landing-page .public-footer { background: #082d51; }
:root[data-theme="dark"] .landing-page .landing-hero { background: #20242b; }
:root[data-theme="dark"] .landing-page .landing-intro h1 span { color: #80b6ff; }
:root[data-theme="dark"] .landing-page .landing-intro > p { color: #b4bfce; }
:root[data-theme="dark"] .landing-page .feature-mark, :root[data-theme="dark"] .landing-page .landing-role b { background: #293544; border-color: #465365; }
:root[data-theme="dark"] .landing-page .landing-features > div { background: transparent; }
:root[data-theme="dark"] .landing-page .landing-hero, :root[data-theme="dark"] .landing-page .landing-qr,
:root[data-theme="dark"] .landing-page .qr-launch-panel, :root[data-theme="dark"] .landing-page .landing-role,
:root[data-theme="dark"] .landing-page .landing-advantages article > span, :root[data-theme="dark"] .landing-page .landing-help { border-color: #3c4553; }
:root[data-theme="dark"] .landing-page .landing-role-master { color: #80b6ff; }
:root[data-theme="dark"] .landing-page .landing-role-driver { color: #75d9a1; }
:root[data-theme="dark"] .landing-page .landing-role-dispatcher { color: #77d5dd; background: #172b30; }
:root[data-theme="dark"] .landing-page .landing-role-dispatcher .ui-icon { filter: brightness(0) saturate(100%) invert(78%) sepia(21%) saturate(698%) hue-rotate(134deg) brightness(96%) contrast(95%); }
:root[data-theme="dark"] .landing-page .landing-help small { color: #b4bfce; }
:root[data-theme="dark"] .landing-page .landing-help > a { color: #9dccff; background: #293544; }
:root[data-theme="dark"] .landing-page .qr-device-mark .ui-icon,
:root[data-theme="dark"] .landing-page .feature-mark .ui-icon, :root[data-theme="dark"] .landing-page .landing-advantages .ui-icon,
:root[data-theme="dark"] .landing-page .help-mark .ui-icon, :root[data-theme="dark"] .landing-page .landing-role-master .ui-icon { filter: brightness(0) saturate(100%) invert(72%) sepia(29%) saturate(934%) hue-rotate(184deg) brightness(101%) contrast(101%); }
:root[data-theme="dark"] .landing-page .landing-role-driver .ui-icon { filter: brightness(0) saturate(100%) invert(80%) sepia(28%) saturate(581%) hue-rotate(93deg) brightness(98%) contrast(86%); }

@media (max-width: 1200px) {
  .landing-page .public-header-inner { gap: 24px; grid-template-columns: 218px 1fr auto; }
  .landing-page .public-nav { gap: 24px; }
  .landing-page .public-clock { display: none; }
  .landing-page .landing-hero { grid-template-columns: minmax(0, 1fr) 440px; }
  .landing-page .landing-intro { padding: 40px 28px; }
  .landing-page .landing-intro h1 { font-size: 32px; line-height: 40px; }
  .landing-page .landing-features { left: 28px; right: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .landing-page .landing-features > div { align-items: flex-start; flex-direction: column; gap: 10px; }
  .landing-page .qr-camera-button { white-space: normal; }
  .landing-page .landing-roles { margin-inline: 0; }
  .landing-page .landing-advantages { padding-inline: 0; }
}
@media (max-width: 1000px) {
  .landing-page .public-header-inner { grid-template-columns: 218px auto; }
}
@media (max-width: 820px) {
  .landing-page .public-header-inner { width: calc(100% - 40px); min-height: 92px; }
  .landing-page .public-header { min-height: 92px; }
  .landing-page .support-link { display: none; }
  .landing-page .public-brand { width: 218px; }
  .landing-page .public-nav { gap: 14px; }
  .landing-page .landing-content { width: min(680px, calc(100% - 32px)); padding: 18px 0 20px; }
  .landing-page .landing-hero { display: block; min-height: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .landing-page .landing-hero::before { display: none; }
  .landing-page .landing-intro { min-height: 385px; padding: 30px 24px; isolation: isolate; overflow: hidden; background: var(--surface); box-shadow: var(--portal-shadow); }
  .landing-page .landing-intro::before { position: absolute; z-index: -1; inset: 110px 0 0; background: url('/assets/portal-fleet-hero.webp') center bottom / cover; opacity: .13; mask-image: linear-gradient(to bottom, transparent, #000 65%); content: ""; }
  .landing-page .landing-intro h1 { font-size: 28px; line-height: 36px; }
  .landing-page .welcome-break { display: block; }
  .landing-page .landing-intro > p { margin-top: 16px; font-size: 16px; line-height: 24px; }
  .landing-page .landing-features { position: static; margin-top: 28px; gap: 20px; }
  .landing-page .landing-features > div { align-items: center; text-align: center; gap: 10px; }
  .landing-page .landing-features strong { font-size: 13px; }
  .landing-page .landing-features small { font-size: 12px; line-height: 17px; }
  .landing-page .feature-mark { width: 52px; height: 52px; flex-basis: 52px; }
  .landing-page .landing-qr { width: 100%; min-height: 0; margin: 16px 0 0; padding: 26px 20px 24px; }
  .landing-page .landing-qr h2 { font-size: 20px; margin-bottom: 20px; }
  .landing-page .qr-launch-panel { row-gap: 16px; padding: 20px 12px 14px; }
  .landing-page .qr-camera-button { min-height: 48px; line-height: 20px; white-space: normal; }
  .landing-page .landing-roles { grid-template-columns: 1fr; gap: 12px; margin: 20px 0 0; }
  .landing-page .landing-role { min-height: 110px; padding: 16px; grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 14px; }
  .landing-page .landing-role strong { font-size: 18px; line-height: 24px; }
  .landing-page .landing-role small { font-size: 12px; line-height: 18px; }
  .landing-page .landing-role b { width: 32px; height: 32px; }
  .landing-page .landing-roles:has(.landing-role-dispatcher) .landing-role { padding: 16px; grid-template-columns: 48px minmax(0, 1fr) 32px; gap: 14px; }
  .landing-page .landing-help { display: grid; margin-top: 16px; grid-template-columns: 34px minmax(0, 1fr) auto; padding: 16px; gap: 10px; }
  .landing-page .landing-help small { font-size: 12px; }
  .landing-page .help-mark { width: 34px; height: 34px; border: 0; background: transparent; }
  .landing-page .help-mark .ui-icon { width: 30px; height: 30px; }
  .landing-page .landing-help > a { padding: 10px; }
  .landing-page .landing-advantages { display: none; }
  .landing-page .public-footer { min-height: 0; gap: 14px; padding: 20px 24px; }
  .landing-page .public-footer nav { gap: 12px; font-size: 11px; }
  .landing-page .landing-mobile-nav { position: static; display: grid; min-height: 80px; }
  .landing-page .landing-mobile-nav .ui-icon { width: 26px; height: 26px; opacity: .8; }
  :root[data-theme="dark"] .landing-page .landing-hero { background: transparent; }
}
@media (max-width: 380px) {
  .landing-page .public-header-inner { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .landing-page .public-brand { width: 202px; }
  .landing-page .public-brand img { width: 202px; }
  .landing-page .public-brand small { font-size: 6px; margin-left: 43px; }
  .landing-page .landing-intro { padding-inline: 20px; }
  .landing-page .landing-intro h1 { font-size: 26px; line-height: 34px; }
  .landing-page .landing-role { gap: 10px; grid-template-columns: 40px minmax(0, 1fr) 28px; padding: 14px; }
  .landing-page .landing-role b { width: 28px; height: 28px; }
  .landing-page .landing-role strong { font-size: 17px; }
  .landing-page .landing-roles:has(.landing-role-dispatcher) .landing-role { gap: 10px; grid-template-columns: 40px minmax(0, 1fr) 28px; padding: 14px; }
}