{"id":6,"date":"2020-01-11T01:31:50","date_gmt":"2020-01-11T01:31:50","guid":{"rendered":"https:\/\/demos.kadencewp.com\/blocks-active\/?page_id=6"},"modified":"2026-04-30T12:05:07","modified_gmt":"2026-04-30T09:05:07","slug":"yoga-home","status":"publish","type":"page","link":"https:\/\/www.life-on.com.ua\/en\/","title":{"rendered":"Home"},"content":{"rendered":"<style>.kadence-column6_d80e47-50 > .kt-inside-inner-col,.kadence-column6_d80e47-50 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column6_d80e47-50 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column6_d80e47-50 > .kt-inside-inner-col{flex-direction:column;}.kadence-column6_d80e47-50 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column6_d80e47-50 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column6_d80e47-50{position:relative;}@media all and (max-width: 1024px){.kadence-column6_d80e47-50 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column6_d80e47-50 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column6_d80e47-50\"><div class=\"kt-inside-inner-col\">\n<!--\n  life:)on \u2014 \u0433\u043e\u043b\u043e\u0432\u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430 (UA) \u00b7 v2.1 (30.04.2026, \u0421\u0435\u0441\u0456\u044f 2 + \u043f\u043e\u0441\u0442-\u0434\u0435\u043f\u043b\u043e\u0439 Hero fixes)\n  \u041e\u0434\u0438\u043d Kadence Custom HTML \u0431\u043b\u043e\u043a. \u0417\u0430\u043c\u0456\u043d\u044e\u0454 \u0432\u0441\u0456 7 \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u0456\u0445 \u0431\u043b\u043e\u043a\u0456\u0432.\n  EN-\u043c\u043e\u043a\u0430\u043f \u043b\u0438\u0448\u0430\u0454\u0442\u044c\u0441\u044f \u043e\u043a\u0440\u0435\u043c\u0438\u043c \u0431\u043b\u043e\u043a\u043e\u043c (\u0432\u0438\u0434\u0438\u043c\u0456\u0441\u0442\u044c Kadence: \u0442\u0456\u043b\u044c\u043a\u0438 \/en\/).\n  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430: Hero \u2192 \u0411\u043e\u043b\u0456 \u2192 \u041c\u043e\u043a\u0430\u043f UA \u2192 \u0424\u0443\u043d\u043a\u0446\u0456\u0457 \u2192 \u0422\u0430\u0440\u0438\u0444 \u2192 \u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a \u2192 Footer CTA\n\n  \u0417\u043c\u0456\u043d\u0438 v2.1 (\u0442\u0456\u043b\u044c\u043a\u0438 CSS, \u0442\u0435\u043a\u0441\u0442\u0438 \u0431\u0435\u0437 \u0437\u043c\u0456\u043d):\n  - Hero\/Footer .lo-hero-bg \u0442\u0430 .lo-footer-hero-bg \u2192 background-position: center 25% (\u0431\u0443\u043b\u043e center)\n    \u0449\u043e\u0431 \u043d\u0435 \u0437\u0440\u0456\u0437\u0430\u043b\u043e \u0433\u043e\u043b\u043e\u0432\u0443 \u043c\u043e\u0434\u0435\u043b\u0456 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0456\n  - Hero\/Footer overlay \u2192 \u0442\u0440\u0438\u043a\u0443\u0442\u043d\u0438\u0439 \u0433\u0440\u0430\u0434\u0456\u0454\u043d\u0442 0.45\/0.65\/0.55 (\u0431\u0443\u043b\u043e \u043b\u0456\u043d\u0456\u0439\u043d\u0438\u0439 0.35\/0.55)\n    \u0434\u043b\u044f \u043a\u0440\u0430\u0449\u043e\u0457 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0456 sub-\u0442\u0435\u043a\u0441\u0442\u0443\n-->\n<div class=\"lo-page\" id=\"lifeon-home\">\n\n<style>\n\/* ===== \u0411\u0410\u0417\u0410 ===== *\/\n.lo-page {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;\n  max-width: 1200px;\n  margin: 0 auto;\n  color: #1a1a1a;\n}\n.lo-page * { box-sizing: border-box; }\n.lo-page section,\n.lo-page .lo-section {\n  margin: 24px auto;\n}\n\n\/* ===== EN\/UA \u0412\u0418\u0414\u0418\u041c\u0406\u0421\u0422\u042c \u041c\u041e\u041a\u0410\u041f\u0410 =====\n   \u0417\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c UA-\u043c\u043e\u043a\u0430\u043f \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, EN-\u043c\u043e\u043a\u0430\u043f \u0441\u0445\u043e\u0432\u0430\u043d\u0438\u0439.\n   TranslatePress \u043d\u0430 \/en\/ \u0441\u0442\u0430\u0432\u0438\u0442\u044c html lang=\"en-GB\" \u2014 \u0456\u043d\u0432\u0435\u0440\u0441\u0456\u044f. *\/\n.lo-page .lifeon-mockup-wrap-en { display: none; }\nhtml[lang^=\"en\"] .lo-page .lifeon-mockup-wrap-ua { display: none; }\nhtml[lang^=\"en\"] .lo-page .lifeon-mockup-wrap-en { display: flex; }\n\n\/* ===== 1. HERO ===== *\/\n.lo-page .lo-hero-wrap {\n  position: relative;\n  width: 100%;\n  min-height: 520px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 24px;\n}\n.lo-page .lo-hero-bg {\n  position: absolute;\n  inset: 0;\n  background-image: url('https:\/\/www.life-on.com.ua\/wp-content\/uploads\/2026\/04\/0z001.png');\n  background-size: cover;\n  background-position: center 25%;\n  z-index: 0;\n}\n.lo-page .lo-hero-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.55) 100%);\n  z-index: 1;\n}\n.lo-page .lo-hero-content {\n  position: relative;\n  z-index: 2;\n  text-align: center;\n  padding: 80px 24px;\n  max-width: 720px;\n  margin: 0 auto;\n}\n.lo-page .lo-hero-content h1 {\n  font-size: clamp(32px, 5vw, 56px);\n  font-weight: 700;\n  color: #fff;\n  line-height: 1.1;\n  margin: 0 0 16px;\n}\n.lo-page .lo-hero-sub {\n  font-size: clamp(15px, 2vw, 18px);\n  color: rgba(255,255,255,0.85);\n  line-height: 1.6;\n  margin: 0 0 36px;\n}\n.lo-page .lo-waitlist-wrap {\n  max-width: 520px;\n  margin: 0 auto;\n  text-align: center;\n}\n.lo-page #wl-form-row {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 10px;\n}\n.lo-page #wl-email {\n  flex: 1;\n  height: 48px;\n  padding: 0 16px;\n  border: none;\n  border-radius: 8px;\n  font-size: 15px;\n  background: rgba(255,255,255,0.95);\n  color: #111;\n  outline: none;\n  font-family: inherit;\n}\n.lo-page #wl-email:focus {\n  background: #fff;\n  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);\n}\n.lo-page #wl-btn,\n.lo-page #lo-btn2 {\n  height: 48px;\n  padding: 0 22px;\n  border: none;\n  border-radius: 8px;\n  background: #FF6B35;\n  color: #fff;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background .15s, transform .1s;\n  font-family: inherit;\n}\n.lo-page #wl-btn:hover,\n.lo-page #lo-btn2:hover  { background: #ff8c5a; }\n.lo-page #wl-btn:active,\n.lo-page #lo-btn2:active { transform: scale(0.98); }\n.lo-page #wl-btn:disabled,\n.lo-page #lo-btn2:disabled { opacity: 0.6; cursor: default; }\n.lo-page #wl-success {\n  color: #fff;\n  font-size: 15px;\n  margin: 8px 0;\n}\n.lo-page #wl-error {\n  color: #ffb3b3;\n  font-size: 13px;\n  margin: 6px 0;\n}\n.lo-page .lo-wl-hint {\n  color: rgba(255,255,255,0.65);\n  font-size: 13px;\n  margin: 0;\n}\n\n\/* ===== 2. \u0411\u041e\u041b\u0406 ===== *\/\n.lo-page .lo-pain {\n  padding: 60px 20px;\n  text-align: center;\n}\n.lo-page .lo-pain h2 {\n  font-size: 2rem;\n  margin-bottom: 8px;\n  color: #1a1a1a;\n}\n.lo-page .lo-pain-subtitle {\n  font-size: 1.1rem;\n  color: #666;\n  margin-bottom: 48px;\n}\n.lo-page .lo-pain-cards {\n  display: flex;\n  gap: 32px;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n.lo-page .lo-pain-card {\n  flex: 1;\n  min-width: 280px;\n  max-width: 360px;\n  background: #fff;\n  border-radius: 16px;\n  overflow: hidden;\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n  text-align: left;\n}\n.lo-page .lo-pain-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n.lo-page .lo-pain-card img {\n  width: 100%;\n  height: 220px;\n  object-fit: cover;\n  display: block;\n}\n.lo-page .lo-pain-card-content { padding: 24px; }\n.lo-page .lo-pain-card-content h3 {\n  font-size: 1.15rem;\n  margin: 0 0 12px;\n  color: #1a1a1a;\n  line-height: 1.4;\n}\n.lo-page .lo-pain-card-content p {\n  font-size: 0.95rem;\n  color: #555;\n  line-height: 1.6;\n  margin: 0 0 16px;\n}\n.lo-page .lo-pain-quote {\n  font-style: italic;\n  color: #888;\n  font-size: 0.9rem;\n  border-left: 3px solid #FF6B35;\n  padding-left: 12px;\n  margin: 0;\n}\n@media (max-width: 768px) {\n  .lo-page .lo-pain-cards { flex-direction: column; align-items: center; }\n  .lo-page .lo-pain-card { max-width: 100%; }\n  .lo-page .lo-pain-card img { height: 200px; }\n}\n\n\/* ===== 3. \u041c\u041e\u041a\u0410\u041f UA ===== *\/\n.lo-page .lifeon-mockup-wrap-ua {\n  background: #ffffff;\n  padding: 48px 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 24px;\n}\n.lo-page .lifeon-mockup-wrap-ua .section { display: flex; flex-direction: column; align-items: center; gap: 36px; width: 100%; }\n.lo-page .lifeon-mockup-wrap-ua .section__tag { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #FF6B35; text-align: center; }\n.lo-page .lifeon-mockup-wrap-ua .section__title { font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: #1a1a1a; text-align: center; line-height: 1.2; margin-top: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .section__sub { font-size: 15px; color: #888; text-align: center; line-height: 1.6; margin-top: 8px; max-width: 480px; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-switcher { display: flex; background: #e4e4de; border-radius: 18px; padding: 5px; gap: 4px; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-switcher__btn { display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 13px; border: none; background: transparent; font-size: 14px; font-weight: 600; color: #888; cursor: pointer; transition: all .22s ease; white-space: nowrap; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-switcher__btn.active { background: #fff; color: #1a1a1a; box-shadow: 0 2px 10px rgba(0,0,0,0.10); }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-phone { width: 300px; background: #fff; border-radius: 44px; border: 8px solid #1a1a1a; box-shadow: 0 0 0 1px #2a2a2a, 0 32px 80px rgba(0,0,0,0.22); overflow: hidden; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-status { background: #1a1a1a; height: 30px; display: flex; align-items: center; padding: 0 18px; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-time { color: #fff; font-size: 11px; font-weight: 500; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-icons { margin-left: auto; display: flex; gap: 5px; align-items: center; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-screens { position: relative; height: 530px; overflow: hidden; background: #f5f5f0; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-screen { position: absolute; inset: 0; overflow-y: auto; opacity: 0; transform: translateX(24px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; scrollbar-width: none; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-screen::-webkit-scrollbar { display: none; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-screen.active { opacity: 1; transform: translateX(0); pointer-events: all; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-screen.exit { opacity: 0; transform: translateX(-24px); }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-nav { background: #fff; border-top: 0.5px solid #e8e8e8; padding: 6px 0 0; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-nav-row { display: flex; justify-content: space-around; align-items: flex-start; padding: 0 6px; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 8px; cursor: pointer; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-tab span { font-size: 9px; color: #aaa; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-tab.active span { color: #FF6B35; font-weight: 600; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-tab-dot { width: 3px; height: 3px; border-radius: 50%; background: #FF6B35; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-home-bar { display: flex; justify-content: center; padding: 5px 0 3px; }\n.lo-page .lifeon-mockup-wrap-ua .lifeon-ph-home-bar div { width: 90px; height: 4px; background: #1a1a1a; border-radius: 4px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-s-header-white { background: #fff; padding: 12px 14px 10px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-badge-green { background: #EAF3DE; color: #22c55e; font-size: 9px; border-radius: 5px; padding: 1px 5px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-badge-orange { background: #FFF3EE; color: #FF6B35; font-size: 9px; border-radius: 5px; padding: 1px 5px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-greeting { background: #fff; padding: 12px 14px 10px; display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-greeting-text p:first-child { font-size: 10px; color: #aaa; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-greeting-text p:last-child { font-size: 16px; font-weight: 500; color: #1a1a1a; margin-top: 3px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-avatar { width: 36px; height: 36px; border-radius: 50%; background: #FF6B35; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; position: relative; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-online { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-banner { background: #FF6B35; border-radius: 12px; margin: 8px 10px 0; padding: 14px; display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-banner-left p:first-child { font-size: 9px; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-banner-left p:nth-child(2) { font-size: 15px; font-weight: 500; color: #fff; margin-bottom: 5px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-banner-left div { display: flex; gap: 10px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-banner-left span { font-size: 11px; color: rgba(255,255,255,.9); }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-banner-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-stats { background: #fff; border-radius: 12px; margin: 8px 10px 0; padding: 12px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-stats-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-stats-row { display: flex; gap: 6px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-stat { flex: 1; background: #FFF3EE; border-radius: 8px; padding: 8px; text-align: center; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-stat p:first-child { font-size: 17px; font-weight: 500; color: #FF6B35; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-stat p:last-child { font-size: 9px; color: #FF6B35; margin-top: 2px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-quick { background: #fff; border-radius: 12px; margin: 8px 10px 0; padding: 12px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-quick-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-quick-item { background: #f5f5f0; border-radius: 9px; padding: 9px 10px; display: flex; align-items: center; gap: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-quick-icon { width: 28px; height: 28px; border-radius: 7px; background: #FFF3EE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-quick-item p:first-child { font-size: 11px; font-weight: 500; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-quick-item p:last-child { font-size: 9px; color: #888; margin-top: 1px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-event { background: #4A7FC1; border-radius: 12px; margin: 8px 10px 0; padding: 12px; display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-event-left p:first-child { font-size: 9px; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-event-left p:nth-child(2) { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 3px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-event-left p:last-child { font-size: 10px; color: rgba(255,255,255,.8); }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-event-count { background: rgba(255,255,255,.2); border-radius: 8px; padding: 6px 10px; text-align: center; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-event-count b { font-size: 18px; font-weight: 500; color: #fff; display: block; line-height: 1; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-event-count small { font-size: 8px; color: rgba(255,255,255,.8); }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-trainer { background: #fff; border-radius: 12px; margin: 8px 10px 16px; padding: 12px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-trainer-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-trainer-row { display: flex; align-items: center; gap: 10px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-trainer-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#f7c59f,#e8956d); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; flex-shrink: 0; position: relative; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-trainer-av .lo-online { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-trainer-row > div:nth-child(2) { flex: 1; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-trainer-row p:first-child { font-size: 12px; font-weight: 500; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-trainer-row p:last-child { font-size: 10px; color: #888; margin-top: 1px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-home-trainer-btn { background: #FF6B35; border: none; border-radius: 16px; padding: 6px 12px; font-size: 11px; color: #fff; font-weight: 500; cursor: pointer; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-search { display: flex; align-items: center; gap: 6px; background: #f5f5f0; border-radius: 9px; padding: 8px 10px; margin: 0 14px 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-filters { padding: 0 10px 8px; display: flex; gap: 5px; overflow: hidden; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-chip { flex-shrink: 0; border-radius: 14px; padding: 5px 11px; font-size: 10px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-chip.on { background: #FF6B35; color: #fff; font-weight: 600; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-chip.off { background: #f5f5f0; color: #555; border: 0.5px solid #e0e0e0; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-cards { padding: 0 10px; display: flex; flex-direction: column; gap: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-card { background: #fff; border-radius: 12px; overflow: hidden; display: flex; border: 0.5px solid #ebebeb; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-stripe { width: 4px; flex-shrink: 0; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-card-inner { padding: 10px 10px 10px 8px; flex: 1; display: flex; align-items: flex-start; gap: 9px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; position: relative; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-av .lo-online { position: absolute; bottom: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-info { flex: 1; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-name { font-size: 13px; font-weight: 500; color: #1a1a1a; margin-bottom: 2px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-spec { font-size: 10px; color: #888; margin-bottom: 4px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-meta { display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-stars { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-reviews { font-size: 9px; color: #aaa; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-btn-main { font-size: 10px; background: #FF6B35; color: #fff; border: none; border-radius: 12px; padding: 4px 10px; cursor: pointer; font-weight: 500; }\n.lo-page .lifeon-mockup-wrap-ua .lo-tr-btn-sec { font-size: 10px; background: #f5f5f0; color: #555; border: 0.5px solid #e0e0e0; border-radius: 12px; padding: 4px 10px; cursor: pointer; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-header { background: #fff; padding: 10px 14px 8px; display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-header-left p:first-child { font-size: 9px; color: #aaa; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-header-left p:last-child { font-size: 16px; font-weight: 500; color: #1a1a1a; margin-top: 3px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-icons { display: flex; gap: 6px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-icon-btn { width: 30px; height: 30px; border-radius: 8px; background: #f5f5f0; display: flex; align-items: center; justify-content: center; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-kpi { background: #fff; border-radius: 12px; margin: 8px 10px 0; padding: 10px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-kpi-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 7px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-kpi-cards { display: flex; gap: 5px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-kpi-card { flex: 1; border-radius: 8px; overflow: hidden; display: flex; border: 0.5px solid #ebebeb; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-kpi-stripe { width: 3px; flex-shrink: 0; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-kpi-body { padding: 7px 6px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-kpi-tag { font-size: 8px; margin-bottom: 2px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-kpi-val { font-size: 12px; font-weight: 600; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-chart { background: #fff; border-radius: 12px; margin: 8px 10px 0; padding: 10px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-chart-head p { font-size: 11px; font-weight: 500; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-toggle { display: flex; background: #f5f5f0; border-radius: 10px; padding: 2px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-toggle span { font-size: 9px; padding: 3px 7px; border-radius: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-toggle .on { background: #FF6B35; color: #fff; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-toggle .off { color: #888; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-bars { display: flex; align-items: flex-end; gap: 4px; height: 60px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 3px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-bar-col > span { font-size: 8px; color: #aaa; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-bar { width: 100%; border-radius: 2px 2px 0 0; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-body { background: #fff; border-radius: 12px; margin: 8px 10px 0; padding: 10px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-body-title { font-size: 11px; font-weight: 500; color: #1a1a1a; margin-bottom: 7px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-body-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 0.5px solid #f0f0f0; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-body-row:last-child { border-bottom: none; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-body-left { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-body-ico { width: 22px; height: 22px; border-radius: 5px; background: #f5f5f0; display: flex; align-items: center; justify-content: center; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-body-right { display: flex; align-items: center; gap: 4px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-val { font-size: 11px; font-weight: 500; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-achieve { background: #fff; border-radius: 12px; margin: 8px 10px 16px; padding: 10px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-achieve-title { font-size: 11px; font-weight: 500; color: #1a1a1a; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-achieve-list { display: flex; gap: 6px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-badge-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 46px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-badge-circle { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-badge-item span { font-size: 8px; color: #1a1a1a; text-align: center; line-height: 1.3; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-add { background: #fff; border-radius: 12px; margin: 8px 10px 16px; padding: 10px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-add-title { font-size: 11px; font-weight: 500; color: #1a1a1a; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-pr-add-btn { width: 100%; background: #FF6B35; border: none; border-radius: 10px; padding: 11px; font-size: 12px; font-weight: 500; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-header { background: #fff; padding: 10px 14px 8px; display: flex; align-items: flex-start; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-title { font-size: 20px; font-weight: 500; color: #1a1a1a; margin-bottom: 3px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-loc { display: flex; align-items: center; gap: 3px; font-size: 10px; color: #888; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-change { font-size: 10px; background: #f5f5f0; border-radius: 10px; padding: 4px 8px; color: #555; cursor: pointer; border: none; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-filters { padding: 6px 10px 8px; background: #fff; display: flex; gap: 5px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-chip { flex-shrink: 0; border-radius: 14px; padding: 5px 11px; font-size: 10px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-chip.on { background: #FF6B35; color: #fff; font-weight: 600; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-chip.off { background: #f5f5f0; color: #555; border: 0.5px solid #e0e0e0; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-cards { padding: 0 10px; display: flex; flex-direction: column; gap: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-card { border-radius: 12px; overflow: hidden; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-card-inner { padding: 11px 12px 9px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-card-top { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-datebox { background: rgba(255,255,255,.22); border-radius: 8px; padding: 5px 8px; text-align: center; min-width: 36px; flex-shrink: 0; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-datebox b { font-size: 18px; font-weight: 700; color: #fff; display: block; line-height: 1; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-datebox small { font-size: 8px; color: rgba(255,255,255,.8); text-transform: uppercase; display: block; margin-top: 1px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-name { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 2px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-city { font-size: 9px; color: rgba(255,255,255,.8); margin-bottom: 2px; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-meta { font-size: 9px; color: rgba(255,255,255,.9); }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-card-bottom { display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-part { font-size: 9px; color: rgba(255,255,255,.8); }\n.lo-page .lifeon-mockup-wrap-ua .lo-ev-reg { font-size: 9px; font-weight: 600; border: none; border-radius: 12px; padding: 5px 11px; cursor: pointer; }\n\n\/* ===== 3-EN. \u041c\u041e\u041a\u0410\u041f EN ===== *\/\n.lo-page .lifeon-mockup-wrap-en {\n  background: #ffffff;\n  padding: 48px 20px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 24px;\n}\n.lo-page .lifeon-mockup-wrap-en .section { display: flex; flex-direction: column; align-items: center; gap: 36px; width: 100%; }\n.lo-page .lifeon-mockup-wrap-en .section__tag { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #FF6B35; text-align: center; }\n.lo-page .lifeon-mockup-wrap-en .section__title { font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: #1a1a1a; text-align: center; line-height: 1.2; margin-top: 8px; }\n.lo-page .lifeon-mockup-wrap-en .section__sub { font-size: 15px; color: #888; text-align: center; line-height: 1.6; margin-top: 8px; max-width: 480px; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-switcher { display: flex; background: #e4e4de; border-radius: 18px; padding: 5px; gap: 4px; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-switcher__btn { display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 13px; border: none; background: transparent; font-size: 14px; font-weight: 600; color: #888; cursor: pointer; transition: all .22s ease; white-space: nowrap; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-switcher__btn.active { background: #fff; color: #1a1a1a; box-shadow: 0 2px 10px rgba(0,0,0,0.10); }\n.lo-page .lifeon-mockup-wrap-en .lifeon-phone { width: 300px; background: #fff; border-radius: 44px; border: 8px solid #1a1a1a; box-shadow: 0 0 0 1px #2a2a2a, 0 32px 80px rgba(0,0,0,0.22); overflow: hidden; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-status { background: #1a1a1a; height: 30px; display: flex; align-items: center; padding: 0 18px; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-time { color: #fff; font-size: 11px; font-weight: 500; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-icons { margin-left: auto; display: flex; gap: 5px; align-items: center; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-screens { position: relative; height: 530px; overflow: hidden; background: #f5f5f0; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-screen { position: absolute; inset: 0; overflow-y: auto; opacity: 0; transform: translateX(24px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; scrollbar-width: none; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-screen::-webkit-scrollbar { display: none; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-screen.active { opacity: 1; transform: translateX(0); pointer-events: all; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-screen.exit { opacity: 0; transform: translateX(-24px); }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-nav { background: #fff; border-top: 0.5px solid #e8e8e8; padding: 6px 0 0; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-nav-row { display: flex; justify-content: space-around; align-items: flex-start; padding: 0 6px; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 8px; cursor: pointer; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-tab span { font-size: 9px; color: #aaa; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-tab.active span { color: #FF6B35; font-weight: 600; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-tab-dot { width: 3px; height: 3px; border-radius: 50%; background: #FF6B35; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-home-bar { display: flex; justify-content: center; padding: 5px 0 3px; }\n.lo-page .lifeon-mockup-wrap-en .lifeon-ph-home-bar div { width: 90px; height: 4px; background: #1a1a1a; border-radius: 4px; }\n.lo-page .lifeon-mockup-wrap-en .lo-badge-green { background: #EAF3DE; color: #22c55e; font-size: 9px; border-radius: 5px; padding: 1px 5px; }\n.lo-page .lifeon-mockup-wrap-en .lo-badge-orange { background: #FFF3EE; color: #FF6B35; font-size: 9px; border-radius: 5px; padding: 1px 5px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-greeting { background: #fff; padding: 12px 14px 10px; display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-greeting-text p:first-child { font-size: 10px; color: #aaa; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-greeting-text p:last-child { font-size: 16px; font-weight: 500; color: #1a1a1a; margin-top: 3px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-avatar { width: 36px; height: 36px; border-radius: 50%; background: #FF6B35; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; position: relative; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-online { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-banner { background: #FF6B35; border-radius: 12px; margin: 8px 10px 0; padding: 14px; display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-banner-left p:first-child { font-size: 9px; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-banner-left p:nth-child(2) { font-size: 15px; font-weight: 500; color: #fff; margin-bottom: 5px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-banner-left div { display: flex; gap: 10px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-banner-left span { font-size: 11px; color: rgba(255,255,255,.9); }\n.lo-page .lifeon-mockup-wrap-en .lo-home-banner-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-stats { background: #fff; border-radius: 12px; margin: 8px 10px 0; padding: 12px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-stats-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-stats-row { display: flex; gap: 6px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-stat { flex: 1; background: #FFF3EE; border-radius: 8px; padding: 8px; text-align: center; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-stat p:first-child { font-size: 17px; font-weight: 500; color: #FF6B35; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-stat p:last-child { font-size: 9px; color: #FF6B35; margin-top: 2px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-quick { background: #fff; border-radius: 12px; margin: 8px 10px 0; padding: 12px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-quick-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-quick-item { background: #f5f5f0; border-radius: 9px; padding: 9px 10px; display: flex; align-items: center; gap: 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-quick-icon { width: 28px; height: 28px; border-radius: 7px; background: #FFF3EE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-quick-item p:first-child { font-size: 11px; font-weight: 500; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-quick-item p:last-child { font-size: 9px; color: #888; margin-top: 1px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-event { background: #4A7FC1; border-radius: 12px; margin: 8px 10px 0; padding: 12px; display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-event-left p:first-child { font-size: 9px; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-event-left p:nth-child(2) { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 3px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-event-left p:last-child { font-size: 10px; color: rgba(255,255,255,.8); }\n.lo-page .lifeon-mockup-wrap-en .lo-home-event-count { background: rgba(255,255,255,.2); border-radius: 8px; padding: 6px 10px; text-align: center; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-event-count b { font-size: 18px; font-weight: 500; color: #fff; display: block; line-height: 1; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-event-count small { font-size: 8px; color: rgba(255,255,255,.8); }\n.lo-page .lifeon-mockup-wrap-en .lo-home-trainer { background: #fff; border-radius: 12px; margin: 8px 10px 16px; padding: 12px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-trainer-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-trainer-row { display: flex; align-items: center; gap: 10px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-trainer-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#f7c59f,#e8956d); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; flex-shrink: 0; position: relative; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-trainer-av .lo-online { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-trainer-row > div:nth-child(2) { flex: 1; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-trainer-row p:first-child { font-size: 12px; font-weight: 500; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-trainer-row p:last-child { font-size: 10px; color: #888; margin-top: 1px; }\n.lo-page .lifeon-mockup-wrap-en .lo-home-trainer-btn { background: #FF6B35; border: none; border-radius: 16px; padding: 6px 12px; font-size: 11px; color: #fff; font-weight: 500; cursor: pointer; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-search { display: flex; align-items: center; gap: 6px; background: #f5f5f0; border-radius: 9px; padding: 8px 10px; margin: 0 14px 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-filters { padding: 0 10px 8px; display: flex; gap: 5px; overflow: hidden; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-chip { flex-shrink: 0; border-radius: 14px; padding: 5px 11px; font-size: 10px; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-chip.on { background: #FF6B35; color: #fff; font-weight: 600; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-chip.off { background: #f5f5f0; color: #555; border: 0.5px solid #e0e0e0; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-cards { display: flex; flex-direction: column; gap: 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-card { background: #fff; border-radius: 12px; overflow: hidden; display: flex; border: 0.5px solid #ebebeb; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-stripe { width: 4px; flex-shrink: 0; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-card-inner { padding: 10px 10px 10px 8px; flex: 1; display: flex; align-items: flex-start; gap: 9px; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; position: relative; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-av .lo-online { position: absolute; bottom: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-info { flex: 1; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-name { font-size: 13px; font-weight: 500; color: #1a1a1a; margin-bottom: 2px; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-spec { font-size: 10px; color: #888; margin-bottom: 4px; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-meta { display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-stars { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-reviews { font-size: 9px; color: #aaa; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-btn-main { font-size: 10px; background: #FF6B35; color: #fff; border: none; border-radius: 12px; padding: 4px 10px; cursor: pointer; font-weight: 500; }\n.lo-page .lifeon-mockup-wrap-en .lo-tr-btn-sec { font-size: 10px; background: #f5f5f0; color: #555; border: 0.5px solid #e0e0e0; border-radius: 12px; padding: 4px 10px; cursor: pointer; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-header { background: #fff; padding: 10px 14px 8px; display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-header-left p:first-child { font-size: 9px; color: #aaa; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-header-left p:last-child { font-size: 16px; font-weight: 500; color: #1a1a1a; margin-top: 3px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-icons { display: flex; gap: 6px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-icon-btn { width: 30px; height: 30px; border-radius: 8px; background: #f5f5f0; display: flex; align-items: center; justify-content: center; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-kpi { background: #fff; border-radius: 12px; margin: 8px 10px 0; padding: 10px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-kpi-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 7px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-kpi-cards { display: flex; gap: 5px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-kpi-card { flex: 1; border-radius: 8px; overflow: hidden; display: flex; border: 0.5px solid #ebebeb; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-kpi-stripe { width: 3px; flex-shrink: 0; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-kpi-body { padding: 7px 6px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-kpi-tag { font-size: 8px; margin-bottom: 2px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-kpi-val { font-size: 12px; font-weight: 600; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-chart { background: #fff; border-radius: 12px; margin: 8px 10px 0; padding: 10px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-chart-head p { font-size: 11px; font-weight: 500; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-toggle { display: flex; background: #f5f5f0; border-radius: 10px; padding: 2px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-toggle span { font-size: 9px; padding: 3px 7px; border-radius: 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-toggle .on { background: #FF6B35; color: #fff; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-toggle .off { color: #888; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-bars { display: flex; align-items: flex-end; gap: 4px; height: 60px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 3px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-bar-col > span { font-size: 8px; color: #aaa; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-bar { width: 100%; border-radius: 2px 2px 0 0; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-body { background: #fff; border-radius: 12px; margin: 8px 10px 0; padding: 10px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-body-title { font-size: 11px; font-weight: 500; color: #1a1a1a; margin-bottom: 7px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-body-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 0.5px solid #f0f0f0; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-body-row:last-child { border-bottom: none; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-body-left { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-body-ico { width: 22px; height: 22px; border-radius: 5px; background: #f5f5f0; display: flex; align-items: center; justify-content: center; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-body-right { display: flex; align-items: center; gap: 4px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-val { font-size: 11px; font-weight: 500; color: #1a1a1a; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-achieve { background: #fff; border-radius: 12px; margin: 8px 10px 16px; padding: 10px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-achieve-title { font-size: 11px; font-weight: 500; color: #1a1a1a; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-achieve-list { display: flex; gap: 6px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-badge-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 46px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-badge-circle { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-badge-item span { font-size: 8px; color: #1a1a1a; text-align: center; line-height: 1.3; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-add { background: #fff; border-radius: 12px; margin: 8px 10px 16px; padding: 10px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-add-title { font-size: 11px; font-weight: 500; color: #1a1a1a; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-pr-add-btn { width: 100%; background: #FF6B35; border: none; border-radius: 10px; padding: 11px; font-size: 12px; font-weight: 500; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-header { background: #fff; padding: 10px 14px 8px; display: flex; align-items: flex-start; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-title { font-size: 20px; font-weight: 500; color: #1a1a1a; margin-bottom: 3px; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-loc { display: flex; align-items: center; gap: 3px; font-size: 10px; color: #888; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-change { font-size: 10px; background: #f5f5f0; border-radius: 10px; padding: 4px 8px; color: #555; cursor: pointer; border: none; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-filters { padding: 6px 10px 8px; background: #fff; display: flex; gap: 5px; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-chip { flex-shrink: 0; border-radius: 14px; padding: 5px 11px; font-size: 10px; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-chip.on { background: #FF6B35; color: #fff; font-weight: 600; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-chip.off { background: #f5f5f0; color: #555; border: 0.5px solid #e0e0e0; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-cards { display: flex; flex-direction: column; gap: 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-card { border-radius: 12px; overflow: hidden; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-card-inner { padding: 11px 12px 9px; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-card-top { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-datebox { background: rgba(255,255,255,.22); border-radius: 8px; padding: 5px 8px; text-align: center; min-width: 36px; flex-shrink: 0; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-datebox b { font-size: 18px; font-weight: 700; color: #fff; display: block; line-height: 1; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-datebox small { font-size: 8px; color: rgba(255,255,255,.8); text-transform: uppercase; display: block; margin-top: 1px; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-name { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 2px; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-city { font-size: 9px; color: rgba(255,255,255,.8); margin-bottom: 2px; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-meta { font-size: 9px; color: rgba(255,255,255,.9); }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-card-bottom { display: flex; align-items: center; justify-content: space-between; }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-part { font-size: 9px; color: rgba(255,255,255,.8); }\n.lo-page .lifeon-mockup-wrap-en .lo-ev-reg { font-size: 9px; font-weight: 600; border: none; border-radius: 12px; padding: 5px 11px; cursor: pointer; }\n\n\/* ===== 7. FOOTER CTA ===== *\/\n.lo-page .lo-footer-hero {\n  position: relative;\n  width: 100%;\n  min-height: 400px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 24px;\n}\n.lo-page .lo-footer-hero-bg {\n  position: absolute;\n  inset: 0;\n  background-image: url('https:\/\/www.life-on.com.ua\/wp-content\/uploads\/2026\/04\/0z001.png');\n  background-size: cover;\n  background-position: center 25%;\n  z-index: 0;\n}\n.lo-page .lo-footer-hero-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0.65) 100%);\n  z-index: 1;\n}\n.lo-page .lo-footer-hero-content {\n  position: relative;\n  z-index: 2;\n  text-align: center;\n  padding: 70px 24px;\n  width: 100%;\n}\n.lo-page .lo-ftag {\n  font-size: 12px;\n  font-weight: 700;\n  color: #FF6B35;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  margin: 0 0 14px;\n}\n.lo-page .lo-footer-hero-content h2 {\n  font-size: 30px;\n  font-weight: 700;\n  color: #ffffff;\n  margin: 0 0 14px;\n  line-height: 1.25;\n}\n.lo-page .lo-fsub {\n  font-size: 16px;\n  color: rgba(255,255,255,0.75);\n  margin: 0 0 32px;\n  line-height: 1.6;\n}\n.lo-page .lo-footer-form {\n  max-width: 480px;\n  margin: 0 auto 14px;\n}\n.lo-page #lo-form-row2 {\n  display: flex;\n  gap: 8px;\n}\n.lo-page #lo-email2 {\n  flex: 1;\n  height: 52px;\n  padding: 0 18px;\n  border: 1px solid rgba(255,107,53,0.3);\n  border-radius: 10px;\n  font-size: 15px;\n  background: rgba(255,255,255,0.1);\n  color: #fff;\n  outline: none;\n  font-family: inherit;\n}\n.lo-page #lo-email2::placeholder { color: rgba(255,255,255,0.35); }\n.lo-page #lo-email2:focus { border-color: rgba(255,107,53,0.7); background: rgba(255,255,255,0.15); }\n.lo-page #lo-btn2 {\n  height: 52px;\n  padding: 0 24px;\n  border-radius: 10px;\n  font-weight: 700;\n}\n.lo-page #lo-success2 { display:none; color: #FF6B35; font-size: 15px; margin: 12px 0 0; }\n.lo-page #lo-error2 { display:none; color: #ff8a80; font-size: 13px; margin: 8px 0 0; }\n\n\/* ===== \u0421\u041f\u0406\u041b\u042c\u041d\u0406 \u041c\u0415\u0414\u0406\u0410-\u0417\u0410\u041f\u0418\u0422\u0418 ===== *\/\n@media (max-width: 560px) {\n  .lo-page #wl-form-row,\n  .lo-page #lo-form-row2 { flex-direction: column; }\n  .lo-page #wl-btn,\n  .lo-page #lo-btn2 { width: 100%; }\n}\n<\/style>\n\n\n<!-- ============================================\n     1. HERO + \u0424\u041e\u0420\u041c\u0410 \u041e\u0427\u0406\u041a\u0423\u0412\u0410\u041d\u041d\u042f\n============================================ -->\n<section class=\"lo-hero-wrap\">\n  <div class=\"lo-hero-bg\"><\/div>\n  <div class=\"lo-hero-overlay\"><\/div>\n  <div class=\"lo-hero-content\">\n    <h1>\u0415\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043f\u043e\u0440\u0442\u0443 \u0456 \u0437\u0434\u043e\u0440\u043e\u0432&#8217;\u044f<\/h1>\n    <p class=\"lo-hero-sub\">\n      life:)on \u2014 \u043e\u0434\u0438\u043d \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a \u0437\u0430\u043c\u0456\u0441\u0442\u044c \u0434\u0435\u0441\u044f\u0442\u0438 \u0432\u043a\u043b\u0430\u0434\u043e\u043a: \u0442\u0440\u0435\u043d\u0435\u0440, \u043f\u0440\u043e\u0433\u0440\u0435\u0441, \u043f\u043e\u0434\u0456\u0457, \u043c\u0456\u0441\u0446\u044f \u0434\u043b\u044f \u0442\u0440\u0435\u043d\u0443\u0432\u0430\u043d\u044c. \u0411\u0443\u0434\u044c-\u044f\u043a\u0438\u0439 \u0440\u0456\u0432\u0435\u043d\u044c, \u0440\u0456\u0434\u043d\u043e\u044e \u043c\u043e\u0432\u043e\u044e.<br>\n      <a href=\"https:\/\/www.life-on.com.ua\/for-athletes\/\" style=\"color:rgba(255,255,255,0.8);text-decoration:underline;font-size:14px;\">\u041f\u043e\u0434\u0438\u0432\u0438\u0442\u0438\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0456\u0457 \u2192<\/a>\n    <\/p>\n    <div class=\"lo-waitlist-wrap\">\n      <div id=\"wl-form-row\">\n        <input type=\"email\" id=\"wl-email\" placeholder=\"email@\u043f\u0440\u0438\u043a\u043b\u0430\u0434.com\" autocomplete=\"email\">\n        <button id=\"wl-btn\">\u0414\u0456\u0437\u043d\u0430\u0442\u0438\u0441\u044c \u043f\u0440\u043e \u0437\u0430\u043f\u0443\u0441\u043a<\/button>\n      <\/div>\n      <p id=\"wl-success\" style=\"display:none\">\u2713 \u0417\u0430\u043f\u0438\u0441\u0430\u043d\u043e. \u041f\u043e\u0432\u0456\u0434\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0443.<\/p>\n      <p id=\"wl-error\" style=\"display:none\">\u0429\u043e\u0441\u044c \u043f\u0456\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a. \u0421\u043f\u0440\u043e\u0431\u0443\u0432\u0430\u0442\u0438 \u0449\u0435 \u0440\u0430\u0437?<\/p>\n      <p class=\"lo-wl-hint\">\u0411\u0435\u0437 \u0441\u043f\u0430\u043c\u0443. \u041e\u0434\u043d\u0435 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f \u043a\u043e\u043b\u0438 \u0432\u0456\u0434\u043a\u0440\u0438\u0454\u043c\u043e \u0434\u043e\u0441\u0442\u0443\u043f.<\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================\n     2. \u0411\u041e\u041b\u0406 (\"\u0417\u043d\u0430\u0439\u043e\u043c\u043e?\")\n============================================ -->\n<section class=\"lo-pain\">\n  <h2>\u0417\u043d\u0430\u0439\u043e\u043c\u043e?<\/h2>\n  <p class=\"lo-pain-subtitle\">\u0422\u0440\u0438 \u0433\u043e\u043b\u043e\u0432\u043d\u0456 \u0431\u043e\u043b\u0456, \u044f\u043a\u0456 \u0437\u0430\u043a\u0440\u0438\u0432\u0430\u0454 \u0435\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 life:)on.<\/p>\n  <div class=\"lo-pain-cards\">\n    <div class=\"lo-pain-card\">\n      <img decoding=\"async\" src=\"https:\/\/www.life-on.com.ua\/wp-content\/uploads\/2026\/04\/001.webp\"\n           alt=\"\u0415\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043f\u043e\u0440\u0442\u0443 \u0456 \u0437\u0434\u043e\u0440\u043e\u0432'\u044f: \u043f\u043e\u0448\u0443\u043a \u0442\u0440\u0435\u043d\u0435\u0440\u0430 \u0443 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443\"\n           loading=\"lazy\" width=\"1200\" height=\"900\">\n      <div class=\"lo-pain-card-content\">\n        <h3>\u0412\u0430\u0436\u043a\u043e \u0437\u043d\u0430\u0439\u0442\u0438 \u0442\u0440\u0435\u043d\u0435\u0440\u0430, \u044f\u043a\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u0430 \u0434\u043e\u0432\u0456\u0440\u044f\u0442\u0438<\/h3>\n        <p>\u0417\u0432\u0438\u0447\u043d\u0438\u0439 \u0448\u043b\u044f\u0445 \u2014 \u0433\u0443\u0433\u043b\u0438\u0442\u0438, \u043f\u0438\u0442\u0430\u0442\u0438 \u0437\u043d\u0430\u0439\u043e\u043c\u0438\u0445, \u0448\u0443\u043a\u0430\u0442\u0438 \u0432 Instagram. \u041d\u0435\u043c\u0430\u0454 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0456\u0441\u0446\u044f \u0434\u0435 \u043c\u043e\u0436\u043d\u0430 \u043f\u043e\u0440\u0456\u0432\u043d\u044f\u0442\u0438, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u0438 \u0432\u0456\u0434\u0433\u0443\u043a\u0438 \u0456 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438 \u0446\u0456\u043d\u0443.<\/p>\n        <p class=\"lo-pain-quote\">\u00ab\u0425\u043e\u0447\u0443 \u0442\u0440\u0435\u043d\u0435\u0440\u0430 \u2014 \u0430\u043b\u0435 \u043d\u0435 \u0437\u043d\u0430\u044e \u0434\u0435 \u0448\u0443\u043a\u0430\u0442\u0438 \u0456 \u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0446\u0435 \u043c\u0430\u0454 \u043a\u043e\u0448\u0442\u0443\u0432\u0430\u0442\u0438\u00bb<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"lo-pain-card\">\n      <img decoding=\"async\" src=\"https:\/\/www.life-on.com.ua\/wp-content\/uploads\/2026\/04\/002.webp\"\n           alt=\"\u0425\u0430\u043e\u0442\u0438\u0447\u043d\u0456 \u043d\u043e\u0442\u0430\u0442\u043a\u0438 \u0442\u0440\u0435\u043d\u0443\u0432\u0430\u043d\u044c \u043d\u0430 \u0441\u0442\u043e\u043b\u0456 \u0431\u0435\u0437 \u0441\u0438\u0441\u0442\u0435\u043c\u0438\"\n           loading=\"lazy\" width=\"1200\" height=\"900\">\n      <div class=\"lo-pain-card-content\">\n        <h3>\u0422\u0440\u0435\u043d\u0443\u0432\u0430\u043d\u043d\u044f \u0439\u0434\u0443\u0442\u044c, \u043f\u0440\u043e\u0433\u0440\u0435\u0441 \u2014 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u0438\u0439<\/h3>\n        <p>\u0417\u0430\u043f\u0438\u0441\u0438 \u0432 \u043d\u043e\u0442\u0430\u0442\u043a\u0430\u0445, \u0441\u043a\u0440\u0456\u043d\u0448\u043e\u0442\u0438 \u0443 \u0444\u043e\u0442\u043e, \u0446\u0438\u0444\u0440\u0438 \u043d\u0456\u0434\u0435. \u0411\u0435\u0437 \u0441\u0438\u0441\u0442\u0435\u043c\u0438 \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0456\u044f \u043f\u0430\u0434\u0430\u0454 \u2014 \u0431\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0435 \u0432\u0438\u0434\u043d\u043e \u043d\u0430\u0432\u0456\u0442\u044c \u043a\u043e\u043b\u0438 \u0432\u0456\u043d \u0454.<\/p>\n        <p class=\"lo-pain-quote\">\u00ab\u0422\u0440\u0435\u043d\u0443\u044e\u0441\u044c \u0432\u0436\u0435 \u043c\u0456\u0441\u044f\u0446\u044c \u2014 \u0430 \u044f\u043a \u0437\u0440\u043e\u0437\u0443\u043c\u0456\u0442\u0438 \u0449\u043e \u0446\u0435 \u0434\u0430\u0454 \u0435\u0444\u0435\u043a\u0442?\u00bb<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"lo-pain-card\">\n      <img decoding=\"async\" src=\"https:\/\/www.life-on.com.ua\/wp-content\/uploads\/2026\/04\/003.webp\"\n           alt=\"\u0406\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u044f \u043f\u0440\u043e \u0441\u043f\u043e\u0440\u0442\u0438\u0432\u043d\u0456 \u043f\u043e\u0434\u0456\u0457 \u0440\u043e\u0437\u043a\u0438\u0434\u0430\u043d\u0430 \u043f\u043e \u0440\u0456\u0437\u043d\u0438\u0445 \u0434\u043e\u0434\u0430\u0442\u043a\u0430\u0445 \u0456 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445\"\n           loading=\"lazy\" width=\"1200\" height=\"900\">\n      <div class=\"lo-pain-card-content\">\n        <h3>\u041f\u043e\u0434\u0456\u0457 \u0432\u0456\u0434\u0431\u0443\u0432\u0430\u044e\u0442\u044c\u0441\u044f \u043f\u043e\u0440\u044f\u0434 \u2014 \u0430 \u0434\u0456\u0437\u043d\u0430\u0454\u0448\u0441\u044f \u043f\u043e\u0441\u0442\u0444\u0430\u043a\u0442\u0443\u043c<\/h3>\n        <p>\u0406\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u044f \u043f\u0440\u043e \u0437\u043c\u0430\u0433\u0430\u043d\u043d\u044f \u0456 \u0441\u0442\u0430\u0440\u0442\u0438 \u0440\u043e\u0437\u043a\u0438\u0434\u0430\u043d\u0430 \u043f\u043e Facebook-\u0433\u0440\u0443\u043f\u0430\u0445, Telegram-\u043a\u0430\u043d\u0430\u043b\u0430\u0445 \u0456 \u0441\u0430\u0439\u0442\u0430\u0445 \u043e\u0440\u0433\u0430\u043d\u0456\u0437\u0430\u0442\u043e\u0440\u0456\u0432. \u0429\u043e\u0440\u0430\u0437\u0443 \u0448\u0443\u043a\u0430\u0442\u0438 \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n        <p class=\"lo-pain-quote\">\u00ab\u0425\u043e\u0447\u0443 \u0441\u043f\u0440\u043e\u0431\u0443\u0432\u0430\u0442\u0438 \u043c\u0430\u0440\u0430\u0444\u043e\u043d \u2014 \u0430\u043b\u0435 \u0434\u0435 \u0434\u0456\u0437\u043d\u0430\u0442\u0438\u0441\u044c \u0456 \u044f\u043a \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0432\u0430\u0442\u0438\u0441\u044c?\u00bb<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================\n     3. \u041c\u041e\u041a\u0410\u041f UA (\"\u041e\u0441\u044c \u0449\u043e \u0434\u0430\u0454 life:)on\")\n============================================ -->\n<div class=\"lifeon-mockup-wrap-ua\" id=\"mockup-ua\">\n  <div class=\"section\">\n    <div>\n      <p class=\"section__tag\">\u041d\u0430\u0448\u0435 \u0440\u0456\u0448\u0435\u043d\u043d\u044f<\/p>\n      <h2 class=\"section__title\">\u041e\u0441\u044c \u0449\u043e \u0434\u0430\u0454 life:)on<\/h2>\n      <p class=\"section__sub\">\u041e\u0434\u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u2014 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c \u043d\u0430 \u0442\u0440\u0438 \u0433\u043e\u043b\u043e\u0432\u043d\u0456 \u0431\u043e\u043b\u0456.<\/p>\n    <\/div>\n\n    <div class=\"lifeon-switcher\" id=\"lifeon-switcher-ua\">\n      <button class=\"lifeon-switcher__btn active\" data-screen=\"lo-s-home-ua\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M3 9.5L11 3l8 6.5V19a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"\/><path d=\"M8 20v-7h6v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"\/><\/svg>\n        \u0413\u043e\u043b\u043e\u0432\u043d\u0430\n      <\/button>\n      <button class=\"lifeon-switcher__btn\" data-screen=\"lo-s-trainer-ua\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"9\" cy=\"8\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M3 19c0-3 2.7-5 6-5s6 2 6 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><path d=\"M16 7v6M13 10h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n        \u0422\u0440\u0435\u043d\u0435\u0440\n      <\/button>\n      <button class=\"lifeon-switcher__btn\" data-screen=\"lo-s-progress-ua\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M11 7v4l3 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n        \u041f\u0440\u043e\u0433\u0440\u0435\u0441\n      <\/button>\n      <button class=\"lifeon-switcher__btn\" data-screen=\"lo-s-events-ua\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 22 22\" fill=\"none\"><rect x=\"3\" y=\"5\" width=\"16\" height=\"14\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M7 3v4M15 3v4M3 9h16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n        \u041f\u043e\u0434\u0456\u044f\n      <\/button>\n    <\/div>\n\n    <div class=\"lifeon-phone\">\n      <div class=\"lifeon-ph-status\">\n        <span class=\"lifeon-ph-time\" id=\"lifeon-ph-time-ua\">9:41<\/span>\n        <div class=\"lifeon-ph-icons\">\n          <svg width=\"14\" height=\"9\" viewBox=\"0 0 14 9\"><rect x=\"0\" y=\"2\" width=\"2.5\" height=\"7\" rx=\"1\" fill=\"#fff\" opacity=\".4\"\/><rect x=\"3.5\" y=\"1\" width=\"2.5\" height=\"8\" rx=\"1\" fill=\"#fff\" opacity=\".6\"\/><rect x=\"7\" y=\"0\" width=\"2.5\" height=\"9\" rx=\"1\" fill=\"#fff\"\/><rect x=\"11\" y=\"1\" width=\"2.5\" height=\"7\" rx=\"1\" fill=\"none\" stroke=\"#fff\" stroke-width=\".9\"\/><\/svg>\n          <svg width=\"12\" height=\"9\" viewBox=\"0 0 12 9\"><path d=\"M6 2C8.2 2 10.1 2.9 11.4 4.3L12 3.5C10.5 1.8 8.4.8 6 .8S1.5 1.8 0 3.5l.6.8C1.9 2.9 3.8 2 6 2z\" fill=\"#fff\"\/><path d=\"M6 4.5c1.4 0 2.6.6 3.5 1.5l.6-.8A5.5 5.5 0 006 3.3 5.5 5.5 0 002 5.2l.5.8C3.4 5.1 4.6 4.5 6 4.5z\" fill=\"#fff\"\/><circle cx=\"6\" cy=\"7.5\" r=\"1.5\" fill=\"#fff\"\/><\/svg>\n        <\/div>\n      <\/div>\n\n      <div class=\"lifeon-screens\" id=\"lifeon-screens-ua\">\n\n        <div class=\"lifeon-screen active\" id=\"lo-s-home-ua\">\n          <div class=\"lo-home-greeting\">\n            <div class=\"lo-home-greeting-text\"><p>\u0427\u0435\u0442\u0432\u0435\u0440, 17 \u043a\u0432\u0456\u0442\u043d\u044f<\/p><p>\u041f\u0440\u0438\u0432\u0456\u0442, \u0412\u0456\u0442\u0430\u043b\u0456\u044e \ud83d\udc4b<\/p><\/div>\n            <div class=\"lo-home-avatar\">\u0412\u041c<div class=\"lo-home-online\"><\/div><\/div>\n          <\/div>\n          <div class=\"lo-home-banner\">\n            <div class=\"lo-home-banner-left\">\n              <p>\u0421\u044c\u043e\u0433\u043e\u0434\u043d\u0456<\/p><p>\u041a\u0430\u0440\u0434\u0456\u043e + Core<\/p>\n              <div><span>\u23f1 45 \u0445\u0432<\/span><span>\ud83d\udd25 380 \u043a\u043a\u0430\u043b<\/span><\/div>\n            <\/div>\n            <div class=\"lo-home-banner-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"11\" cy=\"11\" r=\"9\" stroke=\"#fff\" stroke-width=\"1.5\"\/><path d=\"M7.5 11l2.5 2.5 5-5\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"lo-home-stats\">\n            <div class=\"lo-home-stats-label\">\u0426\u0435\u0439 \u0442\u0438\u0436\u0434\u0435\u043d\u044c<\/div>\n            <div class=\"lo-home-stats-row\">\n              <div class=\"lo-home-stat\"><p>5<\/p><p>\u0442\u0440\u0435\u043d\u0443\u0432\u0430\u043d\u044c<\/p><\/div>\n              <div class=\"lo-home-stat\"><p>12.4<\/p><p>\u043a\u043c<\/p><\/div>\n              <div class=\"lo-home-stat\"><p>1840<\/p><p>\u043a\u043a\u0430\u043b<\/p><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"lo-home-quick\">\n            <div class=\"lo-home-quick-label\">\u0428\u0432\u0438\u0434\u043a\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f<\/div>\n            <div class=\"lo-home-quick-grid\">\n              <div class=\"lo-home-quick-item\"><div class=\"lo-home-quick-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\"><circle cx=\"8\" cy=\"7\" r=\"3\" stroke=\"#FF6B35\" stroke-width=\"1.2\"\/><path d=\"M2 16c0-2.5 2.7-4.5 6-4.5s6 2 6 4.5\" stroke=\"#FF6B35\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><path d=\"M13 5v5M11 7.5h4\" stroke=\"#FF6B35\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><\/div><div><p>\u0422\u0440\u0435\u043d\u0435\u0440<\/p><p>3 \u043e\u043d\u043b\u0430\u0439\u043d<\/p><\/div><\/div>\n              <div class=\"lo-home-quick-item\"><div class=\"lo-home-quick-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\"><circle cx=\"9\" cy=\"9\" r=\"7\" stroke=\"#FF6B35\" stroke-width=\"1.2\"\/><path d=\"M9 6v3l2 2\" stroke=\"#FF6B35\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><\/div><div><p>\u041f\u0440\u043e\u0433\u0440\u0435\u0441<\/p><p>\u22120.5 \u043a\u0433<\/p><\/div><\/div>\n              <div class=\"lo-home-quick-item\"><div class=\"lo-home-quick-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\"><rect x=\"2\" y=\"3\" width=\"14\" height=\"12\" rx=\"2\" stroke=\"#FF6B35\" stroke-width=\"1.2\"\/><path d=\"M6 1v4M12 1v4M2 7h14\" stroke=\"#FF6B35\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><\/div><div><p>\u041f\u043e\u0434\u0456\u044f<\/p><p>18 \u0442\u0440\u0430\u0432.<\/p><\/div><\/div>\n              <div class=\"lo-home-quick-item\"><div class=\"lo-home-quick-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\"><circle cx=\"9\" cy=\"6\" r=\"3\" stroke=\"#FF6B35\" stroke-width=\"1.2\"\/><path d=\"M3 15c0-2.8 2.7-5 6-5s6 2.2 6 5\" stroke=\"#FF6B35\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><\/div><div><p>\u041f\u0440\u043e\u0444\u0456\u043b\u044c<\/p><p>15 \u0431\u0435\u0439\u0434\u0436\u0456\u0432<\/p><\/div><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"lo-home-event\">\n            <div class=\"lo-home-event-left\"><p>\u041d\u0430\u0439\u0431\u043b\u0438\u0436\u0447\u0430 \u043f\u043e\u0434\u0456\u044f<\/p><p>Kyiv Half Marathon<\/p><p>18 \u0442\u0440\u0430\u0432\u043d\u044f \u00b7 \u0411\u0456\u0433 21 \u043a\u043c \u00b7 09:00<\/p><\/div>\n            <div class=\"lo-home-event-count\"><b>31<\/b><small>\u0434\u043d\u0456\u0432<\/small><\/div>\n          <\/div>\n          <div class=\"lo-home-trainer\">\n            <div class=\"lo-home-trainer-label\">\u041c\u0456\u0439 \u0442\u0440\u0435\u043d\u0435\u0440<\/div>\n            <div class=\"lo-home-trainer-row\">\n              <div class=\"lo-home-trainer-av\">\u041e\u041a<div class=\"lo-online\"><\/div><\/div>\n              <div><p>\u041e\u043b\u0435\u043d\u0430 \u041a.<\/p><p>\u0424\u0456\u0442\u043d\u0435\u0441, \u0441\u0438\u043b\u043e\u0432\u0456 \u00b7 \u043c. \u041a\u0438\u0457\u0432<\/p><\/div>\n              <button class=\"lo-home-trainer-btn\">\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u0438<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"lifeon-screen\" id=\"lo-s-trainer-ua\">\n          <div class=\"lo-s-header-white\" style=\"padding-bottom:10px\">\n            <p style=\"font-size:9px;color:#aaa;margin-bottom:2px\">life:)on<\/p>\n            <p style=\"font-size:20px;font-weight:500;color:#1a1a1a;margin-bottom:10px\">\u0417\u043d\u0430\u0439\u0442\u0438 \u0442\u0440\u0435\u043d\u0435\u0440\u0430<\/p>\n            <div class=\"lo-tr-search\" style=\"margin:0\"><svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\"><circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"#aaa\" stroke-width=\"1.2\"\/><path d=\"M8.5 8.5l2 2\" stroke=\"#aaa\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><span style=\"font-size:11px;color:#aaa\">\u041f\u043e\u0448\u0443\u043a \u0442\u0440\u0435\u043d\u0435\u0440\u0430&#8230;<\/span><\/div>\n          <\/div>\n          <div class=\"lo-tr-filters\" style=\"background:#fff;padding:8px 14px 10px\">\n            <div class=\"lo-tr-chip on\">\u0412\u0441\u0456<\/div><div class=\"lo-tr-chip off\">\u0424\u0456\u0442\u043d\u0435\u0441<\/div><div class=\"lo-tr-chip off\">\u0411\u043e\u043a\u0441<\/div><div class=\"lo-tr-chip off\">\u0419\u043e\u0433\u0430<\/div><div class=\"lo-tr-chip off\">\u0411\u0456\u0433<\/div>\n          <\/div>\n          <div class=\"lo-tr-cards\" style=\"padding:8px 10px\">\n            <div class=\"lo-tr-card\"><div class=\"lo-tr-stripe\" style=\"background:#FF6B35\"><\/div><div class=\"lo-tr-card-inner\"><div class=\"lo-tr-av\" style=\"background:linear-gradient(135deg,#f7c59f,#e8956d)\">\u041e\u041a<div class=\"lo-online\"><\/div><\/div><div class=\"lo-tr-info\"><div class=\"lo-tr-name\">\u041e\u043b\u0435\u043d\u0430 \u041a.<\/div><div class=\"lo-tr-spec\">\u0424\u0456\u0442\u043d\u0435\u0441, \u0441\u0438\u043b\u043e\u0432\u0456 \u00b7 \u043c. \u041a\u0438\u0457\u0432<\/div><div class=\"lo-tr-meta\"><div><div class=\"lo-tr-stars\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"><path d=\"M5 .8l1.1 2.3 2.6.4-1.9 1.8.5 2.6L5 6.7 2.7 7.9l.5-2.6L1.3 3.5l2.6-.4z\" fill=\"#FF6B35\"\/><\/svg>4.9 <span class=\"lo-tr-reviews\">(128)<\/span><\/div><\/div><button class=\"lo-tr-btn-main\">\u0414\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435<\/button><\/div><\/div><\/div><\/div>\n            <div class=\"lo-tr-card\"><div class=\"lo-tr-stripe\" style=\"background:#4A90E2\"><\/div><div class=\"lo-tr-card-inner\"><div class=\"lo-tr-av\" style=\"background:linear-gradient(135deg,#a8c8e8,#5a9fd4)\">\u0414\u0412<\/div><div class=\"lo-tr-info\"><div class=\"lo-tr-name\">\u0414\u043c\u0438\u0442\u0440\u043e \u0412.<\/div><div class=\"lo-tr-spec\">\u0411\u043e\u043a\u0441, \u043a\u0440\u043e\u0441\u0444\u0456\u0442 \u00b7 \u043c. \u041b\u044c\u0432\u0456\u0432<\/div><div class=\"lo-tr-meta\"><div><div class=\"lo-tr-stars\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"><path d=\"M5 .8l1.1 2.3 2.6.4-1.9 1.8.5 2.6L5 6.7 2.7 7.9l.5-2.6L1.3 3.5l2.6-.4z\" fill=\"#FF6B35\"\/><\/svg>4.8 <span class=\"lo-tr-reviews\">(85)<\/span><\/div><\/div><button class=\"lo-tr-btn-sec\">\u0414\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435<\/button><\/div><\/div><\/div><\/div>\n            <div class=\"lo-tr-card\"><div class=\"lo-tr-stripe\" style=\"background:#22c55e\"><\/div><div class=\"lo-tr-card-inner\"><div class=\"lo-tr-av\" style=\"background:linear-gradient(135deg,#b8e6c8,#5dbb7a)\">\u041c\u0421<div class=\"lo-online\"><\/div><\/div><div class=\"lo-tr-info\"><div class=\"lo-tr-name\">\u041c\u0430\u0440\u0456\u044f \u0421.<\/div><div class=\"lo-tr-spec\">\u0419\u043e\u0433\u0430, \u043f\u0456\u043b\u0430\u0442\u0435\u0441 \u00b7 \u043c. \u0425\u0430\u0440\u043a\u0456\u0432<\/div><div class=\"lo-tr-meta\"><div><div class=\"lo-tr-stars\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"><path d=\"M5 .8l1.1 2.3 2.6.4-1.9 1.8.5 2.6L5 6.7 2.7 7.9l.5-2.6L1.3 3.5l2.6-.4z\" fill=\"#FF6B35\"\/><\/svg>5.0 <span class=\"lo-tr-reviews\">(214)<\/span><\/div><\/div><button class=\"lo-tr-btn-sec\">\u0414\u0435\u0442\u0430\u043b\u044c\u043d\u0456\u0448\u0435<\/button><\/div><\/div><\/div><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"lifeon-screen\" id=\"lo-s-progress-ua\">\n          <div class=\"lo-pr-header\"><div class=\"lo-pr-header-left\"><p>life:)on<\/p><p>\u041c\u0456\u0439 \u043f\u0440\u043e\u0433\u0440\u0435\u0441<\/p><\/div><div class=\"lo-pr-icons\"><div class=\"lo-pr-icon-btn\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\"><rect x=\"2\" y=\"3\" width=\"14\" height=\"13\" rx=\"2\" stroke=\"#888\" stroke-width=\"1.2\"\/><path d=\"M6 1v4M12 1v4M2 7h14\" stroke=\"#888\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><\/div><\/div><\/div>\n          <div class=\"lo-pr-kpi\"><div class=\"lo-pr-kpi-label\">\u041a\u043b\u044e\u0447\u043e\u0432\u0456 \u043f\u043e\u043a\u0430\u0437\u043d\u0438\u043a\u0438<\/div><div class=\"lo-pr-kpi-cards\"><div class=\"lo-pr-kpi-card\"><div class=\"lo-pr-kpi-stripe\" style=\"background:#4A90E2\"><\/div><div class=\"lo-pr-kpi-body\"><div class=\"lo-pr-kpi-tag\" style=\"color:#4A90E2\">\u0412\u0430\u0433\u0430<\/div><div class=\"lo-pr-kpi-val\">72.5 \u043a\u0433<\/div><span class=\"lo-badge-green\" style=\"margin-top:3px;display:inline-block\">\u22120.5<\/span><\/div><\/div><div class=\"lo-pr-kpi-card\"><div class=\"lo-pr-kpi-stripe\" style=\"background:#FF6B35\"><\/div><div class=\"lo-pr-kpi-body\"><div class=\"lo-pr-kpi-tag\" style=\"color:#FF6B35\">\u0421\u0438\u043b\u043e\u0432\u0456<\/div><div class=\"lo-pr-kpi-val\">\u0422\u044f\u0433\u0430<\/div><span class=\"lo-badge-orange\" style=\"margin-top:3px;display:inline-block\">+5 \u043a\u0433<\/span><\/div><\/div><div class=\"lo-pr-kpi-card\"><div class=\"lo-pr-kpi-stripe\" style=\"background:#22c55e\"><\/div><div class=\"lo-pr-kpi-body\"><div class=\"lo-pr-kpi-tag\" style=\"color:#22c55e\">\u0422\u0440\u0435\u043d\u0435\u0440<\/div><div class=\"lo-pr-kpi-val\">15<\/div><span style=\"font-size:8px;color:#aaa\">\u0434\u043e\u0441\u044f\u0433.<\/span><\/div><\/div><\/div><\/div>\n          <div class=\"lo-pr-chart\"><div class=\"lo-pr-chart-head\"><p>\u0413\u0440\u0430\u0444\u0456\u043a \u0442\u0440\u0435\u043d\u0443\u0432\u0430\u043d\u044c<\/p><div class=\"lo-pr-toggle\"><span class=\"on\">\u0422\u0438\u0436\u0434.<\/span><span class=\"off\">\u041c\u0456\u0441.<\/span><\/div><\/div><div class=\"lo-pr-bars\"><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:40px;background:#FF6B35\"><\/div><span>\u041f\u043d<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:20px;background:#FFB899\"><\/div><span>\u0412\u0442<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:60px;background:#FF6B35\"><\/div><span>\u0421\u0440<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:2px;background:#e8e8e8\"><\/div><span>\u0427\u0442<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:40px;background:#FFB899\"><\/div><span>\u041f\u0442<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:40px;background:#FF6B35\"><\/div><span>\u0421\u0431<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:20px;background:#FFB899\"><\/div><span>\u041d\u0434<\/span><\/div><\/div><\/div>\n          <div class=\"lo-pr-body\"><div class=\"lo-pr-body-title\">\u0424\u0456\u0437\u0438\u0447\u043d\u0456 \u0432\u0438\u043c\u0456\u0440\u044e\u0432\u0430\u043d\u043d\u044f<\/div><div class=\"lo-pr-body-row\"><div class=\"lo-pr-body-left\"><div class=\"lo-pr-body-ico\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M5 1C3.6 1 2.5 2.2 2.5 3.7c0 2 2.5 5 2.5 5s2.5-3 2.5-5C7.5 2.2 6.4 1 5 1z\" stroke=\"#FF6B35\" stroke-width=\".8\"\/><\/svg><\/div>\u041e\u0431\u0445\u0432\u0430\u0442 \u0442\u0430\u043b\u0456\u0457<\/div><div class=\"lo-pr-body-right\"><span class=\"lo-pr-val\">88 \u0441\u043c<\/span><span class=\"lo-badge-green\">\u22122<\/span><\/div><\/div><div class=\"lo-pr-body-row\"><div class=\"lo-pr-body-left\"><div class=\"lo-pr-body-ico\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 7c0-1.4 1.3-3 3-3s3 1.6 3 3\" stroke=\"#FF6B35\" stroke-width=\".8\" stroke-linecap=\"round\"\/><\/svg><\/div>\u041e\u0431\u0445\u0432\u0430\u0442 \u0431\u0456\u0446\u0435\u043f\u0441\u0430<\/div><div class=\"lo-pr-body-right\"><span class=\"lo-pr-val\">38 \u0441\u043c<\/span><span class=\"lo-badge-orange\">+1<\/span><\/div><\/div><\/div>\n          <div class=\"lo-pr-achieve\"><div class=\"lo-pr-achieve-title\">\u0414\u043e\u0441\u044f\u0433\u043d\u0435\u043d\u043d\u044f<\/div><div class=\"lo-pr-achieve-list\"><div class=\"lo-pr-badge-item\"><div class=\"lo-pr-badge-circle\" style=\"background:#FFF3EE;border:1.5px solid #FF6B35\">\ud83d\udd25<\/div><span>7 \u0434\u043d\u0456\u0432 \u043f\u0456\u0434\u0440\u044f\u0434<\/span><\/div><div class=\"lo-pr-badge-item\"><div class=\"lo-pr-badge-circle\" style=\"background:#EAF3DE;border:1.5px solid #22c55e\">\ud83c\udfc5<\/div><span>\u041f\u0435\u0440\u0448\u0456 10 \u043a\u043c<\/span><\/div><div class=\"lo-pr-badge-item\"><div class=\"lo-pr-badge-circle\" style=\"background:#EAF3DE;border:1.5px solid #22c55e\">\ud83d\udcaa<\/div><span>20 \u0442\u0440\u0435\u043d.<\/span><\/div><div class=\"lo-pr-badge-item\"><div class=\"lo-pr-badge-circle\" style=\"background:#f5f5f0;border:1.5px dashed #ccc;opacity:.5\">\ud83c\udfc6<\/div><span style=\"color:#aaa\">\u22125 \u043a\u0433<\/span><\/div><\/div><\/div>\n          <div class=\"lo-pr-add\"><div class=\"lo-pr-add-title\">\u0414\u043e\u0434\u0430\u0442\u0438 \u043d\u043e\u0432\u0438\u0439 \u0437\u0430\u043f\u0438\u0441<\/div><button class=\"lo-pr-add-btn\"><svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"><path d=\"M6.5 2v9M2 6.5h9\" stroke=\"#fff\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg>\u0414\u043e\u0434\u0430\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438<\/button><\/div>\n        <\/div>\n\n        <div class=\"lifeon-screen\" id=\"lo-s-events-ua\">\n          <div class=\"lo-ev-header\"><div><div class=\"lo-ev-title\">\u041f\u043e\u0434\u0456\u0457<\/div><div class=\"lo-ev-loc\"><svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\"><path d=\"M4.5 .5C3.1.5 2 1.6 2 3c0 2 2.5 5 2.5 5S7 5 7 3C7 1.6 5.9.5 4.5.5z\" stroke=\"#FF6B35\" stroke-width=\".8\"\/><\/svg>\u041c. \u041a\u0430\u043b\u0443\u0448, \u0406\u0432\u0430\u043d\u043e-\u0424\u0440. \u043e\u0431\u043b.<\/div><\/div><button class=\"lo-ev-change\">\u0417\u043c\u0456\u043d\u0438\u0442\u0438<\/button><\/div>\n          <div class=\"lo-ev-filters\"><div class=\"lo-ev-chip on\">\u0412\u0441\u0456<\/div><div class=\"lo-ev-chip off\">\u0411\u0456\u0433<\/div><div class=\"lo-ev-chip off\">\u0412\u0435\u043b\u043e<\/div><div class=\"lo-ev-chip off\">\u041f\u043b\u0430\u0432\u0430\u043d\u043d\u044f<\/div><\/div>\n          <div class=\"lo-ev-cards\" style=\"padding:8px 10px\">\n            <div class=\"lo-ev-card\"><div class=\"lo-ev-card-inner\" style=\"background:#4A7FC1\"><div class=\"lo-ev-card-top\"><div class=\"lo-ev-datebox\"><b>18<\/b><small>\u0422\u0420\u0410\u0412 26<\/small><\/div><div><div class=\"lo-ev-name\">Kyiv Half Marathon<\/div><div class=\"lo-ev-city\">\u043c. \u041a\u0438\u0457\u0432, \u0432\u0443\u043b. \u0425\u0440\u0435\u0449\u0430\u0442\u0438\u043a<\/div><div class=\"lo-ev-meta\">\u0411\u0456\u0433 | 21 \u043a\u043c \u00b7 09:00<\/div><\/div><\/div><div class=\"lo-ev-card-bottom\"><div class=\"lo-ev-part\">\ud83d\udc65 234 \u0443\u0447\u0430\u0441\u043d\u0438\u043a\u0438<\/div><button class=\"lo-ev-reg\" style=\"background:#fff;color:#4A7FC1\">\u0420\u0435\u0454\u0441\u0442\u0440\u0443\u0432\u0430\u0442\u0438\u0441\u044f<\/button><\/div><\/div><\/div>\n            <div class=\"lo-ev-card\"><div class=\"lo-ev-card-inner\" style=\"background:#4A7A5A\"><div class=\"lo-ev-card-top\"><div class=\"lo-ev-datebox\"><b>8<\/b><small>\u0427\u0415\u0420\u0412 26<\/small><\/div><div><div class=\"lo-ev-name\">Carpathian Trail Run<\/div><div class=\"lo-ev-city\">\u043c. \u042f\u0440\u0435\u043c\u0447\u0435, \u041a\u0430\u0440\u043f\u0430\u0442\u0438<\/div><div class=\"lo-ev-meta\">\u0422\u0440\u0435\u0439\u043b | 30 \u043a\u043c \u00b7 10:00<\/div><\/div><\/div><div class=\"lo-ev-card-bottom\"><div class=\"lo-ev-part\">\ud83d\udc65 89 \u0443\u0447\u0430\u0441\u043d\u0438\u043a\u0456\u0432<\/div><button class=\"lo-ev-reg\" style=\"background:#fff;color:#4A7A5A\">\u0420\u0435\u0454\u0441\u0442\u0440\u0443\u0432\u0430\u0442\u0438\u0441\u044f<\/button><\/div><\/div><\/div>\n            <div class=\"lo-ev-card\" style=\"margin-bottom:16px\"><div class=\"lo-ev-card-inner\" style=\"background:#8B3A3A\"><div class=\"lo-ev-card-top\"><div class=\"lo-ev-datebox\"><b>22<\/b><small>\u0427\u0415\u0420\u0412 26<\/small><\/div><div><div class=\"lo-ev-name\">Lviv Cycling Tour<\/div><div class=\"lo-ev-city\">\u043c. \u041b\u044c\u0432\u0456\u0432, \u0421\u0442\u0440\u0438\u0439\u0441\u044c\u043a\u0438\u0439 \u043f\u0430\u0440\u043a<\/div><div class=\"lo-ev-meta\">\u0412\u0435\u043b\u043e | 60 \u043a\u043c \u00b7 08:30<\/div><\/div><\/div><div class=\"lo-ev-card-bottom\"><div class=\"lo-ev-part\">\ud83d\udc65 156 \u0443\u0447\u0430\u0441\u043d\u0438\u043a\u0456\u0432<\/div><button class=\"lo-ev-reg\" style=\"background:#fff;color:#8B3A3A\">\u0420\u0435\u0454\u0441\u0442\u0440\u0443\u0432\u0430\u0442\u0438\u0441\u044f<\/button><\/div><\/div><\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"lifeon-ph-nav\">\n        <div class=\"lifeon-ph-nav-row\" id=\"lifeon-ph-nav-row-ua\">\n          <div class=\"lifeon-ph-tab active\" data-screen=\"lo-s-home-ua\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M3 9.5L11 3l8 6.5V19a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\" stroke=\"#FF6B35\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M8 20v-7h6v7\" stroke=\"#FF6B35\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg><span>\u0413\u043e\u043b\u043e\u0432\u043d\u0430<\/span><div class=\"lifeon-ph-tab-dot\"><\/div><\/div>\n          <div class=\"lifeon-ph-tab\" data-screen=\"lo-s-progress-ua\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"#aaa\" stroke-width=\"1.5\"\/><path d=\"M11 7v4l3 2\" stroke=\"#aaa\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg><span>\u041f\u0440\u043e\u0433\u0440\u0435\u0441<\/span><\/div>\n          <div class=\"lifeon-ph-tab\" data-screen=\"lo-s-trainer-ua\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"9\" cy=\"8\" r=\"3\" stroke=\"#aaa\" stroke-width=\"1.5\"\/><path d=\"M3 19c0-3 2.7-5 6-5s6 2 6 5\" stroke=\"#aaa\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><path d=\"M16 7v6M13 10h6\" stroke=\"#aaa\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg><span>\u0422\u0440\u0435\u043d\u0435\u0440<\/span><\/div>\n          <div class=\"lifeon-ph-tab\" data-screen=\"lo-s-events-ua\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><rect x=\"3\" y=\"5\" width=\"16\" height=\"14\" rx=\"2\" stroke=\"#aaa\" stroke-width=\"1.5\"\/><path d=\"M7 3v4M15 3v4M3 9h16\" stroke=\"#aaa\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg><span>\u041f\u043e\u0434\u0456\u044f<\/span><\/div>\n          <div class=\"lifeon-ph-tab\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"11\" cy=\"8\" r=\"3.5\" stroke=\"#aaa\" stroke-width=\"1.5\"\/><path d=\"M4 19c0-3.314 3.134-6 7-6s7 2.686 7 6\" stroke=\"#aaa\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg><span>\u041f\u0440\u043e\u0444\u0456\u043b\u044c<\/span><\/div>\n        <\/div>\n        <div class=\"lifeon-ph-home-bar\"><div><\/div><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n<!-- ============================================\n     3-EN. \u041c\u041e\u041a\u0410\u041f EN (\"Here's what life:)on offers\")\n     \u0412\u0438\u0434\u0438\u043c\u0438\u0439 \u0442\u0456\u043b\u044c\u043a\u0438 \u043a\u043e\u043b\u0438 html lang \u043f\u043e\u0447\u0438\u043d\u0430\u0454\u0442\u044c\u0441\u044f \u0437 \"en\"\n============================================ -->\n<div class=\"lifeon-mockup-wrap-en\" id=\"mockup-en\">\n  <div class=\"section\">\n    <div>\n      <p class=\"section__tag\">Our approach<\/p>\n      <h2 class=\"section__title\">Here&#8217;s what life:)on offers<\/h2>\n      <p class=\"section__sub\">One platform \u2014 the answer to your three main pain points<\/p>\n    <\/div>\n\n    <div class=\"lifeon-switcher\" id=\"lifeon-switcher-en\">\n      <button class=\"lifeon-switcher__btn active\" data-screen=\"lo-s-home-en\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M3 9.5L11 3l8 6.5V19a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"\/><path d=\"M8 20v-7h6v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"\/><\/svg>\n        Home\n      <\/button>\n      <button class=\"lifeon-switcher__btn\" data-screen=\"lo-s-trainer-en\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"9\" cy=\"8\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M3 19c0-3 2.7-5 6-5s6 2 6 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><path d=\"M16 7v6M13 10h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n        Coach\n      <\/button>\n      <button class=\"lifeon-switcher__btn\" data-screen=\"lo-s-progress-en\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M11 7v4l3 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n        Progress\n      <\/button>\n      <button class=\"lifeon-switcher__btn\" data-screen=\"lo-s-events-en\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 22 22\" fill=\"none\"><rect x=\"3\" y=\"5\" width=\"16\" height=\"14\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M7 3v4M15 3v4M3 9h16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\n        Events\n      <\/button>\n    <\/div>\n\n    <div class=\"lifeon-phone\">\n      <div class=\"lifeon-ph-status\">\n        <span class=\"lifeon-ph-time\" id=\"lifeon-ph-time-en\">9:41<\/span>\n        <div class=\"lifeon-ph-icons\">\n          <svg width=\"14\" height=\"9\" viewBox=\"0 0 14 9\"><rect x=\"0\" y=\"2\" width=\"2.5\" height=\"7\" rx=\"1\" fill=\"#fff\" opacity=\".4\"\/><rect x=\"3.5\" y=\"1\" width=\"2.5\" height=\"8\" rx=\"1\" fill=\"#fff\" opacity=\".6\"\/><rect x=\"7\" y=\"0\" width=\"2.5\" height=\"9\" rx=\"1\" fill=\"#fff\"\/><rect x=\"11\" y=\"1\" width=\"2.5\" height=\"7\" rx=\"1\" fill=\"none\" stroke=\"#fff\" stroke-width=\".9\"\/><\/svg>\n          <svg width=\"12\" height=\"9\" viewBox=\"0 0 12 9\"><path d=\"M6 2C8.2 2 10.1 2.9 11.4 4.3L12 3.5C10.5 1.8 8.4.8 6 .8S1.5 1.8 0 3.5l.6.8C1.9 2.9 3.8 2 6 2z\" fill=\"#fff\"\/><path d=\"M6 4.5c1.4 0 2.6.6 3.5 1.5l.6-.8A5.5 5.5 0 006 3.3 5.5 5.5 0 002 5.2l.5.8C3.4 5.1 4.6 4.5 6 4.5z\" fill=\"#fff\"\/><circle cx=\"6\" cy=\"7.5\" r=\"1.5\" fill=\"#fff\"\/><\/svg>\n        <\/div>\n      <\/div>\n\n      <div class=\"lifeon-screens\" id=\"lifeon-screens-en\">\n\n        <div class=\"lifeon-screen active\" id=\"lo-s-home-en\">\n          <div class=\"lo-home-greeting\">\n            <div class=\"lo-home-greeting-text\"><p>Thursday, April 17<\/p><p>Hi, Vitaliy \ud83d\udc4b<\/p><\/div>\n            <div class=\"lo-home-avatar\">VM<div class=\"lo-home-online\"><\/div><\/div>\n          <\/div>\n          <div class=\"lo-home-banner\">\n            <div class=\"lo-home-banner-left\">\n              <p>Today<\/p><p>Cardio + Core<\/p>\n              <div><span>\u23f1 45 min<\/span><span>\ud83d\udd25 380 kcal<\/span><\/div>\n            <\/div>\n            <div class=\"lo-home-banner-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"11\" cy=\"11\" r=\"9\" stroke=\"#fff\" stroke-width=\"1.5\"\/><path d=\"M7.5 11l2.5 2.5 5-5\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"lo-home-stats\">\n            <div class=\"lo-home-stats-label\">This week<\/div>\n            <div class=\"lo-home-stats-row\">\n              <div class=\"lo-home-stat\"><p>5<\/p><p>workouts<\/p><\/div>\n              <div class=\"lo-home-stat\"><p>12.4<\/p><p>km<\/p><\/div>\n              <div class=\"lo-home-stat\"><p>1840<\/p><p>kcal<\/p><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"lo-home-quick\">\n            <div class=\"lo-home-quick-label\">Quick access<\/div>\n            <div class=\"lo-home-quick-grid\">\n              <div class=\"lo-home-quick-item\"><div class=\"lo-home-quick-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\"><circle cx=\"8\" cy=\"7\" r=\"3\" stroke=\"#FF6B35\" stroke-width=\"1.2\"\/><path d=\"M2 16c0-2.5 2.7-4.5 6-4.5s6 2 6 4.5\" stroke=\"#FF6B35\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><path d=\"M13 5v5M11 7.5h4\" stroke=\"#FF6B35\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><\/div><div><p>Coach<\/p><p>3 online<\/p><\/div><\/div>\n              <div class=\"lo-home-quick-item\"><div class=\"lo-home-quick-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\"><circle cx=\"9\" cy=\"9\" r=\"7\" stroke=\"#FF6B35\" stroke-width=\"1.2\"\/><path d=\"M9 6v3l2 2\" stroke=\"#FF6B35\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><\/div><div><p>Progress<\/p><p>\u22120.5 kg<\/p><\/div><\/div>\n              <div class=\"lo-home-quick-item\"><div class=\"lo-home-quick-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\"><rect x=\"2\" y=\"3\" width=\"14\" height=\"12\" rx=\"2\" stroke=\"#FF6B35\" stroke-width=\"1.2\"\/><path d=\"M6 1v4M12 1v4M2 7h14\" stroke=\"#FF6B35\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><\/div><div><p>Event<\/p><p>May 18<\/p><\/div><\/div>\n              <div class=\"lo-home-quick-item\"><div class=\"lo-home-quick-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\"><circle cx=\"9\" cy=\"6\" r=\"3\" stroke=\"#FF6B35\" stroke-width=\"1.2\"\/><path d=\"M3 15c0-2.8 2.7-5 6-5s6 2.2 6 5\" stroke=\"#FF6B35\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><\/div><div><p>Profile<\/p><p>15 badges<\/p><\/div><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"lo-home-event\">\n            <div class=\"lo-home-event-left\"><p>Upcoming event<\/p><p>Kyiv Half Marathon<\/p><p>May 18 \u00b7 Run 21 km \u00b7 09:00<\/p><\/div>\n            <div class=\"lo-home-event-count\"><b>31<\/b><small>days<\/small><\/div>\n          <\/div>\n          <div class=\"lo-home-trainer\">\n            <div class=\"lo-home-trainer-label\">My coach<\/div>\n            <div class=\"lo-home-trainer-row\">\n              <div class=\"lo-home-trainer-av\">OK<div class=\"lo-online\"><\/div><\/div>\n              <div><p>Olena K.<\/p><p>Fitness, strength \u00b7 Kyiv<\/p><\/div>\n              <button class=\"lo-home-trainer-btn\">Message<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"lifeon-screen\" id=\"lo-s-trainer-en\">\n          <div style=\"background:#fff;padding:12px 14px 10px\">\n            <p style=\"font-size:9px;color:#aaa;margin-bottom:2px\">life:)on<\/p>\n            <p style=\"font-size:20px;font-weight:500;color:#1a1a1a;margin-bottom:10px\">Find a coach<\/p>\n            <div class=\"lo-tr-search\" style=\"margin:0\"><svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\"><circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"#aaa\" stroke-width=\"1.2\"\/><path d=\"M8.5 8.5l2 2\" stroke=\"#aaa\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><span style=\"font-size:11px;color:#aaa\">Search coach&#8230;<\/span><\/div>\n          <\/div>\n          <div class=\"lo-tr-filters\" style=\"background:#fff;padding:8px 14px 10px\">\n            <div class=\"lo-tr-chip on\">All<\/div><div class=\"lo-tr-chip off\">Fitness<\/div><div class=\"lo-tr-chip off\">Boxing<\/div><div class=\"lo-tr-chip off\">Yoga<\/div><div class=\"lo-tr-chip off\">Running<\/div>\n          <\/div>\n          <div class=\"lo-tr-cards\" style=\"padding:8px 10px\">\n            <div class=\"lo-tr-card\"><div class=\"lo-tr-stripe\" style=\"background:#FF6B35\"><\/div><div class=\"lo-tr-card-inner\"><div class=\"lo-tr-av\" style=\"background:linear-gradient(135deg,#f7c59f,#e8956d)\">OK<div class=\"lo-online\"><\/div><\/div><div class=\"lo-tr-info\"><div class=\"lo-tr-name\">Olena K.<\/div><div class=\"lo-tr-spec\">Fitness, strength \u00b7 Kyiv<\/div><div class=\"lo-tr-meta\"><div><div class=\"lo-tr-stars\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"><path d=\"M5 .8l1.1 2.3 2.6.4-1.9 1.8.5 2.6L5 6.7 2.7 7.9l.5-2.6L1.3 3.5l2.6-.4z\" fill=\"#FF6B35\"\/><\/svg>4.9 <span class=\"lo-tr-reviews\">(128)<\/span><\/div><\/div><button class=\"lo-tr-btn-main\">Details<\/button><\/div><\/div><\/div><\/div>\n            <div class=\"lo-tr-card\"><div class=\"lo-tr-stripe\" style=\"background:#4A90E2\"><\/div><div class=\"lo-tr-card-inner\"><div class=\"lo-tr-av\" style=\"background:linear-gradient(135deg,#a8c8e8,#5a9fd4)\">DV<\/div><div class=\"lo-tr-info\"><div class=\"lo-tr-name\">Dmytro V.<\/div><div class=\"lo-tr-spec\">Boxing, crossfit \u00b7 Lviv<\/div><div class=\"lo-tr-meta\"><div><div class=\"lo-tr-stars\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"><path d=\"M5 .8l1.1 2.3 2.6.4-1.9 1.8.5 2.6L5 6.7 2.7 7.9l.5-2.6L1.3 3.5l2.6-.4z\" fill=\"#FF6B35\"\/><\/svg>4.8 <span class=\"lo-tr-reviews\">(85)<\/span><\/div><\/div><button class=\"lo-tr-btn-sec\">Details<\/button><\/div><\/div><\/div><\/div>\n            <div class=\"lo-tr-card\"><div class=\"lo-tr-stripe\" style=\"background:#22c55e\"><\/div><div class=\"lo-tr-card-inner\"><div class=\"lo-tr-av\" style=\"background:linear-gradient(135deg,#b8e6c8,#5dbb7a)\">MS<div class=\"lo-online\"><\/div><\/div><div class=\"lo-tr-info\"><div class=\"lo-tr-name\">Maria S.<\/div><div class=\"lo-tr-spec\">Yoga, pilates \u00b7 Kharkiv<\/div><div class=\"lo-tr-meta\"><div><div class=\"lo-tr-stars\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"><path d=\"M5 .8l1.1 2.3 2.6.4-1.9 1.8.5 2.6L5 6.7 2.7 7.9l.5-2.6L1.3 3.5l2.6-.4z\" fill=\"#FF6B35\"\/><\/svg>5.0 <span class=\"lo-tr-reviews\">(214)<\/span><\/div><\/div><button class=\"lo-tr-btn-sec\">Details<\/button><\/div><\/div><\/div><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"lifeon-screen\" id=\"lo-s-progress-en\">\n          <div class=\"lo-pr-header\"><div class=\"lo-pr-header-left\"><p>life:)on<\/p><p>My Progress<\/p><\/div><div class=\"lo-pr-icons\"><div class=\"lo-pr-icon-btn\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 18 18\" fill=\"none\"><rect x=\"2\" y=\"3\" width=\"14\" height=\"13\" rx=\"2\" stroke=\"#888\" stroke-width=\"1.2\"\/><path d=\"M6 1v4M12 1v4M2 7h14\" stroke=\"#888\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><\/svg><\/div><\/div><\/div>\n          <div class=\"lo-pr-kpi\"><div class=\"lo-pr-kpi-label\">Key metrics<\/div><div class=\"lo-pr-kpi-cards\"><div class=\"lo-pr-kpi-card\"><div class=\"lo-pr-kpi-stripe\" style=\"background:#4A90E2\"><\/div><div class=\"lo-pr-kpi-body\"><div class=\"lo-pr-kpi-tag\" style=\"color:#4A90E2\">Weight<\/div><div class=\"lo-pr-kpi-val\">72.5 kg<\/div><span class=\"lo-badge-green\" style=\"margin-top:3px;display:inline-block\">\u22120.5<\/span><\/div><\/div><div class=\"lo-pr-kpi-card\"><div class=\"lo-pr-kpi-stripe\" style=\"background:#FF6B35\"><\/div><div class=\"lo-pr-kpi-body\"><div class=\"lo-pr-kpi-tag\" style=\"color:#FF6B35\">Strength<\/div><div class=\"lo-pr-kpi-val\">Deadlift<\/div><span class=\"lo-badge-orange\" style=\"margin-top:3px;display:inline-block\">+5 kg<\/span><\/div><\/div><div class=\"lo-pr-kpi-card\"><div class=\"lo-pr-kpi-stripe\" style=\"background:#22c55e\"><\/div><div class=\"lo-pr-kpi-body\"><div class=\"lo-pr-kpi-tag\" style=\"color:#22c55e\">Coach<\/div><div class=\"lo-pr-kpi-val\">15<\/div><span style=\"font-size:8px;color:#aaa\">achiev.<\/span><\/div><\/div><\/div><\/div>\n          <div class=\"lo-pr-chart\"><div class=\"lo-pr-chart-head\"><p>Workout chart<\/p><div class=\"lo-pr-toggle\"><span class=\"on\">Week<\/span><span class=\"off\">Month<\/span><\/div><\/div><div class=\"lo-pr-bars\"><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:40px;background:#FF6B35\"><\/div><span>Mon<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:20px;background:#FFB899\"><\/div><span>Tue<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:60px;background:#FF6B35\"><\/div><span>Wed<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:2px;background:#e8e8e8\"><\/div><span>Thu<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:40px;background:#FFB899\"><\/div><span>Fri<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:40px;background:#FF6B35\"><\/div><span>Sat<\/span><\/div><div class=\"lo-pr-bar-col\"><div class=\"lo-pr-bar\" style=\"height:20px;background:#FFB899\"><\/div><span>Sun<\/span><\/div><\/div><\/div>\n          <div class=\"lo-pr-body\"><div class=\"lo-pr-body-title\">Body measurements<\/div><div class=\"lo-pr-body-row\"><div class=\"lo-pr-body-left\"><div class=\"lo-pr-body-ico\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M5 1C3.6 1 2.5 2.2 2.5 3.7c0 2 2.5 5 2.5 5s2.5-3 2.5-5C7.5 2.2 6.4 1 5 1z\" stroke=\"#FF6B35\" stroke-width=\".8\"\/><\/svg><\/div>Waist circumference<\/div><div class=\"lo-pr-body-right\"><span class=\"lo-pr-val\">88 cm<\/span><span class=\"lo-badge-green\">\u22122<\/span><\/div><\/div><div class=\"lo-pr-body-row\"><div class=\"lo-pr-body-left\"><div class=\"lo-pr-body-ico\"><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 7c0-1.4 1.3-3 3-3s3 1.6 3 3\" stroke=\"#FF6B35\" stroke-width=\".8\" stroke-linecap=\"round\"\/><\/svg><\/div>Bicep circumference<\/div><div class=\"lo-pr-body-right\"><span class=\"lo-pr-val\">38 cm<\/span><span class=\"lo-badge-orange\">+1<\/span><\/div><\/div><\/div>\n          <div class=\"lo-pr-achieve\"><div class=\"lo-pr-achieve-title\">Achievements<\/div><div class=\"lo-pr-achieve-list\"><div class=\"lo-pr-badge-item\"><div class=\"lo-pr-badge-circle\" style=\"background:#FFF3EE;border:1.5px solid #FF6B35\">\ud83d\udd25<\/div><span>7 days streak<\/span><\/div><div class=\"lo-pr-badge-item\"><div class=\"lo-pr-badge-circle\" style=\"background:#EAF3DE;border:1.5px solid #22c55e\">\ud83c\udfc5<\/div><span>First 10 km<\/span><\/div><div class=\"lo-pr-badge-item\"><div class=\"lo-pr-badge-circle\" style=\"background:#EAF3DE;border:1.5px solid #22c55e\">\ud83d\udcaa<\/div><span>20 workouts<\/span><\/div><div class=\"lo-pr-badge-item\"><div class=\"lo-pr-badge-circle\" style=\"background:#f5f5f0;border:1.5px dashed #ccc;opacity:.5\">\ud83c\udfc6<\/div><span style=\"color:#aaa\">\u22125 kg<\/span><\/div><\/div><\/div>\n          <div class=\"lo-pr-add\"><div class=\"lo-pr-add-title\">Add new entry<\/div><button class=\"lo-pr-add-btn\"><svg width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\"><path d=\"M6.5 2v9M2 6.5h9\" stroke=\"#fff\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><\/svg>Add results<\/button><\/div>\n        <\/div>\n\n        <div class=\"lifeon-screen\" id=\"lo-s-events-en\">\n          <div class=\"lo-ev-header\"><div><div class=\"lo-ev-title\">Events<\/div><div class=\"lo-ev-loc\"><svg width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\"><path d=\"M4.5 .5C3.1.5 2 1.6 2 3c0 2 2.5 5 2.5 5S7 5 7 3C7 1.6 5.9.5 4.5.5z\" stroke=\"#FF6B35\" stroke-width=\".8\"\/><\/svg>Kalush, Ivano-Frankivsk<\/div><\/div><button class=\"lo-ev-change\">Change<\/button><\/div>\n          <div class=\"lo-ev-filters\"><div class=\"lo-ev-chip on\">All<\/div><div class=\"lo-ev-chip off\">Running<\/div><div class=\"lo-ev-chip off\">Cycling<\/div><div class=\"lo-ev-chip off\">Swimming<\/div><\/div>\n          <div class=\"lo-ev-cards\" style=\"padding:8px 10px\">\n            <div class=\"lo-ev-card\"><div class=\"lo-ev-card-inner\" style=\"background:#4A7FC1\"><div class=\"lo-ev-card-top\"><div class=\"lo-ev-datebox\"><b>18<\/b><small>MAY 26<\/small><\/div><div><div class=\"lo-ev-name\">Kyiv Half Marathon<\/div><div class=\"lo-ev-city\">Kyiv, Khreshchatyk St.<\/div><div class=\"lo-ev-meta\">Run | 21 km \u00b7 09:00<\/div><\/div><\/div><div class=\"lo-ev-card-bottom\"><div class=\"lo-ev-part\">\ud83d\udc65 234 participants<\/div><button class=\"lo-ev-reg\" style=\"background:#fff;color:#4A7FC1\">Register<\/button><\/div><\/div><\/div>\n            <div class=\"lo-ev-card\"><div class=\"lo-ev-card-inner\" style=\"background:#4A7A5A\"><div class=\"lo-ev-card-top\"><div class=\"lo-ev-datebox\"><b>8<\/b><small>JUN 26<\/small><\/div><div><div class=\"lo-ev-name\">Carpathian Trail Run<\/div><div class=\"lo-ev-city\">Yaremche, Carpathians<\/div><div class=\"lo-ev-meta\">Trail | 30 km \u00b7 10:00<\/div><\/div><\/div><div class=\"lo-ev-card-bottom\"><div class=\"lo-ev-part\">\ud83d\udc65 89 participants<\/div><button class=\"lo-ev-reg\" style=\"background:#fff;color:#4A7A5A\">Register<\/button><\/div><\/div><\/div>\n            <div class=\"lo-ev-card\" style=\"margin-bottom:16px\"><div class=\"lo-ev-card-inner\" style=\"background:#8B3A3A\"><div class=\"lo-ev-card-top\"><div class=\"lo-ev-datebox\"><b>22<\/b><small>JUN 26<\/small><\/div><div><div class=\"lo-ev-name\">Lviv Cycling Tour<\/div><div class=\"lo-ev-city\">Lviv, Stryiskyi Park<\/div><div class=\"lo-ev-meta\">Cycling | 60 km \u00b7 08:30<\/div><\/div><\/div><div class=\"lo-ev-card-bottom\"><div class=\"lo-ev-part\">\ud83d\udc65 156 participants<\/div><button class=\"lo-ev-reg\" style=\"background:#fff;color:#8B3A3A\">Register<\/button><\/div><\/div><\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"lifeon-ph-nav\">\n        <div class=\"lifeon-ph-nav-row\" id=\"lifeon-ph-nav-row-en\">\n          <div class=\"lifeon-ph-tab active\" data-screen=\"lo-s-home-en\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M3 9.5L11 3l8 6.5V19a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\" stroke=\"#FF6B35\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M8 20v-7h6v7\" stroke=\"#FF6B35\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><\/svg><span>Home<\/span><div class=\"lifeon-ph-tab-dot\"><\/div><\/div>\n          <div class=\"lifeon-ph-tab\" data-screen=\"lo-s-progress-en\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"11\" cy=\"11\" r=\"8\" stroke=\"#aaa\" stroke-width=\"1.5\"\/><path d=\"M11 7v4l3 2\" stroke=\"#aaa\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg><span>Progress<\/span><\/div>\n          <div class=\"lifeon-ph-tab\" data-screen=\"lo-s-trainer-en\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"9\" cy=\"8\" r=\"3\" stroke=\"#aaa\" stroke-width=\"1.5\"\/><path d=\"M3 19c0-3 2.7-5 6-5s6 2 6 5\" stroke=\"#aaa\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><path d=\"M16 7v6M13 10h6\" stroke=\"#aaa\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg><span>Coach<\/span><\/div>\n          <div class=\"lifeon-ph-tab\" data-screen=\"lo-s-events-en\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><rect x=\"3\" y=\"5\" width=\"16\" height=\"14\" rx=\"2\" stroke=\"#aaa\" stroke-width=\"1.5\"\/><path d=\"M7 3v4M15 3v4M3 9h16\" stroke=\"#aaa\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg><span>Events<\/span><\/div>\n          <div class=\"lifeon-ph-tab\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><circle cx=\"11\" cy=\"8\" r=\"3.5\" stroke=\"#aaa\" stroke-width=\"1.5\"\/><path d=\"M4 19c0-3.314 3.134-6 7-6s7 2.686 7 6\" stroke=\"#aaa\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg><span>Profile<\/span><\/div>\n        <\/div>\n        <div class=\"lifeon-ph-home-bar\"><div><\/div><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n<!-- ============================================\n     4. \u0424\u0423\u041d\u041a\u0426\u0406\u0407 (\"\u042f\u043a \u0446\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438\u043c\u0435\")\n============================================ -->\n<section style=\"padding: 60px 24px; background: #f5f5f5; border-radius: 24px;\">\n  <div style=\"text-align: center; margin-bottom: 40px;\">\n    <p style=\"font-size: 12px; font-weight: 700; color: #FF6B35; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px;\">\u042f\u043a \u0446\u0435 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438\u043c\u0435<\/p>\n    <h2 style=\"font-size: 28px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px;\">\u0423\u0441\u0435 \u0434\u043b\u044f \u0442\u0440\u0435\u043d\u0443\u0432\u0430\u043d\u044c \u2014 \u0432 \u043e\u0434\u043d\u043e\u043c\u0443 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043a\u0443<\/h2>\n    <p style=\"font-size: 16px; color: #666666; margin: 0;\">Web, Android \u0456 iOS \u2014 \u0440\u0456\u0434\u043d\u043e\u044e \u043c\u043e\u0432\u043e\u044e, \u0434\u043b\u044f \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0443 \u0441\u043f\u043e\u0440\u0442\u0443<\/p>\n  <\/div>\n\n  <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0 auto 16px;\">\n    <div style=\"background: #ffffff; border-radius: 14px; padding: 24px; border: 1px solid #e8e8e8;\">\n      <div style=\"width: 44px; height: 44px; background: #FFF3EE; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;\">\n        <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF6B35\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M16.5 16.5l3 3\"\/><\/svg>\n      <\/div>\n      <p style=\"font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px;\">\u0422\u0440\u0435\u043d\u0435\u0440\u0438, \u0434\u0456\u0454\u0442\u043e\u043b\u043e\u0433\u0438, \u0440\u0435\u0430\u0431\u0456\u043b\u0456\u0442\u043e\u043b\u043e\u0433\u0438<\/p>\n      <p style=\"font-size: 13px; color: #666; line-height: 1.6; margin: 0;\">\u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0435\u043d\u0438\u0445 \u0444\u0430\u0445\u0456\u0432\u0446\u0456\u0432 \u0437 \u0432\u0456\u0434\u0433\u0443\u043a\u0430\u043c\u0438 \u0456 \u0446\u0456\u043d\u0430\u043c\u0438. \u0424\u0456\u043b\u044c\u0442\u0440 \u0437\u0430 \u0432\u0438\u0434\u043e\u043c \u0441\u043f\u043e\u0440\u0442\u0443, \u043b\u043e\u043a\u0430\u0446\u0456\u0454\u044e, \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c.<\/p>\n    <\/div>\n    <div style=\"background: #ffffff; border-radius: 14px; padding: 24px; border: 1px solid #e8e8e8;\">\n      <div style=\"width: 44px; height: 44px; background: #FAEEDA; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;\">\n        <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#854F0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12h4l3-9 4 18 3-9h4\"\/><\/svg>\n      <\/div>\n      <p style=\"font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px;\">\u041f\u043b\u0430\u043d\u0443\u0432\u0430\u043d\u043d\u044f \u0456 \u0430\u043d\u0430\u043b\u0456\u0442\u0438\u043a\u0430 \u0442\u0440\u0435\u043d\u0443\u0432\u0430\u043d\u044c<\/p>\n      <p style=\"font-size: 13px; color: #666; line-height: 1.6; margin: 0;\">\u041a\u043e\u0436\u043d\u0435 \u0442\u0440\u0435\u043d\u0443\u0432\u0430\u043d\u043d\u044f \u2014 \u0437\u0430\u043f\u043b\u0430\u043d\u043e\u0432\u0430\u043d\u0435, \u0437\u0430\u0444\u0456\u043a\u0441\u043e\u0432\u0430\u043d\u0435, \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0456\u0437\u043e\u0432\u0430\u043d\u0435. \u0413\u0440\u0430\u0444\u0456\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0443, \u043d\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f, \u0432\u0456\u0434\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f.<\/p>\n    <\/div>\n    <div style=\"background: #ffffff; border-radius: 14px; padding: 24px; border: 1px solid #e8e8e8;\">\n      <div style=\"width: 44px; height: 44px; background: #E1F5EE; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;\">\n        <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0F6E56\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg>\n      <\/div>\n      <p style=\"font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px;\">\u0410\u0444\u0456\u0448\u0430 \u043f\u043e\u0434\u0456\u0439 \u0443 \u0441\u0432\u0456\u0442\u0456<\/p>\n      <p style=\"font-size: 13px; color: #666; line-height: 1.6; margin: 0;\">\u041c\u0430\u0440\u0430\u0444\u043e\u043d\u0438, \u0442\u0443\u0440\u043d\u0456\u0440\u0438, \u0437\u043c\u0430\u0433\u0430\u043d\u043d\u044f \u2014 \u043f\u043e \u0432\u0441\u044c\u043e\u043c\u0443 \u0441\u0432\u0456\u0442\u0443. \u0420\u0435\u0454\u0441\u0442\u0440\u0430\u0446\u0456\u044f \u0456 \u043d\u0430\u0433\u0430\u0434\u0443\u0432\u0430\u043d\u043d\u044f \u043f\u0440\u044f\u043c\u043e \u0437 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0438.<\/p>\n    <\/div>\n  <\/div>\n\n  <div style=\"text-align: center; margin: 0 auto;\">\n    <button id=\"lo-more-btn\"\n      style=\"background: none; border: 1px solid #FF6B35; color: #FF6B35; font-size: 14px; font-weight: 600; padding: 10px 24px; border-radius: 99px; cursor: pointer;\">\n      \u0449\u0435 6 \u0444\u0443\u043d\u043a\u0446\u0456\u0439 \u2193\n    <\/button>\n  <\/div>\n\n  <div id=\"lo-more-features\" style=\"display: none; margin: 16px auto 0;\">\n    <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;\">\n      <div style=\"background: #ffffff; border-radius: 12px; padding: 20px; border: 1px solid #e8e8e8; display: flex; gap: 14px; align-items: flex-start;\">\n        <div style=\"width: 40px; height: 40px; background: #E1F5EE; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0F6E56\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><path d=\"M12 18h.01\"\/><\/svg>\n        <\/div>\n        <div>\n          <p style=\"font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0 0 5px;\">Web + Android + iOS<\/p>\n          <p style=\"font-size: 13px; color: #666; line-height: 1.55; margin: 0;\">\u0404\u0434\u0438\u043d\u0438\u0439 \u0430\u043a\u0430\u0443\u043d\u0442 \u043d\u0430 \u0432\u0441\u0456\u0445 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u044f\u0445. \u0406\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0430\u0434\u0430\u043f\u0442\u0443\u0454\u0442\u044c\u0441\u044f \u0434\u043e \u043c\u043e\u0432\u0438 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430.<\/p>\n        <\/div>\n      <\/div>\n      <div style=\"background: #ffffff; border-radius: 12px; padding: 20px; border: 1px solid #e8e8e8; display: flex; gap: 14px; align-items: flex-start;\">\n        <div style=\"width: 40px; height: 40px; background: #E1F5EE; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0F6E56\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z\"\/><path d=\"M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20\"\/><\/svg>\n        <\/div>\n        <div>\n          <p style=\"font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0 0 5px;\">\u0415\u043d\u0446\u0438\u043a\u043b\u043e\u043f\u0435\u0434\u0456\u044f \u0441\u043f\u043e\u0440\u0442\u0443<\/p>\n          <p style=\"font-size: 13px; color: #666; line-height: 1.55; margin: 0;\">\u0423\u0441\u0456 \u0432\u0438\u0434\u0438 \u0441\u043f\u043e\u0440\u0442\u0443 \u2014 \u043e\u043f\u0438\u0441, \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u0437\u043c\u0430\u0433\u0430\u043d\u043d\u044f. \u0412\u043a\u043b\u044e\u0447\u043d\u043e \u0437 \u043d\u0430\u0446\u0456\u043e\u043d\u0430\u043b\u044c\u043d\u0438\u043c\u0438 \u0432\u0438\u0434\u0430\u043c\u0438.<\/p>\n        <\/div>\n      <\/div>\n      <div style=\"background: #ffffff; border-radius: 12px; padding: 20px; border: 1px solid #e8e8e8; display: flex; gap: 14px; align-items: flex-start;\">\n        <div style=\"width: 40px; height: 40px; background: #FAEEDA; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#854F0B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n        <\/div>\n        <div>\n          <p style=\"font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0 0 5px;\">\u0421\u0438\u043d\u0445\u0440\u043e\u043d\u0456\u0437\u0430\u0446\u0456\u044f \u0437 \u0433\u0430\u0434\u0436\u0435\u0442\u0430\u043c\u0438<\/p>\n          <p style=\"font-size: 13px; color: #666; line-height: 1.55; margin: 0;\">Garmin, Apple Watch, Polar, Fitbit \u0442\u0430 \u0456\u043d\u0448\u0456. \u0414\u0430\u043d\u0456 \u043f\u043e\u0442\u0440\u0430\u043f\u043b\u044f\u044e\u0442\u044c \u0443 \u043f\u0440\u043e\u0444\u0456\u043b\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e.<\/p>\n        <\/div>\n      <\/div>\n      <div style=\"background: #ffffff; border-radius: 12px; padding: 20px; border: 1px solid #e8e8e8; display: flex; gap: 14px; align-items: flex-start;\">\n        <div style=\"width: 40px; height: 40px; background: #EEEDFE; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#534AB7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n        <\/div>\n        <div>\n          <p style=\"font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0 0 5px;\">\u0417\u0430\u043b\u0438 \u0456 \u043c\u0430\u0439\u0434\u0430\u043d\u0447\u0438\u043a\u0438<\/p>\n          <p style=\"font-size: 13px; color: #666; line-height: 1.55; margin: 0;\">\u0417\u0430\u043b, \u0441\u0442\u0443\u0434\u0456\u044f, \u0432\u0456\u0434\u043a\u0440\u0438\u0442\u0438\u0439 \u043c\u0430\u0439\u0434\u0430\u043d\u0447\u0438\u043a \u043f\u043e\u0440\u044f\u0434. \u0420\u043e\u0437\u043a\u043b\u0430\u0434, \u0446\u0456\u043d\u0438, \u0431\u0440\u043e\u043d\u044e\u0432\u0430\u043d\u043d\u044f.<\/p>\n        <\/div>\n      <\/div>\n      <div style=\"background: #ffffff; border-radius: 12px; padding: 20px; border: 1px solid #e8e8e8; display: flex; gap: 14px; align-items: flex-start;\">\n        <div style=\"width: 40px; height: 40px; background: #EEEDFE; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#534AB7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 8h1a4 4 0 0 1 0 8h-1\"\/><path d=\"M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z\"\/><line x1=\"6\" y1=\"1\" x2=\"6\" y2=\"4\"\/><line x1=\"10\" y1=\"1\" x2=\"10\" y2=\"4\"\/><line x1=\"14\" y1=\"1\" x2=\"14\" y2=\"4\"\/><\/svg>\n        <\/div>\n        <div>\n          <p style=\"font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0 0 5px;\">\u0425\u0430\u0440\u0447\u0443\u0432\u0430\u043d\u043d\u044f \u0456 \u043d\u0443\u0442\u0440\u0438\u0446\u0456\u044f<\/p>\n          <p style=\"font-size: 13px; color: #666; line-height: 1.55; margin: 0;\">\u041f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u0456 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0456\u0457 \u043f\u0456\u0434 \u0432\u0438\u0434 \u0441\u043f\u043e\u0440\u0442\u0443, \u0446\u0456\u043b\u044c \u0456 \u0440\u0456\u0432\u0435\u043d\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0456.<\/p>\n        <\/div>\n      <\/div>\n      <div style=\"background: #ffffff; border-radius: 12px; padding: 20px; border: 1px solid #e8e8e8; display: flex; gap: 14px; align-items: flex-start;\">\n        <div style=\"width: 40px; height: 40px; background: #EAF3DE; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;\">\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3B6D11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"\/><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><path d=\"M16 10a4 4 0 0 1-8 0\"\/><\/svg>\n        <\/div>\n        <div>\n          <p style=\"font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0 0 5px;\">\u0421\u043f\u043e\u0440\u0442\u0442\u043e\u0432\u0430\u0440\u0438 \u0456 \u0435\u043a\u0456\u043f\u0456\u0440\u0443\u0432\u0430\u043d\u043d\u044f<\/p>\n          <p style=\"font-size: 13px; color: #666; line-height: 1.55; margin: 0;\">\u041f\u0456\u0434\u0431\u0456\u0440 \u043e\u0434\u044f\u0433\u0443, \u0456\u043d\u0432\u0435\u043d\u0442\u0430\u0440\u044e \u0456 \u0441\u043f\u043e\u0440\u044f\u0434\u0436\u0435\u043d\u043d\u044f \u043f\u0456\u0434 \u0432\u0438\u0434 \u0441\u043f\u043e\u0440\u0442\u0443. \u041f\u043e\u0440\u0456\u0432\u043d\u044f\u043d\u043d\u044f \u0456 \u043f\u043e\u043a\u0443\u043f\u043a\u0430 \u0432 \u043e\u0434\u0438\u043d \u043a\u043b\u0456\u043a.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================\n     5. \u0422\u0410\u0420\u0418\u0424 (\"\u0421\u043a\u0456\u043b\u044c\u043a\u0438 \u0446\u0435 \u043a\u043e\u0448\u0442\u0443\u0454\")\n============================================ -->\n<section style=\"padding: 48px 24px; background: #f5f5f5; text-align: center; border-radius: 24px;\">\n  <div style=\"max-width: 600px; margin: 0 auto;\">\n    <p style=\"font-size: 12px; font-weight: 700; color: #FF6B35; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px;\">\u0421\u043a\u0456\u043b\u044c\u043a\u0438 \u0446\u0435 \u043a\u043e\u0448\u0442\u0443\u0454<\/p>\n    <h2 style=\"font-size: 28px; font-weight: 700; color: #1a1a1a; margin: 0 0 32px;\">\u041f\u0440\u043e\u0437\u043e\u0440\u043e \u0456 \u0447\u0435\u0441\u043d\u043e<\/h2>\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 12px;\">\n      <div style=\"background: #ffffff; border-radius: 16px; padding: 28px 24px; border: 1px solid #e8e8e8; text-align: left;\">\n        <p style=\"font-size: 11px; font-weight: 700; color: #FF6B35; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 10px;\">\u0421\u043f\u043e\u0440\u0442\u0441\u043c\u0435\u043d\u0438<\/p>\n        <p style=\"font-size: 32px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px;\">\u0411\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u043e.<\/p>\n        <p style=\"font-size: 13px; color: #999; margin: 0 0 20px;\">\u041d\u0430\u0437\u0430\u0432\u0436\u0434\u0438.<\/p>\n        <div style=\"border-top: 1px solid #f0f0f0; padding-top: 16px; display: flex; flex-direction: column; gap: 10px;\">\n          <div style=\"display: flex; gap: 8px; align-items: flex-start;\"><span style=\"color: #FF6B35; font-size: 15px; flex-shrink: 0;\">\u00b7<\/span><span style=\"font-size: 13px; color: #444; line-height: 1.5;\">\u041f\u043e\u0448\u0443\u043a \u0442\u0440\u0435\u043d\u0435\u0440\u0456\u0432 \u0456 \u0444\u0430\u0445\u0456\u0432\u0446\u0456\u0432<\/span><\/div>\n          <div style=\"display: flex; gap: 8px; align-items: flex-start;\"><span style=\"color: #FF6B35; font-size: 15px; flex-shrink: 0;\">\u00b7<\/span><span style=\"font-size: 13px; color: #444; line-height: 1.5;\">\u0429\u043e\u0434\u0435\u043d\u043d\u0438\u043a \u0442\u0440\u0435\u043d\u0443\u0432\u0430\u043d\u044c<\/span><\/div>\n          <div style=\"display: flex; gap: 8px; align-items: flex-start;\"><span style=\"color: #FF6B35; font-size: 15px; flex-shrink: 0;\">\u00b7<\/span><span style=\"font-size: 13px; color: #444; line-height: 1.5;\">\u0410\u0444\u0456\u0448\u0430 \u043f\u043e\u0434\u0456\u0439 \u0442\u0430 \u0440\u0435\u0454\u0441\u0442\u0440\u0430\u0446\u0456\u044f<\/span><\/div>\n          <div style=\"display: flex; gap: 8px; align-items: flex-start;\"><span style=\"color: #aaa; font-size: 15px; flex-shrink: 0;\">+<\/span><span style=\"font-size: 13px; color: #999; line-height: 1.5;\">\u041f\u0440\u0435\u043c\u0456\u0443\u043c\u0444\u0443\u043d\u043a\u0446\u0456\u0457 \u0437\u0430 \u043f\u0456\u0434\u043f\u0438\u0441\u043a\u043e\u044e<\/span><\/div>\n        <\/div>\n      <\/div>\n      <div style=\"background: #1a1a1a; border-radius: 16px; padding: 28px 24px; border: 1px solid #2a2a2a; text-align: left;\">\n        <p style=\"font-size: 11px; font-weight: 700; color: #FF6B35; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 10px;\">\u0422\u0440\u0435\u043d\u0435\u0440\u0438 \u0456 \u0444\u0430\u0445\u0456\u0432\u0446\u0456<\/p>\n        <p style=\"font-size: 22px; font-weight: 700; color: #ffffff; margin: 0 0 4px; line-height: 1.2;\">\u0422\u0430\u0440\u0438\u0444\u0438 \u043e\u0433\u043e\u043b\u043e\u0441\u0438\u043c\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0443<\/p>\n        <p style=\"font-size: 13px; color: #FF6B35; margin: 8px 0 20px; line-height: 1.5;\">\u0422\u0440\u0435\u043d\u0435\u0440\u0438-\u0437\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a\u0438 \u043e\u0442\u0440\u0438\u043c\u0430\u044e\u0442\u044c \u043f\u043e\u0436\u0438\u0442\u0442\u0454\u0432\u0443 \u0437\u043d\u0438\u0436\u043a\u0443.<\/p>\n        <div style=\"border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; display: flex; flex-direction: column; gap: 10px;\">\n          <div style=\"display: flex; gap: 8px; align-items: flex-start;\"><span style=\"color: #FF6B35; font-size: 15px; flex-shrink: 0;\">\u00b7<\/span><span style=\"font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5;\">\u041f\u0440\u043e\u0444\u0456\u043b\u044c \u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0437\u0456<\/span><\/div>\n          <div style=\"display: flex; gap: 8px; align-items: flex-start;\"><span style=\"color: #FF6B35; font-size: 15px; flex-shrink: 0;\">\u00b7<\/span><span style=\"font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5;\">\u0412\u0456\u0434\u0433\u0443\u043a\u0438 \u0456 \u0440\u0435\u0439\u0442\u0438\u043d\u0433<\/span><\/div>\n          <div style=\"display: flex; gap: 8px; align-items: flex-start;\"><span style=\"color: #FF6B35; font-size: 15px; flex-shrink: 0;\">\u00b7<\/span><span style=\"font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5;\">\u0417\u0430\u044f\u0432\u043a\u0438 \u0432\u0456\u0434 \u043a\u043b\u0456\u0454\u043d\u0442\u0456\u0432<\/span><\/div>\n          <div style=\"display: flex; gap: 8px; align-items: flex-start;\"><span style=\"color: #FF6B35; font-size: 15px; flex-shrink: 0;\">\u00b7<\/span><span style=\"font-size: 13px; color: #FF6B35; line-height: 1.5;\">\u0421\u0442\u0430\u0442\u0443\u0441 \u00ab\u0422\u0440\u0435\u043d\u0435\u0440-\u0437\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a\u00bb \u0434\u043b\u044f \u043f\u0435\u0440\u0448\u0438\u0445<\/span><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================\n     6. \u0417\u0410\u0421\u041d\u041e\u0412\u041d\u0418\u041a (\"\u0425\u0442\u043e \u0437\u0430 \u0446\u0438\u043c \u0441\u0442\u043e\u0457\u0442\u044c\")\n============================================ -->\n<section style=\"padding: 60px 24px; background: #ffffff; border-radius: 24px;\">\n  <div style=\"text-align: center; margin-bottom: 40px;\">\n    <p style=\"font-size: 12px; font-weight: 700; color: #FF6B35; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px;\">\u0425\u0442\u043e \u0437\u0430 \u0446\u0438\u043c \u0441\u0442\u043e\u0457\u0442\u044c<\/p>\n  <\/div>\n  <div style=\"max-width: 680px; margin: 0 auto; background: #f9f9f9; border-radius: 16px; padding: 36px; border: 1px solid #e8e8e8; display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap;\">\n    <div style=\"flex-shrink: 0;\">\n      <img decoding=\"async\" src=\"https:\/\/www.life-on.com.ua\/wp-content\/uploads\/2026\/04\/crop_ph.jpg\"\n           alt=\"\u0412\u0456\u0442\u0430\u043b\u0456\u0439 \u2014 \u0437\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a life:)on\"\n           loading=\"lazy\"\n           style=\"width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center top; border: 3px solid #FF6B35; display: block;\">\n      <p style=\"font-size: 14px; font-weight: 700; color: #1a1a1a; text-align: center; margin: 12px 0 2px;\">\u0412\u0456\u0442\u0430\u043b\u0456\u0439<\/p>\n      <p style=\"font-size: 12px; color: #999999; text-align: center; margin: 0;\">\u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a life:)on<\/p>\n    <\/div>\n    <div style=\"flex: 1; min-width: 220px;\">\n      <p style=\"font-size: 15px; color: #333333; line-height: 1.75; margin: 0 0 16px;\">\n        \u0423\u0441\u0435 \u0436\u0438\u0442\u0442\u044f \u0432 \u0441\u043f\u043e\u0440\u0442\u0456 \u2014 \u0432\u0456\u0434 \u043b\u0435\u0433\u043a\u043e\u0457 \u0430\u0442\u043b\u0435\u0442\u0438\u043a\u0438 \u0434\u043e \u0441\u0445\u0456\u0434\u043d\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a. \u0417 \u0447\u0430\u0441\u043e\u043c \u0440\u043e\u0437\u0443\u043c\u0456\u0454\u0448 \u0449\u043e \u0432\u0430\u0436\u043b\u0438\u0432\u043e \u0441\u0430\u043c\u0435 \u0442\u043e\u0431\u0456.\n      <\/p>\n      <p style=\"font-size: 15px; color: #333333; line-height: 1.75; margin: 0 0 16px;\">\n        life:)on \u2014 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u044c \u043d\u0430 \u0432\u043b\u0430\u0441\u043d\u0438\u0439 \u0431\u0456\u043b\u044c. \u0412\u0442\u043e\u043c\u0438\u0432\u0441\u044f \u0448\u0443\u043a\u0430\u0442\u0438 \u0442\u0440\u0435\u043d\u0435\u0440\u0456\u0432, \u043f\u043e\u0434\u0456\u0457 \u0456 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0435\u043d\u0443 \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u044e \u043f\u043e \u0440\u0456\u0437\u043d\u0438\u0445 \u043a\u0443\u0442\u043e\u0447\u043a\u0430\u0445 \u0456\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443. \u0412\u0438\u0440\u0456\u0448\u0438\u0432 \u0437\u0456\u0431\u0440\u0430\u0442\u0438 \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c\u0443 \u043c\u0456\u0441\u0446\u0456.\n      <\/p>\n      <p style=\"font-size: 15px; color: #333333; line-height: 1.75; margin: 0 0 16px;\">\n        \u0412\u0435\u0442\u0435\u0440\u0430\u043d. \u041f\u0456\u0441\u043b\u044f \u043f\u043e\u0440\u0430\u043d\u0435\u043d\u043d\u044f \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0432\u0441\u044f \u0432 \u0441\u043f\u043e\u0440\u0442 \u2014 \u0441\u0438\u043b\u043e\u0432\u0456, \u0441\u0430\u0443\u043d\u0430, \u043f\u0440\u043e\u0433\u0443\u043b\u044f\u043d\u043a\u0438. \u0422\u0456\u043b\u043e \u043f\u0430\u043c&#8217;\u044f\u0442\u0430\u0454 \u0431\u0456\u043b\u044c\u0448\u0435 \u043d\u0456\u0436 \u0437\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u2014 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0430 \u0442\u0456\u043b\u044c\u043a\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430. \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0431\u0443\u0434\u0443\u044e \u0432 \u043f\u0435\u0440\u0448\u0443 \u0447\u0435\u0440\u0433\u0443 \u0434\u043b\u044f \u0441\u0435\u0431\u0435: \u0449\u043e\u0431 \u0431\u0443\u0432 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u044f\u043a\u0438\u0439 \u043d\u0435 \u0437\u043d\u0430\u0439\u0448\u043e\u0432 \u0433\u043e\u0442\u043e\u0432\u0438\u043c.\n      <\/p>\n      <p style=\"font-size: 15px; color: #333333; line-height: 1.75; margin: 0 0 20px;\">\n        \u0420\u043e\u0437\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0432 \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0456\u0457 \u0441\u043f\u043e\u0440\u0442\u0438\u0432\u043d\u043e\u0457 \u043d\u0430\u0443\u043a\u0438 \u2014 \u043f\u0440\u043e\u0439\u0448\u043e\u0432 <a href=\"https:\/\/naukroom.pro\" target=\"_blank\" rel=\"noopener\" style=\"color:#FF6B35;text-decoration:none;border-bottom:1px solid #FF6B35;\">Health Academy<\/a>. \u0422\u043e\u043c\u0443 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0441\u0442\u043e\u0457\u0442\u044c \u043d\u0430 \u0434\u043e\u043a\u0430\u0437\u043e\u0432\u0456\u0439 \u0431\u0430\u0437\u0456, \u0430 \u043d\u0435 \u043d\u0430 \u0456\u043d\u0441\u0442\u0430\u0433\u0440\u0430\u043c-\u043f\u043e\u0440\u0430\u0434\u0430\u0445.\n      <\/p>\n      <div style=\"display: flex; flex-wrap: wrap; gap: 8px;\">\n        <span style=\"background: #FFF3EE; color: #FF6B35; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px;\">\u0412\u0435\u0442\u0435\u0440\u0430\u043d<\/span>\n        <span style=\"background: #FFF3EE; color: #FF6B35; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px;\">\u0421\u043f\u043e\u0440\u0442\u0441\u043c\u0435\u043d<\/span>\n        <span style=\"background: #FFF3EE; color: #FF6B35; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px;\">\u0417\u0430\u0441\u043d\u043e\u0432\u043d\u0438\u043a<\/span>\n        <span style=\"background: #FFF3EE; color: #FF6B35; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px;\">\u0414\u043e\u043a\u0430\u0437\u043e\u0432\u0438\u0439 \u043f\u0456\u0434\u0445\u0456\u0434<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================\n     7. FOOTER CTA (\"\u0411\u0443\u0434\u044c \u0441\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0448\u0438\u0445\")\n============================================ -->\n<section class=\"lo-footer-hero\">\n  <div class=\"lo-footer-hero-bg\"><\/div>\n  <div class=\"lo-footer-hero-overlay\"><\/div>\n  <div class=\"lo-footer-hero-content\">\n    <p class=\"lo-ftag\">\u0411\u0443\u0434\u044c \u0441\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0448\u0438\u0445<\/p>\n    <h2>\u0415\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043f\u043e\u0440\u0442\u0443 \u0456 \u0437\u0434\u043e\u0440\u043e\u0432&#8217;\u044f \u2014 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0456<\/h2>\n    <p class=\"lo-fsub\">\u0417\u0430\u043b\u0438\u0448 email \u2014 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u0438\u043c\u043e \u043e\u0434\u0440\u0430\u0437\u0443 \u044f\u043a \u0432\u0456\u0434\u043a\u0440\u0438\u0454\u043c\u043e \u0434\u043e\u0441\u0442\u0443\u043f. \u0411\u0435\u0437 \u0441\u043f\u0430\u043c\u0443.<\/p>\n    <div class=\"lo-footer-form\">\n      <div id=\"lo-form-row2\">\n        <input type=\"email\" id=\"lo-email2\" placeholder=\"email@\u043f\u0440\u0438\u043a\u043b\u0430\u0434.com\" autocomplete=\"email\">\n        <button id=\"lo-btn2\">\u0417\u0430\u043b\u0438\u0448\u0438\u0442\u0438 email<\/button>\n      <\/div>\n      <p id=\"lo-success2\">\u2713 \u0417\u0430\u043f\u0438\u0441\u0430\u043d\u043e. \u041f\u043e\u0432\u0456\u0434\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0443.<\/p>\n      <p id=\"lo-error2\">\u0429\u043e\u0441\u044c \u043f\u0456\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a. \u0421\u043f\u0440\u043e\u0431\u0443\u0432\u0430\u0442\u0438 \u0449\u0435 \u0440\u0430\u0437?<\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================\n     \u041e\u0411'\u0404\u0414\u041d\u0410\u041d\u0418\u0419 JS\n============================================ -->\n<script>\n(function() {\n  'use strict';\n\n  \/\/ ----- \u0421\u043f\u0456\u043b\u044c\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0456\u044f \u0444\u043e\u0440\u043c\u0438 \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u043d\u043d\u044f -----\n  var WL_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbycZC7UjtK-qKmNsH49ujNZ6BiXTkxo9cqtIZqyXfWmCRcck06euoUEhTlhiJq1IYq54g\/exec';\n\n  function bindWaitlist(emailId, btnId, formRowId, successId, errorId) {\n    var emailEl = document.getElementById(emailId);\n    var btn     = document.getElementById(btnId);\n    var formRow = document.getElementById(formRowId);\n    var ok      = document.getElementById(successId);\n    var err     = document.getElementById(errorId);\n    if (!emailEl || !btn) return;\n\n    var originalText = btn.textContent;\n\n    async function submit() {\n      var email = emailEl.value.trim();\n      if (!email || email.indexOf('@') === -1) {\n        emailEl.style.outline = '2px solid #ff8a80';\n        emailEl.style.borderColor = '#ff8a80';\n        return;\n      }\n      emailEl.style.outline = '';\n      emailEl.style.borderColor = '';\n      btn.disabled = true;\n      btn.textContent = '\u041d\u0430\u0434\u0441\u0438\u043b\u0430\u0454\u043c\u043e\u2026';\n      try {\n        var res = await fetch(WL_URL, { method: 'POST', body: JSON.stringify({ email: email }) });\n        var json = await res.json();\n        if (json.ok) {\n          if (formRow) formRow.style.display = 'none';\n          if (err) err.style.display = 'none';\n          if (ok) ok.style.display = 'block';\n        } else { throw new Error(json.error || 'fail'); }\n      } catch (e) {\n        btn.disabled = false;\n        btn.textContent = originalText;\n        if (err) err.style.display = 'block';\n      }\n    }\n\n    btn.addEventListener('click', submit);\n    emailEl.addEventListener('keydown', function(e) { if (e.key === 'Enter') submit(); });\n  }\n\n  bindWaitlist('wl-email',  'wl-btn',  'wl-form-row',  'wl-success',  'wl-error');\n  bindWaitlist('lo-email2', 'lo-btn2', 'lo-form-row2', 'lo-success2', 'lo-error2');\n\n\n  \/\/ ----- \u0420\u043e\u0437\u0433\u043e\u0440\u0442\u0430\u043d\u043d\u044f \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0456\u0439 -----\n  var moreBtn = document.getElementById('lo-more-btn');\n  var moreEl  = document.getElementById('lo-more-features');\n  if (moreBtn && moreEl) {\n    moreBtn.addEventListener('click', function() {\n      if (moreEl.style.display === 'none' || moreEl.style.display === '') {\n        moreEl.style.display = 'block';\n        moreBtn.textContent  = '\u0437\u0433\u043e\u0440\u043d\u0443\u0442\u0438 \u2191';\n      } else {\n        moreEl.style.display = 'none';\n        moreBtn.textContent  = '\u0449\u0435 6 \u0444\u0443\u043d\u043a\u0446\u0456\u0439 \u2193';\n      }\n    });\n  }\n\n\n  \/\/ ----- \u041c\u043e\u043a\u0430\u043f (\u0443\u043d\u0456\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0456\u044f \u0434\u043b\u044f UA \u0442\u0430 EN) -----\n  function initMockup(suffix) {\n    var wrap = document.getElementById('mockup-' + suffix);\n    if (!wrap) return;\n\n    var current = 'lo-s-home-' + suffix;\n    var autoplay = null;\n\n    function switchTo(key) {\n      if (key === current) return;\n      var prev = document.getElementById(current);\n      var next = document.getElementById(key);\n      if (!next || !prev) return;\n      prev.classList.add('exit');\n      setTimeout(function() { prev.classList.remove('active', 'exit'); }, 300);\n      next.style.transform = 'translateX(24px)';\n      next.style.opacity = '0';\n      next.classList.add('active');\n      next.scrollTop = 0;\n      requestAnimationFrame(function() { next.style.transform = ''; next.style.opacity = ''; });\n      current = key;\n\n      var btns = document.querySelectorAll('#lifeon-switcher-' + suffix + ' .lifeon-switcher__btn');\n      btns.forEach(function(b) { b.classList.toggle('active', b.dataset.screen === key); });\n\n      var tabs = document.querySelectorAll('#lifeon-ph-nav-row-' + suffix + ' .lifeon-ph-tab[data-screen]');\n      tabs.forEach(function(tab) {\n        var isActive = tab.dataset.screen === key;\n        tab.classList.toggle('active', isActive);\n        tab.querySelectorAll('svg path, svg circle, svg rect').forEach(function(el) {\n          if (el.getAttribute('stroke') && el.getAttribute('stroke') !== 'none') {\n            el.setAttribute('stroke', isActive ? '#FF6B35' : '#aaa');\n          }\n        });\n        var dot = tab.querySelector('.lifeon-ph-tab-dot');\n        if (isActive && !dot) {\n          dot = document.createElement('div');\n          dot.className = 'lifeon-ph-tab-dot';\n          tab.appendChild(dot);\n        } else if (!isActive && dot) {\n          dot.remove();\n        }\n      });\n    }\n\n    document.querySelectorAll('#lifeon-switcher-' + suffix + ' .lifeon-switcher__btn[data-screen]').forEach(function(btn) {\n      btn.addEventListener('click', function() {\n        if (autoplay) clearInterval(autoplay);\n        switchTo(btn.dataset.screen);\n      });\n    });\n    document.querySelectorAll('#lifeon-ph-nav-row-' + suffix + ' .lifeon-ph-tab[data-screen]').forEach(function(tab) {\n      tab.addEventListener('click', function() {\n        if (autoplay) clearInterval(autoplay);\n        switchTo(tab.dataset.screen);\n      });\n    });\n\n    var order = [\n      'lo-s-home-' + suffix,\n      'lo-s-trainer-' + suffix,\n      'lo-s-progress-' + suffix,\n      'lo-s-events-' + suffix\n    ];\n    var idx = 0;\n    autoplay = setInterval(function() {\n      idx = (idx + 1) % order.length;\n      switchTo(order[idx]);\n    }, 4000);\n\n    function updateClock() {\n      var now = new Date();\n      var el = document.getElementById('lifeon-ph-time-' + suffix);\n      if (el) el.textContent = String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0');\n    }\n    updateClock();\n    setInterval(updateClock, 10000);\n  }\n\n  initMockup('ua');\n  initMockup('en');\n})();\n<\/script>\n\n<\/div>\n<!-- \/.lo-page -->\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The life:)on sports and health ecosystem \u2014 one app instead of ten tabs: coach, progress, events, training venues. Any level, in your native language. View features \u2192 Find out about the launch \u2713 Saved. We\u2019ll let you know when it launches. Something went wrong. Try again? No spam. Just one message when we open access. Sound familiar? The three main headaches that the life:)on ecosystem solves. It\u2019s tough\u2026<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":true,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.life-on.com.ua\/en\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.life-on.com.ua\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.life-on.com.ua\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.life-on.com.ua\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.life-on.com.ua\/en\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":42,"href":"https:\/\/www.life-on.com.ua\/en\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":702,"href":"https:\/\/www.life-on.com.ua\/en\/wp-json\/wp\/v2\/pages\/6\/revisions\/702"}],"wp:attachment":[{"href":"https:\/\/www.life-on.com.ua\/en\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}