.experience { align-items: center; gap: clamp(36px, 6vw, 90px); }
.experience h2 { max-width: 570px; }
.experience-intro > p { font-size: 16px; }
.experience-list article { padding: 20px 0; }
.experience-pro { margin-top: 40px; }
h1 em, h2 em { font-style: normal; }
.hero h1 em { font-style: italic; }
.app-stage { min-height: 600px; position: relative; display: flex; align-items: center; justify-content: center; padding: 48px; overflow: hidden; border-radius: 32px; background: radial-gradient(circle at 75% 20%, #fff 0, #f9e6ff 38%, #efcdfa 100%); }
.app-stage::before, .app-stage::after { content: ''; position: absolute; border: 1px solid #d9a4eb; border-radius: 50%; width: 430px; height: 430px; }
.app-stage::after { width: 530px; height: 530px; opacity: .5; }
.pro-stage { background: radial-gradient(circle at 30% 20%, #fff 0, #fce7f4 40%, #e9cef8 100%); }
.stage-label { position: absolute; top: 25px; left: 28px; font-size: 10px; font-weight: 700; letter-spacing: .13em; color: #912bb5; }
.stage-label span { font-size: 20px; margin-left: 8px; }
.phone { position: relative; z-index: 1; width: min(100%, 288px); border: 7px solid #35283d; border-radius: 34px; background: #fff; box-shadow: 0 25px 60px #582a7060; overflow: hidden; }
.phone-notch { width: 86px; height: 17px; margin: 0 auto; background: #35283d; border-radius: 0 0 12px 12px; }
.phone-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 17px 14px; border-bottom: 1px solid #f2eaf4; color: #392943; font-size: 11px; font-weight: 700; }
.phone-top span { font-size: 19px; color: #b517e8; }
.phone-body { padding: 20px 17px 22px; }
.phone-body > small { color: #b517e8; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.phone-body h3 { margin: 7px 0 5px; font: 700 19px 'DM Sans', sans-serif; letter-spacing: -.04em; }
.phone-body > p { margin: 0 0 15px; font-size: 10px; }
.phone-field { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f1eaf3; }
.phone-field > span { display: grid; place-items: center; flex: 0 0 32px; height: 32px; background: #f8e9fc; border-radius: 10px; color: #b517e8; font-size: 18px; }
.phone-field div { flex: 1; }
.phone-field small, .phone-field strong, .offer-value small, .offer-value strong { display: block; }
.phone-field small, .offer-value small { margin-bottom: 3px; color: #8e8195; font-size: 9px; }
.phone-field strong { color: #3f3445; font-size: 10px; }
.phone-field b { color: #ba91c8; }
.phone-button, .phone-actions div:last-child { margin-top: 16px; padding: 13px 8px; border-radius: 10px; background: linear-gradient(110deg, #ed3da9, #b517e8); color: white; text-align: center; font-size: 10px; font-weight: 700; }
.offer-value { padding: 14px; border-radius: 12px; background: #f9eafa; }
.offer-value strong { color: #9d18c4; font-size: 12px; }
.phone-actions { display: flex; gap: 8px; align-items: end; }
.phone-actions div { flex: 1; padding: 12px 3px; border: 1px solid #ead6ef; border-radius: 10px; text-align: center; color: #9d18c4; font-size: 10px; font-weight: 700; }
.phone-actions div:last-child { border: 0; color: white; }
.illustrative { position: absolute; bottom: 20px; color: #956ca1; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.floating-note { position: absolute; z-index: 2; right: 15px; bottom: 90px; display: flex; align-items: center; gap: 9px; padding: 13px; border-radius: 13px; background: white; box-shadow: 0 10px 30px #77258c20; color: #b517e8; font-size: 20px; }
.floating-note span { color: #7a6781; font-size: 10px; line-height: 1.5; }
.floating-note strong { color: #3d2a45; }
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
  .js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); }
}
@media (max-width: 750px) {
  .app-stage { min-height: 560px; padding: 48px 24px; }
  .experience-pro { margin-top: 20px; }
  .floating-note { right: 10px; bottom: 65px; }
}