body.demo-page{
  --bg:#11100d;--surface:#191814;--text:#f4efe4;--text-dim:#b9b1a3;
  --text-faint:#746d61;--divider:rgba(244,239,228,.16);--cta-bg:#f4efe4;--cta-text:#11100d;
  --accent:#e7a33a;--demo-green:#79d891;--demo-cyan:#74d9d6;
  min-height:100vh;background:
    linear-gradient(145deg,#11100d 0%,#181510 42%,#0d1212 100%);
}
.demo-page .nav{background:rgba(17,16,13,.72);border-bottom-color:rgba(244,239,228,.14)}
.demo-page .logo{color:var(--text)}
.demo-page .btn-ghost{border-color:rgba(244,239,228,.24)}

.demo-main{padding-bottom:clamp(56px,8vw,100px)}
.demo-hero{padding-top:clamp(52px,8vw,92px)}
.demo-hero h1{
  margin-top:14px;max-width:840px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(44px,7vw,92px);line-height:.98;letter-spacing:0;
}
.demo-hero p{margin-top:22px;max-width:54ch;color:var(--text-dim);font-size:clamp(16px,1.4vw,19px)}

.demo-board{
  margin-top:clamp(34px,5vw,62px);border:1px solid var(--divider);
  background:rgba(244,239,228,.045);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}
.board-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:22px;
  padding:clamp(20px,3vw,30px);border-bottom:1px solid var(--divider);
}
.board-step{
  display:inline-block;margin-bottom:10px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.board-top h2{font-family:var(--font-display);font-size:clamp(28px,4.4vw,56px);font-weight:400;line-height:1.02}
.board-progress{width:min(220px,30vw);height:3px;background:rgba(244,239,228,.14);overflow:hidden;margin-top:10px}
.board-progress span{display:block;width:10%;height:100%;background:linear-gradient(90deg,var(--accent),var(--demo-green));transition:width .7s ease}

.board-scene{
  position:relative;min-height:640px;overflow:hidden;
  background:
    linear-gradient(rgba(244,239,228,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,239,228,.045) 1px,transparent 1px);
  background-size:46px 46px;
}
.glass-card{
  border:1px solid rgba(244,239,228,.2);background:rgba(244,239,228,.08);
  box-shadow:0 24px 80px rgba(0,0,0,.22);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.pain-metrics{
  position:absolute;left:clamp(18px,3vw,34px);top:clamp(18px,3vw,34px);
  display:grid;grid-template-columns:repeat(3,minmax(86px,1fr));gap:10px;width:min(470px,54%);
  transition:opacity .45s ease,transform .45s ease;
}
.pain-metrics div{border-top:1px solid var(--divider);padding-top:10px}
.pain-metrics strong{font-family:var(--font-display);font-size:clamp(30px,4vw,52px);font-weight:400;color:var(--accent);line-height:1}
.pain-metrics span{display:block;margin-top:5px;font-size:12px;color:var(--text-dim)}

.source-card{
  position:absolute;width:220px;min-height:106px;padding:15px;display:flex;flex-direction:column;justify-content:space-between;
  transition:left .9s cubic-bezier(.2,.8,.2,1),top .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),opacity .45s ease,border-color .45s ease;
}
.source-card span,.packet-head span,.packet-grid span,.evidence-row span,.outcome-card span{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);
}
.source-card strong{font-family:var(--font-display);font-size:21px;font-weight:400;line-height:1.05}
.s1{left:6%;top:25%;transform:rotate(-4deg)}
.s2{left:27%;top:42%;transform:rotate(3deg)}
.s3{left:10%;top:66%;transform:rotate(4deg)}
.s4{left:67%;top:18%;transform:rotate(5deg)}
.s5{left:70%;top:58%;transform:rotate(-5deg)}

.knowledge-core,.packet-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:168px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  border:1px solid rgba(244,239,228,.34);color:var(--text);background:rgba(244,239,228,.08);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  font-family:var(--font-display);font-size:26px;line-height:1.02;
  box-shadow:0 0 0 16px rgba(244,239,228,.025),0 0 80px rgba(231,163,58,.22);
  transition:transform .55s ease,opacity .45s ease,border-color .45s ease;
}
.knowledge-core{cursor:pointer}
.knowledge-core:hover{transform:translate(-50%,-50%) scale(1.04);border-color:var(--accent)}
.packet-core{opacity:0;pointer-events:none;border-radius:28px}

