:root{
  --background:#f8f9fd;
  --surface:#ffffff;
  --surface-soft:#fbfbff;
  --ink:#12163d;
  --muted:#6f7890;
  --indigo:#2f2b6b;
  --violet:#6d4de6;
  --lavender:#9f86f5;
  --teal:#2ccfc3;
  --line:#e7e9f2;
  --shadow:0 10px 35px rgba(32,35,82,.07);
}
body{background:var(--background);color:var(--ink)}
.app-shell{grid-template-columns:210px 1fr;background:
radial-gradient(circle at 28% 0,rgba(159,134,245,.11),transparent 25%),
radial-gradient(circle at 100% 20%,rgba(44,207,195,.07),transparent 20%),
#f9faff}
.sidebar{background:rgba(255,255,255,.92);color:var(--ink);border-right:1px solid var(--line);padding:18px 14px;box-shadow:6px 0 30px rgba(43,48,100,.035)}
.sidebar .brand{padding:0 6px 20px}.sidebar .brand strong{font-size:14px}.sidebar .brand small{color:#7f879d}
.mark{background:conic-gradient(from 20deg,#6d4de6,#9f86f5,#2ccfc3,transparent 76%);box-shadow:none}
.mark:before{background:#fff}.mark i{box-shadow:0 0 10px rgba(44,207,195,.8)}
.nav button{color:#4f5871;padding:10px 11px;border-radius:10px}
.nav button:hover,.nav button.active{color:#5b3dd2;background:linear-gradient(90deg,#f0edff,#faf9ff)}
.nav .icon{color:#5e4acb}.plan{background:#fafaff;border:1px solid var(--line)}.plan small,.user small{color:#8a92a7}.user{color:var(--ink)}
.topbar{height:64px;background:rgba(255,255,255,.8);border-bottom:1px solid var(--line);backdrop-filter:blur(20px);padding:0 22px}
.search{max-width:360px}.search input,.field input,.field select,.field textarea,.brand-select,.filter{background:#fff;border-color:#e4e6ef;box-shadow:0 2px 9px rgba(30,32,75,.025)}
.content{padding:22px 24px;max-width:1440px}.page-head{margin-bottom:17px}.page-head h1{font-size:28px;margin:4px 0 6px}.page-head p{font-size:12px}.eyebrow{font-size:8px;color:#7b8397}
.card{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:16px;backdrop-filter:none}
.metrics{gap:10px;margin-bottom:10px}.metric{min-height:104px}.metric .label{font-size:8px}.metric .value{font-size:24px;margin:11px 0 6px}.metric:after{display:none}.spark{height:14px}.delta{font-size:8px}
.dashboard-grid{gap:10px}.panel-title{margin-bottom:12px}.panel-title h3{font-size:12px}.panel-title p{font-size:8px}.ring{width:92px;height:92px}.ring:after{inset:10px}.ring b{font-size:20px}.progress-row{grid-template-columns:92px 1fr;gap:16px}.stats-inline b{font-size:16px}.event{padding:7px 0}.event small,.event time{font-size:8px}.dot{width:23px;height:23px}.event:not(:last-child):after{left:11px;top:28px}.chart{height:185px}.campaign-row{padding:8px}.path-node b{font-size:8px}.path-node small{font-size:7px}
.primary{background:linear-gradient(135deg,#352487,#5e3ed3);box-shadow:0 8px 18px rgba(88,59,205,.22);border-radius:9px}.secondary{background:#fff;border:1px solid #d8dbea;border-radius:9px}.icon-btn{border-radius:9px}
.pill{padding:5px 8px;font-size:8px}.summary-box{border-radius:10px;background:#fff}.summary-box strong{font-size:17px}
.landing{background:#f8f9fd;color:var(--ink)}
.landing-nav{position:absolute;color:var(--ink);height:72px;padding:0 3vw;background:transparent}
.hero{min-height:710px;padding:115px 3vw 45px;grid-template-columns:.92fr 1.08fr;background:
radial-gradient(circle at 78% 40%,rgba(115,84,232,.20),transparent 22%),
radial-gradient(circle at 84% 66%,rgba(44,207,195,.22),transparent 18%),
linear-gradient(135deg,#ffffff 0%,#fbfbff 58%,#eef8ff 100%);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:3%;top:12%;width:44%;height:76%;background:
radial-gradient(ellipse at 68% 35%,rgba(151,125,246,.26),transparent 22%),
radial-gradient(ellipse at 44% 55%,rgba(44,207,195,.18),transparent 16%),
repeating-radial-gradient(ellipse at 55% 50%,transparent 0 10px,rgba(117,84,232,.11) 11px 12px,transparent 13px 24px);filter:blur(.2px);transform:rotate(-12deg);opacity:.75;pointer-events:none}
.hero>div{position:relative;z-index:2}.hero h1{font-size:clamp(48px,5.5vw,78px);color:#11153d;margin-top:18px}.hero h1 span{background:linear-gradient(90deg,#7457e8,#a487f3);-webkit-background-clip:text;color:transparent}.hero p{color:#3d4662;max-width:460px;font-size:14px;line-height:1.7}.hero .eyebrow{color:#757e94!important}.hero-actions{margin-top:22px}
.visual{min-height:400px;align-items:end;padding-bottom:20px}.orb{width:300px;height:300px;opacity:.24;filter:blur(3px);background:conic-gradient(from 40deg,transparent,#7256e8,#9f86f5,#2ccfc3,transparent 70%);box-shadow:0 0 80px rgba(109,77,230,.18)}.orb:before{background:#f8fbff}.flow-cards{align-items:center;gap:14px}.flow-card{width:118px;height:122px;background:rgba(255,255,255,.82);border:1px solid #e2e5ef;box-shadow:0 12px 25px rgba(42,46,95,.10);color:var(--ink);backdrop-filter:blur(10px)}.flow-card span{color:#6d758b}.connector{border-color:#8580da}
.section-dark{background:#fff;color:var(--ink);padding:42px 3vw 60px;border-top:1px solid var(--line)}.section-dark h2{font-size:27px}.steps{gap:10px}.dark-step{background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px rgba(35,39,82,.05);color:var(--ink);border-radius:12px;padding:15px}.dark-step p{color:#70788d}.dark-icon{color:#674bd8;margin-bottom:15px}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{left:-230px;width:210px}.sidebar.open{left:0}.hero{grid-template-columns:1fr;padding:110px 22px 40px}.hero:after{width:80%;right:-25%;opacity:.42}.visual{min-height:330px}.landing-nav{padding:0 20px}}
@media(max-width:650px){.content{padding:16px}.page-head h1{font-size:25px}.flow-cards{flex-direction:row;overflow:auto;width:100%;justify-content:flex-start;padding:10px}.connector{min-width:24px}.metrics{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:48px}.hero p{font-size:13px}.section-dark h2{font-size:24px}}