:root{
    --sx-bg: #0b0b10;
    --sx-surface: #12121a;
    --sx-surface-2: #171722;
    --sx-border: rgba(255,255,255,.08);
    --sx-text: #f5f7fb;
    --sx-muted: #a8adc2;
    --sx-primary: #7B2CBF;
    --sx-primary-2: #9D4EDD;
    --sx-primary-3: #C77DFF;
}
html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at top left, rgba(123,44,191,.18), transparent 28%),
        radial-gradient(circle at 85% 20%, rgba(157,78,221,.12), transparent 20%),
        linear-gradient(180deg, #09090d 0%, #0e0e14 100%);
    color: var(--sx-text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.navbar {
    backdrop-filter: blur(12px);
    background: rgba(10,10,15,.72);
    border-bottom: 1px solid var(--sx-border);
}
.navbar-brand { font-weight: 800; letter-spacing: .06em; }
.logo-core-text { color: var(--sx-primary-3); font-weight: 600; }
.logo-mark {
    width: 42px; height: 42px; position: relative; display: inline-block; margin-right: .75rem; flex-shrink: 0;
}
.logo-mark .core {
    position: absolute; width: 10px; height: 10px; left: 16px; top: 16px; border-radius: 50%;
    background: linear-gradient(135deg, var(--sx-primary-3), var(--sx-primary));
    box-shadow: 0 0 18px rgba(157,78,221,.45);
}
.logo-mark .arm {
    position: absolute; width: 8px; height: 18px; border-radius: 12px;
    background: linear-gradient(180deg, var(--sx-primary-3), var(--sx-primary));
    left: 17px; top: 2px; transform-origin: 4px 19px; box-shadow: 0 0 12px rgba(123,44,191,.25);
}
.logo-mark .a2 { transform: rotate(60deg); }
.logo-mark .a3 { transform: rotate(120deg); }
.logo-mark .a4 { transform: rotate(180deg); }
.logo-mark .a5 { transform: rotate(240deg); }
.logo-mark .a6 { transform: rotate(300deg); }

.hero { padding: 8rem 0 5rem; }
.hero-sm { padding-bottom: 3rem; }
.hero-card, .glass-card {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid var(--sx-border);
    box-shadow: 0 20px 45px rgba(0,0,0,.25);
    border-radius: 1.5rem;
}
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; color: var(--sx-primary-3);
    background: rgba(157,78,221,.12); border: 1px solid rgba(157,78,221,.24); padding: .45rem .8rem;
    border-radius: 999px; font-size: .9rem; font-weight: 600;
}
.hero h1 {
    font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; line-height: .95; letter-spacing: -.03em;
}
.hero .lead { color: var(--sx-muted); font-size: 1.1rem; max-width: 650px; }
.btn-primary {
    --bs-btn-bg: var(--sx-primary); --bs-btn-border-color: var(--sx-primary);
    --bs-btn-hover-bg: #6922a8; --bs-btn-hover-border-color: #6922a8;
    --bs-btn-active-bg: #5b1d92; --bs-btn-active-border-color: #5b1d92;
    --bs-btn-focus-shadow-rgb: 123,44,191;
}
.btn-outline-light { border-color: rgba(255,255,255,.18); color: var(--sx-text); }
.btn-outline-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); color: #fff; }
.section-title { font-weight: 800; letter-spacing: -.02em; }
.muted { color: var(--sx-muted); }

.service-card, .metric-card, .dashboard-panel {
    background: var(--sx-surface); border: 1px solid var(--sx-border); border-radius: 1.25rem; height: 100%;
}
.service-card:hover {
    transform: translateY(-4px); transition: .2s ease; border-color: rgba(157,78,221,.4); box-shadow: 0 16px 35px rgba(0,0,0,.22);
}
.icon-pill {
    width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(123,44,191,.22), rgba(199,125,255,.08));
    border: 1px solid rgba(157,78,221,.3); color: var(--sx-primary-3); font-size: 1.35rem;
}
.metric-number { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; }

.dashboard-shell {
    background: linear-gradient(180deg, #10101a 0%, #0b0b12 100%); border: 1px solid var(--sx-border);
    border-radius: 1.75rem; overflow: hidden; box-shadow: 0 28px 60px rgba(0,0,0,.30);
}
.sidebar { background: rgba(255,255,255,.02); border-right: 1px solid var(--sx-border); min-height: 100%; }
.nav-chip {
    display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-radius: .95rem; color: var(--sx-muted); text-decoration: none;
}
.nav-chip.active, .nav-chip:hover {
    color: #fff; background: rgba(157,78,221,.16); border: 1px solid rgba(157,78,221,.18);
}

.chart-bars { display: flex; align-items: end; gap: 14px; height: 180px; padding-top: 1rem; }
.chart-bars .bar {
    flex: 1; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, var(--sx-primary-3), var(--sx-primary)); opacity: .95;
}
.timeline-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.timeline-item:last-child { border-bottom: 0; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .45rem; flex-shrink: 0; }
.status-ok { background: #29c46d; box-shadow: 0 0 12px rgba(41,196,109,.35); }
.status-warn { background: #ffb020; box-shadow: 0 0 12px rgba(255,176,32,.35); }
.status-danger { background: #ff5d73; box-shadow: 0 0 12px rgba(255,93,115,.35); }

.cta-box {
    background:
        radial-gradient(circle at right top, rgba(199,125,255,.16), transparent 25%),
        linear-gradient(180deg, rgba(123,44,191,.18), rgba(123,44,191,.08));
    border: 1px solid rgba(199,125,255,.22);
    border-radius: 1.5rem;
}
.form-control, .form-select {
    min-height: 56px;
}
.form-control::placeholder, .form-select {
    color: #d7d9e2;
}
footer { color: var(--sx-muted); border-top: 1px solid var(--sx-border); }

@media (max-width: 991.98px) {
    .hero { padding-top: 7rem; }
}