.packet-card{
  position:absolute;right:clamp(18px,3vw,34px);top:50%;width:min(410px,38vw);padding:0;
  opacity:0;transform:translate(34px,-50%) scale(.96);pointer-events:none;
  transition:opacity .55s ease,transform .55s ease;
}
.packet-head{padding:18px;border-bottom:1px solid var(--divider)}
.packet-head strong{display:block;margin-top:8px;font-family:var(--font-display);font-size:clamp(27px,3.2vw,42px);font-weight:400;line-height:1.02}
.packet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--divider)}
.packet-grid div{background:rgba(17,16,13,.82);padding:12px}
.packet-grid strong{display:block;margin-top:5px;font-size:13px;font-weight:500}
.evidence-row{display:flex;gap:8px;flex-wrap:wrap;padding:14px;border-bottom:1px solid var(--divider)}
.evidence-row span{border:1px solid rgba(244,239,228,.18);border-radius:999px;padding:.48em .7em;color:var(--demo-cyan)}
.packet-actions{display:flex;gap:10px;flex-wrap:wrap;padding:14px}
.packet-actions .btn{font-size:13px;padding:.65em 1em}

.outcome-stack{
  position:absolute;left:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,34px);
  display:grid;gap:10px;width:min(360px,36vw);opacity:0;transform:translateY(20px);
  transition:opacity .45s ease,transform .45s ease;
}
.outcome-card{padding:13px}
.outcome-card strong{display:block;margin-top:4px;font-size:14px;font-weight:500}
.outcome-card.ready{border-color:var(--demo-green);background:rgba(121,216,145,.09)}
.outcome-card.impact strong{color:var(--accent)}

.demo-controls{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:clamp(18px,3vw,28px);border-top:1px solid var(--divider);
}
.demo-controls .btn{font-size:14px}
.demo-controls span{font-size:13px;color:var(--text-dim)}

.demo-board.is-assembling .pain-metrics{opacity:.22;transform:translateY(-8px)}
.demo-board.is-assembling .source-card{
  left:50%;top:50%;opacity:.32;border-color:rgba(231,163,58,.45);
  transform:translate(-50%,-50%) rotate(var(--pack-rot,0deg)) scale(.58);
}
.demo-board.is-assembling .s1{--pack-rot:-16deg}.demo-board.is-assembling .s2{--pack-rot:-7deg}
.demo-board.is-assembling .s3{--pack-rot:3deg}.demo-board.is-assembling .s4{--pack-rot:12deg}.demo-board.is-assembling .s5{--pack-rot:20deg}
.demo-board.is-assembling .knowledge-core{animation:core-spin 1.05s cubic-bezier(.2,.8,.2,1) both;border-color:var(--accent)}
.demo-board.is-layered .knowledge-core{opacity:0;pointer-events:none}
.demo-board.is-layered .packet-core{opacity:1;animation:packet-breathe 2.8s ease-in-out infinite}
.demo-board.is-packet .source-card{opacity:0}
.demo-board.is-packet .packet-core{left:38%;transform:translate(-50%,-50%) rotate(-6deg) scale(.9)}
.demo-board.is-packet .packet-card{opacity:1;transform:translate(0,-50%) scale(1);pointer-events:auto}
.demo-board.is-packet .outcome-stack{opacity:1;transform:none}
.demo-board.is-packet .pain-metrics{opacity:0}

@keyframes core-spin{
  0%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  55%{transform:translate(-50%,-50%) scale(1.12) rotate(160deg)}
  100%{transform:translate(-50%,-50%) scale(1) rotate(360deg)}
}
@keyframes packet-breathe{
  0%,100%{box-shadow:0 0 0 16px rgba(244,239,228,.025),0 0 70px rgba(231,163,58,.18)}
  50%{box-shadow:0 0 0 22px rgba(244,239,228,.04),0 0 110px rgba(116,217,214,.22)}
}
@media (prefers-reduced-motion:reduce){
  .demo-board *{animation:none !important;transition:none !important}
}
@media (max-width:920px){
  .board-scene{min-height:880px}
  .pain-metrics{position:relative;left:auto;top:auto;width:auto;margin:20px}
  .source-card{position:relative;left:auto !important;top:auto !important;width:auto;margin:10px 20px;transform:none !important}
  .knowledge-core,.packet-core{position:relative;left:auto;top:auto;transform:none;margin:24px auto}
  .packet-card,.outcome-stack{position:relative;right:auto;left:auto;top:auto;bottom:auto;width:auto;margin:20px;transform:none;display:none}
  .demo-board.is-assembling .source-card{opacity:.22;transform:scale(.96) !important}
  .demo-board.is-packet .packet-card{display:block;opacity:1}
  .demo-board.is-packet .outcome-stack{display:grid;opacity:1}
  .demo-board.is-layered .packet-core{transform:none}
}
@media (max-width:620px){
  .board-top{flex-direction:column}
  .board-progress{width:100%}
  .pain-metrics,.packet-grid{grid-template-columns:1fr}
  .demo-page .nav .btn-ghost{display:none}
}