:root{
  --primary:#4919D3;
  --primary-2:#642FE2;
  --ink:#15131f;
  --muted:#6d6878;
  --soft:#f7f5ff;
  --line:#e9e5f3;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}
.navbar{background:#fff;border-bottom:1px solid var(--line)}
.navbar-brand img{height:38px;width:auto}
.nav-link{font-weight:600;color:#3e3a48!important;margin:0 .35rem}
.nav-link:hover{color:var(--primary)!important}
.btn-primary{background:var(--primary);border-color:var(--primary);border-radius:10px;font-weight:700;padding:.72rem 1.1rem}
.btn-primary:hover{background:#3710a8;border-color:#3710a8}
.btn-outline-primary{color:var(--primary);border-color:var(--primary);border-radius:10px;font-weight:700}
.btn-outline-primary:hover{background:var(--primary);border-color:var(--primary)}
.hero{padding:90px 0 75px;background:linear-gradient(180deg,#fff 0%,#faf9ff 100%)}
.hero h1{font-size:clamp(2.6rem,5vw,5rem);font-weight:800;letter-spacing:-.055em;line-height:1.02}
.hero p{font-size:1.12rem;color:var(--muted);max-width:680px}
.badge-soft{background:#eee9ff;color:var(--primary);font-weight:700;padding:.5rem .75rem;border-radius:999px}
.section{padding:80px 0}
.section-soft{background:var(--soft)}
.section-title{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.04em}
.section-sub{color:var(--muted);max-width:700px}
.card-clean{border:1px solid var(--line);border-radius:18px;background:#fff;height:100%;box-shadow:0 12px 35px rgba(55,16,168,.05)}
.card-clean:hover{transform:translateY(-3px);transition:.2s;box-shadow:0 18px 45px rgba(55,16,168,.10)}
.icon-box{width:48px;height:48px;border-radius:13px;background:#eee9ff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800}
.product-shot,.dashboard{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 25px 70px rgba(35,20,80,.12);overflow:hidden}
.mockbar{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 16px}
.dot{width:8px;height:8px;border-radius:50%;background:#d9d3e8}
.mock-body{padding:25px}
.metric{padding:20px;border:1px solid var(--line);border-radius:14px}
.metric strong{font-size:1.7rem}
.price{font-size:3rem;font-weight:800;letter-spacing:-.04em}
.feature-list{padding-left:0;list-style:none}
.feature-list li{margin:.7rem 0;color:#514c5e}
.feature-list li:before{content:"✓";color:var(--primary);font-weight:800;margin-right:.6rem}
.form-control,.form-select{padding:.8rem .9rem;border-radius:10px;border:1px solid #ddd8e9}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(73,25,211,.12)}
footer{background:#fff;border-top:1px solid var(--line);padding:45px 0;color:var(--muted)}
.footer-title{font-weight:800;color:var(--ink);margin-bottom:1rem}
.table-clean{border:1px solid var(--line);border-radius:15px;overflow:hidden}
.table-clean th{background:#f8f6ff}
.timeline{border-left:2px solid #ddd5f8;padding-left:25px}
.timeline-item{position:relative;margin-bottom:30px}
.timeline-item:before{content:"";position:absolute;left:-33px;top:4px;width:14px;height:14px;background:var(--primary);border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--primary)}
.hero-visual{min-height:430px;display:flex;align-items:center}
.app-sidebar{width:210px;border-right:1px solid var(--line);padding:18px}
.app-content{flex:1;padding:25px}
.app-nav{padding:10px 12px;border-radius:9px;color:var(--muted);font-weight:600}
.app-nav.active,.app-nav:hover{background:#eee9ff;color:var(--primary)}
.chart{height:180px;background:linear-gradient(135deg,#faf9ff,#fff);border:1px solid var(--line);border-radius:15px;position:relative;overflow:hidden}
.chart:after{content:"";position:absolute;left:8%;right:8%;bottom:28%;height:2px;background:var(--primary);transform:rotate(-7deg);box-shadow:80px 20px 0 0 var(--primary),160px -20px 0 0 var(--primary),240px 10px 0 0 var(--primary)}
@media(max-width:991px){.hero{padding:65px 0}.hero-visual{min-height:auto;margin-top:35px}.navbar-collapse{padding:15px 0}.app-sidebar{width:160px}}