/* Bonyel | Mis Webs — compact black portfolio */
body.page-template-page-mis-webs,body.page-template-page-mis-webs-php{background:#050506!important}
.bonyel-webs{background:#050506;color:#f8f9fb;min-height:100vh;padding:42px 0 90px;font-family:Inter,Arial,sans-serif;overflow:hidden}
.bonyel-webs *{box-sizing:border-box}.bonyel-webs a{text-decoration:none}.webs-wrap{width:min(1200px,calc(100% - 48px));margin:auto}.webs-top{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#8590a7;font-size:11px;letter-spacing:.19em}.webs-back{font-size:14px;letter-spacing:0;color:#c4cddd!important;transition:color .2s}.webs-back:hover{color:#fff!important}.webs-heading{margin:48px 0 38px}.webs-kicker{font-size:12px;font-weight:800;letter-spacing:.22em;color:#8d99b1}.webs-heading h1{font-size:clamp(46px,5.5vw,76px);letter-spacing:-.065em;line-height:1.08;margin:12px 0}.webs-heading h1 span{color:#b8c4db}.webs-heading p{color:#a2adbf;font-size:17px;margin:0}.webs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.webs-card{min-width:0;overflow:hidden;border:1px solid #2b303a;border-radius:18px;background:linear-gradient(145deg,#0b0d12,#08090d);transition:border-color .2s,transform .2s}.webs-card:hover{border-color:#5a6679;transform:translateY(-3px)}.webs-preview{display:block;height:350px;position:relative;overflow:hidden;padding:34px 26px 0;background:radial-gradient(ellipse at 60% 100%,#0b1e29,#080a0e 70%)}.webs-preview-payroll{background:radial-gradient(ellipse at 70% 25%,#102b61,#090b12 75%)}.webs-window{width:105%;height:340px;margin:auto;border:1px solid #536079;border-radius:15px 15px 0 0;overflow:hidden;transform:rotate(-3deg) translateY(6px);box-shadow:0 25px 65px #0009;transition:transform .3s}.webs-card:hover .webs-window{transform:rotate(0) translateY(0)}.webs-preview-payroll .webs-window{transform:rotate(3deg) translateY(6px)}.webs-card:hover .webs-preview-payroll .webs-window{transform:rotate(0) translateY(0)}.webs-window-bar{height:26px;display:flex;align-items:center;gap:5px;padding:0 12px;background:#1c222d}.webs-window-bar i{height:7px;width:7px;border-radius:50%;background:#fb6470}.webs-window-bar i:nth-child(2){background:#ffc44d}.webs-window-bar i:nth-child(3){background:#31c985}.webs-window-bar small{margin:auto;font-size:9px;color:#97a1b3}.webs-dashboard{height:100%;background:#070d14;padding:22px;color:#eef5fb}.webs-dashboard-title{font-size:17px;font-weight:800;display:flex;justify-content:space-between}.webs-dashboard-title span{font-size:10px;color:#9da8b9;border:1px solid #293546;border-radius:5px;padding:5px}.webs-dash-subtitle{font-size:11px;color:#a2b1be;margin-top:22px}.webs-dash-subtitle strong{display:block;font-size:23px;color:#00dba2;margin-top:3px}.webs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}.webs-metrics div{border:1px solid #263343;background:#0e1722;border-radius:6px;padding:10px;font-size:9px;color:#8d9aaf}.webs-metrics b{display:block;font-size:17px;color:#fff;margin-top:5px}.webs-chart-label{font-size:11px;font-weight:700}.webs-dashboard svg{width:100%;height:110px;margin-top:8px}.webs-window-light{background:#f4f8ff;border-color:#bdcbe2}.webs-window-light .webs-window-bar{background:#e3ebfa}.webs-window-light .webs-window-bar small{color:#7483a3}.webs-payroll{padding:18px;color:#132b5b;background:#f3f7ff;height:100%}.webs-payroll-brand{color:#115be6;font-weight:800;font-size:15px;margin-bottom:22px}.webs-payroll-layout{display:grid;grid-template-columns:.7fr 1.3fr 1fr;gap:10px}.webs-payroll-side span{display:block;font-size:10px;color:#60749b;margin-bottom:17px}.webs-payroll-form,.webs-payroll-result{background:#fff;border-radius:10px;padding:15px;box-shadow:0 2px 12px #1b3b7010}.webs-payroll-form b,.webs-payroll-result b{display:block;font-size:16px}.webs-payroll-form small{display:block;font-size:9px;color:#7c8ba4;margin:6px 0 14px}.webs-payroll-form label{font-size:9px;display:block;color:#647797;margin-bottom:4px}.webs-fake-input{border:1px solid #d5dff0;border-radius:5px;font-size:11px;padding:9px;margin-bottom:12px}.webs-fake-button{background:#1258f0;color:#fff;text-align:center;border-radius:6px;padding:11px;font-size:11px;font-weight:700}.webs-payroll-result b{font-size:12px}.webs-payroll-result strong{display:block;font-size:20px;margin:22px 0}.webs-payroll-result span{display:flex;justify-content:space-between;font-size:9px;color:#63748f;margin:12px 0}.webs-payroll-result em{font-style:normal;color:#182c56}.webs-payroll-result>div{background:#eaf2ff;color:#1054df;padding:10px;border-radius:6px;font-size:10px;font-weight:800}.webs-card-info{padding:25px 29px 27px;border-top:1px solid #222831}.webs-card-name{display:flex;align-items:flex-start;gap:16px}.webs-icon{display:grid;place-items:center;flex:0 0 62px;height:62px;border-radius:13px;font-size:28px}.webs-icon-profit{color:#00dba2;background:#05261f}.webs-icon-payroll{color:#fff;background:#477cf4}.webs-card-name h2{font-size:25px;letter-spacing:-.04em;margin:0 0 5px}.webs-card-name p{font-size:14px;line-height:1.6;color:#a1adbe;margin:0;max-width:330px}.webs-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:26px}.webs-card-bottom>span{font-size:13px;color:#8d9cb4}.webs-card-bottom a{color:#fff!important;font-size:13px;font-weight:700;border:1px solid #303845;border-radius:11px;padding:12px 16px;white-space:nowrap}.webs-card-bottom a:hover{background:#202631}.webs-card-bottom a span{margin-left:12px;font-size:17px}
@media(max-width:850px){.webs-grid{grid-template-columns:1fr;max-width:610px;margin:auto}.webs-heading{margin:36px 0 28px}.webs-preview{height:330px}}@media(max-width:520px){.bonyel-webs{padding:28px 0 60px}.webs-wrap{width:calc(100% - 28px)}.webs-top>span{font-size:9px}.webs-heading p{font-size:14px}.webs-grid{gap:18px}.webs-preview{height:245px;padding:20px 14px 0}.webs-window{height:270px}.webs-dashboard{padding:12px}.webs-dashboard-title{font-size:13px}.webs-dash-subtitle{margin-top:10px}.webs-dash-subtitle strong{font-size:17px}.webs-metrics{margin:8px 0}.webs-metrics div{font-size:7px;padding:6px}.webs-metrics b{font-size:12px}.webs-payroll{padding:9px}.webs-payroll-brand{font-size:12px;margin-bottom:12px}.webs-payroll-layout{gap:5px}.webs-payroll-side span{font-size:7px;margin-bottom:10px}.webs-payroll-form,.webs-payroll-result{padding:7px}.webs-payroll-form b{font-size:11px}.webs-payroll-form small,.webs-payroll-form label{font-size:7px}.webs-fake-input,.webs-fake-button{font-size:8px;padding:5px;margin-bottom:5px}.webs-payroll-result b{font-size:9px}.webs-payroll-result strong{font-size:13px;margin:12px 0}.webs-payroll-result span{font-size:7px;margin:6px 0}.webs-card-info{padding:20px}.webs-icon{flex-basis:45px;height:45px;font-size:22px}.webs-card-name h2{font-size:21px}.webs-card-name p{font-size:12px}.webs-card-bottom>span{font-size:11px}.webs-card-bottom a{font-size:11px;padding:10px}.webs-card-bottom a span{margin-left:4px}}
@media(prefers-reduced-motion:reduce){.webs-card,.webs-window{transition:none}}

/* Card click and website/app choice popup */
.webs-card-choice{cursor:pointer}
.webs-card-choice:focus-visible{outline:2px solid #a9b8d2;outline-offset:4px}
.webs-choice-cta{display:inline-flex;align-items:center;color:#fff!important;font-size:13px;font-weight:700;border:1px solid #303845;border-radius:11px;padding:12px 16px;white-space:nowrap}
.webs-choice-cta span{margin-left:12px;font-size:17px}
.webs-card-choice:hover .webs-choice-cta{background:#202631}
body.webs-dialog-open{overflow:hidden}
.webs-dialog-overlay[hidden]{display:none!important}
.webs-dialog-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.78);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}
.webs-dialog{position:relative;width:min(100%,440px);border:1px solid #303641;border-radius:20px;background:#0d0f14;color:#f7f8fa;padding:34px;box-shadow:0 30px 100px #000c;font-family:Inter,Arial,sans-serif}
.webs-dialog-close{position:absolute;top:16px;right:18px;width:34px;height:34px;border:1px solid #303641;border-radius:9px;background:#171a21;color:#fff;font-size:23px;cursor:pointer}
.webs-dialog-kicker{font-size:10px;letter-spacing:.2em;color:#9aa9bf;font-weight:800}
.webs-dialog h2{font-size:30px;letter-spacing:-.04em;margin:12px 0 7px}
.webs-dialog p{font-size:14px;color:#a6b1c1;margin:0 0 25px}
.webs-dialog-option{display:flex;align-items:center;gap:14px;border:1px solid #343b48;border-radius:12px;background:#151920;padding:16px;margin-top:12px;color:#fff!important;text-decoration:none!important}
a.webs-dialog-option:hover{border-color:#8293ad;background:#1b222d}
.webs-dialog-option-icon{width:42px;height:42px;border-radius:10px;background:#252d39;display:grid;place-items:center;font-size:22px;flex-shrink:0}
.webs-dialog-option strong,.webs-dialog-option small{display:block}
.webs-dialog-option strong{font-size:14px}.webs-dialog-option small{font-size:11px;color:#a7b0c0;margin-top:5px}
.webs-dialog-arrow{margin-left:auto;font-size:21px}
.webs-dialog-disabled{opacity:.55;cursor:not-allowed}
.webs-dialog-soon{font-size:9px;letter-spacing:.06em;margin-left:auto;white-space:nowrap;color:#c6ceda}
@media(max-width:520px){.webs-choice-cta{font-size:11px;padding:10px}.webs-choice-cta span{margin-left:4px}.webs-dialog{padding:28px 20px}.webs-dialog-soon{font-size:8px}}