:root{
  --ink:#2e2753;
  --paper:#ffffff;
  --soft:#fff8ef;
  --line:#eadfdf;
  --brand:#1479ba;
  --brand-2:#65b99e;
  --magenta:#e31c81;
  --accent:#f4a434;
  --yellow:#fae819;
  --success:#72b447;
  --warn:#e3334c;
  --purple:#7b4a94;
  --text:#695f7e;
  --sidebar:#fffdf9;
  --radius:20px;
  --shadow:0 18px 50px rgba(74,39,95,.08);
}

*{box-sizing:border-box}
*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Poppins,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(250,232,25,.18), transparent 26%),
    radial-gradient(circle at top right, rgba(227,28,129,.12), transparent 24%),
    radial-gradient(circle at bottom right, rgba(20,121,186,.1), transparent 22%),
    linear-gradient(180deg, #fffdfa 0%, #fff8ef 100%);
}

.layout{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:100vh}
.sidebar{
  background:var(--sidebar);
  color:var(--ink);
  padding:1.1rem;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  border-right:1px solid rgba(123,74,148,.12);
}

.sidebar::before{
  content:"";
  display:block;
  height:10px;
  border-radius:999px;
  margin-bottom:1rem;
  background:linear-gradient(90deg, var(--yellow), var(--accent), var(--magenta), var(--purple), var(--brand));
}

.brand{display:flex;gap:.85rem;align-items:center;margin-bottom:1rem}
.brand img{width:60px;height:60px;border-radius:16px;background:transparent;padding:0}
.brand h1{
  font:800 1.05rem Poppins,sans-serif;
  margin:.2rem 0 0;
  line-height:1.25;
  color:var(--purple);
}

.eyebrow{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.7;
}

nav{display:grid;gap:.45rem;padding-bottom:1rem}
.nav-item{
  border:0;
  text-align:left;
  color:var(--ink);
  background:transparent;
  padding:.8rem .95rem;
  border-radius:14px;
  cursor:pointer;
  font-family:Montserrat,sans-serif;
  font-weight:700;
  line-height:1.35;
  white-space:normal;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}

.nav-item:hover,.nav-item.active{
  background:linear-gradient(90deg, rgba(250,232,25,.42), rgba(244,164,52,.32));
  color:var(--purple);
  transform:translateX(2px);
}

main{padding:1.2rem 1.4rem 2rem;min-width:0}
.topbar{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  padding:.9rem 1rem;
  border:1px solid rgba(123,74,148,.1);
  border-radius:18px;
  box-shadow:var(--shadow);
}

.topbar strong{
  color:var(--ink);
  flex:1 1 260px;
  min-width:0;
  font-family:Montserrat,sans-serif;
}

.pill,.tag,.badge,.chips span,.status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
}

.pill{
  background:linear-gradient(90deg, var(--yellow), #ffd15f);
  color:var(--purple);
  padding:.35rem .8rem;
  font-weight:800;
}

.btn{
  border:0;
  background:linear-gradient(135deg, var(--magenta), var(--purple));
  color:#fffdf7;
  padding:.72rem 1rem;
  border-radius:14px;
  font-weight:800;
  font-family:Montserrat,sans-serif;
  line-height:1.2;
  cursor:pointer;
}

.btn-ghost{
  background:rgba(20,121,186,.1);
  color:var(--brand);
}

#menuBtn{
  display:none;
  border:0;
  background:rgba(20,121,186,.1);
  color:var(--brand);
  width:40px;
  height:40px;
  border-radius:12px;
}

.view{display:none;margin-top:1.05rem}
.view.active{display:block}

.hero{
  display:grid;
  grid-template-columns:1.2fr .95fr;
  gap:1rem;
  padding:1.5rem;
  background:
    radial-gradient(circle at top left, rgba(250,232,25,.55), transparent 26%),
    radial-gradient(circle at bottom right, rgba(20,121,186,.18), transparent 24%),
    linear-gradient(135deg, rgba(255,244,187,.9), rgba(255,255,255,.95) 32%, rgba(255,232,241,.92) 62%, rgba(224,243,249,.96));
  color:var(--ink);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(227,28,129,.12);
}

.hero h2{
  font:400 clamp(2.5rem, 4vw, 4rem) Bangers,cursive;
  line-height:1;
  margin:.7rem 0;
  color:var(--purple);
  letter-spacing:.02em;
}

