.home-features-v8 { padding-top: 110px; scroll-margin-top: 105px; }
.portal-download-mark { display: grid; place-items: center; width: 100%; height: 54px; overflow: hidden; }
.portal-download-mark img { display: block; width: 76px; height: 76px; max-width: 76px; object-fit: contain; opacity: .24; }
.home-features-head-v8 { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 48px; align-items: end; margin-bottom: 38px; }
.home-features-head-v8 .section-title { max-width: 720px; margin: 0; }
.home-features-head-v8 .section-title h2 { max-width: 680px; margin-bottom: 18px; font-size: 3.8rem; letter-spacing: 0; }
.home-features-head-v8 .lead { margin-bottom: 0; }
.home-features-summary-v8 { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: center; padding: 20px 0 4px 22px; border-left: 1px solid rgba(255,255,255,.13); }
.home-features-summary-v8 strong { grid-row: span 2; color: #fff; font-size: 2.75rem; line-height: 1; }
.home-features-summary-v8 span { color: #dce2ee; font-size: .78rem; font-weight: 800; }
.home-features-summary-v8 i { height: 3px; border-radius: 3px; background: linear-gradient(90deg,#35d8f4,#45eeb0); }
.home-features-summary-v8 small { grid-column: 2; color: var(--muted); font-size: .68rem; }
.home-feature-grid-v8 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.home-feature-v8 { --feature-accent: #35d8f4; position: relative; display: flex; flex-direction: column; min-height: 245px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--feature-accent) 28%,rgba(255,255,255,.08)); border-radius: 8px; background: linear-gradient(145deg,color-mix(in srgb,var(--feature-accent) 7%,#10131e),#0a0d16 72%); box-shadow: 0 18px 42px rgba(0,0,0,.2); transition: border-color .2s,transform .2s,box-shadow .2s; }
.home-feature-v8::before { content: ""; position: absolute; top: 0; left: 24px; width: 58px; height: 2px; background: var(--feature-accent); box-shadow: 0 0 15px var(--feature-accent); }
.home-feature-v8:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--feature-accent) 58%,transparent); box-shadow: 0 22px 48px rgba(0,0,0,.3); }
.home-feature-v8[data-accent="amber"] { --feature-accent: #f6be4f; }
.home-feature-v8[data-accent="green"] { --feature-accent: #45eeb0; }
.home-feature-v8[data-accent="blue"] { --feature-accent: #5f8cff; }
.home-feature-v8[data-accent="purple"] { --feature-accent: #a96cff; }
.home-feature-v8[data-accent="pink"] { --feature-accent: #f06daa; }
.home-feature-top-v8 { display: flex; align-items: center; justify-content: space-between; }
.home-feature-top-v8 .icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in srgb,var(--feature-accent) 35%,transparent); border-radius: 8px; color: var(--feature-accent); background: color-mix(in srgb,var(--feature-accent) 10%,transparent); }
.home-feature-top-v8 .icon svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-feature-top-v8 > span { color: color-mix(in srgb,var(--feature-accent) 55%,#667085); font-size: .68rem; font-weight: 900; }
.home-feature-v8 h3 { margin: 22px 0 10px; color: #f5f7fb; font-size: 1.08rem; letter-spacing: 0; }
.home-feature-v8 p { margin: 0 0 22px; color: #98a2b5; font-size: .81rem; line-height: 1.65; }
.home-feature-tags-v8 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.home-feature-tags-v8 span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 6px; color: #8791a5; background: rgba(255,255,255,.025); font-size: .61rem; font-weight: 750; }
.feature-demo-v9 { position: relative; flex: 0 0 138px; min-height: 138px; margin: auto 0 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(3,6,13,.5); }
.demo-toolbar-v9 { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 32px; padding: 0 11px; border-bottom: 1px solid rgba(255,255,255,.065); color: #8e98aa; font-size: .55rem; font-weight: 850; letter-spacing: .06em; }
.demo-toolbar-v9 span { display: flex; align-items: center; gap: 6px; color: #dbe2ef; }
.demo-toolbar-v9 i { width: 6px; height: 6px; border-radius: 50%; background: #45eeb0; box-shadow: 0 0 9px rgba(69,238,176,.72); }

/* Automation */
.automation-demo-v9 { display: grid; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr); align-content: center; gap: 7px; padding: 18px 12px 28px; }
.flow-node-v9 { display: grid; align-content: center; gap: 6px; min-width: 0; min-height: 66px; padding: 10px; border: 1px solid color-mix(in srgb,var(--feature-accent) 30%,rgba(255,255,255,.07)); border-radius: 6px; background: color-mix(in srgb,var(--feature-accent) 7%,#0b1019); }
.flow-node-v9 small { color: var(--feature-accent); font-size: .48rem; font-weight: 900; letter-spacing: .08em; }
.flow-node-v9 strong { overflow: hidden; color: #e8edf7; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.flow-link-v9 { position: relative; align-self: center; height: 1px; background: var(--feature-accent); box-shadow: 0 0 8px color-mix(in srgb,var(--feature-accent) 65%,transparent); }
.flow-link-v9::after { content: ""; position: absolute; top: -3px; right: -1px; width: 6px; height: 6px; border-top: 1px solid var(--feature-accent); border-right: 1px solid var(--feature-accent); transform: rotate(45deg); }
.flow-status-v9 { position: absolute; right: 12px; bottom: 8px; display: flex; align-items: center; gap: 5px; color: #7f899b; font-size: .51rem; }
.flow-status-v9 span { width: 6px; height: 6px; border-radius: 50%; background: #45eeb0; }

/* Alerts */
.alert-demo-v9 { display: grid; grid-template-rows: 32px 1fr auto; }
.alert-event-v9 { display: grid; grid-template-columns: 35px minmax(0,1fr); align-items: center; gap: 10px; margin: 12px; padding: 10px; border-left: 2px solid var(--feature-accent); background: color-mix(in srgb,var(--feature-accent) 8%,rgba(255,255,255,.015)); }
.alert-event-v9 > b { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb,var(--feature-accent) 42%,transparent); border-radius: 50%; color: var(--feature-accent); font-size: 1.1rem; }
.alert-event-v9 div { min-width: 0; }
.alert-event-v9 small,.alert-event-v9 strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-event-v9 small { margin-bottom: 4px; color: var(--feature-accent); font-size: .48rem; font-weight: 900; letter-spacing: .08em; }
.alert-event-v9 strong { color: #edf0f7; font-size: .65rem; }
.alert-timeline-v9 { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 0 12px 10px; }
.alert-timeline-v9 span { height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); }
.alert-timeline-v9 .is-complete { background: var(--feature-accent); }

/* Moderation */
.moderation-demo-v9 { display: grid; grid-template-rows: 1fr 1fr auto; padding: 9px 11px; }
.chat-line-v9 { display: grid; grid-template-columns: 65px minmax(0,1fr) auto; align-items: center; gap: 7px; min-width: 0; border-bottom: 1px solid rgba(255,255,255,.055); font-size: .6rem; }
.chat-line-v9 b { overflow: hidden; color: #e6eaf3; text-overflow: ellipsis; white-space: nowrap; }
.chat-line-v9 span { overflow: hidden; color: #8c96a8; text-overflow: ellipsis; white-space: nowrap; }
.chat-line-v9.is-blocked { margin: 3px -4px; padding: 0 4px; border: 1px solid rgba(240,109,170,.15); border-radius: 5px; background: rgba(240,109,170,.05); }
.chat-line-v9.is-blocked span { color: #636d7e; text-decoration: line-through; }
.chat-line-v9 i { color: #f08baa; font-size: .48rem; font-style: normal; font-weight: 800; }
.moderation-action-v9 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; color: #7c8799; font-size: .52rem; }
.moderation-action-v9 strong { color: #45eeb0; font-size: .52rem; }

/* OBS */
.obs-demo-v9 { display: grid; grid-template-rows: 32px 1fr auto; }
.obs-scenes-v9 { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 5px; align-items: stretch; padding: 10px; }
.obs-scenes-v9 strong,.obs-scenes-v9 span { display: grid; place-items: center; min-width: 0; padding: 7px 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.065); border-radius: 5px; color: #7f899a; background: rgba(255,255,255,.018); font-size: .52rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.obs-scenes-v9 strong { border-color: color-mix(in srgb,var(--feature-accent) 48%,transparent); color: #e8ecf5; background: color-mix(in srgb,var(--feature-accent) 10%,transparent); }
.obs-source-v9 { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; padding: 9px 11px; border-top: 1px solid rgba(255,255,255,.055); color: #8993a4; font-size: .52rem; }
.obs-source-v9 i { position: relative; width: 20px; height: 10px; border-radius: 7px; background: #343b4a; }
.obs-source-v9 i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: #7c8698; }
.obs-source-v9 i.is-on { background: color-mix(in srgb,var(--feature-accent) 36%,#303849); }
.obs-source-v9 i.is-on::after { left: 12px; background: var(--feature-accent); }

/* AI */
.ai-demo-v9 { display: grid; align-content: center; gap: 7px; padding: 11px; }
.ai-message-v9 { display: grid; gap: 3px; width: 82%; padding: 7px 9px; border-radius: 6px; background: rgba(255,255,255,.035); }
.ai-message-v9.is-user { justify-self: end; border-right: 2px solid #5f8cff; }
.ai-message-v9.is-bot { border-left: 2px solid var(--feature-accent); background: color-mix(in srgb,var(--feature-accent) 7%,rgba(255,255,255,.02)); }
.ai-message-v9 small { color: #7f899b; font-size: .46rem; font-weight: 800; }
.ai-message-v9 span { overflow: hidden; color: #dce1ec; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.ai-wave-v9 { display: flex; align-items: center; justify-content: center; gap: 3px; height: 13px; }
.ai-wave-v9 i { width: 2px; height: 5px; background: var(--feature-accent); animation: ai-wave-v9 1.25s ease-in-out infinite; }
.ai-wave-v9 i:nth-child(2),.ai-wave-v9 i:nth-child(6) { height: 9px; animation-delay: .12s; }
.ai-wave-v9 i:nth-child(3),.ai-wave-v9 i:nth-child(5) { height: 12px; animation-delay: .24s; }
.ai-wave-v9 i:nth-child(4) { height: 7px; animation-delay: .36s; }
@keyframes ai-wave-v9 { 50% { transform: scaleY(.45); opacity: .55; } }

/* Games */
.games-demo-v9 { display: grid; grid-template-rows: 34px repeat(3,1fr); padding: 8px 11px; }
.game-selector-v9,.rank-line-v9 { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.game-selector-v9 { padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.07); }
.game-selector-v9 strong { color: #e7eaf2; font-size: .6rem; }
.game-selector-v9 span { color: var(--feature-accent); font-size: .48rem; font-weight: 850; text-transform: uppercase; }
.rank-line-v9 { grid-template-columns: 20px minmax(0,1fr) auto; border-bottom: 1px solid rgba(255,255,255,.045); font-size: .56rem; }
.rank-line-v9:last-child { border-bottom: 0; }
.rank-line-v9 i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; color: #a6afbf; background: rgba(255,255,255,.05); font-style: normal; font-weight: 900; }
.rank-line-v9:nth-child(2) i { color: #090611; background: linear-gradient(145deg,#f06daa,#a96cff); }
.rank-line-v9 span { overflow: hidden; color: #aeb6c5; text-overflow: ellipsis; white-space: nowrap; }
.rank-line-v9 strong { color: #f0f2f7; font-size: .58rem; }
@media(max-width:900px) { .home-features-head-v8 { grid-template-columns: 1fr; gap: 20px; } .home-features-summary-v8 { width: 220px; } .home-feature-grid-v8 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .home-features-v8 { padding-top: 78px; } .home-features-head-v8 .section-title h2 { font-size: 2.45rem; } .home-feature-grid-v8 { grid-template-columns: 1fr; } .home-feature-v8 { min-height: 220px; } }