.hero-demo{--hd-bg: #F7F4F0;--hd-surface: #FFFFFF;--hd-surface-alt: #FAFAF9;--hd-border: #E5E0D8;--hd-text-primary: #1C1917;--hd-text-secondary: #57534E;--hd-text-muted: #78716C;--hd-text-subtle: #A8A29E;--hd-accent: #D97706;--hd-accent-muted: #FEF3C7;--hd-shadow: rgba(0, 0, 0, .08);--hd-shadow-strong: rgba(0, 0, 0, .15);--hd-overlay: rgba(0, 0, 0, .4);--hd-canvas: #F7F4F0;--hd-mockup: linear-gradient(145deg, #F0F0F0 0%, #E0E0E0 100%);--hd-logo-1: #C2410C;--hd-logo-2: #D97706;--hd-logo-3: #F59E0B;max-width:900px;margin:48px auto 0;font-family:var(--font-sans)}@media(prefers-color-scheme:dark){.hero-demo{--hd-bg: #0D0B0A;--hd-surface: #1C1917;--hd-surface-alt: #151311;--hd-border: #292524;--hd-text-primary: #FAFAF9;--hd-text-secondary: #A8A29E;--hd-text-muted: #78716C;--hd-text-subtle: #57534E;--hd-accent: #F59E0B;--hd-accent-muted: rgba(245, 158, 11, .15);--hd-shadow: rgba(0, 0, 0, .3);--hd-shadow-strong: rgba(0, 0, 0, .4);--hd-overlay: rgba(0, 0, 0, .6);--hd-canvas: #151311;--hd-mockup: linear-gradient(145deg, #292524 0%, #1C1917 100%);--hd-logo-1: #EA580C;--hd-logo-2: #F59E0B;--hd-logo-3: #FBBF24}}.hero-demo .browser{background:var(--hd-surface);border-radius:12px;box-shadow:0 8px 32px var(--hd-shadow),0 0 0 1px var(--hd-border);overflow:hidden}.hero-demo .browser-bar{height:40px;background:var(--hd-surface-alt);border-bottom:1px solid var(--hd-border);display:flex;align-items:center;padding:0 14px;gap:6px}.hero-demo .browser-dot{width:10px;height:10px;border-radius:50%}.hero-demo .browser-dot.r{background:#ef4444}.hero-demo .browser-dot.y{background:#f59e0b}.hero-demo .browser-dot.g{background:#22c55e}.hero-demo .browser-url{flex:1;text-align:center;font-size:11px;color:var(--hd-text-muted)}.hero-demo .browser-content{height:480px;position:relative;overflow:hidden}.hero-demo .app{display:flex;height:100%}.hero-demo .sidebar{width:180px;background:var(--hd-surface-alt);border-right:1px solid var(--hd-border);padding:14px 10px;flex-shrink:0}.hero-demo .sidebar-logo{display:flex;align-items:center;gap:8px;padding:2px 6px;margin-bottom:16px}.hero-demo .sidebar-logo-text{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--hd-text-primary)}.hero-demo .sidebar-logo-text .fm{color:var(--hd-accent)}.hero-demo .sidebar-section{margin-bottom:14px}.hero-demo .sidebar-label{font-size:9px;font-weight:600;color:var(--hd-text-subtle);text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;margin-bottom:2px}.hero-demo .nav-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;font-size:12px;color:var(--hd-text-secondary)}.hero-demo .nav-item.active{background:var(--hd-accent-muted);color:var(--hd-accent)}.hero-demo .nav-icon{width:14px;height:14px;opacity:.7}.hero-demo .nav-item.active .nav-icon{opacity:1}.hero-demo .main{flex:1;display:flex;flex-direction:column;min-width:0}.hero-demo .topbar{height:44px;background:var(--hd-surface);border-bottom:1px solid var(--hd-border);display:flex;align-items:center;padding:0 16px;gap:12px}.hero-demo .topbar-title{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--hd-text-primary)}.hero-demo .topbar-sub{font-size:11px;color:var(--hd-text-muted)}.hero-demo .topbar-tabs{display:flex;gap:3px;margin-left:auto}.hero-demo .topbar-tab{padding:5px 10px;border-radius:5px;font-size:11px;font-weight:500;color:var(--hd-text-muted)}.hero-demo .topbar-tab.active{background:var(--hd-text-primary);color:var(--hd-surface)}.hero-demo .canvas{flex:1;background:var(--hd-canvas);padding:16px;display:flex;flex-direction:column;overflow:hidden}.hero-demo .canvas-header{display:flex;justify-content:space-between;margin-bottom:12px}.hero-demo .canvas-label{font-size:10px;font-weight:600;color:var(--hd-text-muted);text-transform:uppercase;letter-spacing:.05em}.hero-demo .canvas-info{font-size:10px;color:var(--hd-text-subtle)}.hero-demo .frames{display:flex;gap:12px;flex:1;align-items:flex-start;overflow-x:auto}.hero-demo .frame-wrap{flex-shrink:0;opacity:0;transform:translateY(16px) scale(.95);transition:all .4s cubic-bezier(.16,1,.3,1)}.hero-demo .frame-wrap.visible{opacity:1;transform:translateY(0) scale(1)}.hero-demo .frame-num{font-size:9px;font-weight:600;color:var(--hd-text-subtle);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}.hero-demo .frame{width:90px;height:160px;background:var(--hd-surface);border-radius:10px;box-shadow:0 2px 6px var(--hd-shadow);border:1px solid var(--hd-border);overflow:hidden;display:flex;flex-direction:column}.hero-demo .frame-top{height:16px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center}.hero-demo .frame-notch{width:32px;height:10px;background:#000;border-radius:0 0 6px 6px}.hero-demo .frame-body{flex:1;padding:6px;display:flex;flex-direction:column;gap:4px}.hero-demo .frame-eyebrow{font-size:5px;font-weight:600;color:var(--hd-accent);text-transform:uppercase}.hero-demo .frame-title{font-size:7px;font-weight:700;color:var(--hd-text-primary);line-height:1.2}.hero-demo .frame-mock{flex:1;background:var(--hd-mockup);border-radius:4px;display:flex;align-items:center;justify-content:center}.hero-demo .frame-mock svg{width:20px;height:20px;opacity:.15;color:var(--hd-text-muted)}.hero-demo .prompt{margin-top:12px;background:var(--hd-surface);border:1px solid var(--hd-border);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px}.hero-demo .prompt-icon{color:var(--hd-accent);flex-shrink:0}.hero-demo .prompt-text{flex:1;font-size:12px;color:var(--hd-text-primary)}.hero-demo .prompt-cursor{display:inline-block;width:2px;height:14px;background:var(--hd-accent);animation:hd-blink 1s infinite}@keyframes hd-blink{0%,50%{opacity:1}51%,to{opacity:0}}.hero-demo .prompt-btn{background:var(--hd-accent);color:#fff;border:none;border-radius:5px;padding:6px 12px;font-size:11px;font-weight:600;opacity:.5;transition:opacity .2s}@media(prefers-color-scheme:dark){.hero-demo .prompt-btn{color:#0d0b0a}}.hero-demo .prompt-btn.ready{opacity:1}.hero-demo .modal-bg{position:absolute;inset:0;background:var(--hd-overlay);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;z-index:10}.hero-demo .modal-bg.visible{opacity:1;pointer-events:auto}.hero-demo .modal{background:var(--hd-surface);border-radius:12px;box-shadow:0 20px 40px var(--hd-shadow-strong);width:340px;transform:scale(.95) translateY(8px);transition:transform .25s cubic-bezier(.16,1,.3,1)}.hero-demo .modal-bg.visible .modal{transform:scale(1) translateY(0)}.hero-demo .modal-head{padding:16px 18px 12px;border-bottom:1px solid var(--hd-border)}.hero-demo .modal-title{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--hd-text-primary);margin-bottom:2px}.hero-demo .modal-sub{font-size:11px;color:var(--hd-text-muted)}.hero-demo .modal-body{padding:16px 18px}.hero-demo .modal-label{font-size:11px;font-weight:600;color:var(--hd-text-primary);margin-bottom:10px;display:flex;justify-content:space-between}.hero-demo .modal-action{color:var(--hd-accent);font-weight:500}.hero-demo .matrix{border:1px solid var(--hd-border);border-radius:6px;overflow:hidden}.hero-demo .matrix-row{display:flex;border-bottom:1px solid var(--hd-border)}.hero-demo .matrix-row:last-child{border-bottom:none}.hero-demo .matrix-cell{flex:1;padding:8px 10px;font-size:11px;text-align:center;border-right:1px solid var(--hd-border)}.hero-demo .matrix-cell:last-child{border-right:none}.hero-demo .matrix-cell.hd{background:var(--hd-surface-alt);font-weight:600;color:var(--hd-text-primary)}.hero-demo .matrix-cell.lb{background:var(--hd-surface-alt);font-weight:500;color:var(--hd-text-secondary);text-align:left;flex:1.3}.hero-demo .check{width:16px;height:16px;background:var(--hd-text-primary);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;color:var(--hd-surface);font-size:9px;opacity:0;transform:scale(.8);transition:all .15s}.hero-demo .check.on{opacity:1;transform:scale(1)}.hero-demo .matrix-count{font-size:10px;color:var(--hd-text-muted);margin-top:6px}.hero-demo .modal-foot{padding:12px 18px;border-top:1px solid var(--hd-border);display:flex;align-items:center;justify-content:space-between}.hero-demo .modal-info{font-size:11px;color:var(--hd-text-muted)}.hero-demo .modal-info strong{color:var(--hd-text-primary)}.hero-demo .modal-btns{display:flex;gap:6px}.hero-demo .modal-btn{padding:8px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer}.hero-demo .modal-btn.sec{background:transparent;color:var(--hd-text-secondary);border:1px solid var(--hd-border)}.hero-demo .modal-btn.pri{background:var(--hd-accent);color:#fff;border:none}@media(prefers-color-scheme:dark){.hero-demo .modal-btn.pri{color:#0d0b0a}}.hero-demo .output{position:absolute;inset:0;background:var(--hd-canvas);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s;z-index:5}.hero-demo .output.visible{opacity:1;pointer-events:auto}.hero-demo .output-head{text-align:center;margin-bottom:20px}.hero-demo .output-title{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--hd-text-primary);margin-bottom:2px;display:flex;align-items:center;justify-content:center;gap:8px}.hero-demo .output-title svg{color:#16a34a}.hero-demo .output-sub{font-size:12px;color:var(--hd-text-muted)}.hero-demo .output-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.hero-demo .output-group{opacity:0;transform:translateY(16px);transition:all .4s cubic-bezier(.16,1,.3,1)}.hero-demo .output-group.visible{opacity:1;transform:translateY(0)}.hero-demo .output-group-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}.hero-demo .output-flag{font-size:11px;font-weight:600;color:var(--hd-text-muted)}.hero-demo .output-lang{font-size:11px;font-weight:600;color:var(--hd-text-primary)}.hero-demo .output-badge{font-size:9px;font-weight:600;background:var(--hd-accent-muted);color:var(--hd-accent);padding:2px 5px;border-radius:3px}.hero-demo .output-frames{display:flex;gap:6px}.hero-demo .out-frame{width:65px;height:115px;background:var(--hd-surface);border-radius:8px;box-shadow:0 2px 6px var(--hd-shadow);border:1px solid var(--hd-border);overflow:hidden;opacity:0;transform:scale(.9);transition:all .25s cubic-bezier(.16,1,.3,1)}.hero-demo .out-frame.visible{opacity:1;transform:scale(1)}.hero-demo .out-frame.dark{background:#1c1917;border-color:#3d3835}.hero-demo .out-frame-top{height:11px;background:linear-gradient(135deg,#667eea,#764ba2)}.hero-demo .out-frame.dark .out-frame-top{background:linear-gradient(135deg,#4c51bf,#553c9a)}.hero-demo .out-frame-body{padding:5px}.hero-demo .out-eyebrow{font-size:4px;font-weight:600;color:var(--hd-accent);margin-bottom:1px}.hero-demo .out-title{font-size:5px;font-weight:700;color:var(--hd-text-primary);line-height:1.2;margin-bottom:3px}.hero-demo .out-frame.dark .out-title{color:#fafaf9}.hero-demo .out-mock{height:60px;background:var(--hd-mockup);border-radius:3px}.hero-demo .out-frame.dark .out-mock{background:#292524}.hero-demo .out-theme{font-size:7px;font-weight:600;color:var(--hd-text-subtle);text-align:center;margin-top:3px}.hero-demo .progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--hd-border)}.hero-demo .progress-bar{height:100%;background:linear-gradient(90deg,#c2410c,#d97706,#f59e0b);width:0%;transition:width .1s linear}@media(max-width:767px){.hero-demo{display:none}}