.hero__heading { text-align: center; padding-top: 45px; }
.hero__eyebrow { font-size: 14px; line-height: 20px; color: var(--body-ink); }
.hero h1 { margin-top: 12px; color: var(--ink); font-size: 48px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.hero__dek { margin-top: 12px; font-size: 18px; line-height: 24px; }
.artwork-panel { background: url("/assets/simble-background.png") center / cover no-repeat; border-radius: 36px; }
.hero__art { position: relative; height: 613px; margin-top: 48px; overflow: hidden; }
.hero__phone { position: absolute; width: 292px; max-width: none; }
.hero__phone--registration { left: 327px; top: 85px; }
.hero__phone--home { left: 541px; top: 128px; }
.case-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 28px; padding: 0 2px; }
.case-facts dt, .case-facts dd { font-size: 16px; line-height: 22px; font-weight: 500; }
.case-facts dt { color: #afafaf; }

.case-section { margin-top: 96px; }
.challenge { margin-top: 119px; }
.section-intro { display: grid; grid-template-columns: 400px minmax(0, 640px); gap: 61px; align-items: start; }
.section-label { position: relative; padding-left: 24px; color: var(--blue); font-size: 16px; font-weight: 500; line-height: 22px; }
.section-label::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: url("/assets/section-asterisk.svg") center / 18px 18px no-repeat; animation: star-spin 5s linear infinite; }
@keyframes star-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .section-label::before { animation: none; } }
.section-intro h2 { margin-top: 24px; color: var(--body-ink); font-size: 36px; line-height: 1.14; font-weight: 500; letter-spacing: -.025em; }
.section-intro__copy { padding-top: 46px; font-size: 16px; line-height: 22px; }
.section-intro__copy p + p { margin-top: 16px; }

