:root {
  --maps-accent: #6d4aff;
  --maps-accent-dark: #5735df;
  --maps-accent-soft: #f0ecff;
  --maps-ink: #211a35;
  --maps-muted: #716a80;
  --maps-line: rgba(33, 26, 53, 0.08);
  --maps-surface: #ffffff;
  --maps-bg: #f8f7fb;
  --maps-shadow: 0 0 0 1px rgba(33, 26, 53, 0.05), 0 16px 45px rgba(39, 28, 87, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; color: var(--maps-ink); background: var(--maps-bg); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(109, 74, 255, 0.32); outline-offset: 3px; }
.maps-shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }

.maps-topbar { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.88); box-shadow: 0 1px 0 rgba(33, 26, 53, 0.07); backdrop-filter: blur(18px); }
.maps-topbar__inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.maps-brand { color: var(--maps-ink); font-size: 20px; font-weight: 750; letter-spacing: -0.04em; }
.maps-topbar__action { min-height: 44px; padding: 0 14px 0 16px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; color: var(--maps-accent-dark); background: var(--maps-accent-soft); font-size: 13px; font-weight: 650; transition-property: background-color, transform; transition-duration: 180ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.maps-topbar__action:hover { background: #e8e1ff; }
.maps-topbar__action:active { transform: scale(0.96); }

.maps-hero { position: relative; overflow: hidden; background: linear-gradient(145deg, #20163f 0%, #39266c 52%, #6d4aff 120%); }
.maps-hero::before { content: ""; position: absolute; width: 420px; height: 420px; top: -280px; right: 8%; border-radius: 50%; background: rgba(255, 255, 255, 0.1); filter: blur(2px); }
.maps-hero__inner { position: relative; min-height: 400px; padding-block: 82px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: center; gap: 80px; }
.maps-hero__copy { max-width: 690px; }
.maps-eyebrow { width: fit-content; min-height: 34px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; color: #e7ddff; background: rgba(255, 255, 255, 0.11); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13); font-size: 12px; font-weight: 650; }
.maps-hero h1 { max-width: 680px; margin: 18px 0 16px; color: #fff; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.055em; text-wrap: balance; }
.maps-hero__copy > p { max-width: 600px; margin: 0; color: rgba(255, 255, 255, 0.72); font-size: clamp(16px, 2vw, 19px); line-height: 1.7; text-wrap: pretty; }
.maps-hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.maps-button { min-height: 48px; padding: 0 18px; border: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font-size: 13px; font-weight: 700; transition-property: transform, box-shadow, background-color; transition-duration: 180ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.maps-button:active { transform: scale(0.96); }
.maps-button--primary { color: #fff; background: var(--maps-accent); box-shadow: 0 9px 24px rgba(60, 34, 154, 0.25); }
.maps-hero .maps-button--primary { color: var(--maps-ink); background: #fff; box-shadow: 0 10px 26px rgba(13, 8, 32, 0.2); }
.maps-button--primary:hover { background: var(--maps-accent-dark); box-shadow: 0 12px 28px rgba(60, 34, 154, 0.31); }
.maps-hero .maps-button--primary:hover { background: #f5f1ff; }
.maps-button--quiet { color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13); }
.maps-button--quiet:hover { background: rgba(255, 255, 255, 0.16); }
.maps-hero__summary { padding: 22px; border-radius: 24px; display: flex; align-items: center; gap: 15px; color: #fff; background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13), 0 18px 40px rgba(12, 6, 31, 0.18); backdrop-filter: blur(12px); }
.maps-summary-icon { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, 0.14); font-size: 23px; }
.maps-hero__summary strong, .maps-hero__summary span { display: block; }
.maps-hero__summary strong { font-size: 18px; letter-spacing: -0.02em; }
.maps-hero__summary span { margin-top: 3px; color: rgba(255, 255, 255, 0.65); font-size: 12px; line-height: 1.55; text-wrap: pretty; }

.maps-content { padding-block: 72px 92px; display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 52px; }
.maps-progress { position: sticky; top: 98px; padding: 18px; border-radius: 20px; background: var(--maps-surface); box-shadow: 0 0 0 1px var(--maps-line), 0 8px 28px rgba(39, 28, 87, 0.06); }
.maps-progress > p { margin: 0 0 12px; color: var(--maps-muted); font-size: 10px; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.maps-progress ol { margin: 0; padding: 0; list-style: none; }
.maps-progress li + li { margin-top: 4px; }
.maps-progress a { min-height: 42px; padding: 6px 8px; border-radius: 10px; display: flex; align-items: center; gap: 9px; color: var(--maps-muted); font-size: 12px; font-weight: 600; transition-property: color, background-color; transition-duration: 160ms; }
.maps-progress a:hover { color: var(--maps-accent-dark); background: var(--maps-accent-soft); }
.maps-progress a span { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px; display: grid; place-items: center; color: var(--maps-accent-dark); background: var(--maps-accent-soft); font-size: 10px; font-variant-numeric: tabular-nums; }
.maps-steps { min-width: 0; display: grid; gap: 24px; }
.maps-step { scroll-margin-top: 94px; padding: 34px; border-radius: 28px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; background: var(--maps-surface); box-shadow: var(--maps-shadow); }
.maps-step__number { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--maps-accent-dark); background: var(--maps-accent-soft); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.maps-step__label { color: var(--maps-accent-dark); font-size: 10px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.maps-step h2 { margin: 7px 0 9px; color: var(--maps-ink); font-size: clamp(23px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.035em; text-wrap: balance; }
.maps-step__body > p { margin: 0; color: var(--maps-muted); font-size: 14px; line-height: 1.75; text-wrap: pretty; }
.maps-inline-link { min-height: 42px; margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; color: var(--maps-accent-dark); font-size: 13px; font-weight: 700; }
.maps-shot { margin: 24px 0 0; padding: 10px; border-radius: 20px; background: #f0eef5; }
.maps-shot img { width: 100%; height: auto; border-radius: 12px; display: block; outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px; }
.maps-shot--portrait img { max-width: 500px; margin-inline: auto; }
.maps-shot figcaption { padding: 10px 6px 2px; color: var(--maps-muted); font-size: 11px; line-height: 1.55; text-align: center; text-wrap: pretty; }
.maps-tip { margin-top: 18px; padding: 14px 16px; border-radius: 14px; display: flex; align-items: flex-start; gap: 10px; color: #57447f; background: #faf7ff; box-shadow: 0 0 0 1px rgba(109, 74, 255, 0.12); }
.maps-tip i { margin-top: 3px; color: var(--maps-accent); }
.maps-tip p { margin: 0; font-size: 12px; line-height: 1.65; text-wrap: pretty; }
code { padding: 2px 5px; border-radius: 5px; color: #5935cb; background: #eee9ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9em; }
.maps-finish { padding: 30px 32px; border-radius: 26px; display: flex; align-items: center; justify-content: space-between; gap: 28px; color: #fff; background: linear-gradient(135deg, #2a1c52, #4c317f); box-shadow: 0 18px 45px rgba(39, 28, 87, 0.16); }
.maps-finish span { color: #cdbfff; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.maps-finish h2 { margin: 6px 0 5px; font-size: 24px; letter-spacing: -0.03em; text-wrap: balance; }
.maps-finish p { margin: 0; color: rgba(255, 255, 255, 0.65); font-size: 12px; line-height: 1.6; text-wrap: pretty; }
.maps-finish .maps-button { flex: 0 0 auto; background: #fff; color: var(--maps-ink); box-shadow: 0 9px 22px rgba(10, 5, 26, 0.18); }
.maps-finish .maps-button:hover { background: #f4efff; }

.maps-footer { padding: 28px 0; background: #f1eff6; box-shadow: inset 0 1px 0 rgba(33, 26, 53, 0.05); }
.maps-footer .maps-shell { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.maps-footer a { font-size: 14px; font-weight: 750; letter-spacing: -0.03em; }
.maps-footer p { margin: 0; color: var(--maps-muted); font-size: 11px; }

@media (prefers-reduced-motion: no-preference) {
  .maps-hero__copy, .maps-hero__summary, .maps-step { animation: maps-enter 420ms cubic-bezier(0.2, 0, 0, 1) both; }
  .maps-hero__summary { animation-delay: 90ms; }
  .maps-step:nth-child(2) { animation-delay: 60ms; }
  .maps-step:nth-child(3) { animation-delay: 120ms; }
  @keyframes maps-enter { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
}

@media (max-width: 860px) {
  .maps-hero__inner { min-height: 0; padding-block: 64px; grid-template-columns: 1fr; gap: 32px; }
  .maps-hero__summary { max-width: 400px; }
  .maps-content { grid-template-columns: 1fr; gap: 24px; }
  .maps-progress { position: static; overflow-x: auto; }
  .maps-progress > p { display: none; }
  .maps-progress ol { display: flex; gap: 6px; }
  .maps-progress li { flex: 0 0 auto; }
  .maps-progress li + li { margin-top: 0; }
}

@media (max-width: 600px) {
  .maps-shell { width: min(100% - 28px, 1120px); }
  .maps-topbar__inner { min-height: 62px; }
  .maps-topbar__action { width: 44px; padding: 0; justify-content: center; font-size: 0; }
  .maps-topbar__action i { font-size: 16px; }
  .maps-hero__inner { padding-block: 48px; }
  .maps-hero h1 { font-size: 39px; }
  .maps-hero__actions { display: grid; }
  .maps-button { width: 100%; }
  .maps-content { padding-block: 38px 60px; }
  .maps-progress { margin-inline: -14px; border-radius: 0; box-shadow: 0 1px 0 var(--maps-line), 0 -1px 0 var(--maps-line); }
  .maps-step { padding: 22px; border-radius: 22px; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; }
  .maps-step__number { width: 42px; height: 42px; border-radius: 12px; }
  .maps-shot { margin-left: -55px; padding: 7px; border-radius: 16px; }
  .maps-shot img { border-radius: 10px; }
  .maps-finish { padding: 25px; border-radius: 22px; align-items: stretch; flex-direction: column; }
  .maps-footer .maps-shell { align-items: flex-start; flex-direction: column; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }