.phygital-demos { padding: 80px 0; background: #080f1b; border-block: 1px solid #ffffff12; }
.phygital-demos .demo-intro { max-width: 700px; margin: 0 auto 32px; text-align: center; }
.phygital-demos .demo-intro h2 { font-size: clamp(28px, 4vw, 42px); color: #fff; margin-bottom: 12px; }
.phygital-demos p { color: #b9c8db; line-height: 1.65; }
.phygital-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.phygital-demo { min-width: 0; border: 1px solid #344159; border-radius: 18px; padding: 22px; background: linear-gradient(155deg, #172338, #0c1422); }
.phygital-demo .demo-number { color: #f59e0b; font: 11px var(--font-mono); letter-spacing: 2px; }
.phygital-demo h3 { color: white; font-size: 22px; margin: 10px 0; }
.phygital-demo .demo-description { font-size: 13px; min-height: 65px; margin-bottom: 20px; }
.phygital-demo .demo-screen { position: relative; padding: 20px; background: #050a12; border: 5px solid #344159; border-radius: 12px; min-height: 220px; }
.phygital-demo .demo-screen small { display: block; font: 11px var(--font-mono); color: #22d3ee; }
.phygital-demo .demo-question { display: block; color: #fff; font-size: 20px; line-height: 1.4; margin: 20px 0; }
.phygital-demo .demo-feedback { font-size: 13px; color: #dce8f8; min-height: 44px; margin: 12px 0; }
.phygital-demo button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
.phygital-demo button:disabled { cursor: default; opacity: .55; }
.phygital-demo button:focus-visible, .phygital-demo textarea:focus-visible { outline: 3px solid #22d3ee; outline-offset: 4px; }
.demo-answer-buttons { display: flex; justify-content: space-around; gap: 12px; margin: 18px 0; }
.demo-answer-buttons button { width: 66px; height: 66px; border: 5px solid #663f19; border-radius: 50%; background: #f59e0b; box-shadow: 0 5px #79440a; color: #17100b; font-size: 22px; font-weight: 800; }
.demo-answer-buttons button:active { transform: translateY(4px); box-shadow: 0 1px #79440a; }
.phygital-demo .demo-control { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid #60728e; background: #1b2a40; border-radius: 9px; color: #fff; font-size: 13px; }
.phygital-demo .demo-primary { background: #f59e0b; color: #17100b; border-color: #f59e0b; font-weight: 700; }
.phygital-demo .demo-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.phygital-demo .demo-note { font-size: 11px; margin-top: 16px; color: #9baec7; }
.demo-options { list-style: none; padding: 0; margin: 0; color: #b9c8db; font-size: 13px; line-height: 1.8; }
.phone-handset { display: block; width: 76px; height: 76px; margin: 16px auto; border-radius: 50%; background: #f59e0b; color: #111; border: 5px solid #754a18; font-size: 34px; }
.phone-handset.is-ringing { animation: demo-ring .65s ease-in-out 6; }
@keyframes demo-ring { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.phygital-demo textarea { width: 100%; min-height: 90px; padding: 12px; margin: 8px 0 12px; border: 1px solid #60728e; border-radius: 8px; background: #070e19; color: #fff; font-size: 14px; font-family: inherit; resize: vertical; }
.phygital-demo label { display: block; color: #dce8f8; font-size: 13px; }
.phone-transcript { overflow-wrap: anywhere; white-space: pre-wrap; font-size: 14px; color: #fff; max-height: 140px; overflow-y: auto; }
.phygital-demo [hidden] { display: none !important; }
.tank-scene { height: 220px; position: relative; overflow: hidden; border: 5px solid #344159; border-radius: 12px; background: linear-gradient(#30627b 0%, #95c8cf 40%, #bcab79 41%, #75694b 100%); }
.tank-mountains { position: absolute; top: 30px; left: -30%; width: 160%; height: 65px; background: #516b67; clip-path: polygon(0 100%, 12% 20%, 25% 80%, 40% 0, 60% 85%, 78% 15%, 100% 100%); transform: translateX(var(--pan, 0px)); transition: transform .18s; }
.tank-road { position: absolute; top: 86px; bottom: 0; left: 12%; width: 76%; background: repeating-linear-gradient(0deg, transparent 0 25px, #ffffff26 26px 28px), #5c5946; clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); background-position-y: var(--travel, 0px); }
.tank-target { position: absolute; top: 105px; left: var(--target, 50%); transform: translateX(-50%); color: #fff; background: #176553; border: 2px solid #8af0c7; padding: 4px 10px; border-radius: 8px; font-weight: bold; }
.tank-vehicle { position: absolute; bottom: 12px; left: var(--position, 50%); width: 62px; height: 58px; transform: translateX(-50%); transition: left .18s; background: #818b49; border: 9px solid #252e26; border-radius: 12px; box-shadow: 0 5px 10px #0006; }
.tank-vehicle::before { content: ''; position: absolute; left: 12px; top: 3px; width: 20px; height: 26px; border-radius: 8px; background: #b5ba73; }
.tank-vehicle::after { content: ''; position: absolute; left: 19px; top: -24px; width: 6px; height: 35px; background: #c3c690; border-radius: 3px; }
.tank-hud { position: absolute; top: 10px; inset-inline: 10px; display: flex; justify-content: space-between; color: #fff; font: 12px var(--font-mono); }
.tank-steering { display: flex; justify-content: center; gap: 12px; margin: 16px 0; }
.tank-steering button { min-width: 90px; font-size: 22px !important; }
@media (max-width: 1100px) { .phygital-demo-grid { grid-template-columns: 1fr; max-width: 620px; margin: auto; } .phygital-demo .demo-description { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .phygital-demo *, .phygital-demo *::before, .phygital-demo *::after { animation: none !important; transition: none !important; } }