body { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text-primary); background-color: var(--color-bg-primary); overflow-x: hidden; }
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.navbar { position: sticky; top: 0; z-index: 100; height: var(--nav-height); background: rgba(15,15,26,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); }
.navbar__inner { display: flex; align-items: center; gap: var(--space-8); height: 100%; }
.navbar__links { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; }
.navbar__actions { display: flex; align-items: center; gap: var(--space-3); }
.hero { padding-block: var(--space-20) var(--space-16); background: var(--color-bg-primary); overflow: hidden; position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(124,92,252,0.12) 0%, transparent 70%); pointer-events: none; }
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-16); position: relative; }
.logos { padding-block: var(--space-8); border-block: 1px solid var(--color-border); }
.logos__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.preview { padding-block: var(--space-16); background: var(--color-bg-preview); }
.preview__frame { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); }
.features { padding-block: var(--space-20); background: var(--color-bg-primary); }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.testimonial { padding-block: var(--space-8) var(--space-12); background: var(--color-bg-primary); }
.cta { padding-block: var(--space-16); background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); overflow: hidden; position: relative; }
.cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(124,92,252,0.08) 0%, transparent 70%); pointer-events: none; }
.cta__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-16); position: relative; }
.footer { padding-block: var(--space-8); background: var(--color-bg-primary); border-top: 1px solid var(--color-border); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.preview__dashboard { display: grid; grid-template-columns: 160px 1fr; min-height: 340px; background: var(--color-bg-card); }
.dash-main { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.dash-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.dash-charts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }