:root {
  --blue: #0c9bea;
  --blue-dark: #078bdc;
  --ink: #111214;
  --muted: #686d73;
  --line: #e0e5e9;
  --pale: #eaf7ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #eef1f3; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
button, select, input { font: inherit; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #087fd0; outline-offset: 3px; }

.lavka-page { width: min(100%, 480px); min-height: 100vh; margin-inline: auto; overflow: hidden; background: #eef3f6; box-shadow: 0 12px 48px rgba(39, 67, 84, .12); }
.lavka-shell { width: 100%; margin-inline: auto; }

/* Шапка лежит поверх общего неба hero, поэтому фон не обрывается. */
.lavka-header { position: absolute; z-index: 20; top: 12px; left: 50%; width: min(calc(100% - 24px), 456px); transform: translateX(-50%); background: transparent; }
.lavka-header__inner { height: 92px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lavka-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.lavka-brand__lockup { display: grid; justify-items: center; }
.lavka-brand__logo { width: 190px; height: auto; display: block; }
.lavka-header .lavka-brand__logo { width: 218px; }
.lavka-brand__lockup small { margin: -1px 0 0; color: #5f666d; font-size: 11px; line-height: 1; text-align: center; }
.lavka-brand__mark { width: 50px; height: 50px; flex: 0 0 auto; display: block; border-radius: 14px; object-fit: cover; box-shadow: 0 9px 22px rgba(14, 159, 230, .25); }
.lavka-brand__copy { display: grid; line-height: 1.03; }
.lavka-brand__copy strong { font-size: 22px; letter-spacing: -.048em; }
.lavka-brand__copy strong b { font-weight: 430; }
.lavka-brand__copy small { margin-top: 5px; color: #5f666d; font-size: 11px; }
.lavka-phone { width: 48px; height: 48px; flex: 0 0 auto; display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 9px 24px rgba(46, 99, 128, .15); }
.lavka-phone img { width: 100%; height: 100%; display: block; }

.lavka-hero { position: relative; width: calc(100% - 24px); min-height: 1000px; margin: 12px auto 0; overflow: hidden; border: 1px solid #dce6ec; border-radius: 28px; background: #dff4ff; box-shadow: 0 22px 52px rgba(38, 84, 109, .12), inset 0 1px 0 rgba(255, 255, 255, .45); isolation: isolate; }
.lavka-hero__inner { min-height: 1000px; position: relative; padding: 112px 24px 27px; display: flex; flex-direction: column; }
.lavka-hero__copy { position: relative; z-index: 3; }
.lavka-hero h1 { max-width: 405px; margin: 0; font-size: clamp(34px, 9.2vw, 43px); line-height: 1.01; letter-spacing: -.052em; }
.lavka-hero__copy > p { margin: 14px 0 18px; color: #5e666d; font-size: 17px; line-height: 1.42; letter-spacing: -.02em; }
.lavka-chips { margin-top: -6px; display: grid; grid-template-columns: 1.14fr .95fr .85fr; gap: 9px; }
.lavka-chips span { min-width: 0; min-height: 43px; padding: 0 10px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(28, 52, 66, .09); border-radius: 12px; background: rgba(255, 255, 255, .94); font-size: 13px; font-weight: 650; box-shadow: 0 8px 18px rgba(45, 93, 119, .11); }
.lavka-chips img { width: 23px; height: 23px; display: block; object-fit: contain; }
.lavka-hero__photo-wrap { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: linear-gradient(180deg, #dff4ff 0%, #eaf8ff 28%, #fff 100%); }
.lavka-hero__photo-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 180px; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .82) 65%, #fff 100%); }
.lavka-hero__photo-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% top; }
.lavka-hero__actions { position: relative; z-index: 3; margin-top: auto; margin-bottom: 72px; display: grid; gap: 10px; }
.lavka-primary { min-height: 63px; padding: 0 20px; border: 0; border-radius: 15px; background: linear-gradient(180deg, #1eacf2 0%, #078edf 100%); color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 15px 29px rgba(8, 143, 224, .27), inset 0 1px 0 rgba(255, 255, 255, .36); transition: transform .15s ease, box-shadow .15s ease; }
.lavka-primary--link { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.lavka-primary:active { transform: translateY(2px); box-shadow: 0 8px 18px rgba(8, 143, 224, .2); }
.lavka-link-button { min-height: 38px; border: 0; background: transparent; color: #087fd1; font-size: 16px; font-weight: 650; cursor: pointer; }

.lavka-section { padding: 24px 12px 34px; background: #eef3f6; }
.lavka-section + .lavka-section { border-top: 14px solid #fff; }
.lavka-card { padding: 30px 18px; border: 1px solid #dce6ec; border-radius: 28px; background: #fff; box-shadow: 0 22px 52px rgba(38, 84, 109, .12), inset 0 1px 0 rgba(255,255,255,.8); }
.lavka-card h2 { margin: 0 0 25px; font-size: clamp(33px, 9.4vw, 42px); line-height: 1.03; letter-spacing: -.052em; }
.lavka-field-label, .lavka-transport legend { display: block; margin-bottom: 9px; color: #31353a; font-size: 13px; font-weight: 600; }
.lavka-select { position: relative; display: flex; align-items: center; }
.lavka-select > img { width: 24px; height: 24px; position: absolute; z-index: 1; left: 16px; object-fit: contain; pointer-events: none; }
.lavka-select select { width: 100%; min-height: 58px; padding: 0 48px 0 50px; appearance: none; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(45deg, transparent 50%, #15171a 50%) calc(100% - 23px) 26px / 7px 7px no-repeat, linear-gradient(135deg, #15171a 50%, transparent 50%) calc(100% - 16px) 26px / 7px 7px no-repeat, #fff; color: var(--ink); font-size: 17px; font-weight: 600; box-shadow: 0 9px 22px rgba(46, 83, 104, .1); }
.lavka-transport { margin: 23px 0 0; padding: 0; border: 0; }
.lavka-transport > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lavka-transport button { min-width: 0; min-height: 91px; padding: 9px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 9px 22px rgba(46, 83, 104, .1); }
.lavka-transport button img { width: 40px; height: 40px; display: block; object-fit: contain; }
.lavka-transport button.is-active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 8px 20px rgba(11, 150, 230, .11); }
.lavka-transport button.is-unavailable { opacity: .42; cursor: not-allowed; box-shadow: none; }
.lavka-transport-note { min-height: 17px; margin: 9px 2px 0; color: #747b82; font-size: 11px; line-height: 1.4; }
.lavka-range { margin-top: 26px; }
.lavka-range > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lavka-range label { font-size: 14px; font-weight: 650; }
.lavka-range output { min-width: 46px; height: 43px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 18px; font-weight: 700; box-shadow: 0 6px 16px rgba(46, 83, 104, .07); }
.lavka-range input { width: 100%; height: 29px; margin: 8px 0 0; appearance: none; background: transparent; cursor: pointer; }
.lavka-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--blue) 0 var(--progress), #dce1e4 var(--progress)); }
.lavka-range input::-moz-range-track { height: 6px; border-radius: 999px; background: #dce1e4; }
.lavka-range input::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--blue); }
.lavka-range input::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; appearance: none; border: 5px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 2px 9px rgba(43, 91, 117, .27); }
.lavka-range input::-moz-range-thumb { width: 16px; height: 16px; border: 4px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 2px 9px rgba(43, 91, 117, .27); }
.lavka-range > p { margin: -4px 1px 0; display: flex; justify-content: space-between; color: #5f656b; font-size: 12px; }

.lavka-income { margin-top: 25px; padding: 19px 12px 15px; border: 1px solid #d6e7f2; border-radius: 17px 17px 0 0; background: linear-gradient(145deg, #f8fdff, #edf9ff); text-align: center; box-shadow: 0 8px 18px rgba(43, 91, 117, .07); }
.lavka-income span, .lavka-income small { display: block; }
.lavka-income span { font-size: 15px; font-weight: 650; }
.lavka-income strong { display: block; margin: 7px 0; color: var(--blue); font-size: clamp(34px, 9.2vw, 43px); line-height: 1; letter-spacing: -.045em; }
.lavka-income small { color: #6d747b; font-size: 12px; }
.lavka-bonus { min-height: 70px; padding: 12px 15px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; border-right: 1px solid #d6e7f2; border-left: 1px solid #d6e7f2; background: #fff; box-shadow: 0 8px 18px rgba(43, 91, 117, .05); }
.lavka-bonus strong { color: var(--blue); font-size: 21px; white-space: nowrap; }
.lavka-bonus span { color: #31353a; font-size: 12px; font-weight: 650; line-height: 1.35; }
.lavka-primary--full { width: 100%; margin-top: 0; border-radius: 0 0 15px 15px; }

.lavka-steps { margin-top: 18px; padding: 20px 15px 19px; border: 1px solid #d9eaf5; border-radius: 18px; background: linear-gradient(145deg, #f8fdff, #edf9ff); box-shadow: 0 10px 24px rgba(43, 91, 117, .09); }
.lavka-steps__heading { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lavka-steps h3 { margin: 0; font-size: 20px; }
.lavka-steps__heading > span { padding: 6px 10px; border-radius: 999px; background: #dff4ff; color: #087fd1; font-size: 11px; font-weight: 750; }
.lavka-steps ol { position: relative; margin: 0; padding: 0; display: grid; gap: 14px; list-style: none; }
.lavka-steps ol::before { content: ""; position: absolute; z-index: 0; top: 28px; bottom: 28px; left: 27px; border-left: 3px dotted #8fd4f8; }
.lavka-steps li { position: relative; z-index: 1; min-height: 56px; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; }
.lavka-step-icon { width: 54px; height: 54px; position: relative; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 8px 20px rgba(46, 83, 104, .14); }
.lavka-step-icon > img { width: 30px; height: 30px; display: block; object-fit: contain; }
.lavka-step-icon > b { width: 18px; height: 18px; position: absolute; left: -1px; bottom: -1px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 10px; }
.lavka-step-copy { min-width: 0; display: grid; gap: 4px; }
.lavka-step-copy strong { font-size: 14px; line-height: 1.3; }
.lavka-step-copy small { color: #6b737a; font-size: 10.5px; line-height: 1.35; }

.lavka-section--faq { padding-top: 26px; }
.lavka-faq h2 { margin-bottom: 21px; }
.lavka-faq__list { display: grid; gap: 11px; }
.lavka-faq details { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 9px 22px rgba(46, 83, 104, .1); overflow: hidden; }
.lavka-faq summary { min-height: 66px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; font-size: 15px; font-weight: 500; cursor: pointer; }
.lavka-faq summary::-webkit-details-marker { display: none; }
.lavka-faq summary span { color: var(--blue); font-size: 31px; font-weight: 400; transition: transform .18s ease; }
.lavka-faq details[open] summary span { transform: rotate(90deg); }
.lavka-faq details p { margin: 0; padding: 0 18px 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.lavka-final-cta { min-height: 196px; margin-top: 31px; padding: 24px 15px; position: relative; display: flex; align-items: center; border: 1px solid #d9eaf5; border-radius: 18px; background: linear-gradient(145deg, #f5fbff, #e9f7ff); box-shadow: 0 12px 28px rgba(43, 91, 117, .1); overflow: hidden; }
.lavka-final-cta > div { position: relative; z-index: 2; width: 70%; }
.lavka-final-cta h3 { margin: 0 0 18px; font-size: 25px; letter-spacing: -.04em; }
.lavka-final-cta .lavka-primary { width: min(100%, 178px); min-height: 50px; padding-inline: 10px; border-radius: 13px; font-size: 13px; }
.lavka-bag { width: 126px; height: 142px; position: absolute; right: -2px; bottom: 13px; display: block; object-fit: contain; }

.lavka-footer { padding: 33px 20px 39px; background: linear-gradient(145deg, #f8fdff, #edf8ff); text-align: center; }
.lavka-footer .lavka-shell { display: grid; justify-items: center; gap: 13px; }
.lavka-brand__logo--footer { width: 205px; }
.lavka-footer .lavka-brand__copy small { display: none; }
.lavka-footer p { margin: 0; color: #747b82; font-size: 12px; }
.lavka-footer a:not(.lavka-brand) { color: #087fd1; font-size: 13px; text-decoration: none; }
.lavka-footer .lavka-footer__phone { margin-top: 5px; color: var(--ink); font-size: 18px; font-weight: 700; }

.lavka-policy { min-height: 100vh; padding: 25px 16px 60px; background: #eef3f6; }
.lavka-policy__card { padding: 26px 20px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 18px 48px rgba(38, 84, 109, .1); }
.lavka-policy__back { color: #087fd1; text-decoration: none; font-weight: 700; }
.lavka-policy h1 { margin: 28px 0 18px; font-size: 34px; line-height: 1; letter-spacing: -.05em; }
.lavka-policy h2 { margin: 24px 0 8px; font-size: 19px; }
.lavka-policy p, .lavka-policy li { color: #5e656c; font-size: 14px; line-height: 1.6; }
.lavka-policy p { margin: 0 0 11px; }
.lavka-policy ul { margin: 0 0 14px; padding-left: 22px; }
.lavka-policy a { color: #087fd1; }
.legal-optout { min-height: 48px; margin-top: 8px; padding: 0 16px; border: 1px solid #acd9f2; border-radius: 12px; background: #eaf7ff; color: #087fd1; font-weight: 700; cursor: pointer; }
.legal-optout-status { min-height: 22px; margin-top: 9px !important; color: #08715f !important; font-size: 12px !important; }
.legal-note { margin-top: 25px !important; padding: 14px; border-radius: 13px; background: #eef8ff; }

@media (max-width: 370px) {
  .lavka-header__inner, .lavka-hero__inner { padding-left: 17px; padding-right: 17px; }
  .lavka-brand__logo { width: 174px; }
  .lavka-header .lavka-brand__logo { width: 202px; }
  .lavka-brand__logo--footer { width: 195px; }
  .lavka-brand__mark { width: 44px; height: 44px; }
  .lavka-brand__copy strong { font-size: 19px; }
  .lavka-hero h1 { font-size: 35px; }
  .lavka-chips { gap: 6px; }
  .lavka-chips span { padding-inline: 6px; gap: 4px; font-size: 11px; }
  .lavka-section { padding-left: 9px; padding-right: 9px; }
  .lavka-final-cta > div { width: 73%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}