.demo-body {
  min-height: 100vh;
  overflow-x: hidden;
  background: #f5f7f4;
}

.demo-status-banner {
  position: relative;
  z-index: 40;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  color: white;
  background: var(--coral);
  font-size: 9px;
}
.demo-status-banner > span { width:7px; height:7px; border-radius:50%; background:white; box-shadow:0 0 0 5px rgba(255,255,255,.16); animation:hintPulse 1.8s infinite; }
.demo-status-banner strong { font-size:10px; }
.demo-status-banner small { color:#ffe9e4; }
.demo-status-banner a { margin-left:12px; color:white; font-weight:800; text-decoration:none; }

.demo-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
}

.demo-sidebar {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 18px 18px;
  border-right: 1px solid var(--line);
  background: rgba(253, 252, 249, .96);
  backdrop-filter: blur(14px);
}

.demo-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 24px;
}

.demo-brand-row .brand { font-size: 19px; }

.demo-pill {
  padding: 4px 7px;
  border-radius: 6px;
  color: var(--coral);
  background: var(--coral-soft);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.demo-community {
  display: grid;
  grid-template-columns: 39px 1fr;
  gap: 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.demo-community div { display: grid; }
.demo-community small, .demo-community span { color: var(--muted); font-size: 9px; }
.demo-community strong { font-size: 11px; }

.demo-nav {
  display: grid;
  gap: 4px;
  margin-top: 18px;
}

.demo-nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 25px 1fr 15px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 9px;
  color: #657672;
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  transition: .2s ease;
}

.demo-nav-item > span { font-size: 16px; text-align: center; }
.demo-nav-item i { opacity: 0; font-style: normal; transition: .2s; }
.demo-nav-item:hover, .demo-nav-item.active { color: var(--green); background: var(--mint-soft); transform: translateX(3px); }
.demo-nav-item:hover i, .demo-nav-item.active i { opacity: 1; }
.demo-nav-item.active::before { content:""; position:absolute; left:-18px; width:3px; height:21px; border-radius:3px; background:var(--coral); }
.demo-nav-item.alma-link { margin-top: 8px; color: white; background: var(--green-dark); }
.demo-nav-item.alma-link span { color: #ef9c87; }

.demo-sidebar-footer { display: grid; gap: 12px; margin-top: auto; }
.demo-guide-button {
  display: grid;
  grid-template-columns: 31px 1fr;
  gap: 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid #f0d0c8;
  border-radius: 12px;
  color: var(--ink);
  background: #fff7f4;
  text-align: left;
}
.demo-guide-button > span { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:white; background:var(--coral); font-size:9px; }
.demo-guide-button strong, .demo-guide-button small { display:block; }
.demo-guide-button strong { font-size:10px; }
.demo-guide-button small { margin-top:2px; color:var(--muted); font-size:8px; }
.demo-back { color:var(--muted); text-decoration:none; font-size:9px; text-align:center; }

.demo-main { min-width: 0; }
.demo-topbar {
  position: sticky;
  z-index: 15;
  top: 0;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 250, 246, .88);
  backdrop-filter: blur(15px);
}
.demo-topbar p { margin: 0 0 4px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:1px; }
.demo-topbar h1 { margin:0; font:700 19px "Manrope"; letter-spacing:-.5px; }
.demo-mobile-brand { display:none; }
.demo-top-actions { display:flex; align-items:center; gap:10px; }
.role-switch { display:flex; padding:4px; border:1px solid var(--line); border-radius:11px; background:white; }
.role-switch button { padding:8px 12px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:9px; font-weight:800; transition:.25s; }
.role-switch button.active { color:white; background:var(--green-dark); box-shadow:0 5px 13px rgba(16,47,44,.18); }
.demo-notification { position:relative; width:39px; height:39px; border:1px solid var(--line); border-radius:10px; background:white; }
.demo-notification i { position:absolute; top:7px; right:7px; width:6px; height:6px; border-radius:50%; background:var(--coral); }

.demo-content { max-width: 1360px; margin: auto; padding: 30px 34px 60px; }
.demo-screen { animation: screenIn .45s ease both; }
@keyframes screenIn { from { opacity:0; transform:translateY(8px); } }

.demo-welcome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 220px;
  overflow: hidden;
  padding: 35px 42px;
  border-radius: 20px;
  color: white;
  background: radial-gradient(circle at 85% 10%,rgba(91,159,137,.3),transparent 25%),linear-gradient(125deg,#102f2c,#1b554b);
  box-shadow: 0 16px 45px rgba(22,54,49,.12);
}
.demo-welcome::after { content:""; position:absolute; right:-40px; bottom:-100px; width:310px; height:310px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 50px rgba(255,255,255,.025),0 0 0 100px rgba(255,255,255,.02); }
.demo-welcome-copy { position:relative; z-index:2; }
.demo-welcome h2 { margin:10px 0; font:700 clamp(25px,3vw,37px)/1.1 "Manrope"; letter-spacing:-1.4px; }
.demo-welcome p { max-width:530px; margin:0; color:#abc5be; font-size:11px; line-height:1.6; }
.explore-hint { display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:#f0a18e; font-size:10px; font-weight:800; }
.explore-hint i { display:grid; place-items:center; width:20px; height:20px; border:1px solid rgba(240,161,142,.5); border-radius:50%; font-style:normal; animation:hintPulse 1.8s infinite; }
@keyframes hintPulse { 50% { transform:scale(1.15); box-shadow:0 0 0 7px rgba(231,126,102,.1); } }
.demo-score { position:relative; z-index:2; width:145px; height:145px; flex:0 0 145px; }
.demo-score { padding:0; border:0; background:transparent; }
.demo-score svg { width:100%; height:100%; transform:rotate(-90deg); }
.demo-score circle { fill:none; stroke:rgba(255,255,255,.1); stroke-width:7; }
.demo-score .score-progress { stroke:var(--coral); stroke-linecap:round; stroke-dasharray:302; stroke-dashoffset:48; animation:drawScore 1.3s ease both; }
@keyframes drawScore { from { stroke-dashoffset:302; } }
.demo-score div { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.demo-score strong { font:800 31px "Manrope"; }
.demo-score span { color:#aac4bd; font-size:8px; text-transform:uppercase; letter-spacing:1px; }

.demo-section-head { display:flex; align-items:end; justify-content:space-between; margin:28px 0 14px; }
.demo-section-head h2 { margin:5px 0 0; font:700 18px "Manrope"; letter-spacing:-.5px; }
.click-note { color:var(--muted); font-size:9px; }
.demo-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.interactive-card {
  position:relative;
  padding:19px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:white;
  text-align:left;
  box-shadow:0 5px 18px rgba(22,54,49,.03);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.interactive-card::after { content:"→"; position:absolute; right:17px; bottom:17px; color:var(--coral); font-weight:800; opacity:0; transform:translateX(-5px); transition:.25s; }
.interactive-card:hover { transform:translateY(-5px); border-color:#b9d2ca; box-shadow:0 15px 35px rgba(22,54,49,.1); }
.interactive-card:hover::after { opacity:1; transform:none; }
.interactive-card .metric-icon { transition:.25s; }
.interactive-card:hover .metric-icon { color:white; background:var(--green); transform:rotate(-7deg) scale(1.08); }
.interactive-card strong { display:block; margin-top:16px; font:800 21px "Manrope"; }
.interactive-card p { margin:2px 0 0; color:var(--muted); font-size:9px; }
.interactive-card small { display:block; margin-top:10px; color:#4d8c72; font-size:8px; font-weight:700; }

.demo-lower-grid { display:grid; grid-template-columns:1.3fr .8fr; gap:14px; margin-top:14px; }
.demo-panel { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:white; }
.demo-panel-head { display:flex; align-items:center; justify-content:space-between; padding:19px 21px; border-bottom:1px solid var(--line); }
.demo-panel-head h3 { margin:4px 0 0; font:700 15px "Manrope"; }
.demo-panel-head button { border:0; color:var(--green); background:none; font-size:9px; font-weight:800; }
.demo-row {
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:11px;
  align-items:center;
  width:100%;
  padding:13px 20px;
  border:0;
  border-bottom:1px solid #eef1ee;
  background:white;
  text-align:left;
  transition:.2s;
}
.demo-row:last-child { border:0; }
.demo-row:hover { padding-left:24px; background:var(--mint-soft); }
.demo-row strong { display:block; font-size:10px; }
.demo-row small { color:var(--muted); font-size:8px; }
.demo-row > em { color:var(--green); font-size:9px; font-style:normal; font-weight:800; }
.demo-calendar { padding:9px 20px; }
.demo-event { display:grid; grid-template-columns:41px 1fr; gap:11px; padding:13px 0; border-bottom:1px solid var(--line); }
.demo-event:last-child { border:0; }
.demo-event time { padding-right:10px; border-right:1px solid var(--line); color:var(--coral); font:800 17px "Manrope"; text-align:center; }
.demo-event time small { display:block; color:var(--muted); font:700 7px "DM Sans"; }
.demo-event strong { display:block; font-size:10px; }
.demo-event span { color:var(--muted); font-size:8px; }

.resident-demo-hero { display:grid; grid-template-columns:1.35fr .65fr; gap:14px; }
.resident-demo-balance { padding:30px 34px; border-radius:20px; color:white; background:linear-gradient(130deg,#102f2c,#205b50); }
.resident-demo-balance p { margin:0; color:#a9c4bd; font-size:10px; }
.resident-demo-balance h2 { margin:7px 0; font:800 34px "Manrope"; }
.resident-demo-balance small { display:block; margin-bottom:20px; color:#f0a18e; }
.resident-demo-alert { padding:26px; border:1px solid #f1d1c9; border-radius:20px; background:#fff5f2; }
.resident-demo-alert h3 { margin:14px 0 5px; font:700 15px "Manrope"; }
.resident-demo-alert p { margin:0 0 16px; color:#776b68; font-size:9px; line-height:1.55; }
.resident-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:14px; }

.feature-backdrop { position:fixed; z-index:49; inset:0; background:rgba(11,34,31,.45); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s; }
.feature-backdrop.visible { opacity:1; }
.feature-drawer {
  position:fixed;
  z-index:50;
  top:0;
  right:0;
  width:min(470px,100%);
  height:100vh;
  overflow:auto;
  padding:38px;
  background:#fff;
  box-shadow:-30px 0 70px rgba(11,34,31,.2);
  transform:translateX(105%);
  transition:transform .42s cubic-bezier(.22,.85,.3,1);
}
.feature-drawer.open { transform:none; }
.drawer-close { position:absolute; top:20px; right:20px; width:36px; height:36px; border:1px solid var(--line); border-radius:10px; background:white; font-size:20px; }
.drawer-visual {
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:190px;
  margin-bottom:30px;
  overflow:hidden;
  border-radius:17px;
  color:white;
  background:radial-gradient(circle at 65% 35%,rgba(255,255,255,.14),transparent 24%),linear-gradient(135deg,var(--green-dark),var(--green));
  font:800 55px "Manrope";
}
.drawer-visual::before,.drawer-visual::after { content:""; position:absolute; width:150px; height:150px; border:1px solid rgba(255,255,255,.12); border-radius:50%; animation:orbit 9s linear infinite; }
.drawer-visual::after { width:230px; height:230px; animation-direction:reverse; }
.drawer-visual span { position:relative; z-index:2; animation:float 4s ease-in-out infinite; }
@keyframes orbit { to { transform:rotate(360deg); } }
.feature-drawer h2 { margin:7px 0 10px; font:800 27px/1.1 "Manrope"; letter-spacing:-1px; }
.drawer-description { color:var(--muted); font-size:11px; line-height:1.7; }
.drawer-flow { margin:25px 0; padding:20px; border-radius:14px; background:#f6f8f5; }
.drawer-flow h3 { margin:0 0 15px; font:700 12px "Manrope"; }
.drawer-step { display:grid; grid-template-columns:25px 1fr; gap:10px; align-items:start; padding:8px 0; opacity:0; transform:translateX(12px); }
.feature-drawer.open .drawer-step { animation:stepIn .35s forwards; }
.feature-drawer.open .drawer-step:nth-child(2) { animation-delay:.12s; }
.feature-drawer.open .drawer-step:nth-child(3) { animation-delay:.22s; }
.feature-drawer.open .drawer-step:nth-child(4) { animation-delay:.32s; }
@keyframes stepIn { to { opacity:1; transform:none; } }
.drawer-step i { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:white; background:var(--coral); font-size:8px; font-style:normal; font-weight:800; }
.drawer-step strong { display:block; font-size:10px; }
.drawer-step p { margin:2px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
.drawer-benefit { display:grid; grid-template-columns:30px 1fr; gap:11px; padding:15px; margin-bottom:24px; border:1px solid #cfe4da; border-radius:13px; background:var(--mint-soft); }
.drawer-benefit > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:white; background:#4b9278; }
.drawer-benefit strong { font-size:9px; }
.drawer-benefit p { margin:3px 0 0; color:#51726b; font-size:9px; line-height:1.5; }

.tour-card {
  position:fixed;
  z-index:70;
  left:50%;
  bottom:28px;
  width:min(450px,calc(100% - 30px));
  padding:24px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:17px;
  color:white;
  background:var(--green-dark);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:translateX(-50%);
  animation:tourUp .4s ease;
}
@keyframes tourUp { from { opacity:0; transform:translate(-50%,20px); } }
.tour-card > button[data-close-tour] { position:absolute; top:15px; right:15px; border:0; color:#9ab7b0; background:none; font-size:18px; }
.tour-card h3 { margin:8px 0 5px; font:700 16px "Manrope"; }
.tour-card p { margin:0 0 16px; color:#a9c2bc; font-size:9px; line-height:1.55; }
.tour-card .button { padding:9px 13px; font-size:9px; }
.tour-progress { position:absolute; top:0; left:0; right:0; height:3px; overflow:hidden; border-radius:17px 17px 0 0; background:rgba(255,255,255,.08); }
.tour-progress i { display:block; width:25%; height:100%; background:var(--coral); transition:width .35s; }

@media (max-width: 1050px) {
  .demo-metrics, .resident-actions { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 820px) {
  .demo-shell { display:block; }
  .demo-sidebar { position:static; width:100%; height:auto; padding:15px; }
  .demo-brand-row { padding:0 3px 12px; }
  .demo-community,.demo-sidebar-footer,.demo-nav .nav-label { display:none; }
  .demo-nav { display:flex; margin:0; padding-bottom:2px; overflow-x:auto; scrollbar-width:none; }
  .demo-nav-item { display:flex; flex:0 0 auto; width:auto; padding:8px 11px; }
  .demo-nav-item i { display:none; }
  .demo-nav-item.active::before { left:10px; right:10px; bottom:0; width:auto; height:2px; }
  .demo-nav-item.alma-link { margin:0; }
  .demo-topbar { top:104px; padding:13px 18px; }
  .demo-content { padding:20px 18px 45px; }
  .demo-lower-grid,.resident-demo-hero { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .demo-status-banner { align-items:flex-start; flex-wrap:wrap; gap:6px 9px; }
  .demo-status-banner small { display:none; }
  .demo-brand-row .brand { font-size:17px; }
  .demo-topbar { top:101px; align-items:flex-start; }
  .demo-topbar p,.demo-topbar h1 { display:none; }
  .demo-mobile-brand { display:block; margin-top:10px; color:var(--muted); font-size:9px; }
  .role-switch button { font-size:0; }
  .role-switch button span { font-size:13px; }
  .demo-notification { display:none; }
  .demo-welcome { padding:27px; }
  .demo-score { width:100px; height:100px; flex-basis:100px; }
  .demo-score strong { font-size:24px; }
  .demo-metrics,.resident-actions { grid-template-columns:1fr 1fr; }
  .interactive-card { padding:16px; }
  .interactive-card strong { font-size:17px; }
  .demo-section-head { align-items:start; flex-direction:column; gap:5px; }
  .feature-drawer { padding:30px 23px; }
  .drawer-visual { height:150px; }
}