.page { font-synthesis: none; }
@font-face {
  font-family: 'Lantegra Heading'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/motion-preview/montserrat-800-cyrillic-v31.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lantegra Heading'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/motion-preview/montserrat-800-latin-v31.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;
}
.page, .page * { box-sizing: border-box; }
body { margin: 0; }
.page { --brand-red: #d71920; --brand-yellow: #ffdd00; --graphite: #171a20; color: var(--graphite); background: #f7f8fa; font-family: Arial, Helvetica, sans-serif; }
.page a { color: inherit; text-decoration: none; }
.iconSprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.uiIcon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.page button, .headerDialog button { font: inherit; color: inherit; cursor: pointer; }
.header { position: sticky; top: 0; z-index: 100; height: 148px; background: #fff; }
.headerInner { width: min(1568px, 100%); height: 84px; margin: auto; padding: 0 clamp(24px, 3vw, 48px); display: grid; grid-template-columns: 244px minmax(220px, 1fr) auto auto; align-items: center; gap: clamp(12px, 1.8vw, 28px); }
.brand { position: relative; flex: none; }
.logo { display: block; width: 244px; height: 57px; object-fit: contain; }
.headerSearch { width: min(490px, 100%); height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid #cbd1da; border-radius: 999px; background: #fff; text-align: left; font-size: 12px !important; white-space: nowrap; color: #68707c !important; }
.headerSearch .uiIcon { width: 20px; height: 20px; }
.searchSpark { margin-left: auto; color: #edac00; font-size: 25px; }
.mobileSearchLabel, .mobileToggle { display: none; }
.headerTools { display: flex; align-items: center; gap: 18px; }
.headerTools button, .phoneChoices, .mobileToggle { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; }
.mobileToggle { display: none; }
.accountButton span { font-size: 12px; font-weight: 700; white-space: nowrap; }
.headerPhone { display: grid; grid-template-columns: auto 28px; align-items: center; column-gap: 2px; border-left: 1px solid #d8dde4; padding-left: 22px; }
.phoneNumber { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: clamp(16px, 1.25vw, 21px); font-weight: 700; }
.phoneNumber .uiIcon { width: 22px; height: 22px; color: var(--brand-red); fill: currentColor; stroke-width: 1; }
.phoneChoices { min-width: 28px; }
.phoneChoices .uiIcon { width: 16px; height: 16px; }
.phoneHours { grid-column: 1 / -1; margin-top: -4px; text-align: center; color: #68707c; font-size: 10px; white-space: nowrap; }
.headerBottom { height: 64px; border-top: 1px solid #e5e8ec; }
.headerBottomInner { width: min(1568px, 100%); height: 100%; margin: auto; padding: 0 clamp(24px, 3vw, 48px); display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 44px); color: var(--graphite); font-size: 13px; font-weight: 700; white-space: nowrap; }
.nav a, .nav button { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; border: 0; padding: 0; background: none; }
.navChevron { width: 15px; height: 15px; stroke-width: 2; }
.situationShortcut { min-height: 44px; padding: 0 0 0 28px; border: 0; border-left: 1px solid #d8dde4; background: none; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap; }
.consultationAction { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 0 23px; margin-left: auto; border-radius: 8px; color: #fff !important; background: var(--brand-red); font-size: 12px; font-weight: 700; white-space: nowrap; }
.consultationAction:hover { background: #bd141b; }
.situationShortcut { display: inline-flex; align-items: center; }
.header a:hover, .header button:hover { text-decoration: none; }
.header .nav a:hover, .header .nav button:hover, .situationShortcut:hover { color: var(--brand-red); }
.header:not(.headerEnhanced) button[data-open-panel] { display: none; }
.noScriptNote { margin: 0; padding: 10px 20px; font-size: 12px; }
.header:has(.noScriptNote) { height: auto; }
.hero { position: relative; isolation: isolate; height: clamp(700px, calc(100svh - 148px), 940px); overflow: hidden; color: #fff; background: var(--graphite); }
.shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, #35363a, #191d23 65%, #11151b); }
.shade::after { content: ''; position: absolute; inset: 0; background: url('/motion-preview/graphite-grain-v1.svg') repeat; opacity: .09; }
.networkBackdrop { position: absolute; inset: -3px; pointer-events: none; }
.networkBackdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .78; filter: blur(1px); }
.networkBackdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#171a20 0%, rgb(23 26 32 / 50%) 15%, transparent 36%, rgb(23 26 32 / 12%)), radial-gradient(ellipse at 50% 42%, rgb(23 26 32 / 24%), transparent 66%); }
.heroTitle { position: relative; z-index: 7; margin: 0; padding: 32px 20px 0; font-family: 'Lantegra Heading', Arial, Helvetica, sans-serif; font-size: clamp(30px, 2.85vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; text-align: center; }
.heroTitle > span { color: var(--brand-red); }
.orbitStage { position: absolute; inset: 140px max(0px, calc((100% - 1500px) / 2)) 0; }
.portraitFrame { position: absolute; z-index: 2; inset: 0; pointer-events: none; mask-image: linear-gradient(90deg, transparent 20%, #000 40%, #000 60%, transparent 80%), linear-gradient(transparent, #000 9%); mask-composite: intersect; }
.poster, .video, .compactVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; }
.video, .compactVideo { opacity: 0; transition: opacity 140ms ease; }
.videoReady { opacity: 1; }
.orbitCards { display: contents; }
.orbitEnhanced .orbitCard { will-change: transform, opacity; }
.orbitEnhanced .orbitStage { cursor: grab; }
.orbitEnhanced .orbitCard { cursor: grab; user-select: none; -webkit-user-select: none; }
.orbitDragging .orbitStage, .orbitDragging .orbitCard { cursor: grabbing; }
.orbitEnhanced .energyPoint { offset-path: none; animation: none; will-change: transform; }
.orbitCard { --accent: #e1e4e8; --glow: 225 228 232; position: absolute; z-index: 4; width: clamp(216px, 16.2vw, 252px); aspect-ratio: 3 / 4; transform-origin: center; }
.cardSupport { left: 11%; top: 27%; transform: rotate(5deg) scale(.82); }
.cardProducts { right: 10%; top: 22%; transform: rotate(-5deg) scale(.76); }
.cardDevelopment { left: 7%; top: 55%; transform: rotate(4deg); }
.cardIntegrations { right: 7%; top: 51%; transform: rotate(-4deg); }
.cardAutomation { left: 59%; top: 50%; transform: rotate(-3deg) scale(.87); }
.cardAutomation img { object-position: 30% center; }
.cardIntegrations img { filter: saturate(.12) brightness(1.04); }
/* The bevel travels inside the card's existing composited layer, not as an
   independently animated blur. The small offset exposes a rigid glass rim. */
.orbitCard::before { content: ''; position: absolute; inset: 0; transform: translate(-6px, 3px); border: 2px solid var(--accent); border-radius: 15px; background: linear-gradient(110deg, #fafbfc, var(--accent) 5%, #353b45 14%, #191d24 90%, var(--accent)); box-shadow: -2px 0 3px rgb(242 244 247 / 75%), -4px 0 10px rgb(var(--glow) / 24%), 0 5px 10px rgb(var(--glow) / 10%), 0 18px 30px rgb(0 0 0 / 25%); pointer-events: none; }
.orbitCard::after { content: ''; position: absolute; inset: 0; border: 1px solid rgb(237 240 243 / 70%); border-radius: 14px; box-shadow: inset 2px 1px 3px rgb(247 249 251 / 70%), inset -1px -1px 2px rgb(var(--glow) / 65%); pointer-events: none; }
.cardGlass { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border: 1px solid #c6cbd2; border-left: 2px solid var(--accent); border-radius: 14px; background: linear-gradient(135deg, rgb(61 68 80 / 85%), rgb(23 27 33 / 94%)); box-shadow: -2px 0 6px rgb(var(--glow) / 20%), inset 0 0 12px rgb(238 241 245 / 8%); transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease; }
.cardGlass img { display: block; width: 100%; height: 65%; object-fit: cover; flex: none; }
.cardGlass[data-image-state] img { opacity: 0; }
.cardGlass[data-image-state="ready"] img { opacity: 1; }
.cardGlass[data-image-state="failed"]::before { content: 'Изображение временно недоступно'; position: absolute; inset: 0 0 auto; height: 65%; display: grid; place-items: center; padding: 16px; color: #d7dbe1; text-align: center; font-size: 13px; line-height: 1.4; background: linear-gradient(135deg, #343b46, #1c2129); }
.cardCaption { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; padding: 16px 16px 22px; font-size: clamp(12px, .95vw, 15px); line-height: 1.22; font-weight: 600; text-transform: uppercase; }
.cardCaption::after { content: ''; position: absolute; bottom: 14px; left: 16px; width: 35px; height: 2px; background: var(--brand-red); }
.cardArrow { flex: none; width: 22px; height: 22px; }
.cardText { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.orbitCard .cardCaption { align-items: flex-start; padding: 12px 12px 24px; font-size: clamp(14.4px, 1.14vw, 18px); }
.cardTitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.orbitCard .cardArrow { position: absolute; right: 9px; bottom: 9px; }
.orbitCard .cardTitle { overflow-wrap: anywhere; }
.carouselNav { flex-wrap: wrap; }
.orbitDirectory { position: absolute; bottom: 18px; right: 24px; z-index: 7; color: #fff; }
.orbitDirectory > summary { cursor: pointer; padding: 10px; font-size: 14px; }
.orbitDirectory > nav { position: absolute; bottom: 45px; right: 0; width: min(580px,80vw); max-height: 65vh; overflow: auto; padding: 14px; border: 1px solid #858a92; border-radius: 12px; background: #242830; box-shadow: 0 12px 35px #0008; }
.orbitDirectory a { display: flex; flex-direction: column; gap: 5px; padding: 12px; border-bottom: 1px solid #555a63; color: #fff; }
.orbitDirectory a span { font-size: 13px; color: #ddd; }
@media(max-width:1099px){.orbitDirectory{display:none}}
.cardSummary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--summary-lines, 2); overflow: hidden; text-transform: none; font-weight: 400; font-size: 19.8px; line-height: 1.3; color: #e1e4e8; }
.orbitCard .cardGlass > img { height: 50%; min-height: 0; flex-shrink: 1; }
.orbitExtra { display: none; }
.cardAutomation .cardCaption { font-size: clamp(14.4px, 1.14vw, 18px); }
.cardAutomation .cardArrow { position: absolute; right: 12px; bottom: 8px; }
.orbitCard:hover .cardGlass, .orbitCard:focus-visible .cardGlass { border-color: var(--brand-yellow); background: linear-gradient(135deg, rgb(68 74 84 / 85%), rgb(27 31 38 / 95%)); box-shadow: 0 0 6px #fff4a6, 0 0 20px rgb(255 221 0 / 65%), 0 0 34px rgb(255 221 0 / 20%), inset 0 0 14px rgb(255 241 160 / 12%); }
.orbitCard:hover .cardCaption::after, .orbitCard:focus-visible .cardCaption::after { background: var(--brand-yellow); }
.orbitCard:focus-visible { z-index: 6 !important; opacity: 1 !important; outline: 2px solid #fff; outline-offset: 7px; border-radius: 14px; }
.energy { position: absolute; inset: 0; pointer-events: none; }
.energyBack { z-index: 1; }
.energyFront { z-index: 3; opacity: .88; }
.energy svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.energyCore { opacity: .95; stroke-width: 1.4; }
.energySecondary { opacity: .55; stroke-width: .75; }
.energyWhisper { opacity: .22; stroke-width: .6; }
.energyRed .energyCore { opacity: 1; stroke-width: 2.2; }
.energyRed .energyBloom { opacity: .3; stroke-width: 5; }
.energyRed .energyGlow { opacity: .12; }
.energyRedSecondary { opacity: .95; stroke-width: 1.6; }
.energyRedWhisper { opacity: .55; stroke-width: .9; }
/* Layered, unfiltered strokes approximate a soft halo once at rasterization.
   Only the three existing light-point transforms move; paths stay static. */
.energyHalo { opacity: .035; stroke-width: 24; }
.energyGlow { opacity: .08; stroke-width: 12; }
.energyBloom { opacity: .24; stroke-width: 4; }
.energyPoint { --point-core: #fff9cf; --point-mid: #ffda2b; --point-halo: #ff9c0e; --point-rgb: 255 156 14; position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--point-core); box-shadow: 0 0 3px 1px var(--point-core), 0 0 9px 3px var(--point-mid), 0 0 16px 5px var(--point-halo), 0 0 24px 7px rgb(var(--point-rgb) / 28%); offset-path: ellipse(45% 29% at 50% 50%); offset-distance: 20%; animation: energyTravel 16s linear infinite; }
.energyPointRed { --point-core: #fff0df; --point-mid: #ff6470; --point-halo: #ff2738; --point-rgb: 255 39 56; offset-distance: 65%; animation-delay: -8s; animation-duration: 21s; }
.energyPointSmall { width: 4px; height: 4px; animation-delay: -5s; animation-duration: 26s; }
.energyPoint::before, .energyPoint::after { content: ''; position: absolute; pointer-events: none; background: linear-gradient(90deg, transparent, var(--point-core), transparent); }
.energyPoint::before { width: 13px; height: 1px; left: -4px; top: 2px; }
.energyPoint::after { width: 1px; height: 11px; left: 2px; top: -3px; background: linear-gradient(transparent, var(--point-core), transparent); }
@keyframes energyTravel { to { offset-distance: 120%; } }
.primaryAction { position: absolute; z-index: 7; left: 50%; bottom: 50px; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-width: 356px; min-height: 62px; padding: 0 36px; border-radius: 10px; background: var(--brand-red); box-shadow: 0 8px 28px rgb(75 0 4 / 18%); font-size: 17px; font-weight: 700; white-space: nowrap; transition: background 150ms ease; }
.primaryAction:hover { background: #bd141b; }
.primaryAction:focus-visible, .header a:focus-visible, .nav a:focus-visible, button:focus-visible, .headerDialog a:focus-visible, .siteSearchInput:focus-visible { outline: 3px solid #a31319; outline-offset: 4px; }
.primaryAction:focus-visible { outline-color: var(--brand-yellow); }
.motionProgress { position: absolute; z-index: 7; left: 50%; bottom: 12px; transform: translateX(-50%); width: 204px; max-width: calc(100% - 40px); display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid rgb(221 226 232 / 18%); border-radius: 999px; background: #20242b; opacity: 1; pointer-events: none; transition: opacity 250ms ease; }
.motionProgress[data-complete="true"] { opacity: 0; }
.motionProgressTrack { flex: 1; height: 3px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 12%); }
.motionProgressTrack > span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--brand-yellow); transition: transform 150ms linear; }
.motionProgressValue { min-width: 32px; color: #e4e7ec; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
[hidden] { display: none !important; }
.carouselNav, .mobileConsultation { display: none; }
.headerDialog { --brand-red: #d71920; width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 26px; border: 1px solid #dce0e5; border-radius: 18px; color: #171a20; background: #fff; font: 15px/1.6 Arial, Helvetica, sans-serif; box-sizing: border-box; overscroll-behavior: contain; }
.headerDialog::backdrop { background: rgb(10 13 18 / 58%); }
.headerDialog a { color: inherit; text-decoration: none; }
.headerDialog * { box-sizing: border-box; }
.dialogTop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dialogTop h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.dialogClose { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 8px; background: #f7f8fa; }
.headerDialog[data-panel="phone"] { margin: 0; position: fixed; inset: 82px max(24px, calc((100% - 1472px) / 2)) auto auto; width: 430px; }
.headerDialog[data-panel="menu"] { margin: 0; position: fixed; inset: 124px 0 0 auto; width: min(480px, 100%); max-width: 100%; height: calc(100dvh - 124px); max-height: none; border-radius: 0; }
.panelPhone { margin: 8px 0; font-size: clamp(22px, 4.7vw, 28px); font-weight: 700; }
.panelHours { margin: 0 0 24px; font-size: 12px; color: #68707c; }
.contactActions { display: grid; gap: 12px; margin: 22px 0 12px; }
.contactLabel { flex: 1; text-align: left; }
.panelAction, .panelSecondary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 12px 18px; border: 1px solid #cbd1da; border-radius: 10px; font-size: 13px !important; font-weight: 700 !important; background: #fff; }
.panelAction { width: 100%; color: #fff !important; background: var(--brand-red); border-color: var(--brand-red); }
.panelNote, .searchModeNote { color: #68707c; font-size: 12px; line-height: 1.5; }
.drawerNav { display: grid; margin-bottom: 20px; }
.drawerNav > a, .drawerNav > button { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 2px; min-height: 54px; border: 0; border-bottom: 1px solid #e1e5eb; background: none; text-align: left; font-size: 14px; font-weight: 700; }
.panelTextAction { display: block; margin: 14px auto 0; min-height: 44px; border: 0; background: none; font-size: 12px !important; font-weight: 700 !important; }
.searchFieldLabel { display: block; font-size: 13px; margin-bottom: 8px; }
.siteSearchInput { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #b8c1cc; border-radius: 8px; font: inherit; }
.searchSuggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.searchSuggestions button { padding: 9px 12px; min-height: 40px; border: 1px solid #dce0e5; border-radius: 999px; background: #f7f8fa; font-size: 10px !important; font-weight: 700 !important; text-align: left; }
.searchResults { display: grid; gap: 10px; }
.searchResults a { display: block; padding: 12px 14px; border: 1px solid #e0e4e9; border-radius: 10px; }
.searchResults strong { display: block; font-size: 13px; }
.searchResults .searchResult > span { display: block; margin-top: 4px; color: #68707c; font-size: 12px; line-height: 1.5; }
.panelOpen { overflow: hidden; }
.headerDialog[data-fallback] { position: fixed; inset: 40px 0 auto; margin: auto; z-index: 1000; box-shadow: 0 0 0 100vmax rgb(10 13 18 / 58%); }
.orbitPaused .energyPoint, .orbitInactive .energyPoint { animation-play-state: paused; }
.visuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.situations { max-width: 1536px; margin: auto; padding: 52px clamp(24px, 4vw, 64px) 60px; scroll-margin-top: 24px; }
.situations h2 { margin: 0 0 36px; font-family: 'Lantegra Heading', Arial, sans-serif; font-weight: 800; font-size: clamp(30px, 3.75vw, 58px); letter-spacing: -.035em; line-height: 1.12; text-align: center; }
.situations h2 > span { color: var(--brand-red); }
.situationsSubtitle { margin: -18px 0 30px; text-align: center; color: #626c79; font-size: 18px; }
.solutionSearch { display: flex; gap: 8px; width: min(100%, 1208px); margin: 0 auto 34px; }
.solutionInputWrap { display: flex; flex: 1; align-items: center; min-width: 0; min-height: 80px; gap: 18px; padding: 12px 22px; border: 1px solid #e8bf26; border-radius: 15px; background: #fff; box-shadow: 0 5px 22px rgb(232 191 38 / 9%); }
.solutionInputWrap:focus-within { outline: 2px solid var(--brand-yellow); outline-offset: 2px; }
.solutionSpark { display: grid; place-items: center; flex: none; width: 40px; height: 38px; border-radius: 8px; background: #ffdf66; font-size: 25px; }
.solutionInputWrap input { min-width: 0; width: 100%; min-height: 46px; padding: 4px 0; border: 0; outline: 0; background: transparent; color: var(--graphite); font: 22px Arial, sans-serif; }
.solutionInputWrap input::placeholder { color: #7c8492; opacity: 1; }
.solutionInfo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #f7f8fa; color: #626b7b !important; font-size: 18px !important; font-weight: 700 !important; }
.solutionSubmit { display: flex; flex: none; align-items: center; justify-content: center; gap: 24px; min-height: 80px; padding: 16px 32px; border: 0; border-radius: 15px; background: var(--brand-red); color: #fff !important; font-size: 17px !important; font-weight: 700 !important; }
.solutionSubmit:hover { background: #bd141b; }
.solutionMode, .solutionStatus { width: min(100%, 1208px); margin: -16px auto 24px; color: #616977; font-size: 13px; line-height: 1.5; }
.solutionStatus a { color: #a31319; text-decoration: underline; }
.situationNavigation { position: relative; z-index: 1; margin: 0 10px -1px; }
.situationPager { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 28px 0 0; }
.situationPager button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid #c9cfd8; border-radius: 999px; background: #fff; color: #252b36; font-size: 12px; font-weight: 800; }
.situationPager button:not(:disabled):hover { border-color: var(--brand-red); color: var(--brand-red); }
.situationPager button:disabled { opacity: .38; cursor: default; }
.situationPager span { min-width: 34px; text-align: center; color: #68707c; font-size: 12px; font-weight: 700; }
.situationPager #situations-next { min-height: 62px; padding: 16px 32px; gap: 16px; border-color: var(--brand-red); border-radius: 14px; background: var(--brand-red); color: #fff; font-size: 18px; box-shadow: 0 6px 18px rgb(215 25 32 / 22%); }
.situationPager #situations-next span { color: inherit; font-size: inherit; font-weight: 800; }
.situationPager #situations-next:not(:disabled):hover { border-color: #bd141b; background: #bd141b; color: #fff; box-shadow: 0 8px 22px rgb(215 25 32 / 30%); }
.situationPager button:focus-visible { outline: 3px solid #a31319; outline-offset: 4px; }
.situationTabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; min-width: 0; padding-top: 18px; }
.situationTabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.7vw, 26px); min-width: 0; min-height: 124px; margin-top: 18px; padding: 16px clamp(12px, 1.6vw, 24px); border: 1px solid #c9cfd8; border-radius: 20px 20px 0 0; background: linear-gradient(135deg, #f5f6f9, #edf0f4); color: #252b36; font-family: 'Lantegra Heading', Arial, sans-serif !important; font-size: clamp(14px, 1.85vw, 28px) !important; font-weight: 800 !important; }
.situationTabs button[aria-selected="true"] { z-index: 2; min-height: 142px; margin-top: 0; border-color: #edc54a; border-top: 3px solid var(--brand-red); border-bottom-color: #fff; background: #fff; color: var(--brand-red); }
.situationTabs button[aria-selected="true"]::after { content: ''; position: absolute; bottom: 12px; left: calc(50% - 7px); width: 14px; height: 8px; background: var(--brand-red); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.situationTabs button:focus-visible { outline: 3px solid #a31319; outline-offset: -6px; }
@media (hover: hover) { .situationTabs button:not([aria-selected="true"]):hover { background: #fff9e8; border-top-color: #d49c00; } }
.rolePortrait { display: block; flex: none; width: clamp(56px, 6.3vw, 96px); aspect-ratio: 1; border: 1px solid #d0d4db; border-radius: 50%; background-color: #e2e3e5; background-image: url('/motion-preview/role-portraits-v1.webp'); background-size: 300% 100%; background-position: left center; background-repeat: no-repeat; }
[data-situation-role="accountant"] .rolePortrait { background-position: center; }
[data-situation-role="it"] .rolePortrait { background-position: right center; }
.roleLabel { min-width: 0; }
.allSituations { display: inline-flex; align-items: center; gap: 12px; flex: none; min-height: 54px; padding: 8px 0; border: 0; background: transparent; color: #495161 !important; font-size: 14px !important; text-decoration: underline; text-underline-offset: 4px; }
.allSituations[aria-pressed="true"] { color: var(--brand-red) !important; }
.situationGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 24px; padding: 30px; border: 1px solid #dfe4ec; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgb(49 63 88 / 5%); }
.situationGrid:empty { display: none; }
.situation { scroll-margin-top: 24px; min-width: 0; border: 1px solid #dce1e7; border-radius: 20px; background: #fff; transition: box-shadow 160ms ease, transform 160ms ease; }
.situationGrid > a.situation { color: inherit; text-decoration: none; }
.situationTile { display: block; list-style: none; cursor: pointer; border-radius: 19px; overflow: hidden; }
.situationTile::-webkit-details-marker { display: none; }
.situationTile::marker { content: ''; }
.situationImage { display: block; width: 100%; aspect-ratio: 1.2; overflow: hidden; background: #d7d7d1; }
.situationImage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.situationCaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--situation-caption-height, calc(3.75 * clamp(15px, 1.42vw, 22px) + 40px)); min-height: 96px; padding: 20px 24px; color: #fff; background: linear-gradient(115deg, #34383f, #252932); }
.situationTitle { font-family: 'Lantegra Heading', Arial, sans-serif; font-size: clamp(15px, 1.42vw, 22px); line-height: 1.25; font-weight: 800; }
.situationArrow { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid #b9bec7; border-radius: 50%; }
.situation[open], .situation:target, .situation:focus-within { outline: 2px solid #ffd344; outline-offset: 1px; box-shadow: 0 5px 26px rgb(235 180 0 / 18%); }
.situationTile:focus-visible { outline: 3px solid #a31319; outline-offset: -5px; }
@media (hover: hover) { .situation:hover { transform: translateY(-3px); outline: 2px solid #ffd344; outline-offset: 1px; box-shadow: 0 8px 28px rgb(235 180 0 / 22%); } }
.situationDetail { padding: 22px 24px; }
.situationDetail h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; }
.situationDetail p { margin: 0 0 16px; color: #616977; font-size: 15px; line-height: 1.5; }
.situationDetail .situationPain { font-size: 13px; }
.situationConsult { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 11px; font-weight: 700; color: #a31319 !important; }
.situationConsult .uiIcon { width: 20px; height: 20px; }
.situationActions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 40px; }
.situationMore { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(20px, 3vw, 56px); }
.otherSituation { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #495161 !important; text-decoration: underline !important; text-underline-offset: 4px; }
.situationConsultation { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 70px; padding: 16px 30px; border: 1px solid var(--brand-red); border-radius: 13px; color: var(--brand-red) !important; font-size: 16px; font-weight: 700; }
.situationConsultation:hover { background: #fff0ed; }
.situationActions a:focus-visible, .allSituations:focus-visible { outline: 3px solid #a31319; outline-offset: 4px; }
.disclaimer { margin: 25px 0 0; color: #68707c; font-size: 13px; line-height: 1.6; }
.disclaimer a { color: #a31319; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1099px) {
  .header { height: 124px; }
  .headerInner { width: 100%; height: 124px; padding: 0 24px; grid-template-columns: minmax(0, 1fr) 44px 44px 44px; grid-template-rows: 68px 56px; gap: 0 8px; }
  .brand { grid-column: 1 / 3; grid-row: 1; }
  .logo { width: 180px; height: 48px; }
  .headerPhone { grid-column: 1 / -1; grid-row: 1; justify-self: end; border: 0; padding-left: 0; }
  .phoneNumber { font-size: 17px; }
  .headerSearch { grid-column: 1; grid-row: 2; width: max-content; max-width: 100%; gap: 7px; padding: 0 12px; color: var(--graphite) !important; font-weight: 700 !important; }
  .desktopSearchLabel { display: none; }
  .mobileSearchLabel { display: inline; }
  .searchSpark { order: -1; margin: 0; font-size: 18px; }
  .headerSearch .uiIcon { order: -2; }
  .headerTools { display: contents; }
  .accountButton { grid-column: 2; grid-row: 2; }
  .accountButton span { display: none; }
  .cartButton { grid-column: 3; grid-row: 2; }
  .header .mobileToggle { display: inline-flex; grid-column: 4; grid-row: 2; }
  .headerBottom { display: none; }
  .header:not(.headerEnhanced) .mobileToggle { display: none; }
  .header:not(.headerEnhanced) { height: auto; }
  .header:not(.headerEnhanced) .headerInner { height: 68px; grid-template-rows: 68px; }
  .header:not(.headerEnhanced) .headerBottom { display: block; height: auto; }
  .header:not(.headerEnhanced) .headerBottomInner { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .hero { height: auto; min-height: 0; padding-bottom: 80px; }
  .networkBackdrop img { object-position: 36% center; opacity: .65; }
  .heroTitle { padding-top: 30px; font-size: clamp(25px, 4vw, 38px); }
  .orbitStage { position: relative; inset: auto; padding-top: 350px; }
  .portraitFrame { inset: 0 auto auto 50%; width: min(100%, 622px); height: 350px; transform: translateX(-50%); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 9%); }
  .poster, .video, .compactVideo { object-fit: cover; }
  .energy { height: 350px; }
  .energyFront { display: none; }
  .orbitCards { position: relative; z-index: 5; display: flex; gap: 16px; margin: -12px 20px 20px; padding: 10px 8px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .orbitCards::-webkit-scrollbar { display: none; }
  .orbitCard { position: relative; inset: auto; flex: 0 0 clamp(180px, calc((100% - 16px) * .6), 264px); width: clamp(180px, calc((100% - 16px) * .6), 264px); transform: none; scroll-snap-align: start; }
  .orbitExtra { display: block; }
  .cardCaption { font-size: 16px; padding: 12px 12px 22px; }
  .cardTitle { font-size: 15.6px; }
  .primaryAction { position: relative; left: 50%; bottom: auto; }
  .mobileConsultation { position: relative; z-index: 7; display: block; width: max-content; max-width: calc(100% - 40px); margin: 20px auto 0; font-size: 12px; font-weight: 700; text-align: center; text-decoration: underline !important; text-underline-offset: 4px; }
  .carouselNav { justify-content: center; gap: 2px; margin: 0 20px 14px; }
  .headerEnhanced + main .carouselNav { display: flex; }
  .carouselNav button { position: relative; width: 28px; height: 36px; border: 0; background: none; }
  .carouselNav button::after { content: ''; position: absolute; width: 8px; height: 8px; left: 10px; top: 14px; border-radius: 50%; background: #91979f; }
  .carouselNav button[aria-current="true"]::after { background: var(--brand-red); }
  .motionProgress { bottom: 20px; }
  .headerDialog[data-panel="phone"] { inset: auto 0 0; width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; padding-top: 28px; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
  .headerDialog[data-panel="phone"]::before { content: ''; position: absolute; left: calc(50% - 21px); top: 9px; width: 42px; height: 4px; border-radius: 999px; background: #c2c8d0; }
}
@media (max-width: 600px) {
  .headerInner { padding: 0 16px; }
  .logo { width: clamp(118px, 36vw, 145px); height: auto; }
  .phoneNumber { gap: 4px; font-size: clamp(12px, 3.5vw, 14px); }
  .phoneNumber .uiIcon { width: 16px; height: 16px; }
  .phoneChoices { min-width: 22px; }
  .phoneChoices .uiIcon { width: 13px; height: 13px; }
  .headerPhone { grid-template-columns: auto 22px; }
  .phoneHours { font-size: 8.5px; }
  .headerSearch { padding: 0 10px; font-size: 11px !important; }
  .heroTitle { padding: 26px 16px 0; font-size: clamp(23px, 5.7vw, 32px); line-height: 1.2; }
  .orbitCards { margin: -8px 12px 12px; }
  .cardGlass { border-radius: 12px; }
  .orbitCard::before, .orbitCard::after { border-radius: 12px; }
  .orbitCard::before { transform: translate(-4px, 2px); }
  .cardCaption { font-size: 15px; }
  .energyPoint { animation: none; }
  .primaryAction { min-width: 0; max-width: calc(100% - 40px); min-height: 56px; padding: 0 18px; font-size: clamp(12px, 3.6vw, 15px); gap: 18px; }
  .headerDialog { padding: 20px; }
}
@media (max-width: 350px) {
  .phoneNumber .uiIcon { display: none; }
}
@media (max-width: 900px) {
  .situationGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .situationTabs button { flex-direction: column; gap: 10px; padding: 14px 6px 26px; min-height: 130px; font-size: clamp(12px, 1.8vw, 16px) !important; }
  .situationTabs button[aria-selected="true"] { min-height: 148px; }
  .situationTabs button[aria-selected="true"]::after { bottom: 9px; }
  .rolePortrait { width: 58px; }
  .allSituations { min-height: 44px; font-size: 12px !important; }
  .solutionSubmit { gap: 12px; padding: 16px 22px; font-size: 14px !important; }
  .solutionInputWrap { padding: 10px 14px; gap: 12px; }
  .solutionInputWrap input { font-size: 18px; }
  .situationCaption { padding: 18px; }
}
@media (max-width: 600px) {
  .situations { padding: 38px 20px 45px; }
  .situations h2 { font-size: clamp(26px, 6.8vw, 38px); margin-bottom: 26px; }
  .solutionSearch { flex-direction: column; margin-bottom: 24px; }
  .solutionInputWrap, .solutionSubmit { min-height: 62px; border-radius: 12px; }
  .solutionSpark { width: 32px; height: 32px; font-size: 21px; }
  .solutionInputWrap { gap: 10px; }
  .solutionInfo { width: 36px; height: 44px; }
  .solutionInputWrap input { font-size: 16px; }
  .solutionSubmit { justify-content: space-between; font-size: 15px !important; }
  .situationNavigation { margin-left: 0; margin-right: 0; }
  .situationPager { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin: 22px 0 0; }
  .situationPager button { min-width: 48px; padding: 8px 12px; }
  .situationPager #situations-prev { justify-self: start; }
  .situationPager #situations-next { grid-column: 1 / -1; grid-row: 1; width: 100%; min-height: 58px; padding: 16px 20px; font-size: 17px; }
  .situationTabs { padding-top: 12px; }
  .situationTabs button { min-height: 116px; margin-top: 12px; gap: 8px; padding: 12px 2px 24px; border-radius: 12px 12px 0 0; font-size: clamp(9px, 2.65vw, 14px) !important; line-height: 1.2; }
  .situationTabs button[aria-selected="true"] { min-height: 128px; margin-top: 0; }
  .rolePortrait { width: 48px; }
  .situationGrid { grid-template-columns: 1fr; gap: 20px; padding: 16px 12px; border-radius: 0 0 16px 16px; }
  .situation { width: 100%; max-width: 460px; justify-self: center; }
  .situationTitle { font-size: clamp(17px, 4.3vw, 21px); }
  .situationCaption { height: var(--situation-caption-height, calc(5 * clamp(17px, 4.3vw, 21px) + 36px)); min-height: 86px; }
  .situationArrow { width: 42px; height: 42px; }
  .situationActions { gap: 16px; margin-top: 26px; }
  .situationConsultation { width: 100%; justify-content: space-between; min-height: 58px; gap: 12px; padding: 14px 16px; font-size: clamp(10px, 2.9vw, 14px); }
  .otherSituation { font-size: 12px; }
  .situationMore { width: 100%; justify-content: space-between; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .energyPoint { animation: none; }
  .cardGlass, .video, .compactVideo, .primaryAction, .motionProgress, .motionProgressTrack > span { transition: none; }
  .situation { transition: none; }
}