.demo-section { padding: 0 0 2.1rem; border-bottom: 1px solid var(--line); margin-bottom: 2.2rem; }
.demo-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 1.1rem; }
.demo-header h2 { margin-bottom: 0; }
.demo-badge { display: inline-flex; align-items: center; padding: .32rem .55rem; border-radius: 999px; background: var(--sand); border: 1px solid #f1ddbd; color: #725d40; white-space: nowrap; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.demo-shell { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 18px; box-shadow: 0 16px 34px rgba(23,63,66,.07); }
.demo-toolbar { display: flex; gap: .42rem; padding: .65rem; background: #f4faf9; border-bottom: 1px solid var(--line); overflow-x: auto; }
.demo-tab { appearance: none; border: 1px solid transparent; background: transparent; color: #587579; border-radius: 10px; padding: .55rem .72rem; font: 800 .78rem/1.15 'Plus Jakarta Sans', sans-serif; cursor: pointer; white-space: nowrap; }
.demo-tab[aria-selected="true"] { color: #fff; background: var(--teal); box-shadow: 0 4px 12px rgba(16,133,140,.22); }
.demo-tab:focus-visible, .demo-action:focus-visible { outline: 3px solid #f1bd70; outline-offset: 2px; }
.demo-stage { padding: 1.1rem; min-height: 350px; background: linear-gradient(145deg,#fff 0%,#f8fbfa 100%); }
.demo-eyebrow { color: var(--teal); font-size: .69rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 800; margin: 0 0 .35rem; }
.demo-stage h3 { margin: 0; color: var(--ink); font-size: 1.22rem; }
.demo-stage p { margin: .4rem 0 1rem; font-size: .86rem; }
.demo-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(180px,.8fr); gap: .85rem; align-items: start; }
.demo-panel { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: .9rem; }
.demo-panel strong { color: var(--ink); font-size: .86rem; }
.demo-panel small { display: block; color: var(--muted); font-size: .75rem; margin-top: .25rem; }
.demo-stepper { display: flex; align-items: center; gap: .45rem; margin: .8rem 0; flex-wrap: wrap; }
.demo-step { width: 1.8rem; height: 1.8rem; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: #fff; font: 800 .76rem/1 'Plus Jakarta Sans',sans-serif; }
.demo-step.active { background: var(--teal); color:#fff; border-color: var(--teal); }
.demo-step.done { background: var(--mint); color: #173f42; border-color: var(--mint); }
.demo-connector { width: 18px; height: 1px; background: var(--line); }
.demo-action { border: 1px solid var(--teal); border-radius: 9px; padding: .52rem .72rem; color: var(--teal); background: #fff; cursor:pointer; font: 800 .78rem/1.2 'Plus Jakarta Sans',sans-serif; }
.demo-action.primary { background: var(--teal); color: #fff; }
.demo-actions { display:flex; gap:.55rem; flex-wrap:wrap; margin-top: .85rem; }
.demo-status { margin: .75rem 0 0; padding: .65rem .75rem; border-left: 3px solid var(--teal); background: var(--teal-soft); color: #315d60; font-size: .82rem; }
.demo-kpi { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin:.75rem 0; }
.demo-kpi div { padding:.7rem; border:1px solid var(--line); border-radius:11px; background:#fff; }
.demo-kpi b { display:block; color:var(--teal); font-size:1.05rem; }.demo-kpi span {color:var(--muted);font-size:.68rem;}
.demo-check { display:flex; align-items:center; gap:.55rem; padding:.48rem 0; border-bottom:1px dashed var(--line); font-size:.8rem; color:#48676b; }.demo-check:last-child{border-bottom:0}.demo-check input{accent-color:var(--teal);width:1.05rem;height:1.05rem}.demo-check input:focus-visible{outline:3px solid #f1bd70;outline-offset:2px}
.demo-map { position:relative; min-height:185px; overflow:hidden; border-radius:12px; background:linear-gradient(135deg,#d9edcf 0 22%,#bcded2 22% 43%,#e7d8ae 43% 60%,#d6eac0 60% 80%,#b7d5be 80%); border:1px solid #b8d5c9; }.demo-map::before,.demo-map::after{content:"";position:absolute;inset:18px 25px;border:2px solid rgba(16,133,140,.75);border-radius:42% 58% 47% 53% / 51% 45% 55% 49%;transform:rotate(-9deg)}.demo-map::after{inset:44px 51px 38px 80px;border-color:rgba(255,255,255,.85);transform:rotate(12deg)}.demo-pin{position:absolute;right:17%;top:38%;width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:#db795b;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.demo-layer { display:flex; justify-content:space-between; gap:.65rem; padding:.55rem 0; color:#537174; font-size:.78rem; border-bottom:1px solid var(--line); }.demo-layer:last-child{border:0}.demo-layer button{border:0;background:transparent;color:var(--teal);font:800 .76rem 'Plus Jakarta Sans',sans-serif;cursor:pointer;text-decoration:underline}
.demo-passport { background:#163f42; color:#fff; border-radius:14px; padding:1.1rem; min-height:184px; }.demo-passport .demo-eyebrow{color:var(--mint)}.demo-passport h3{color:#fff}.demo-passport p{color:#cce5e2}.demo-code{margin-top:1rem;display:inline-block;padding:.38rem .55rem;border:1px solid rgba(255,255,255,.3);border-radius:7px;font:800 .72rem monospace;letter-spacing:.12em}
.demo-sensor { display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem; }.demo-sensor div{padding:.7rem;border:1px solid var(--line);background:#fff;border-radius:11px}.demo-sensor b{font-size:1.1rem;color:var(--ink)}.demo-sensor span{display:block;color:var(--muted);font-size:.7rem}.demo-boundary{margin-top:.75rem;padding:.72rem;border-radius:10px;background:var(--sand);color:#725d40;font-size:.78rem}
.demo-figure-caption{display:block;margin-top:.5rem;color:var(--muted);font-size:.73rem}.demo-summary{margin-top:.85rem;color:var(--muted);font-size:.78rem}.demo-section [hidden]{display:none!important}
@media(max-width:640px){.demo-header{align-items:start;flex-direction:column}.demo-layout{grid-template-columns:1fr}.demo-kpi{grid-template-columns:1fr}.demo-stage{padding:.8rem}.demo-toolbar{padding:.5rem}.demo-tab{padding:.48rem .58rem}.demo-sensor{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.demo-tab,.demo-action{transition:none!important}.demo-shell *{scroll-behavior:auto!important}}