:root {
  --sber-green: #148f2b;
  --sber-text: #3b3b3b;
  --sber-secondary-copy: #767676;
  --sber-card: #f4f5f2;
}

.sber-case { overflow: clip; }
.topbar .back-link { top: 14px; width: 36px; height: 36px; }
.sber-hero, .sber-facts, .sber-challenge, .sber-portfolio-intro, .sber-comparison { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

.sber-hero { height: 858px; position: relative; }
.sber-hero__copy { position: absolute; top: 49px; left: 50%; width: 560px; max-width: 100%; text-align: center; transform: translateX(-50%); z-index: 1; }
.sber-hero__eyebrow { color: var(--secondary-caption); font-size: 14px; font-weight: 300; line-height: 19px; }
.sber-hero h1 { color: #404040; font-size: 48px; font-weight: 600; line-height: 74px; }
.sber-hero__dek { color: var(--sber-text); font-size: 18px; font-weight: 400; line-height: 24px; }
.sber-hero__visual { position: absolute; top: 236px; left: 0; width: 100%; height: 613px; overflow: hidden; border-radius: 36px; background: #d9e3d7 url('/assets/sberbank/sber-background.png') center center / cover no-repeat; }
.sber-hero__tablet { position: absolute; top: 44px; left: 50%; width: 543px; max-width: none; height: auto; transform: translateX(-50%); }

.sber-facts { height: 166px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-top: 22px; }
.sber-facts > div { min-width: 0; }
.sber-facts dt, .sber-facts dd { font-size: 16px; font-weight: 500; line-height: 22px; }
.sber-facts dt { color: var(--meta-label); }
.sber-facts dd { color: var(--sber-text); margin-top: 0; }

.sber-challenge { height: 801px; position: relative; }
.sber-section-head { position: relative; height: 100%; }
.sber-section-label { position: absolute; top: 48px; left: 0; display: flex; align-items: center; gap: 6px; color: var(--sber-green); font-size: 16px; font-weight: 500; line-height: 18px; }
.sber-section-label img { flex: none; width: 18px; height: 18px; }
.sber-section-label img { animation: star-spin 5s linear infinite; }
@keyframes star-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sber-section-label img { animation: none; } }
.sber-section-head h2 { position: absolute; top: 94px; left: 0; width: 400px; color: var(--sber-text); font-size: 36px; font-weight: 500; letter-spacing: 0; line-height: 41px; }
.sber-heading-phrase { white-space: nowrap; }
.sber-section-copy { position: absolute; top: 94px; left: 461px; width: 641px; color: var(--sber-text); font-size: 16px; font-weight: 400; line-height: 22px; }
.sber-section-copy p + p { margin-top: 22px; }
.sber-challenge__cards { position: absolute; top: 284px; left: 0; right: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; }
.sber-challenge__card { height: 220px; padding: 30px 31px; border-radius: 36px; background: var(--sber-card); }
.sber-challenge__card h3 { color: var(--sber-text); font-size: 24px; font-weight: 500; line-height: 28px; }
.sber-challenge__card p { color: var(--sber-text); font-size: 16px; font-weight: 400; line-height: 22px; margin-top: 12px; }
.sber-challenge__card:first-child p { max-width: 265px; }
.sber-challenge__card:nth-child(2) h3 { max-width: 220px; }
.sber-challenge__context { position: absolute; top: 540px; left: 0; right: 0; display: grid; grid-template-columns: 601px 481px; justify-content: space-between; border-top: 1px solid #f5f5f9; padding-top: 31px; }
.sber-challenge__context h3 { color: var(--sber-secondary-copy); font-size: 16px; font-weight: 500; line-height: 22px; }
.sber-challenge__context p { color: var(--sber-secondary-copy); font-size: 16px; font-weight: 400; line-height: 22px; margin-top: 12px; }
.sber-challenge__topics { list-style: none; display: flex; gap: 8px; margin: 35px 0 0; padding: 0; }
.sber-challenge__topics li { display: grid; place-items: center; flex: 0 0 144px; height: 68px; border-radius: 18px; background: var(--sber-card); color: #888; font-size: 16px; line-height: 22px; }
.sber-challenge__topics li.is-active { background: #e4efdf; color: #667b65; }

.sber-portfolio-intro { height: 262px; position: relative; }
.sber-portfolio-intro .sber-section-copy p + p { margin-top: 0; }
.sber-comparison { margin-top: 0; margin-bottom: 0; }
.sber-comparison__stage { --split: 50%; position: relative; width: 100%; aspect-ratio: 1160 / 779; border-radius: 36px; overflow: hidden; background: #eef4eb; cursor: ew-resize; touch-action: none; user-select: none; }
.sber-comparison__stage:focus-visible { outline: none; }
.sber-comparison__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.sber-comparison__image--before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.sber-comparison__divider { position: absolute; left: var(--split); top: 0; bottom: 0; width: 3px; border-inline: 1px solid rgba(255, 255, 255, .68); background: rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(1.5px) saturate(1.12) brightness(1.04); backdrop-filter: blur(1.5px) saturate(1.12) brightness(1.04); transform: translateX(-50%); pointer-events: none; }
.sber-comparison__stage:focus-visible:not(.is-pointer-focus) .sber-comparison__divider { border-inline-color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .42); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sber-comparison__divider { background: rgba(255, 255, 255, .7); }
}
.sber-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.sber-story { position: relative; width: min(1160px, calc(100% - 48px)); margin-inline: auto; color: var(--sber-text); }
.sber-story--goal { height: 2523px; }
.sber-story--catalog { height: 1092px; }
.sber-story--outcomes { height: 495px; }
.sber-story--contact { height: 300px; }
.sber-story .sber-section-label { top: 48px; }
.sber-story__heading { position: absolute; top: 94px; left: 0; width: 400px; font-size: 36px; font-weight: 500; line-height: 41px; }
.sber-story__intro-copy { position: absolute; top: 94px; left: 461px; width: 640px; color: var(--sber-text); font-size: 16px; font-weight: 400; line-height: 22px; }
.sber-story__intro-copy p + p { margin-top: 22px; }

.sber-story__steps { position: absolute; top: 284px; left: 0; display: grid; grid-template-columns: repeat(3, 361px); gap: 39px; }
.sber-story__step { height: 189px; padding: 24px; border-radius: 36px; background: var(--sber-card); }
.sber-story__step span { display: block; color: var(--sber-green); font-size: 36px; font-weight: 400; line-height: 41px; }
.sber-story__step h3 { margin-top: 16px; font-size: 24px; font-weight: 500; line-height: 28px; }
.sber-story__step p { margin-top: 12px; font-size: 16px; line-height: 22px; }
.sber-story__divider { position: absolute; top: 521px; left: -20px; width: 1200px; border-top: 1px solid #f5f5f9; }
.sber-story__explanation { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 263px 1fr; column-gap: 39px; color: var(--sber-text); font-size: 16px; line-height: 22px; }
.sber-story__explanation h3 { font-size: 24px; font-weight: 500; line-height: 28px; }
.sber-story__explanation--assumptions { top: 570px; }
.sber-story__explanation--assumptions > div { padding-top: 5px; width: 760px; }
.sber-story__explanation--assumptions p + p { margin-top: 22px; }
.sber-story__explanation--difference { top: 1587px; }
.sber-story__explanation--difference > p { padding-top: 6px; width: 800px; }

.sber-story__visual { position: absolute; left: 0; right: 0; }
.sber-story__visual-bg { position: absolute; left: 0; top: 60px; width: 100%; height: 710px; border-radius: 36px; background: #dfeadd url('/assets/sberbank/sber-background.png') center center / cover no-repeat; }
.sber-story__tablet { position: absolute; z-index: 1; top: 0; left: 539px; width: 562px; max-width: none; height: auto; }
.sber-story__note { position: absolute; z-index: 2; left: 58px; width: 400px; padding: 24px 31px; border-radius: 24px; background: var(--sber-card); font-size: 14px; line-height: 19px; }
.sber-story__note-label { color: var(--sber-green); font-size: 14px; font-weight: 500; line-height: 19px; }
.sber-story__note-label + p { margin-top: 12px; }
.sber-story__visual--goal-one { top: 709px; height: 770px; }
.sber-story__visual--goal-one .sber-story__note { top: 117px; height: 138px; }
.sber-story__visual--goal-two { top: 1664px; height: 779px; }
.sber-story__visual--goal-two .sber-story__visual-bg { top: 69px; }
.sber-story__visual--goal-two .sber-story__note { top: 174px; height: 191px; left: 58px; padding: 24px; }
.sber-story__visual--goal-two .sber-story__note h3 { margin-top: 12px; font-size: 16px; font-weight: 500; line-height: 19px; }
.sber-story__visual--goal-two .sber-story__note h3 + p { margin-top: 12px; }

.sber-story__visual--catalog { top: 255px; height: 772px; }
.sber-story__visual--catalog .sber-story__visual-bg { top: 62px; }
.sber-catalog__tablet-stack { position: absolute; z-index: 1; top: 0; left: 540px; width: 562px; aspect-ratio: 2256 / 2936; pointer-events: none; }
.sber-catalog__tablet-stack > .sber-story__tablet { position: absolute; inset: 0; width: 100%; max-width: none; height: auto; margin: 0; }
.sber-story__visual--catalog .sber-story__note { --sber-selector-inset: 34px; top: 121px; left: 25px; height: 324px; padding: var(--sber-selector-inset); }
.sber-story__hierarchy { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); width: calc(100% + var(--sber-selector-inset) + var(--sber-selector-inset)); height: 221px; margin: 16px calc(0px - var(--sber-selector-inset)) 0; }
.sber-catalog__screen { z-index: 1; opacity: 0; pointer-events: none; }
.sber-catalog__screen--base { z-index: 0; opacity: 1; }
.sber-catalog__screen.is-visible { opacity: 1; }
.sber-catalog__option { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; min-width: 0; padding: 8px var(--sber-selector-inset); border: 0; background: transparent; color: var(--sber-text); text-align: left; font-size: 14px; line-height: 19px; cursor: pointer; }
.sber-catalog__option + .sber-catalog__option { border-top: 1px solid rgba(65, 105, 69, .07); }
.sber-catalog__option strong, .sber-catalog__option span { display: block; }
.sber-catalog__option strong { font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .sber-catalog__option:hover { background: rgba(65, 105, 69, .045); }
}
.sber-catalog__option.is-current { background: rgba(65, 105, 69, .045); }
.sber-catalog__option.is-current::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--sber-green); pointer-events: none; }
.sber-catalog__option:focus-visible { z-index: 1; outline: 2px solid #5f665f; outline-offset: -3px; }

.sber-story__outcome-cards { position: absolute; top: 253px; left: 0; display: grid; grid-template-columns: repeat(3, 363px); gap: 37px; }
.sber-story__outcome-cards article { height: 180px; padding: 33px 34px; border-radius: 36px; background: #edf5eb; }
.sber-story__outcome-cards h3 { font-size: 24px; font-weight: 500; line-height: 28px; }
.sber-story__outcome-cards p { margin-top: 12px; font-size: 16px; line-height: 22px; }

.sber-story__contact-panel h2 span { display: inline-block; margin-left: 5px; transform: rotate(-12deg); font-weight: 400; }

/* Reuse Simble's observer, timing, easing, and card travel. */
.sber-challenge__cards > :nth-child(2)[data-site-motion="card-group"],
.sber-story__outcome-cards > :nth-child(2)[data-site-motion="card-group"] { --site-motion-delay: 130ms; }
.sber-challenge__cards > :nth-child(3)[data-site-motion="card-group"],
.sber-story__outcome-cards > :nth-child(3)[data-site-motion="card-group"] { --site-motion-delay: 260ms; }
.sber-story__tablet[data-site-motion="phone"].site-motion-pending,
.sber-catalog__tablet-stack[data-site-motion="phone"].site-motion-pending { translate: 0 28px; }
@media (prefers-reduced-motion: no-preference) {
  .sber-hero__tablet[data-site-motion="phone"] { --hero-phone-travel: 32px; animation: hero-phone-rise 720ms var(--site-motion-ease) 100ms both; }
}

@media (max-width: 1150px) {
  .sber-hero, .sber-facts, .sber-challenge, .sber-portfolio-intro, .sber-comparison { width: min(1160px, calc(100% - 40px)); }
  .sber-hero { height: auto; padding-top: 48px; }
  .sber-hero__copy, .sber-hero__visual { position: relative; top: auto; left: auto; transform: none; }
  .sber-hero__copy { width: min(560px, 100%); margin-inline: auto; }
  .sber-hero__visual { margin-top: 44px; height: clamp(370px, 52vw, 613px); }
  .sber-hero__tablet { width: min(47%, 543px); top: 7%; }
  .sber-facts { height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding-block: 26px 55px; }
  .sber-challenge, .sber-portfolio-intro { height: auto; }
  .sber-section-head { height: auto; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 5%; }
  .sber-section-label, .sber-section-head h2, .sber-section-copy { position: static; width: auto; }
  .sber-section-label { grid-column: 1 / -1; margin-bottom: 26px; }
  .sber-section-copy { grid-column: 2; grid-row: 2; }
  .sber-challenge__cards, .sber-challenge__context { position: static; }
  .sber-challenge__cards { margin-top: 48px; gap: 15px; }
  .sber-challenge__card { height: auto; min-height: 240px; padding: 26px; border-radius: 28px; }
  .sber-challenge__card h3 { font-size: 21px; line-height: 25px; }
  .sber-challenge__context { margin-top: 36px; grid-template-columns: 1fr 1fr; gap: 35px; }
  .sber-challenge__topics { flex-wrap: wrap; }
  .sber-portfolio-intro { margin-top: 55px; margin-bottom: 35px; }
  .sber-story { display: grid; grid-template-columns: 40% 55%; column-gap: 5%; width: min(1160px, calc(100% - 40px)); height: auto; padding-block: 48px 64px; }
  .sber-story .sber-section-label, .sber-story__heading, .sber-story__intro-copy, .sber-story__steps, .sber-story__divider, .sber-story__explanation, .sber-story__visual, .sber-story__outcome-cards { position: relative; top: auto; left: auto; right: auto; width: auto; }
  .sber-story .sber-section-label { grid-column: 1 / -1; margin-bottom: 28px; }
  .sber-story__heading { grid-column: 1; grid-row: 2; }
  .sber-story__intro-copy { grid-column: 2; grid-row: 2; margin: 0; }
  .sber-story__steps, .sber-story__divider, .sber-story__explanation, .sber-story__visual, .sber-story__outcome-cards { grid-column: 1 / -1; }
  .sber-story__steps, .sber-story__outcome-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 58px; }
  .sber-story__step, .sber-story__outcome-cards article { height: auto; min-height: 189px; }
  .sber-story__divider { margin-top: 48px; }
  .sber-story__explanation { grid-template-columns: 28% 1fr; gap: 5%; margin-top: 48px; }
  .sber-story__explanation--difference { margin-top: 76px; }
  .sber-story__explanation--assumptions > div, .sber-story__explanation--difference > p { width: auto; }
  .sber-story__visual { height: min(71vw, 770px); margin-top: 80px; }
  .sber-story__visual--goal-two { margin-top: 52px; }
  .sber-story__visual-bg { top: 8%; height: 92%; }
  .sber-story__visual--goal-two .sber-story__visual-bg, .sber-story__visual--catalog .sber-story__visual-bg { top: 8%; }
  .sber-story__visual .sber-story__tablet, .sber-story__visual--catalog .sber-story__tablet { left: auto; right: 5%; width: 48%; }
  .sber-catalog__tablet-stack { left: auto; right: 5%; width: 48%; }
  .sber-catalog__tablet-stack > .sber-story__tablet { left: 0; right: auto; width: 100%; }
  .sber-story__visual .sber-story__note, .sber-story__visual--goal-two .sber-story__note, .sber-story__visual--catalog .sber-story__note { top: 16%; left: 5%; width: 36%; height: auto; }
  .sber-story--catalog .sber-story__visual { margin-top: 80px; }
  .sber-story__outcome-cards { margin-top: 58px; }
  .sber-story--contact { display: block; padding-block: 0 40px; }
}

@media (max-width: 700px) {
  .topbar .back-link { top: 12px; display: grid; place-items: center; width: 44px; height: 44px; }
  .sber-hero { padding-top: 24px; }
  .sber-hero__eyebrow { font-size: 12px; }
  .sber-hero h1 { font-size: 42px; line-height: 1.3; }
  .sber-hero__dek { font-size: 16px; line-height: 22px; }
  .sber-hero__dek br, .sber-story br { display: none; }
  .sber-hero__visual { height: clamp(410px, 118vw, 520px); margin-top: 34px; border-radius: 24px; }
  .sber-hero__tablet { width: min(90%, 410px); top: 6%; }
  .sber-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; padding-bottom: 56px; }
  .sber-facts dt, .sber-facts dd { font-size: 14px; line-height: 19px; }
  .sber-section-head { display: block; }
  .sber-section-label { margin-bottom: 25px; }
  .sber-section-head h2 { font-size: 32px; line-height: 1.15; }
  .sber-heading-phrase { white-space: normal; }
  .sber-section-copy { margin-top: 23px; font-size: 16px; line-height: 23px; }
  .sber-challenge__cards { display: block; margin-top: 36px; }
  .sber-challenge__card { min-height: 0; padding: 28px; }
  .sber-challenge__card + .sber-challenge__card { margin-top: 12px; }
  .sber-challenge__context { display: block; padding-top: 30px; }
  .sber-challenge__context-right { margin-top: 35px; }
  .sber-challenge__topics { gap: 8px; margin-top: 26px; }
  .sber-challenge__topics li { flex-basis: calc(50% - 4px); height: 56px; }
  .sber-portfolio-intro { margin-top: 78px; margin-bottom: 33px; }
  .sber-comparison__stage { border-radius: 22px; }
  .sber-story { display: block; padding-block: 50px 58px; }
  .sber-story .sber-section-label { margin-bottom: 25px; }
  .sber-story__heading, .sber-story__intro-copy { width: 100%; margin: 0; }
  .sber-story__heading { font-size: 32px; line-height: 1.15; }
  .sber-story__intro-copy { margin-top: 22px; }
  .sber-story__steps, .sber-story__outcome-cards { grid-template-columns: 1fr; margin-top: 34px; }
  .sber-story__step, .sber-story__outcome-cards article { min-height: 0; padding: 25px; }
  .sber-story__explanation { display: block; margin-top: 38px; }
  .sber-story__explanation--difference { margin-top: 64px; }
  .sber-story__explanation > div, .sber-story__explanation > p { margin-top: 20px; }
  .sber-story__visual { display: flex; flex-direction: column; align-items: stretch; height: auto; margin-top: 32px; padding: 16px; isolation: isolate; border-radius: 24px; }
  .sber-story__visual .sber-story__visual-bg, .sber-story__visual--goal-two .sber-story__visual-bg, .sber-story__visual--catalog .sber-story__visual-bg { inset: 0; width: 100%; height: 100%; border-radius: inherit; }
  .sber-story__visual .sber-story__tablet, .sber-story__visual--catalog .sber-story__tablet { position: relative; top: auto; left: auto; right: auto; width: 100%; max-width: 390px; height: auto; margin-inline: auto; }
  .sber-catalog__tablet-stack { position: relative; top: auto; left: auto; right: auto; grid-column: 1; grid-row: 1; width: 100%; max-width: 390px; margin-inline: auto; }
  .sber-catalog__tablet-stack > .sber-story__tablet { position: absolute; inset: 0; width: 100%; max-width: none; margin: 0; }
  .sber-story__visual .sber-story__note, .sber-story__visual--goal-two .sber-story__note, .sber-story__visual--catalog .sber-story__note { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 100%; height: auto; margin-top: 16px; padding: 20px; font-size: 15px; line-height: 21px; }
  .sber-story__visual--catalog .sber-story__note { --sber-selector-inset: 20px; }
  .sber-story__visual--catalog { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px; }
  .sber-story__visual--catalog .sber-story__note { grid-column: 1; grid-row: 2; margin-top: 0; }
  .sber-story__visual--catalog .sber-story__hierarchy { height: auto; min-height: 221px; margin-inline: calc(0px - var(--sber-selector-inset)); grid-template-rows: repeat(3, minmax(74px, 1fr)); }
  .sber-story--catalog .sber-story__visual { margin-top: 32px; }
  .sber-story--contact { padding-block: 0 40px; }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .sber-hero__tablet[data-site-motion="phone"] { --hero-phone-travel: 22px; }
  .sber-story__tablet[data-site-motion="phone"].site-motion-pending,
  .sber-catalog__tablet-stack[data-site-motion="phone"].site-motion-pending { translate: 0 22px; }
}