.hero p{max-width:640px;font-size:1.02rem;color:#594f74}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.badge{
  align-self:flex-start;
  background:linear-gradient(90deg, var(--magenta), var(--warn));
  color:#fff;
  padding:.45rem .8rem;
  font-weight:800;
  font-family:Montserrat,sans-serif;
}

.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.hero-panel{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(123,74,148,.12);
  border-radius:24px;
  padding:1rem;
}

.mini-map,.kpi-grid,.cards,.split,.module-stack,.metrics-inline,.roadmap{display:grid;gap:1rem}
.mini-map{grid-template-columns:repeat(2,minmax(0,1fr))}

.map-card,.card,.phase{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-width:0;
}

.map-card{
  color:var(--ink);
  padding:1rem;
  min-height:118px;
  border:1px solid rgba(123,74,148,.08);
}

.map-card h4,.card h4,.phase h4{
  margin:0 0 .45rem;
  color:var(--ink);
  font:800 1.02rem Poppins,sans-serif;
}

.mini-map .map-card:nth-child(1){border-top:5px solid var(--yellow)}
.mini-map .map-card:nth-child(2){border-top:5px solid var(--magenta)}
.mini-map .map-card:nth-child(3){border-top:5px solid var(--brand)}
.mini-map .map-card:nth-child(4){border-top:5px solid var(--success)}

.map-card p,.card p{margin:0;line-height:1.55}

.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.9rem;
}

.section-head h3{
  margin:0 0 .25rem;
  color:var(--ink);
  font:400 2.2rem Bangers,cursive;
  letter-spacing:.03em;
}

.section-head p{margin:0;max-width:780px}
.tag{
  background:rgba(250,232,25,.4);
  color:var(--purple);
  padding:.45rem .75rem;
  font-weight:800;
  font-family:Montserrat,sans-serif;
  white-space:nowrap;
  align-self:flex-start;
}

.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.kpi-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}

.card{
  padding:1.05rem;
  border:1px solid rgba(123,74,148,.08);
  overflow:hidden;
}

.card:hover{transform:translateY(-2px);transition:transform .18s ease}

.kpi{
  padding:1rem;
  border:1px solid rgba(123,74,148,.08);
  background:rgba(255,255,255,.92);
}

.kpi .kpi-value{
  color:var(--ink);
  font:800 2rem Poppins,sans-serif;
  margin:.35rem 0;
}

.split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.detail-grid,.dashboard-detail{margin-top:1rem}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cards.four{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.list{
  margin:0;
  padding-left:1.1rem;
  display:grid;
  gap:.65rem;
}

.module-stack{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.activity-feed{
  display:grid;
  gap:.8rem;
}

.feed-item{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:.8rem;
  align-items:flex-start;
  padding:.9rem;
  border-radius:16px;
  background:#fffaf1;
  border:1px solid var(--line);
}

.feed-time{
  color:var(--magenta);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.feed-item strong{
  display:block;
  color:var(--ink);
  margin-bottom:.22rem;
}

.feed-item p{
  margin:0;
}

.bar-list{
  display:grid;
  gap:.9rem;
}

.bar-item{
  display:grid;
  gap:.55rem;
}

.bar-copy{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.8rem;
}

.bar-copy strong{
  color:var(--ink);
}

.bar-copy span{
  font-size:.88rem;
}

.bar-track{
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:#f5e7ea;
}

.bar-track span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--yellow), var(--accent), var(--magenta), var(--purple), var(--brand));
}

.stack-item{
  padding:.95rem;
  border-radius:16px;
  background:#fffaf1;
  border:1px solid var(--line);
}

.profile{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1rem;
}

.profile img{
  width:72px;
  height:72px;
  border-radius:20px;
  background:#fff8df;
  padding:.5rem;
}

.chips{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  margin-top:.6rem;
}

.chips span{
  background:#fff4db;
  color:var(--purple);
  padding:.38rem .7rem;
  font-size:.86rem;
  font-weight:700;
}

.chips span:nth-child(4n+1){background:rgba(250,232,25,.35)}
.chips span:nth-child(4n+2){background:rgba(227,28,129,.12)}
.chips span:nth-child(4n+3){background:rgba(20,121,186,.12)}
.chips span:nth-child(4n+4){background:rgba(114,180,71,.14)}

.chips.large span{
  padding:.55rem .85rem;
  font-size:.92rem;
}

.data-points{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}

.mini-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.8rem;
}

