.demo-page{--demo-bg:#0a0d14;--demo-surface:#111827;--demo-text:#e8ecf4;--demo-muted:#8892a8;--demo-accent:#34d399;--demo-accent2:#60a5fa;--demo-border:#ffffff0f;--demo-danger:#ef4444;--demo-warning:#eab308;background:var(--demo-bg);color:var(--demo-text);min-height:100vh;font-family:Inter,-apple-system,sans-serif}.demo-nav{border-bottom:1px solid var(--demo-border);padding:16px 24px}.demo-back{color:var(--demo-muted);align-items:center;gap:8px;font-size:14px;font-weight:600;text-decoration:none;transition:color .2s;display:inline-flex}.demo-back:hover{color:var(--demo-text)}.demo-intro{text-align:center;max-width:560px;margin:0 auto;padding:80px 24px}.demo-intro-badge{color:var(--demo-accent);background:linear-gradient(135deg,#34d3991f,#60a5fa1f);border:1px solid #34d39940;border-radius:99px;align-items:center;gap:6px;margin-bottom:24px;padding:6px 16px;font-size:12px;font-weight:600;display:inline-flex}.demo-intro h1{letter-spacing:-1px;margin-bottom:16px;font-size:clamp(32px,5vw,48px);font-weight:800;line-height:1.15}.demo-intro h1 span{background:linear-gradient(135deg,#34d399,#60a5fa,#a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.demo-intro p{color:var(--demo-muted);margin-bottom:32px;font-size:15px;line-height:1.7}.demo-steps-mini{justify-content:center;align-items:center;gap:16px;margin-bottom:36px;display:flex}.demo-step-mini{color:var(--demo-muted);flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:500;display:flex}.demo-step-mini svg{color:var(--demo-accent)}.demo-step-mini-arrow{color:#4b5563;font-size:16px}.demo-start-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#34d399,#2dd4bf);border:none;border-radius:16px;align-items:center;gap:10px;padding:16px 36px;font-size:16px;font-weight:700;transition:all .3s;display:inline-flex;box-shadow:0 8px 32px #34d3994d}.demo-start-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px #34d39966}.demo-disclaimer{color:#6b7280;justify-content:center;align-items:center;gap:6px;margin-top:24px;font-size:11px;display:flex}.demo-email-group{flex-direction:column;align-items:center;gap:6px;margin-bottom:16px;display:flex}.demo-email-input-wrap{background:#ffffff0a;border:1.5px solid #ffffff14;border-radius:14px;align-items:center;gap:10px;width:100%;max-width:360px;padding:14px 18px;transition:all .3s;display:flex}.demo-email-input-wrap:focus-within{background:#ffffff0f;border-color:#34d39980;box-shadow:0 0 20px #34d39914}.demo-email-input-wrap.demo-email-error{background:#ef44440a;border-color:#ef444499;animation:.4s emailShake}@keyframes emailShake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.demo-email-icon{color:var(--demo-muted);flex-shrink:0}.demo-email-input-wrap:focus-within .demo-email-icon{color:var(--demo-accent)}.demo-email-input{color:var(--demo-text);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:14px;font-weight:500}.demo-email-input::placeholder{color:#6b7280;font-weight:400}.demo-email-error-msg{color:#ef4444;font-size:11px;font-weight:500}.demo-loading{text-align:center;max-width:420px;margin:0 auto;padding:140px 24px}.demo-loading-spinner{width:80px;height:80px;margin:0 auto 28px;position:relative}.demo-loading-spinner:before,.demo-loading-spinner:after{content:"";border:3px solid #0000;border-radius:50%;position:absolute;inset:0}.demo-loading-spinner:before{border-top-color:var(--demo-accent);animation:1.2s linear infinite spinOuter}.demo-loading-spinner:after{border-bottom-color:var(--demo-accent2);animation:.8s linear infinite spinInner;inset:8px}@keyframes spinOuter{to{transform:rotate(360deg)}}@keyframes spinInner{to{transform:rotate(-360deg)}}.demo-loading h2{margin-bottom:8px;font-size:22px;font-weight:700}.demo-loading p{color:var(--demo-muted);margin-bottom:4px;font-size:13px}.demo-loading-tip{color:#6b7280;margin-top:12px;font-size:11px}.demo-scan-view{background:#000;width:100%;height:100vh;position:relative;overflow:hidden}.demo-video{object-fit:cover;width:100%;height:100%}.demo-skeleton-canvas{pointer-events:none;z-index:3;position:absolute;inset:0}.demo-corner{z-index:5;border:0 solid #34d399b3;width:40px;height:40px;position:absolute}.demo-corner-tl{border-top-width:3px;border-left-width:3px;border-radius:12px 0 0;top:24px;left:24px}.demo-corner-tr{border-top-width:3px;border-right-width:3px;border-radius:0 12px 0 0;top:24px;right:24px}.demo-corner-bl{border-bottom-width:3px;border-left-width:3px;border-radius:0 0 0 12px;bottom:24px;left:24px}.demo-corner-br{border-bottom-width:3px;border-right-width:3px;border-radius:0 0 12px;bottom:24px;right:24px}.demo-live-badge{color:#fff;letter-spacing:1.5px;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ef4444d9;border-radius:8px;align-items:center;gap:6px;padding:6px 16px;font-size:11px;font-weight:700;display:flex;position:absolute;top:20px;left:50%;transform:translate(-50%)}.demo-live-dot{background:#fff;border-radius:50%;width:7px;height:7px;animation:1s infinite livePulse}@keyframes livePulse{0%,to{opacity:1}50%{opacity:.3}}.demo-person-status{z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:10px;align-items:center;gap:8px;padding:8px 14px;font-size:12px;font-weight:600;transition:all .3s;display:flex;position:absolute;top:20px;left:24px}.demo-person-status.detected{color:#34d399;background:#34d39926;border:1px solid #34d3994d}.demo-person-status.not-detected{color:#ef4444;background:#ef444426;border:1px solid #ef44444d;animation:1.5s ease-in-out infinite statusPulse}@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.7}}.demo-person-tip{color:#ffffff80;z-index:10;font-size:11px;position:absolute;top:64px;left:24px}.demo-region-hud{z-index:10;flex-direction:column;gap:8px;width:200px;display:flex;position:absolute;top:50%;right:20px;transform:translateY(-50%)}.demo-region-hud-item{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:.4;background:#0009;border:1px solid #ffffff0f;border-radius:12px;padding:10px 14px;transition:all .4s}.demo-region-hud-item.active{opacity:1;background:#000000bf;border-color:#34d39966;box-shadow:0 0 20px #34d3991a}.demo-region-hud-item.done{opacity:.8;border-color:#34d39933}.demo-region-hud-label{color:var(--demo-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px;font-weight:600}.demo-region-hud-item.active .demo-region-hud-label{color:var(--demo-accent)}.demo-region-hud-value{color:var(--demo-text);font-variant-numeric:tabular-nums;font-size:20px;font-weight:800}.demo-region-hud-item.active .demo-region-hud-value{color:#fff}.demo-region-hud-status{color:var(--demo-muted);margin-top:2px;font-size:10px}.demo-region-hud-item.active .demo-region-hud-status{color:var(--demo-accent);animation:1s ease-in-out infinite dotPulse}.demo-instruction{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fffc;white-space:nowrap;z-index:10;background:#0009;border:1px solid #ffffff14;border-radius:12px;align-items:center;gap:8px;padding:10px 24px;font-size:13px;display:flex;position:absolute;bottom:80px;left:50%;transform:translate(-50%)}.demo-instruction svg{color:var(--demo-accent);flex-shrink:0}.demo-progress-bar{z-index:10;background:#ffffff1a;height:4px;position:absolute;bottom:0;left:0;right:0}.demo-progress-fill{background:linear-gradient(90deg,#34d399,#60a5fa);border-radius:0 2px 2px 0;height:100%;transition:width .15s linear}.demo-scan-info{color:#fff9;z-index:10;align-items:center;gap:8px;font-size:12px;font-weight:500;display:flex;position:absolute;bottom:20px;left:24px}.demo-scan-info svg{color:var(--demo-accent)}.demo-stop-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;z-index:10;background:#ef4444b3;border:none;border-radius:10px;align-items:center;gap:6px;padding:10px 20px;font-size:12px;font-weight:600;transition:all .2s;display:flex;position:absolute;bottom:16px;right:16px}.demo-stop-btn:hover{background:#ef4444e6}.demo-countdown-overlay,.demo-error-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;background:#000000b3;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.demo-countdown-circle{width:96px;height:96px;color:var(--demo-accent);background:#34d3991a;border:3px solid #34d39966;border-radius:50%;justify-content:center;align-items:center;margin-bottom:16px;font-size:48px;font-weight:800;display:flex}.demo-countdown-overlay p,.demo-error-overlay p{color:var(--demo-muted);font-size:14px}.demo-error-overlay svg{color:#ef4444;margin-bottom:12px}.demo-analyzing{text-align:center;max-width:400px;margin:0 auto;padding:120px 24px}.demo-analyzing-pulse{width:96px;height:96px;color:var(--demo-accent);background:#34d39914;border:2px solid #34d39940;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 24px;animation:1.5s ease-in-out infinite analyzePulse;display:flex}@keyframes analyzePulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.demo-analyzing h2{margin-bottom:8px;font-size:22px;font-weight:700}.demo-analyzing p{color:var(--demo-muted);margin-bottom:28px;font-size:13px}.demo-analyzing-steps{text-align:left;flex-direction:column;gap:12px;display:flex}.demo-analyzing-step{color:var(--demo-muted);align-items:center;gap:12px;font-size:13px;display:flex}.demo-analyzing-dot{background:var(--demo-accent);border-radius:50%;width:8px;height:8px;animation:1s ease-in-out infinite dotPulse}@keyframes dotPulse{0%,to{opacity:.3}50%{opacity:1}}.demo-results{max-width:640px;margin:0 auto;padding:48px 24px 80px}.demo-results-header{align-items:center;gap:24px;margin-bottom:12px;display:flex}.demo-score-circle{border-radius:50%;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:96px;height:96px;display:flex;position:relative}.demo-score-circle:before{content:"";background:conic-gradient(var(--score-color,#34d399) calc(var(--score-pct,75) * 1%), #ffffff0f 0);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 3px))}.demo-score-value{color:var(--score-color,var(--demo-accent));z-index:1;font-size:32px;font-weight:800}.demo-score-label{color:var(--demo-muted);z-index:1;margin-top:-2px;font-size:11px}.demo-results-header h2{font-size:22px;font-weight:700}.demo-results-sub{color:var(--demo-muted);margin-top:4px;font-size:13px}.demo-results-based{color:var(--demo-accent);align-items:center;gap:6px;margin-bottom:28px;font-size:11px;display:flex}.demo-regions{flex-direction:column;gap:10px;margin-bottom:24px;display:flex}.demo-region-card{border:1px solid var(--demo-border);background:#ffffff08;border-radius:14px;padding:16px 18px;transition:all .3s}.demo-region-card:hover{background:#ffffff0d;border-color:#ffffff1a}.demo-region-card-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.demo-region-card-name{align-items:center;gap:8px;font-size:14px;font-weight:700;display:flex}.demo-region-card-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.demo-region-card-score{font-size:20px;font-weight:800}.demo-region-card-details{color:var(--demo-muted);gap:24px;font-size:12px;display:flex}.demo-region-card-details span{align-items:center;gap:4px;display:flex}.demo-region-card-bar{background:#ffffff0f;border-radius:2px;height:4px;margin-top:10px;overflow:hidden}.demo-region-card-bar-fill{border-radius:2px;height:100%;transition:width 1s ease-out}.demo-region-card-tip{color:var(--demo-muted);border-top:1px solid #ffffff0a;margin-top:8px;padding-top:8px;font-size:12px;line-height:1.5}.demo-status-badge{border-radius:6px;padding:3px 10px;font-size:11px;font-weight:600}.demo-status-badge.good{color:#34d399;background:#34d3991f}.demo-status-badge.moderate{color:#eab308;background:#eab3081f}.demo-status-badge.needs-work{color:#ef4444;background:#ef44441f}.demo-feedback{background:#34d3990d;border:1px solid #34d39926;border-radius:16px;gap:12px;margin-bottom:32px;padding:16px 20px;display:flex}.demo-feedback-icon{flex-shrink:0;font-size:24px}.demo-feedback strong{color:var(--demo-accent);margin-bottom:4px;font-size:13px;display:block}.demo-feedback p{color:var(--demo-muted);margin:0;font-size:13px;line-height:1.6}.demo-snapshot-section{border:1px solid var(--demo-border);background:#0000004d;border-radius:16px;margin-bottom:24px;overflow:hidden}.demo-snapshot-label{color:var(--demo-accent);border-bottom:1px solid var(--demo-border);background:#34d3990f;align-items:center;gap:6px;padding:10px 16px;font-size:12px;font-weight:600;display:flex}.demo-snapshot-img{object-fit:contain;background:#000;width:100%;max-height:400px;display:block}.demo-ai-loading{align-items:center;gap:12px;padding:8px 0;display:flex}.demo-ai-loading p{color:var(--demo-accent);margin:0;font-size:12px;animation:1.5s ease-in-out infinite dotPulse}.demo-ai-loading-dots{gap:4px;display:flex}.demo-ai-loading-dots span{background:var(--demo-accent);border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite dotPulse}.demo-ai-loading-dots span:nth-child(2){animation-delay:.2s}.demo-ai-loading-dots span:nth-child(3){animation-delay:.4s}.demo-ai-feedback-content{color:var(--demo-muted);font-size:13px;line-height:1.7}.demo-ai-feedback-content h4{color:var(--demo-text);margin:16px 0 6px;padding:0;font-size:14px;font-weight:700}.demo-ai-feedback-content h4:first-child{margin-top:8px}.demo-ai-feedback-content li{margin-bottom:4px;padding-left:16px;list-style:none;position:relative}.demo-ai-feedback-content li:before{content:"→";color:var(--demo-accent);font-weight:600;position:absolute;left:0}.demo-ai-feedback-content strong{color:var(--demo-text)}.demo-cta-section{text-align:center;background:linear-gradient(135deg,#34d3990f,#60a5fa0f);border:1px solid #34d3991f;border-radius:20px;margin-bottom:24px;padding:32px 24px}.demo-cta-section h3{margin-bottom:8px;font-size:20px;font-weight:800}.demo-cta-section p{color:var(--demo-muted);margin-bottom:20px;font-size:13px}.demo-cta-buttons{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.demo-cta-primary{color:#fff;background:linear-gradient(135deg,#34d399,#2dd4bf);border-radius:14px;align-items:center;gap:8px;padding:14px 28px;font-size:15px;font-weight:700;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 8px 24px #34d3994d}.demo-cta-primary:hover{transform:translateY(-2px)}.demo-cta-secondary{color:var(--demo-text);border:1px solid var(--demo-border);cursor:pointer;background:#ffffff0d;border-radius:14px;padding:14px 28px;font-size:15px;font-weight:600;transition:all .3s}.demo-cta-secondary:hover{background:#ffffff14}.demo-api-teaser{background:#60a5fa0d;border:1px solid #60a5fa26;border-radius:16px;gap:12px;padding:16px 20px;display:flex}.demo-api-teaser span{flex-shrink:0;font-size:20px}.demo-api-teaser strong{margin-bottom:4px;font-size:13px;display:block}.demo-api-teaser p{color:var(--demo-muted);margin:0;font-size:12px}.demo-api-teaser a{color:#60a5fa;font-weight:600;text-decoration:none}@media (max-width:768px){.demo-results-header{text-align:center;flex-direction:column}.demo-steps-mini{flex-direction:column;gap:12px}.demo-step-mini-arrow{transform:rotate(90deg)}.demo-region-hud{width:150px;right:8px}.demo-region-hud-value{font-size:16px}.demo-region-hud-label{font-size:10px}.demo-region-hud-item{padding:8px 10px}.demo-instruction{padding:8px 16px;font-size:11px}.demo-region-card-details{gap:12px}}