/* WolkTechAI Demo v0.11 — responsywność prezentacji */
html,body{max-width:100%;overflow-x:hidden}
body.demo-nav-open{overflow:hidden;touch-action:none}
.demo-sidebar-close,.demo-sidebar-backdrop{display:none}
.demo-main,.demo-content,.demo-view{min-width:0;max-width:100%}
img,svg,video,canvas{max-width:100%;height:auto}

@media(max-width:1250px){
    .demo-sidebar{
        z-index:80;width:min(88vw,330px);max-width:330px;
        padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));
        overflow-y:auto;overscroll-behavior:contain;box-shadow:24px 0 70px rgba(0,0,0,.3)
    }
    .demo-sidebar-close{
        display:grid;place-items:center;position:absolute;right:12px;top:max(12px,env(safe-area-inset-top));
        width:40px;height:40px;border:1px solid rgba(255,255,255,.12);border-radius:12px;
        background:rgba(255,255,255,.06);color:#e6f2ef;font-size:25px;line-height:1;cursor:pointer
    }
    .demo-sidebar-backdrop{
        display:block;position:fixed;inset:0;z-index:70;border:0;padding:0;
        background:rgba(5,14,18,.56);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s ease
    }
    body.demo-nav-open .demo-sidebar-backdrop{opacity:1;pointer-events:auto}
    .demo-topbar{z-index:60;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}

@media(max-width:900px){
    .demo-hero,.demo-generator-layout{grid-template-columns:1fr!important}
    .demo-metrics,.demo-feature-grid,.demo-security-flow,.demo-tool-grid,.demo-provider-grid,.demo-token-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .demo-hero-visual{min-height:0}
}

@media(max-width:720px){
    .demo-topbar{min-height:76px;padding-top:12px;padding-bottom:12px;gap:10px}
    .demo-topbar h1{font-size:20px!important;line-height:1.2;overflow-wrap:anywhere}
    .demo-eyebrow{font-size:9px}
    .demo-topbar-actions{gap:7px}.demo-live-badge{display:none!important}
    .demo-login-button{min-height:40px;padding:8px 11px;font-size:12px;white-space:nowrap}
    .demo-content{padding:16px!important}
    .demo-notice{padding:12px 14px;align-items:flex-start;flex-direction:column;gap:4px}
    .demo-hero{padding:20px!important;border-radius:20px}
    .demo-hero h2{font-size:clamp(32px,10vw,42px)!important;line-height:1.06}
    .demo-hero p{font-size:15px!important}
    .demo-hero-actions{display:grid;grid-template-columns:1fr;width:100%}.demo-hero-actions>*{width:100%}
    .demo-metrics,.demo-feature-grid,.demo-security-flow,.demo-tool-grid,.demo-provider-grid,.demo-token-stats{grid-template-columns:1fr!important;gap:12px}
    .demo-panel,.demo-feature-card,.demo-tool-grid article,.demo-security-flow article,.demo-provider-grid article,.demo-token-panel{padding:17px!important;border-radius:18px}
    .demo-section-head,.demo-token-head{flex-direction:column;align-items:flex-start!important}
    .demo-section-head h2{font-size:24px!important}.demo-section-head h3{font-size:21px!important}
    .demo-generator-footer,.demo-catalog-toolbar{grid-template-columns:1fr!important}
    .demo-generator-footer .demo-primary-button{width:100%}
    .demo-chips button{flex:1 1 auto}
    .demo-catalog-toolbar>div{justify-items:start!important}
    .demo-provider-grid article{grid-template-columns:auto minmax(0,1fr)!important}
    .demo-provider-grid article>b{grid-column:1/-1;justify-self:start}
    .demo-security-console{overflow:hidden;border-radius:18px}
    .demo-security-console pre{font-size:12px;padding:15px;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
    .demo-token-head>strong{font-size:17px;overflow-wrap:anywhere}
    textarea,input,select,button{font-size:16px!important}
}

@media(max-width:480px){
    .demo-content{padding:12px!important}
    .demo-topbar{padding-left:12px;padding-right:12px}
    .demo-topbar-actions{margin-left:auto}.demo-login-button{font-size:11px;padding:8px 9px}
    .demo-hero{padding:16px!important}.demo-hero h2{font-size:31px!important}
    .demo-flow-node{padding:11px 12px}
    .demo-panel,.demo-feature-card,.demo-tool-grid article,.demo-security-flow article,.demo-provider-grid article,.demo-token-panel{padding:15px!important}
    .demo-provider-grid article{grid-template-columns:1fr!important}.demo-provider-logo{width:42px;height:42px}
    .demo-process-list>div{padding:10px}
    .demo-primary-button,.demo-secondary-button{width:100%}
}