.mini-kpi{
  padding:.9rem;
  border-radius:16px;
  background:#fffaf1;
  border:1px solid var(--line);
}

.mini-kpi span{
  display:block;
  font-size:.85rem;
  margin-bottom:.35rem;
}

.mini-kpi strong{
  color:var(--ink);
  font:800 1.2rem Poppins,sans-serif;
}

.fact{
  padding:.85rem;
  border-radius:16px;
  background:#fffaf1;
  border:1px solid var(--line);
}

.fact strong{display:block;color:var(--ink);margin-bottom:.3rem}

.table-shell{
  overflow:auto;
  margin:0 -.1rem;
  padding-bottom:.15rem;
}

table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:.95rem;
}

th,td{
  text-align:left;
  padding:.8rem .65rem;
  border-bottom:1px solid #efe4e7;
  vertical-align:top;
}

th{
  color:#896f90;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.status{
  padding:.34rem .62rem;
  background:#f8ebef;
  color:#5c456d;
  font-size:.8rem;
  font-weight:700;
}

.status.ok{
  background:#edf7e2;
  color:var(--success);
}

.status.warn{
  background:#ffe7ef;
  color:var(--magenta);
}

.legal-callout{
  background:linear-gradient(135deg, #fffdf4, #fff8fd);
  border:1px solid rgba(227,28,129,.12);
}

.source-card,.campaign,.tenant,.event-card,.sales-card,.security-card,.integration-card,.ai-card{
  min-height:180px;
}

.campaign{
  color:#fff;
  background:linear-gradient(160deg, rgba(227,28,129,.95), rgba(123,74,148,.92));
}

.campaign:nth-child(2){background:linear-gradient(160deg, rgba(244,164,52,.94), rgba(227,51,76,.88))}
.campaign:nth-child(3){background:linear-gradient(160deg, rgba(20,121,186,.95), rgba(101,185,158,.9))}
.campaign h4,.campaign p{color:#fff}
.campaign .status{background:rgba(255,255,255,.18);color:#fff}

.metrics-inline{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}

.metric-inline{
  padding:.9rem;
  border-radius:16px;
  background:#fffaf1;
  border:1px solid var(--line);
}

.metric-inline strong{
  display:block;
  color:var(--ink);
  font:800 1.35rem Poppins,sans-serif;
}

.pipeline{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

.pipeline-column{
  background:#fffaf1;
  border:1px solid var(--line);
  border-radius:18px;
  padding:.9rem;
}

.pipeline-column:nth-child(1){border-top:5px solid var(--yellow)}
.pipeline-column:nth-child(2){border-top:5px solid var(--accent)}
.pipeline-column:nth-child(3){border-top:5px solid var(--magenta)}
.pipeline-column:nth-child(4){border-top:5px solid var(--brand)}

.pipeline-column ul{
  margin:.75rem 0 0;
  padding-left:1rem;
  display:grid;
  gap:.55rem;
}

.phase{
  padding:1rem;
  border:1px solid rgba(123,74,148,.08);
}

.roadmap{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:.2rem;
}

.closing{
  margin-top:1rem;
  padding:1.2rem 1.25rem;
  border-radius:24px;
  background:linear-gradient(135deg, #7b4a94, #e31c81 45%, #1479ba 100%);
  color:#fff;
  box-shadow:var(--shadow);
}

.closing h4{
  color:#fff;
  margin-top:0;
}

footer{
  text-align:center;
  color:#7d6f8f;
  padding:1.6rem 0 .3rem;
}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  background:linear-gradient(135deg, var(--purple), var(--magenta));
  color:#fff;
  padding:.9rem 1rem;
  border-radius:16px;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  max-width:360px;
}

.toast.show{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:1200px){
  .hero{grid-template-columns:1.05fr .95fr}
  .split{grid-template-columns:1fr}
  .kpi-grid.compact{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}

@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;
    left:-100%;
    width:285px;
    z-index:30;
    transition:left .2s ease;
  }
  .sidebar.open{left:0}
  #menuBtn{display:inline-flex;align-items:center;justify-content:center}
  .hero,.split,.pipeline,.cards.two,.cards.three,.cards.four,.roadmap,.data-points,.module-stack,.mini-map{
    grid-template-columns:1fr;
  }
  .section-head{flex-direction:column}
  .profile{flex-direction:column}
  .feed-item{grid-template-columns:1fr}
  .bar-copy{flex-direction:column}
  table{min-width:560px}
}