/* A purpose-built, legible Telegram illustration, isolated from legacy scenes. */
.et-tg5 { position: relative; overflow: hidden; padding: 98px 0 90px; color: #fff; background: #081d26; }
.et-tg5::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 80% 42%, rgba(65, 187, 161, .16), transparent 52%), radial-gradient(ellipse at 0% 100%, rgba(35, 75, 91, .26), transparent 52%); }
.et-tg5-shell { position: relative; display: grid; grid-template-columns: .98fr 1.02fr; align-items: center; gap: 62px; width: min(100% - 64px, 1160px); margin-inline: auto; }
.et-tg5-copy { position: relative; z-index: 2; }
.et-tg5-icon { display: block; flex-shrink: 0; width: 22px; height: 22px; }
.et-tg5-eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; color: #8eead3; font-size: 13px; font-weight: 750; letter-spacing: .11em; }
.et-tg5-eyebrow .et-tg5-icon { width: 19px; height: 19px; }
.et-landing .et-tg5 h2 { max-width: 12ch; font-size: clamp(39px, 4.6vw, 57px); line-height: 1.06; font-weight: 700; letter-spacing: -.052em; }
.et-tg5 h2 em { color: #8de4cb; font-style: normal; }
.et-landing .et-tg5-lead { max-width: 40ch; margin-top: 25px; color: #bdced2; font-size: 18px; line-height: 1.75; letter-spacing: -.012em; }
.et-tg5-benefits { display: grid; gap: 24px; margin-top: 39px; }
.et-tg5-benefit { display: flex; gap: 15px; align-items: flex-start; }
.et-tg5-benefit > span { display: grid; place-items: center; flex: 0 0 40px; height: 40px; color: #90aaaf; border: 1px solid #335057; border-radius: 12px; background: #122d35; transition: color .4s, border-color .4s, background .4s; }
.et-tg5-benefit.is-current > span { color: #95edd1; border-color: #629d89; background: #1c443e; }
.et-tg5-benefit .et-tg5-icon { width: 20px; height: 20px; }
.et-landing .et-tg5-benefit h3 { margin: 1px 0 5px; color: #f4f9f8; font-size: 16px; font-weight: 650; line-height: 1.35; letter-spacing: -.012em; }
.et-landing .et-tg5-benefit p { color: #a8bfc4; font-size: 14px; line-height: 1.5; }
.et-tg5-control-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 40px; }
.et-landing .et-tg5-control { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 0; padding: 0; color: #dcebe9; border: 0; border-bottom: 1px solid #4a686b; border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
.et-landing .et-tg5-control:hover { color: #a3f4d8; border-bottom-color: #a3f4d8; }
.et-tg5-control:focus-visible { outline: 2px solid #91eacf; outline-offset: 5px; }
.et-tg5-control[hidden] { display: none; }
.et-tg5-control-icon { display: block; width: 10px; height: 11px; border-right: 3px solid currentColor; border-left: 3px solid currentColor; }
.et-tg5-control[aria-pressed="true"] .et-tg5-control-icon { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; }
.et-tg5-demo-label { color: #9bb5ba; font-size: 13px; }
.et-tg5-stage { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 8px 0 30px; }
.et-tg5-orbit { position: absolute; left: 50%; top: 48%; width: 670px; height: 670px; border: 1px solid rgba(166, 223, 207, .13); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.et-tg5-orbit--two { width: 526px; height: 526px; border-style: dashed; border-color: rgba(166, 223, 207, .1); transform: translate(-50%, -50%) rotate(-25deg); }
.et-tg5-orbit--one::after { content: ""; position: absolute; top: 83px; left: 109px; width: 6px; height: 6px; border-radius: 50%; background: #72baa7; box-shadow: 0 0 0 7px rgba(104, 203, 173, .05); }
.et-tg5-orbit-plane { position: absolute; right: -13px; top: 66px; display: grid; place-items: center; width: 58px; height: 58px; color: #91cdbb; border: 1px solid #375a56; border-radius: 20px; background: #183a3d; transform: rotate(12deg); }
.et-tg5-orbit-plane .et-tg5-icon { width: 27px; height: 27px; transform: rotate(-12deg); }
.et-tg5-phone { position: relative; z-index: 1; width: 370px; max-width: 100%; padding: 7px; border: 1px solid #6a8586; border-radius: 47px; background: linear-gradient(140deg, #819593, #1f393b 28%, #172b30 75%, #829493); box-shadow: 0 38px 80px -24px rgba(0, 0, 0, .85), 0 2px 0 rgba(255, 255, 255, .15) inset; }
.et-tg5-phone-button { position: absolute; width: 3px; height: 63px; top: 145px; right: -4px; border-radius: 0 2px 2px 0; background: #607879; }
.et-tg5-phone::before, .et-tg5-phone::after { content: ""; position: absolute; left: -4px; width: 3px; height: 37px; border-radius: 2px 0 0 2px; background: #607879; }
.et-tg5-phone::before { top: 110px; }.et-tg5-phone::after { top: 160px; }
.et-tg5-screen { overflow: hidden; border: 3px solid #071316; border-radius: 39px; background: #10212e; }
.et-tg5-system { display: flex; align-items: center; justify-content: space-between; position: relative; height: 40px; padding: 0 23px; background: #192c3d; font-size: 13px; }
.et-tg5-system b { padding-top: 2px; font-weight: 650; }
.et-tg5-system > i { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; border-radius: 20px; background: #061116; }
.et-tg5-system > i::after { content: ""; position: absolute; right: 13px; top: 8px; width: 8px; height: 8px; border: 2px solid #152632; border-radius: 50%; background: #1a3148; }
.et-tg5-system > span { display: flex; gap: 6px; }
.et-tg5-system .et-tg5-icon { width: 18px; height: 18px; }
.et-tg5-chat-head { display: flex; align-items: center; gap: 10px; height: 65px; padding: 0 15px 0 10px; background: #192c3d; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.et-tg5-back { color: #99b8d0; }.et-tg5-back .et-tg5-icon { width: 19px; }
.et-tg5-avatar { display: grid; place-items: center; flex: 0 0 41px; height: 41px; border-radius: 50%; background: linear-gradient(145deg, #2bb2d4, #2374b1); color: white; font-size: 14px; font-weight: 800; letter-spacing: -.03em; }
.et-tg5-contact { display: flex; flex-direction: column; gap: 1px; }.et-tg5-contact b { font-size: 15px; font-weight: 650; }.et-tg5-contact > span { color: #92abbf; font-size: 13px; }
.et-tg5-menu { margin-left: auto; color: #98aec1; }
.et-tg5-chat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; min-height: 501px; padding: 15px 14px 20px; background-color: #0e202c; background-image: radial-gradient(ellipse at 92% 16%, rgba(58, 104, 105, .11), transparent 60%), radial-gradient(circle at 1px 1px, rgba(194, 220, 229, .055) 1px, transparent 1.5px); background-size: auto, 25px 25px; }
.et-tg5-day { align-self: center; padding: 3px 12px; border-radius: 20px; background: #213542; color: #b9cbd7; font-size: 12px; font-weight: 550; }
.et-tg5-message { position: relative; width: 100%; padding: 12px 13px 24px; color: #e7edf2; border: 1px solid rgba(151, 186, 205, .08); border-radius: 15px 15px 15px 4px; background: #1d3547; font-size: 13px; line-height: 1.5; transform-origin: left bottom; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.et-tg5.is-enhanced .et-tg5-message:not(.is-visible) { opacity: 0; transform: translateY(13px) scale(.98); visibility: hidden; }
.et-tg5-message-title { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 14px; font-weight: 700; letter-spacing: -.018em; }
.et-tg5-order-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(89, 199, 161, .14); color: #8be4c8; }.et-tg5-order-icon .et-tg5-icon { width: 14px; height: 14px; }
.et-tg5-order > p { color: #cbd9e2; }
.et-tg5-order-tags { display: flex; gap: 15px; margin-top: 8px; font-size: 12px; color: #add4c7; }.et-tg5-order-tags span { display: flex; align-items: center; gap: 3px; }.et-tg5-order-tags .et-tg5-icon { width: 14px; height: 14px; }
.et-tg5-profit { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(185, 217, 229, .11); color: #b4c7d2; }.et-tg5-profit b { color: #95ebc9; font-size: 17px; font-weight: 700; }
.et-tg5-time { position: absolute; bottom: 6px; right: 11px; color: #8da6b8; font-size: 11px; }
.et-tg5-wait-dot { display: block; flex: 0 0 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: #f6ce7b; box-shadow: 0 0 0 3px rgba(246, 206, 123, .08); }
.et-tg5-question { color: #c2d2de; font-size: 13px; }
.et-tg5-draft { margin-top: 9px; padding: 6px 9px 7px; border-left: 3px solid #73b8db; border-radius: 3px 6px 6px 3px; background: #244358; }.et-tg5-draft > span { color: #91cae9; font-size: 12px; font-weight: 650; }.et-landing .et-tg5-draft > p { margin-top: 3px; color: #e3edf3; font-size: 13px; line-height: 1.5; }
.et-tg5-keyboard { display: grid; grid-template-columns: 1.2fr .9fr .95fr; gap: 4px; margin-top: 10px; }.et-tg5-keyboard > span { display: grid; place-items: center; min-height: 33px; padding: 5px 4px; border-radius: 5px; color: #bad9ec; background: #294d65; font-size: 13px; font-weight: 650; white-space: nowrap; }.et-tg5-keyboard > .et-tg5-approve { color: #a5ead7; background: #285449; transition: background .35s, color .35s, box-shadow .35s; }
.et-tg5[data-tg-step="2"] .et-tg5-approve, .et-tg5[data-tg-step="3"] .et-tg5-approve, .et-tg5[data-tg-step="4"] .et-tg5-approve { color: #07261f; background: #88dcb9; box-shadow: 0 0 0 2px rgba(136, 220, 185, .15); }
.et-tg5-tap { position: absolute; left: 84px; bottom: 24px; pointer-events: none; opacity: 0; transform: translate(45px, 28px); transition: opacity .25s, transform .65s cubic-bezier(.2,.8,.2,1); }.et-tg5-tap > .et-tg5-icon { width: 27px; height: 27px; color: #fff; fill: #f2f8ff; stroke: #152f3d; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }.et-tg5[data-tg-step="2"] .et-tg5-tap { opacity: 1; transform: translate(0, 0); }
.et-tg5-tap > i { position: absolute; top: -10px; left: -9px; width: 32px; height: 32px; border: 1px solid #c0fff0; border-radius: 50%; opacity: 0; }.et-tg5[data-tg-step="2"] .et-tg5-tap > i { animation: et-tg5-tap-ring 1.1s .65s ease-out both; }
.et-tg5-result { display: flex; align-items: flex-start; gap: 9px; padding-top: 10px; padding-bottom: 24px; }.et-tg5-result-mark { display: grid; place-items: center; flex: 0 0 23px; height: 23px; border-radius: 50%; color: #93e8ca; background: #2c594e; }.et-tg5-result-mark .et-tg5-icon { width: 15px; height: 15px; }.et-tg5-result > div { display: grid; gap: 4px; }.et-tg5-result b { font-size: 14px; font-weight: 650; }.et-tg5-result div > span { color: #b8cfda; font-size: 13px; }
.et-tg5-typing { position: absolute; left: 25px; top: 223px; display: flex; gap: 4px; align-items: center; height: 29px; padding: 0 12px; border-radius: 12px 12px 12px 3px; background: #1d3547; opacity: 0; transition: opacity .2s; }.et-tg5-typing > i { width: 5px; height: 5px; border-radius: 50%; background: #9bc3d7; animation: et-tg5-typing 1.2s infinite; }.et-tg5-typing > i:nth-child(2) { animation-delay: .15s; }.et-tg5-typing > i:nth-child(3) { animation-delay: .3s; }.et-tg5.is-enhanced[data-tg-step="0"] .et-tg5-typing { opacity: 1; }
.et-tg5-input { display: flex; align-items: center; gap: 13px; height: 47px; padding: 0 16px; color: #8aa8bc; background: #192c3d; }.et-tg5-input > span { flex: 1; font-size: 14px; }.et-tg5-input .et-tg5-icon { width: 20px; height: 20px; }
.et-tg5-home { display: grid; place-items: center; height: 21px; background: #192c3d; }.et-tg5-home > i { width: 104px; height: 4px; border-radius: 10px; background: #bccad3; }
.et-tg5-floating { position: absolute; z-index: 2; right: -18px; bottom: 82px; display: flex; align-items: center; gap: 10px; padding: 15px 17px; border: 1px solid #42685e; border-radius: 14px; color: #e0f3eb; background: #153a34; box-shadow: 0 16px 28px rgba(0, 0, 0, .23); transform: rotate(-3deg); }.et-tg5-floating > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #9ce2c3; background: #285549; }.et-tg5-floating .et-tg5-icon { width: 19px; height: 19px; }.et-tg5-floating b { font-size: 13px; font-weight: 650; }.et-landing .et-tg5-floating p { margin-top: 3px; color: #a4c6bb; font-size: 12px; }
.et-tg5-stage-note { margin-top: 23px; color: #88a8ad; font-size: 12px; }
.et-tg5.is-paused *, .et-tg5.is-paused *::before, .et-tg5.is-paused *::after { animation-play-state: paused !important; }
@keyframes et-tg5-typing { 0%, 70%, 100% { opacity: .4; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@keyframes et-tg5-tap-ring { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1.65); opacity: 0; } }
@media (max-width: 1100px) { .et-tg5-shell { gap: 34px; }.et-tg5-floating { right: -8px; bottom: 65px; padding: 12px; }.et-tg5-orbit-plane { right: 0; top: 32px; }.et-tg5-phone { width: 355px; } }
@media (max-width: 850px) { .et-tg5 { padding: 70px 0 56px; }.et-tg5-shell { grid-template-columns: 1fr; gap: 50px; max-width: 570px; }.et-tg5-copy { max-width: 470px; }.et-landing .et-tg5 h2 { max-width: 15ch; font-size: clamp(39px, 7.5vw, 54px); }.et-tg5-benefits { gap: 19px; margin-top: 30px; }.et-tg5-control-row { margin-top: 27px; }.et-tg5-phone { width: 370px; }.et-tg5-stage { padding-top: 0; }.et-tg5-floating { right: 0; bottom: 65px; }.et-tg5-orbit-plane { right: 4px; } }
@media (max-width: 480px) { .et-tg5-shell { width: min(100% - 36px, 440px); gap: 39px; }.et-tg5-eyebrow { font-size: 12px; gap: 8px; margin-bottom: 21px; }.et-landing .et-tg5-lead { font-size: 16px; line-height: 1.7; }.et-tg5-benefit { gap: 12px; }.et-tg5-benefit > span { flex-basis: 37px; height: 37px; }.et-landing .et-tg5-benefit h3 { font-size: 15px; }.et-landing .et-tg5-benefit p { font-size: 13px; }.et-tg5-control-row { gap: 13px; }.et-tg5-demo-label, .et-landing .et-tg5-control { font-size: 12px; }.et-tg5-orbit-plane, .et-tg5-floating { display: none; }.et-tg5-phone { width: 352px; padding: 6px; border-radius: 42px; }.et-tg5-screen { border-radius: 35px; }.et-tg5-chat { padding-inline: 11px; }.et-tg5-message { padding-inline: 11px; }.et-tg5-message-title { font-size: 13px; }.et-tg5-keyboard { gap: 3px; }.et-tg5-keyboard > span { padding-inline: 3px; }.et-tg5-chat-head { gap: 8px; }.et-tg5-contact b { font-size: 14px; }.et-tg5-orbit { width: 545px; height: 545px; }.et-tg5-orbit--two { width: 450px; height: 450px; } }
@media (max-width: 360px) { .et-tg5-keyboard { grid-template-columns: 1fr 1fr; }.et-tg5-keyboard .et-tg5-approve { grid-column: 1 / -1; }.et-tg5-tap { bottom: 59px; left: 125px; } }
@media (prefers-reduced-motion: reduce) { .et-tg5 *, .et-tg5 *::before, .et-tg5 *::after { animation: none !important; transition: none !important; }.et-tg5-tap, .et-tg5-typing { display: none !important; } }