.product-features {
    padding: 84px 32px 88px;
    background:
        radial-gradient(ellipse 48% 30% at 74% 100%, rgba(190, 193, 255, .2), transparent),
        linear-gradient(180deg, #edf3fb, #e6edf8);
    color: #243752;
}
.features-inner { max-width: 1176px; margin: auto; }
.features-heading { margin-bottom: 38px; text-align: center; }
.features-heading h2 { margin: 0 0 14px; font-size: 34px; line-height: 1.4; font-weight: 700; letter-spacing: -.03em; }
.features-heading h2 span { display: inline-block; }
.features-heading p { margin: 0; color: #718198; font-size: 16px; line-height: 1.8; }
.feature-tabs {
    position: relative;
    display: flex;
    gap: 4px;
    max-width: 960px;
    margin: 0 auto 36px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 100px;
    background: rgba(255, 255, 255, .35);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.feature-tabs::-webkit-scrollbar { display: none; }
.feature-tab {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 52px;
    padding: 10px 18px;
    border-radius: 100px;
    color: #4e617c;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease;
}
.feature-tab:hover { color: #328eed; background: rgba(255, 255, 255, .45); }
.feature-tab[aria-selected="true"] { color: #298bf0; background: #fff; box-shadow: 0 4px 14px rgba(110, 137, 171, .06); }
.feature-tab:focus-visible { outline-offset: -4px; }
.feature-panels { display: grid; gap: 24px; }
.feature-panel {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 36px;
    min-height: 448px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, .94);
    border-radius: 30px;
    background: rgba(255, 255, 255, .3);
    scroll-margin-top: 24px;
}
.feature-panel[hidden] { display: none; }
.feature-panel:focus-visible { outline: 3px solid #2589dc; outline-offset: 4px; }
.feature-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 0; }
.feature-copy h3 { margin: 0 0 23px; font-size: 30px; line-height: 1.4; font-weight: 700; letter-spacing: -.025em; }
.feature-description { margin: 0; font-size: 16px; line-height: 1.9; color: #52657f; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 24px 0 0; list-style: none; }
.feature-tags li { padding: 6px 10px; border-radius: 8px; background: rgba(217, 227, 243, .58); color: #7087a4; font-size: 13px; line-height: 1.6; }
.feature-action { margin-top: auto; padding-top: 29px; }
.feature-action .button { min-height: 48px; min-width: 150px; font-size: 15px; }
.feature-note { max-width: 410px; margin: 13px 0 0; color: #7a8da6; font-size: 12px; line-height: 1.7; }
.feature-visual {
    position: relative;
    height: 366px;
    min-width: 0;
    overflow: hidden;
    align-self: center;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 23px;
    background:
        radial-gradient(ellipse at 24% 30%, rgba(178, 222, 255, .76), transparent 68%),
        radial-gradient(ellipse at 90% 88%, rgba(181, 189, 247, .56), transparent 70%),
        #e4edfa;
}
.feature-scene { position: absolute; width: 500px; height: 336px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.feature-icon { display: inline-block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.demo-window { position: absolute; overflow: hidden; border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px; background: #fff; box-shadow: 0 18px 38px rgba(59, 93, 137, .15); color: #344965; }
.demo-dialog { width: 370px; left: 39px; top: 30px; }
.demo-dialog--single { top: -4px; }
.demo-header { display: flex; align-items: center; gap: 10px; height: 65px; padding: 0 18px; border-bottom: 1px solid #edf2f8; }
.demo-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 600; }
.demo-header .demo-avatar { width: 35px; height: 35px; }
.demo-header b { display: block; font-size: 13px; font-weight: 650; }
.demo-header small { display: block; margin-top: 4px; color: #8a9bb0; font-size: 9px; }
.demo-header em { color: #96a5b9; font-size: 11px; font-style: normal; font-weight: 400; }
.demo-header-icons { display: flex; gap: 13px; margin-left: auto; color: #7897bd; }
.demo-header-icons .feature-icon { width: 17px; height: 17px; }
.demo-online { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #46bf90; }
.demo-chat-body { padding: 13px 17px 15px; }
.demo-timestamp { margin: 0 0 12px; color: #a4b1c2; text-align: center; font-size: 9px; }
.demo-message { display: flex; align-items: flex-start; gap: 8px; margin-top: 13px; }
.demo-message.is-me { justify-content: flex-end; }
.demo-bubble { position: relative; max-width: 260px; margin: 0; padding: 11px 13px; border-radius: 4px 12px 12px; background: #eff4fb; color: #4c6380; font-size: 11px; line-height: 1.6; }
.is-me .demo-bubble, .demo-bubble.is-me { border-radius: 12px 4px 12px 12px; background: #d8edff; color: #366a9a; }
.demo-read { display: block; margin-top: 4px; color: #6293ba; text-align: right; font-size: 8px; }
.demo-file { display: flex; align-items: center; gap: 10px; width: 203px; padding: 12px; border: 1px solid #ebf0f8; border-radius: 5px 12px 12px; }
.demo-file > .feature-icon { width: 28px; height: 31px; color: #71a6dc; }
.demo-file b { display: block; font-size: 11px; font-weight: 600; }
.demo-file small { display: block; margin-top: 4px; color: #9aa8b9; font-size: 9px; }
.demo-composer { display: flex; align-items: center; gap: 11px; height: 44px; margin: 0 14px; padding: 0 4px; border-top: 1px solid #edf2f8; color: #8ba1bc; }
.demo-composer .feature-icon { width: 16px; height: 16px; }
.demo-composer span { flex: 1; color: #a6b3c4; font-size: 10px; }
.demo-floating { position: absolute; display: flex; align-items: center; gap: 10px; padding: 15px 17px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 14px; background: rgba(255, 255, 255, .95); box-shadow: 0 12px 30px rgba(63, 94, 139, .12); color: #57779f; font-size: 11px; }
.demo-floating b { display: block; font-size: 12px; font-weight: 650; color: #456181; }
.demo-floating small { display: block; margin-top: 4px; color: #95a7be; font-size: 9px; font-weight: 400; }
.demo-typing { right: 16px; top: 16px; }
.typing-dots { display: flex; gap: 3px; }
.typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: #74afe2; }
.demo-caption { left: 16px; bottom: 5px; padding: 12px 16px; }
.demo-caption > .feature-icon { width: 25px; height: 25px; color: #68a7e8; }
.demo-announcement { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 17px; background: #f0f7ff; color: #7298c1; font-size: 9px; }
.demo-announcement .feature-icon { width: 12px; height: 12px; }
.demo-announcement span { margin-left: auto; font-size: 17px; }
.demo-sender { display: block; margin-bottom: 4px; color: #9aa8bb; font-size: 9px; }
.demo-mention { color: #438de2; }
.demo-member-card { display: block; right: 4px; bottom: 13px; padding: 16px; }
.demo-member-avatars { display: flex; gap: 5px; margin: 11px 0 9px; }
.demo-member-avatars .demo-avatar { width: 28px; height: 28px; font-size: 10px; }
.demo-more-members { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #edf4fc; color: #8da3bf; font-size: 9px; }
.demo-call { position: absolute; overflow: hidden; border-radius: 23px; background: linear-gradient(150deg, #4b74aa, #31577f); color: #fff; box-shadow: 0 20px 40px rgba(43, 77, 124, .22); }
.demo-audio-call { width: 224px; height: 302px; left: 173px; top: 14px; display: flex; flex-direction: column; align-items: center; }
.demo-call-label { display: flex; align-items: center; gap: 7px; width: 100%; padding: 18px; color: #e0ebf9; font-size: 10px; }
.demo-call-label .feature-icon { width: 13px; height: 13px; }
.demo-call-avatar { display: grid; place-items: center; width: 69px; height: 69px; margin-top: 7px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 22px; background: linear-gradient(140deg, #8bb8ed, #a5a1e4); box-shadow: 0 0 0 10px rgba(255, 255, 255, .04); font-size: 26px; }
.demo-call-name { margin-top: 17px; font-size: 16px; font-weight: 500; }
.demo-call-time { margin-top: 6px; font-size: 11px; color: #adc6e3; font-variant-numeric: tabular-nums; }
.demo-call-wave { width: 117px; height: 26px; margin-top: 13px; color: #9fc9f7; stroke-width: 3; }
.demo-call-controls { display: flex; justify-content: center; gap: 19px; }
.demo-call-controls > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.demo-call-controls .feature-icon { width: 16px; height: 16px; }
.demo-call-controls .demo-hangup { background: #ed7c8c; }
.demo-hangup .feature-icon { transform: rotate(135deg); }
.demo-audio-call .demo-call-controls { margin-top: 18px; }
.demo-voice-message { left: 12px; top: 132px; padding: 16px 12px; }
.demo-voice-message b { font-size: 10px; }
.demo-voice-message p { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: #64a2dd; }
.demo-voice-message p > .feature-icon:first-child { width: 11px; height: 11px; }
.demo-message-wave { width: 100px; height: 22px; stroke-width: 3; }
.demo-voice-message p span { font-size: 9px; }
.demo-video-call { left: 106px; top: 18px; width: 300px; height: 295px; background: radial-gradient(ellipse at 50% 10%, #a0c3de, #6b97c0 70%); }
.demo-video-call .demo-call-label { position: relative; z-index: 2; background: linear-gradient(#375c8666, transparent); }
.demo-call-label > span { margin-left: auto; font-variant-numeric: tabular-nums; }
.demo-portrait { position: absolute; left: 35px; bottom: 0; width: 216px; height: 240px; }
.demo-self-video { position: absolute; top: 57px; right: 12px; width: 65px; height: 88px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .55); border-radius: 9px; background: #b3bedf; }
.demo-self-video svg { width: 100%; height: 100%; transform: translateY(8px); }
.demo-self-video small { position: absolute; top: 5px; left: 6px; font-size: 8px; }
.demo-video-call .demo-call-controls { position: absolute; right: 0; bottom: 17px; left: 0; }
.demo-video-message { left: 7px; top: 173px; padding: 10px 14px 10px 10px; }
.demo-video-thumb { display: grid; place-items: center; width: 48px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #c3dcf6, #a6b1de); color: #fff; }
.demo-video-thumb .feature-icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.demo-video-message b { font-size: 10px; }
.demo-quote { margin: -2px -4px 8px; padding: 6px 9px; border-left: 2px solid #7cadd4; border-radius: 3px; background: rgba(255, 255, 255, .5); }
.demo-quote b { display: block; margin-bottom: 2px; font-size: 9px; font-weight: 500; }
.demo-quote span { color: #91a2b7; font-size: 9px; }
.demo-message-menu { display: block; right: 6px; top: 152px; padding: 5px 0; }
.demo-message-menu > span { display: flex; gap: 9px; align-items: center; padding: 11px 18px; }
.demo-message-menu .feature-icon { width: 14px; height: 14px; color: #7ba0cd; }
.demo-notification-phone { position: absolute; left: 114px; top: 12px; width: 270px; height: 310px; padding: 24px 14px; border: 5px solid #fff; border-radius: 26px; background: linear-gradient(145deg, #b8d6f3, #cdd2ee); box-shadow: 0 20px 38px rgba(57, 87, 129, .16); }
.demo-lock-time { margin: 0 0 25px; color: #46648c; text-align: center; font-size: 38px; font-weight: 300; font-variant-numeric: tabular-nums; }
.demo-lock-time small { display: block; margin-top: 3px; font-size: 9px; font-weight: 400; color: #758daa; }
.demo-notification { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 12px 10px; margin-top: 9px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 12px; background: rgba(255, 255, 255, .75); }
.demo-app-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: #72a9e5; font-size: 13px; font-weight: 650; }
.demo-app-icon.is-purple { background: #a3a2db; }
.demo-app-icon .feature-icon { width: 17px; height: 17px; }
.demo-notification > div { flex: 1; }
.demo-notification b { display: block; font-size: 9px; font-weight: 650; }
.demo-notification em { float: right; color: #99a8bc; font-size: 7px; font-style: normal; font-weight: 400; }
.demo-notification strong { display: block; margin-top: 5px; font-size: 10px; font-weight: 550; }
.demo-notification p { margin: 4px 0 0; color: #6b809c; font-size: 9px; line-height: 1.7; }
.demo-unread { position: absolute; right: 9px; bottom: 13px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #ed99ab; color: #fff; font-size: 8px; }
.demo-bell-badge { top: 50px; right: 47px; padding: 18px; border-radius: 20px; }
.demo-bell-badge > .feature-icon { width: 29px; height: 29px; color: #649fe5; }
.demo-bell-badge > span { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: #eb9caf; color: #fff; font-size: 9px; }
.demo-mute-card { left: 18px; bottom: 15px; }
.demo-mute-card > .feature-icon { color: #8da3bf; }
.demo-switch { width: 31px; height: 18px; margin-left: 8px; border-radius: 20px; background: #a2c5ee; }
.demo-switch::after { content: ""; display: block; width: 14px; height: 14px; margin: 2px 2px 2px auto; border-radius: 50%; background: #fff; }
.demo-sync-desktop { width: 302px; left: 24px; top: 49px; }
.demo-sync-desktop .demo-header { height: 57px; }
.demo-sync-desktop .demo-chat-body { padding-bottom: 18px; }
.demo-sync-phone { position: absolute; right: 27px; top: 25px; width: 146px; height: 280px; padding: 12px 10px; border: 5px solid #fff; border-radius: 23px; background: #f6f9ff; box-shadow: 0 19px 30px rgba(53, 88, 138, .17); }
.demo-sync-phone::before { content: ""; display: block; width: 42px; height: 4px; margin: 0 auto 13px; border-radius: 10px; background: #dfe7f2; }
.demo-sync-phone-header { margin-bottom: 23px; padding-bottom: 12px; border-bottom: 1px solid #e9eff8; text-align: center; font-size: 11px; font-weight: 650; }
.demo-sync-phone-header small { display: block; margin-top: 3px; color: #9aacc2; font-size: 8px; font-weight: 400; }
.demo-sync-phone .demo-bubble { margin-top: 10px; padding: 9px; font-size: 9px; }
.demo-sync-badge { left: 288px; top: 148px; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border-radius: 50%; color: #6d9de0; }
.demo-sync-badge .feature-icon { width: 28px; height: 28px; }
.demo-sync-status { left: 36px; bottom: 6px; padding: 12px 15px; }
.demo-sync-status .feature-icon { width: 16px; height: 16px; color: #52b798; }

@media (max-width: 1100px) {
    .feature-panel { padding: 32px; gap: 24px; }
    .feature-copy h3 { font-size: 27px; }
    .feature-visual { height: 338px; }
    .feature-scene { transform: translate(-50%, -50%) scale(.85); }
}
@media (max-width: 1000px) {
    .product-features { padding: 64px 28px; }
    .features-heading h2 { font-size: 30px; }
    .feature-tabs { gap: 2px; }
    .feature-tab { padding: 10px 16px; font-size: 14px; }
    .feature-panel { grid-template-columns: 1fr; padding: 30px; gap: 29px; }
    .feature-copy { padding: 0; }
    .feature-visual { height: 360px; }
    .feature-scene { transform: translate(-50%, -50%); }
}
@media (max-width: 640px) {
    .product-features { padding: 52px 20px; }
    .features-heading { margin-bottom: 27px; }
    .features-heading h2 { max-width: 320px; margin: 0 auto 12px; font-size: 26px; }
    .features-heading p { font-size: 14px; }
    .feature-tabs { margin-bottom: 24px; padding: 5px; }
    .feature-tab { flex: none; min-height: 43px; padding: 9px 18px; }
    .feature-panel { min-height: 0; padding: 24px 19px 19px; gap: 25px; border-radius: 23px; }
    .feature-copy h3 { margin-bottom: 18px; font-size: 24px; }
    .feature-description { font-size: 14px; line-height: 1.9; }
    .feature-tags { margin-top: 19px; gap: 7px; }
    .feature-tags li { padding: 5px 8px; font-size: 11px; }
    .feature-action { padding-top: 23px; }
    .feature-note { font-size: 11px; }
    .feature-visual { height: 235px; border-radius: 16px; }
    .feature-scene { transform: translate(-50%, -50%) scale(.6); }
}
@media (max-width: 370px) {
    .feature-copy h3 { font-size: 22px; }
    .feature-scene { transform: translate(-50%, -50%) scale(.54); }
}
@media (max-width: 340px) {
    .feature-scene { transform: translate(-50%, -50%) scale(.46); }
}