.home-lxc { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(500px,.92fr); gap: 6vw; min-height: 900px; padding: 120px 5vw; overflow: hidden; background: #392172; color: #fff; }
.lxc-intro { align-self: center; }
.lxc-intro h2 {max-width: 820px; margin: 32px 0 24px; letter-spacing: -.065em; font-family:var(--display);font-size:var(--type-h2);font-weight:600;line-height:.98;}
.lxc-subtitle { max-width: 700px; margin: 0 0 42px; color: #fff; font: 500 clamp(18px,1.45vw,23px)/1.47 var(--display); letter-spacing: -.025em; }
.lxc-copy { max-width: 720px; columns: 2; column-gap: 46px; color: #cec4df; font-size: 14px; line-height: 1.67; }
.lxc-copy p { margin: 0 0 18px; break-inside: avoid; }
.lxc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.lxc-primary { background: #fff; border-color: #fff; color: #24153f; }
.lxc-primary:hover { background: #d8cfee; border-color: #d8cfee; color: #24153f; }
.lxc-secondary { border-color: rgba(255,255,255,.55); color: #fff; }
.lxc-secondary:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.lxc-visual-wrap { align-self: center; }
.lxc-visual { position: relative; width: min(560px,42vw); aspect-ratio: 1; margin: 0 auto; }
.lxc-visual::before { content: ''; position: absolute; inset: 5%; border-radius: 50%; background: radial-gradient(circle,rgba(216,207,238,.16),rgba(216,207,238,.02) 50%,transparent 70%); }
.lxc-orbit { position: absolute; border-radius: 50%; }
.orbit-one { z-index: 1; inset: 15%; background: #816aa8; }
.orbit-two { z-index: 0; inset: 3%; background: #644d8a; }
.lxc-core { position: absolute; z-index: 2; inset: 31%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #d8cfee; color: #2e1859; box-shadow: 0 0 70px rgba(159,129,210,.27); }
.lxc-core small { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.lxc-core b { margin: 5px 0 1px; font: 600 clamp(36px,4vw,58px)/1 var(--display); letter-spacing: -.06em; }
.lxc-core span { font-size: 9px; }
.lxc-node-ring { --node-offset: -178px; position: absolute; z-index: 3; inset: 0; }
.lxc-node { position: absolute; z-index: 3; left: 50%; top: 50%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 17px; border: 1px solid rgba(255,255,255,.3); background: rgba(35,20,62,.94); backdrop-filter: blur(8px); font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: .02em; transform: translate(-50%,-50%) rotate(var(--node-angle)) translateY(var(--node-offset)) rotate(var(--node-counter)); }
.lxc-node i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #d8cfee; box-shadow: 0 0 12px #b8a3dc; }
.node-devices { --node-angle: 0deg; --node-counter: 0deg; }
.node-network { --node-angle: 51.43deg; --node-counter: -51.43deg; }
.node-data { --node-angle: 102.86deg; --node-counter: -102.86deg; }
.node-analytics { --node-angle: 154.29deg; --node-counter: -154.29deg; }
.node-apps { --node-angle: 205.71deg; --node-counter: -205.71deg; }
.node-integration { --node-angle: 257.14deg; --node-counter: -257.14deg; }
.node-notifications { --node-angle: 308.57deg; --node-counter: -308.57deg; }
.lxc-visual-note { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; color: #bcb0d1; font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.lxc-visual-note i { width: 22px; height: 1px; background: #76629b; }
@media (max-width: 1050px) { .home-lxc { grid-template-columns: 1fr; } .lxc-visual { width: min(560px,82vw); margin-top: 60px; } }
@media (max-width: 650px) { .home-lxc { padding: 85px 7vw; } .lxc-intro h2 { font-family:var(--display);font-size:var(--type-h2);font-weight:600;line-height:.98;} .lxc-copy { columns: 1; } .lxc-actions { flex-direction: column; align-items: stretch; } .lxc-actions .btn { text-align: center; } .lxc-visual { width: 86vw; transform: scale(.92); } .lxc-node { height: 40px; padding: 0 12px; gap: 7px; font-size: 11px; } .lxc-node i { width: 7px; height: 7px; } .lxc-visual-note { gap: 7px; } .lxc-visual-note i { width: 10px; } }
@media (max-width: 650px) { .lxc-node-ring { --node-offset: -145px; } }