.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.challenge .insight-grid { margin-top: 36px; }
.insight-card { min-height: 214px; border-radius: 36px; background: #F5F5F9; opacity: 1; filter: none; mix-blend-mode: normal; padding: 34px 31px 28px; }
.insight-card h3 { max-width: 295px; color: var(--body-ink); font-size: 24px; line-height: 1.16; font-weight: 500; letter-spacing: -.015em; }
.insight-card p { margin-top: 12px; max-width: 300px; font-size: 16px; line-height: 22px; }
.note-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 37px; margin-top: 36px; border-top: 1px solid var(--pale); padding: 36px 22px 0; color: #898989; font-size: 16px; line-height: 22px; font-weight: 500; }
.note-row p { max-width: 902px; font-weight: 400; }

.demo { margin-top: 96px; }
.carousel { margin-top: 48px; }
.carousel__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.phone-card { position: relative; height: 756px; border-radius: 36px; overflow: hidden; background: #F5F5F9; opacity: 1; filter: none; mix-blend-mode: normal; text-align: center; }
.phone-card__top { position: relative; z-index: 1; padding-top: 42px; }
.phone-card__number { display: block; color: var(--blue); font-size: 36px; line-height: 43px; font-weight: 600; }
.phone-card h3 { margin-top: 8px; color: var(--body-ink); font-size: 16px; line-height: 19px; font-weight: 400; }
.phone-card > img, .phone-card__phone-space { position: absolute; width: 277px; left: 50%; top: 134px; transform: translateX(-50%); }
.phone-card__phone-space { height: 556px; }
.phone-card__phone-space::before, .animation-slot::before { content: ""; position: absolute; inset: 0; border: 5px solid #16191f; border-radius: 48px; background: #fff; box-shadow: 0 4px 8px #10131b26, inset 0 0 0 2px #aab0ba; }
.phone-card__phone-space::after, .animation-slot::after { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 38%; height: 26px; border-radius: 30px; background: #090a0c; }
.carousel__dots { display: none; }

.registration-section { margin-top: 96px; }
.animation-composition { position: relative; overflow: visible; }
.animation-composition--registration, .animation-composition--progress { height: 693px; margin-top: 21px; background: none; }
.showcase-viewport { position: absolute; z-index: 1; inset: 0; }
.showcase-frame { display: block; border: 0; background: transparent; pointer-events: none; }
.driver-showcase-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.animation-slot { position: absolute; z-index: 1; pointer-events: none; }
.side-note { position: absolute; z-index: 2; width: 307px; border-radius: 24px; background: #F5F5F9; opacity: 1; filter: none; mix-blend-mode: normal; padding: 22px 24px 24px; }
.side-note span { display: block; color: var(--blue); font-size: 14px; line-height: 19px; font-weight: 500; }
.side-note h3 { margin-top: 12px; color: var(--body-ink); font-size: 16px; line-height: 22px; font-weight: 600; }
.side-note p { margin-top: 8px; color: var(--body-ink); font-size: 14px; line-height: 19px; }
.animation-composition--registration .side-note--left { left: 61px; top: 146px; min-height: 147px; }
.animation-composition--registration .side-note--right { right: 61px; top: 281px; min-height: 147px; }

.progress-section { margin-top: 100px; }
.vehicle-showcase-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding-top: 3.8%; box-sizing: border-box; }
.vehicle-showcase-canvas::before { content: ""; display: block; width: 100%; aspect-ratio: 2752 / 1536; border-radius: 3% / 5.375%; background: url("/assets/animations/driver-documents/background.png") center / 100% 100% no-repeat; }
.vehicle-showcase-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.animation-composition--progress { --overlay-card-drop: 45px; }
.animation-composition--progress .side-note--left { left: 61px; top: calc(36px + var(--overlay-card-drop)); min-height: 168px; }
.animation-composition--progress .side-note--right { right: 61px; top: calc(70px + var(--overlay-card-drop)); min-height: 488px; }
.side-note--vin > img { width: 206px; margin: 18px auto 0; }

.plans { margin-top: 96px; }
.plans .carousel { margin-top: 36px; }
.phone-card--plan { height: 789px; }
.phone-card--plan .phone-card__top { padding-top: 41px; }
.phone-card__kicker { display: block; min-height: 33px; color: #919098; font-size: 14px; line-height: 17px; }
.phone-card__kicker--blue { color: var(--blue); }
.phone-card--plan h3 { margin-top: 20px; color: var(--blue); font-size: 36px; line-height: 43px; font-weight: 600; }
.phone-card--plan p { margin-top: 8px; color: var(--body-ink); font-size: 16px; line-height: 19px; }
.phone-card--plan > img { top: 205px; }

.onboarding { margin-top: 88px; }
.animation-composition--onboarding { height: 697px; margin-top: 64px; overflow: visible; }
.animation-slot--onboarding { left: 192px; top: -29px; width: 297px; height: 599px; pointer-events: auto; }
.animation-slot--onboarding::before, .animation-slot--onboarding::after { content: none; }
.onboarding__animation { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.onboarding__home, .onboarding__promo { position: absolute; max-width: none; }
.onboarding__home { width: 312px; left: 666px; top: -29px; }
.onboarding__promo { z-index: 2; width: 312px; left: 423px; top: 117px; }
.onboarding .note-row { margin-top: 78px; }

.outcomes { margin-top: 96px; }
.outcomes .insight-grid { margin-top: 24px; }
.insight-grid--blue .insight-card { min-height: 232px; background: #4469C6; color: #fff; padding: 35px 34px 29px; }
.insight-grid--blue .insight-card h3, .insight-grid--blue .insight-card p { color: #fff; }
.insight-grid--blue .insight-card p { margin-top: 20px; }

.site-footer { margin-top: 89px; margin-bottom: 40px; }
.contact-panel h2 span { display: inline-block; margin-left: 5px; transform: rotate(-12deg); font-weight: 400; }

@media (max-width: 1225px) and (min-width: 601px) {
  .section-intro { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 5%; }
  .hero__art { height: auto; aspect-ratio: 1162 / 613; }
  .hero__phone { width: 25.13%; }
  .hero__phone--registration { left: 28.14%; top: 13.87%; }
  .hero__phone--home { left: 46.56%; top: 20.88%; }
  .phone-card { display: flex; flex-direction: column; align-items: center; height: auto; aspect-ratio: auto; padding-bottom: 42px; }
  .phone-card__top { width: 100%; }
  .phone-card > img, .phone-card__phone-space { position: relative; left: auto; top: auto; width: min(74.66%, 277px); max-width: none; margin: 18px auto 0; transform: none; }
  .demo .phone-card h3 { display: flex; align-items: flex-end; justify-content: center; min-height: 38px; }
  .phone-card__number, .phone-card--plan h3 { font-size: clamp(24px, 3vw, 36px); }
  .animation-composition--registration, .animation-composition--progress, .animation-composition--onboarding { height: auto; aspect-ratio: 1162 / 693; }
  .animation-composition--onboarding { aspect-ratio: 1162 / 697; }
  .side-note { width: 26.4%; }
  .animation-composition--registration .side-note--left, .animation-composition--progress .side-note--left { left: 5.25%; }
  .animation-composition--registration .side-note--right, .animation-composition--progress .side-note--right { right: 5.25%; }
  .animation-slot--onboarding { left: 16.5%; width: 25.6%; height: 86%; }
  .onboarding__home { left: 57.3%; width: 26.9%; }
  .onboarding__promo { left: 36.4%; width: 26.9%; top: 16.8%; }
}

@media (max-width: 950px) {
  .case-section, .demo, .registration-section, .progress-section, .plans, .onboarding, .outcomes { margin-top: 80px; }
  .challenge { margin-top: 96px; }
  .section-intro { display: block; }
  .section-intro h2 { max-width: 760px; margin-top: 20px; font-size: clamp(32px, 4vw, 36px); }
  .section-intro__copy { max-width: 70ch; padding-top: 20px; }
  .case-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .insight-grid .insight-card:last-child { grid-column: 1 / -1; }
  .insight-grid .insight-card:last-child h3, .insight-grid .insight-card:last-child p { max-width: 620px; }
  .insight-card { min-height: 0; padding: 30px 28px 28px; }
  .animation-composition--registration, .animation-composition--progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; height: auto; aspect-ratio: auto; margin-top: 32px; }
  .showcase-viewport { position: relative; inset: auto; grid-column: 1 / -1; width: 100%; aspect-ratio: 1162 / 693; overflow: hidden; border-radius: clamp(24px, 4vw, 36px); }
  .animation-composition--registration .side-note, .animation-composition--progress .side-note { position: relative; inset: auto; width: auto; min-height: 0; }
  .side-note p { font-size: 16px; line-height: 22px; }
  .side-note--vin > img { width: min(206px, 100%); }
}

@media (max-width: 1100px) {
  .animation-composition--progress { display: grid; grid-template-columns: 1fr; gap: 16px; height: auto; aspect-ratio: auto; margin-top: 32px; }
  .animation-composition--progress .showcase-viewport { position: relative; inset: auto; width: 100%; aspect-ratio: 1162 / 693; overflow: hidden; border-radius: clamp(24px, 4vw, 36px); }
  .animation-composition--progress .side-note { position: relative; inset: auto; width: auto; min-height: 0; }
  .animation-composition--progress .side-note--vin { display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 24vw, 206px); align-items: center; column-gap: 24px; }
  .animation-composition--progress .side-note--vin > img { width: 100%; margin: 0; }
  .animation-composition--progress .side-note p { font-size: 16px; line-height: 22px; }
  .outcomes .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .outcomes .insight-card:last-child { grid-column: 1 / -1; }
  .outcomes .insight-card h3, .outcomes .insight-card p { max-width: none; }
  .insight-grid--blue .insight-card { min-height: 0; padding: 30px 28px 28px; }
}

@media (max-width: 950px) {
  .carousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
  .carousel__track::-webkit-scrollbar { display: none; }
  .phone-card { flex: 0 0 calc((100% - 72px) / 2); scroll-snap-align: start; }
  .carousel__dots { display: flex; align-items: center; justify-content: center; gap: 0; height: 44px; margin-top: 8px; }
  .carousel__dots button { position: relative; width: 20px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
  .carousel__dots button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: #c9cbd1; }
  .carousel__dots button[aria-current="true"]::after { background: var(--blue); }
}

@media (max-width: 600px) {
  .hero__heading { padding-top: 20px; }
  .hero__eyebrow { font-size: 14px; line-height: 22px; }
  .hero h1 { margin-top: 12px; font-size: clamp(42px, 8vw, 46px); line-height: 1.1; }
  .hero__dek { margin-top: 12px; font-size: 16px; line-height: 22px; }
  .hero__art { width: 100%; height: auto; aspect-ratio: 320 / 349; margin-top: 33px; border-radius: 30px; }
  .hero__phone { width: 57.5%; }
  .hero__phone--registration { left: 6.25%; top: 9.5%; }
  .hero__phone--home { left: 36.25%; top: 17.2%; }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin: 22px 0 0; }
  .case-facts dt, .case-facts dd { font-size: 16px; line-height: 22px; }
  .desktop-break { display: none; }
  .case-section, .demo, .registration-section, .progress-section, .plans, .onboarding, .outcomes { margin-top: 72px; }
  .section-intro h2 { max-width: none; margin-top: 20px; font-size: clamp(30px, 5.7vw, 34px); line-height: 1.16; }
  .section-intro__copy { width: 100%; max-width: none; padding-top: 18px; font-size: 16px; line-height: 22px; }
  .section-label { font-size: 16px; }
  .challenge .insight-grid { margin-top: 32px; }
  .insight-grid { grid-template-columns: 1fr; gap: 12px; }
  .insight-grid .insight-card:last-child { grid-column: auto; }
  .insight-card { border-radius: 28px; padding: 30px 24px 24px; }
  .insight-card h3 { max-width: none; font-size: 24px; }
  .insight-card p, .insight-grid .insight-card:last-child h3, .insight-grid .insight-card:last-child p { max-width: none; }
  .note-row { display: block; margin-top: 36px; padding: 32px 10px 0; }
  .note-row span { display: block; margin-bottom: 17px; }
  .carousel, .plans .carousel { margin-top: 32px; }
  .carousel__track { gap: 12px; }
  .phone-card { display: flex; flex-direction: column; align-items: center; flex-basis: calc(100% - 48px); height: auto; aspect-ratio: auto; padding-bottom: 32px; border-radius: 28px; }
  .phone-card__top { padding-top: 30px; }
  .phone-card__number { font-size: clamp(27px, 6vw, 34px); line-height: 1.17; }
  .phone-card h3 { margin-top: 8px; font-size: 15px; line-height: 20px; }
  .phone-card > img, .phone-card__phone-space { position: relative; left: auto; top: auto; width: clamp(185px, 52vw, 277px); max-width: none; margin: 18px auto 0; transform: none; }
  .demo .phone-card h3 { min-height: 40px; }
  .phone-card__phone-space { height: auto; aspect-ratio: 892 / 1790; }
  .phone-card--plan { height: auto; }
  .phone-card--plan .phone-card__top { padding-top: 30px; }
  .phone-card__kicker { font-size: 13px; line-height: 17px; min-height: 28px; }
  .phone-card--plan h3 { margin-top: 10px; font-size: clamp(27px, 6vw, 34px); line-height: 1.17; }
  .phone-card--plan p { margin-top: 8px; font-size: 15px; line-height: 20px; }
  .phone-card--plan > img { width: clamp(180px, 45vw, 260px); }
  .animation-composition--registration, .animation-composition--progress { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .showcase-viewport { border-radius: 24px; }
  .side-note { padding: 23px 24px; border-radius: 24px; }
  .side-note span, .side-note p { font-size: 16px; line-height: 22px; }
  .side-note h3 { font-size: 16px; line-height: 22px; }
  .side-note--vin > img { width: min(230px, 90%); margin-top: 18px; }
  .onboarding .animation-composition { margin-top: 34px; }
  .animation-composition--onboarding { display: block; width: 100%; height: clamp(400px, 120vw, 700px); aspect-ratio: auto; padding: 0; border-radius: 26px; overflow: hidden; }
  .animation-slot--onboarding { position: absolute; z-index: 3; left: 27%; top: 22%; width: 46%; height: auto; aspect-ratio: 892 / 1790; }
  .onboarding__home, .onboarding__promo { position: absolute; width: 46%; max-width: none; }
  .onboarding__home { z-index: 1; left: 48%; top: 8%; }
  .onboarding__promo { z-index: 2; left: 6%; top: 12%; }
  .onboarding .note-row { margin-top: 42px; }
  .outcomes .insight-grid { margin-top: 24px; }
  .outcomes .insight-grid { grid-template-columns: 1fr; }
  .insight-grid--blue .insight-card { min-height: 0; padding: 30px 24px 24px; }
  .insight-grid--blue .insight-card p { margin-top: 14px; }
  .site-footer { margin-top: 72px; margin-bottom: 28px; }
}

@media (max-width: 535px) {
  .showcase-viewport { height: 286.3px; aspect-ratio: auto; }
  .driver-showcase-frame, .vehicle-showcase-canvas { left: 50%; right: auto; width: 480px; height: 286.3px; transform: translateX(-50%); }
  .vehicle-showcase-canvas { padding-top: 18.24px; }
}

@media (max-width: 430px) {
  .case-facts { grid-template-columns: 1fr; gap: 10px; }
  .hero__eyebrow { font-size: 13px; }
  .animation-composition--progress .side-note--vin { display: block; }
  .animation-composition--progress .side-note--vin > img { width: min(206px, 100%); margin: 18px auto 0; }
}

/* Shared first-screen rhythm with Sberbank; desktop composition is unchanged. */
@media (max-width: 600px) {
  .topbar { height: 70px; }
  .topbar .back-link.portfolio-contact-control { top: 12px; }
  .topbar .portfolio-contact-controls--header { top: 12px; }
  .hero__heading { padding-top: 24px; }
  .hero h1 { margin-top: 0; }
  .hero__dek { margin-top: 0; }
  .hero__art { margin-top: 34px; border-radius: 24px; }
  .hero__phone--registration { width: 46%; left: 9%; top: 6%; }
  .hero__phone--home { width: 48%; left: 43%; top: 10%; }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 26px; }
  .challenge { margin-top: 56px; }
  /* Keep the three onboarding devices in the desktop's left / middle / right order.
     All are fully inside the panel; the live left phone stays reachable. */
  .animation-composition--onboarding { height: auto; aspect-ratio: 1; }
  .animation-slot--onboarding { left: 4%; top: 4%; width: 40%; z-index: 2; }
  .onboarding__promo { left: 28%; top: 10%; width: 44%; z-index: 3; }
  .onboarding__home { left: 56%; top: 4%; width: 40%; z-index: 1; }
}