.demo-v2{background:#f4f7fa}.demo-v2-app{min-height:100vh}.demo-v2-hero{padding:44px 0 30px;background:linear-gradient(135deg,#f4fafc 0%,#fff 62%,#fff8ed 100%);border-bottom:1px solid var(--color-border)}.demo-v2-hero>.public-container{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.demo-v2-hero h1{font-size:clamp(2rem,4vw,3.25rem);letter-spacing:-1.7px;margin:14px 0 8px;max-width:820px}.demo-v2-hero p{max-width:760px;color:var(--color-text-muted);margin:0}.demo-mode-switch{display:flex;gap:8px;flex:0 0 auto;background:#fff;padding:6px;border:1px solid var(--color-border);border-radius:13px;box-shadow:var(--shadow-sm)}
.demo-v2-progress{position:sticky;top:64px;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}.demo-progress-track{display:grid;grid-template-columns:repeat(5,1fr);padding-top:12px;padding-bottom:12px}.demo-progress-step{position:relative;display:flex;align-items:center;gap:9px;border:0;background:none;color:#778396;padding:5px 8px;text-align:left;cursor:pointer}.demo-progress-step:after{content:"";position:absolute;height:2px;left:40px;right:-8px;top:20px;background:#dce4ea;z-index:-1}.demo-progress-step:last-child:after{display:none}.demo-progress-step span{display:grid;place-items:center;width:31px;height:31px;flex:0 0 31px;border-radius:50%;background:#eef2f5;border:2px solid #dce4ea;font-size:.7rem;font-weight:800}.demo-progress-step strong{font-size:.68rem;line-height:1.2}.demo-progress-step.active{color:var(--color-primary)}.demo-progress-step.active span{background:var(--color-primary);border-color:var(--color-primary);color:#fff;box-shadow:0 0 0 5px var(--color-primary-soft)}.demo-progress-step.done span{background:#dff2e9;border-color:#8bc9aa;color:#176b4d}.demo-progress-step.done:after{background:#8bc9aa}
.demo-v2-form{padding:34px 0 12px}.demo-errors{max-width:900px;margin:0 auto 20px}.demo-stage{display:none;animation:demoFade .24s ease}.demo-stage.active{display:block}@keyframes demoFade{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}.demo-stage-header{display:flex;align-items:flex-start;justify-content:space-between;gap:25px;margin-bottom:18px}.demo-stage-header>div{display:flex;align-items:center;gap:12px}.demo-stage-header>div>span{color:var(--color-primary);font-size:.68rem;font-weight:900;letter-spacing:1px}.demo-stage-header h2{font-size:1.45rem;margin:0}.demo-stage-header>p{max-width:520px;background:#e8f5f8;border-left:3px solid var(--color-primary);padding:10px 13px;margin:0;color:#476171;font-size:.76rem;border-radius:0 8px 8px 0}.demo-v2-app[data-mode="interactive"] [data-guide-text]{display:none}
.demo-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.demo-project-card{display:flex;flex-direction:column;min-height:280px;text-align:left;background:#fff;border:1px solid var(--color-border);border-radius:16px;padding:17px;cursor:pointer;color:var(--color-text);box-shadow:var(--shadow-sm);transition:.18s ease}.demo-project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#9bc9d8}.demo-project-card.selected{border:2px solid var(--color-primary);padding:16px;box-shadow:0 0 0 4px var(--color-primary-soft)}.demo-project-sketch{height:130px;border-radius:11px;background-color:#f6f9fb;background-repeat:no-repeat;background-position:center;background-size:78% 78%;margin-bottom:15px}.demo-project-sketch-gable{background-image:linear-gradient(145deg,transparent 48%,#176b87 49% 52%,transparent 53%),linear-gradient(215deg,transparent 48%,#176b87 49% 52%,transparent 53%)}.demo-project-sketch-hip{clip-path:polygon(22% 82%,35% 20%,65% 20%,78% 82%);background:linear-gradient(90deg,#d8ebf1 0 49%,#c7e1e9 50%)}.demo-project-sketch-mansard{clip-path:polygon(12% 85%,25% 35%,42% 14%,58% 14%,75% 35%,88% 85%);background:#d8ebf1}.demo-project-meta{display:flex;flex-direction:column;gap:7px}.demo-project-meta strong{font-size:.95rem}.demo-project-meta small{color:var(--color-text-muted);line-height:1.45}.demo-project-tags{display:flex;gap:7px;margin-top:auto;padding-top:15px}.demo-project-tags em{font-style:normal;font-size:.63rem;font-weight:700;color:#536174;background:#f1f4f6;padding:5px 8px;border-radius:999px}
.demo-workspace{display:grid;grid-template-columns:minmax(340px,.8fr) minmax(460px,1.2fr);gap:18px}.demo-panel{background:#fff;border:1px solid var(--color-border);border-radius:15px;padding:20px;box-shadow:var(--shadow-sm)}.demo-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.demo-field-grid label{display:flex;flex-direction:column;gap:5px;font-size:.74rem;font-weight:800;color:#435064}.demo-field-grid label>small{min-height:28px;color:var(--color-text-muted);font-weight:500;line-height:1.35}.demo-field-grid input,.demo-field-grid select{width:100%;min-height:48px;border:1px solid #cbd5df;border-radius:9px;background:#fff;color:var(--color-text);padding:10px 12px;font-size:.84rem}.demo-field-grid input:focus,.demo-field-grid select:focus{outline:3px solid var(--color-primary-soft);border-color:var(--color-primary)}.input-unit{position:relative}.input-unit input{padding-right:80px}.input-unit b{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.67rem;color:#758196}.demo-panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.demo-panel-title strong{font-size:.8rem}.demo-panel-title span{font-size:.62rem;font-weight:800;color:#126849;background:#e7f6f0;padding:5px 8px;border-radius:999px}.demo-roof-svg{display:block;width:100%;height:auto;max-height:390px}.demo-visual-note{font-size:.67rem;color:var(--color-text-muted);text-align:center;margin:5px 0 0}.demo-material-workspace{grid-template-columns:1.2fr .8fr}.demo-check{display:flex;align-items:flex-start;gap:10px;margin-top:18px;background:#f5f9fb;border:1px solid var(--color-border);padding:13px;border-radius:10px}.demo-check input{margin-top:3px}.demo-check span{display:flex;flex-direction:column}.demo-check small{color:var(--color-text-muted);margin-top:3px}.demo-included-panel h3{margin-top:0;font-size:1rem}.demo-included-panel ul{list-style:none;padding:0;margin:15px 0}.demo-included-panel li{font-size:.77rem;margin:9px 0;color:#3d5b67}.demo-included-panel p{background:#fff5df;color:#78501b;border-radius:9px;padding:11px;font-size:.7rem}
.demo-calculate-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#173b48;color:#fff;padding:18px 20px;border-radius:14px;margin-bottom:16px}.demo-calculate-bar p{margin:3px 0 0;color:#c4d5db;font-size:.74rem}.demo-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:16px}.demo-kpis article{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:15px;display:flex;flex-direction:column}.demo-kpis span{font-size:.65rem;color:var(--color-text-muted);font-weight:700}.demo-kpis strong{font-size:1.35rem;margin:5px 0}.demo-kpis small{color:#778396;font-size:.62rem;line-height:1.35}.demo-kpis .primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.demo-kpis .primary span,.demo-kpis .primary small{color:#d9eef4}.demo-results-panel{background:#fff;border:1px solid var(--color-border);border-radius:15px;box-shadow:var(--shadow-sm);overflow:hidden}.demo-result-tabs{display:flex;border-bottom:1px solid var(--color-border);padding:0 14px;overflow-x:auto}.demo-result-tabs button{border:0;background:none;color:#6d788a;padding:15px 14px;font-weight:800;font-size:.72rem;white-space:nowrap;border-bottom:3px solid transparent;cursor:pointer}.demo-result-tabs button.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.demo-result-pane{display:none;padding:20px}.demo-result-pane.active{display:block}.demo-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.demo-summary-grid>div{background:#f6f8fa;border-radius:10px;padding:14px;display:flex;flex-direction:column}.demo-summary-grid span{font-size:.65rem;color:var(--color-text-muted)}.demo-summary-grid strong{margin-top:5px}.responsive-table{overflow-x:auto}.responsive-table table{width:100%;border-collapse:collapse}.responsive-table th{background:#f4f7f9;color:#68758a;text-transform:uppercase;letter-spacing:.5px;font-size:.62rem;text-align:left;padding:11px}.responsive-table td{border-bottom:1px solid #e8edf1;padding:11px;font-size:.75rem}.demo-geometry-lines{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.demo-geometry-lines span{background:#eef5f7;border-radius:8px;padding:9px 11px;font-size:.68rem}.demo-formula-button{border:0;background:none;color:var(--color-primary);font-weight:800;font-size:.7rem;padding:14px 0 0;cursor:pointer}.demo-cost-list{max-width:620px}.demo-cost-list span{display:flex;justify-content:space-between;border-bottom:1px solid var(--color-border);padding:10px 2px;font-size:.78rem}.demo-cost-list .total{font-size:.95rem;color:var(--color-primary);border-bottom:0;background:var(--color-primary-soft);padding:13px;margin-top:8px;border-radius:9px}.demo-save-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;background:#fff8ea;border:1px solid #f0d7a9;border-radius:12px;padding:15px 18px}.demo-save-cta p{margin:3px 0 0;color:#796443;font-size:.7rem}
.demo-offer{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:17px;padding:28px;box-shadow:var(--shadow-md);overflow:hidden}.demo-offer>header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #e8edf1;padding-bottom:18px;margin-bottom:18px}.demo-offer>header h2{margin:9px 0 3px}.demo-offer>header p{margin:0;color:var(--color-text-muted);font-size:.75rem}.demo-offer>header>strong{font-size:2.15rem;color:var(--color-primary)}.demo-offer>header>strong small{font-size:.8rem}.demo-offer>footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px}.demo-offer>footer p{max-width:650px;color:var(--color-text-muted);font-size:.68rem}.demo-offer-watermark{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-23deg);font-size:3.3rem;font-weight:900;color:rgba(23,107,135,.065);white-space:nowrap;pointer-events:none}.demo-full-note{text-align:center;padding:17px;color:#5d6879;font-size:.76rem}.demo-stage-nav{display:flex;align-items:center;justify-content:space-between;margin:22px 0}.demo-stage-nav span{font-size:.7rem;color:var(--color-text-muted);font-weight:800}
.demo-full-features,.demo-comparison{padding:70px 0}.demo-full-features{background:#fff}.demo-section-heading{text-align:center;max-width:760px;margin:0 auto 28px}.demo-section-heading h2{font-size:2rem;margin:13px 0 8px}.demo-section-heading p{color:var(--color-text-muted)}.demo-v2 .locked-grid{grid-template-columns:repeat(4,1fr)}.demo-v2 .locked-feature{appearance:none;text-align:left;cursor:pointer;min-height:180px}.demo-v2 .locked-feature:after{display:none}.demo-v2 .locked-feature>span{font-size:1.2rem}.demo-v2 .locked-feature em{display:inline-block;margin-top:14px;font-style:normal;font-size:.6rem;font-weight:800;color:#8b5a18;background:#fff2d9;padding:5px 7px;border-radius:6px}.demo-comparison .responsive-table{max-width:920px;margin:auto;background:#fff;border:1px solid var(--color-border);border-radius:14px;box-shadow:var(--shadow-sm)}.demo-comparison td:nth-child(2),.demo-comparison td:nth-child(3),.demo-comparison th:nth-child(2),.demo-comparison th:nth-child(3){text-align:center}.demo-comparison td:nth-child(3){color:#126849}.demo-final-cta{padding:70px 0;text-align:center;background:#e6f2f6}.demo-final-cta h2{font-size:2rem;margin:0}.demo-final-cta p{color:var(--color-text-muted)}.demo-final-cta>div>div{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:22px}.demo-dialog{width:min(540px,calc(100% - 30px));border:0;border-radius:16px;padding:25px;box-shadow:0 24px 70px rgba(19,35,48,.28);color:var(--color-text)}.demo-dialog::backdrop{background:rgba(15,28,39,.55);backdrop-filter:blur(3px)}.demo-dialog h2{margin-top:0}.demo-dialog p{color:var(--color-text-muted);line-height:1.6}.demo-dialog-close{position:absolute;right:12px;top:10px;border:0;background:none;font-size:1.5rem;cursor:pointer;color:#6f7a8a}
@media(max-width:980px){.demo-v2-hero>.public-container{align-items:flex-start;flex-direction:column}.demo-progress-step strong{display:none}.demo-progress-step{justify-content:center}.demo-progress-step:after{left:50%;right:-50%}.demo-workspace,.demo-material-workspace{grid-template-columns:1fr}.demo-kpis{grid-template-columns:repeat(2,1fr)}.demo-v2 .locked-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.demo-v2-hero{padding:30px 0 22px}.demo-mode-switch{width:100%;flex-direction:column}.demo-mode-switch .button{width:100%}.demo-v2-progress{top:64px}.demo-progress-track{padding-left:0;padding-right:0}.demo-stage-header{flex-direction:column;gap:10px}.demo-stage-header>p{max-width:none}.demo-project-grid,.demo-field-grid,.demo-kpis,.demo-summary-grid,.demo-v2 .locked-grid{grid-template-columns:1fr}.demo-project-card{min-height:235px}.demo-project-sketch{height:100px}.demo-panel{padding:15px}.demo-calculate-bar,.demo-save-cta,.demo-offer>header,.demo-offer>footer{align-items:stretch;flex-direction:column}.demo-calculate-bar .button,.demo-save-cta .button{width:100%}.demo-result-pane{padding:14px}.demo-offer{padding:18px 13px}.demo-offer-watermark{font-size:1.7rem}.demo-offer>header>strong{font-size:1.7rem}.demo-stage-nav{position:sticky;bottom:8px;z-index:15;background:rgba(255,255,255,.96);padding:8px;border:1px solid var(--color-border);border-radius:12px;box-shadow:var(--shadow-md)}.demo-result-pane .responsive-table table,.demo-result-pane .responsive-table tbody,.demo-result-pane .responsive-table tr,.demo-result-pane .responsive-table td{display:block}.demo-result-pane .responsive-table thead{display:none}.demo-result-pane .responsive-table tr{border:1px solid var(--color-border);border-radius:9px;margin-bottom:9px;padding:6px}.demo-result-pane .responsive-table td{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #eef1f3;padding:8px}.demo-result-pane .responsive-table td:last-child{border-bottom:0}.demo-result-pane .responsive-table td[data-label]:before{content:attr(data-label);font-weight:700;color:#718095}.demo-final-cta>div>div{flex-direction:column}.demo-final-cta .button{width:100%}}