body .wrapper .configurator { background-color: #A49CFF; }
body .wrapper .configurator .config-inner { display: flex; flex-direction: column; gap: 36px; align-items: center; }
body .wrapper .configurator .config-copy { width: 100%; max-width: 560px; }
body .wrapper .configurator .config-title { font-size: 34px; font-weight: 700; line-height: 1.05; color: var(--osa-ink); margin: 0; letter-spacing: -1.2px; }
body .wrapper .configurator .config-text { font-size: 16px; line-height: 1.65; color: var(--osa-ink); margin: 18px 0 26px; }

body .wrapper .configurator .config-visual { position: relative; width: 100%; max-width: 520px; }
body .wrapper .configurator .config-image { position: relative; z-index: 1; height: 280px; background-image: var(--osa-dots), linear-gradient(135deg, #5a4a9a 0%, #1A103F 100%); background-size: 22px 22px, auto; }
body .wrapper .configurator .config-frame { position: absolute; z-index: 2; top: 18px; left: 18px; right: -14px; bottom: -14px; border: 2px solid var(--osa-lime); pointer-events: none; }

@media (min-width: 768px) {
  body .wrapper .configurator .config-title { font-size: 46px; letter-spacing: -1.8px; }
  body .wrapper .configurator .config-image { height: 360px; }
}
@media (min-width: 1024px) {
  body .wrapper .configurator .config-inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 64px; }
  body .wrapper .configurator .config-copy { flex: 1; }
  body .wrapper .configurator .config-title { font-size: 54px; letter-spacing: -2px; }
  body .wrapper .configurator .config-visual { flex: 1; }
}