/* Webcotec Portfolio Final Backend Connected */
:root{--wc-navy:#071832;--wc-blue:#0167ff;--wc-orange:#fea100;--wc-pink:#dd2b90;--wc-purple:#8f2fff;--wc-text:#08152f;--wc-muted:#60708a;--wc-border:#dce7f5;--wc-grad:linear-gradient(135deg,#0167ff 0%,#dd2b90 58%,#fea100 100%)}
*{box-sizing:border-box}.wc-pf-body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#f6fbff;color:var(--wc-text)}.wc-pf-top{background:#061331;color:#fff;font-weight:800;font-size:14px}.wc-pf-top .wc-wrap{display:flex;justify-content:space-between;gap:18px;padding:8px 22px}.wc-pf-header{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);z-index:99;border-bottom:1px solid rgba(7,24,50,.08)}.wc-wrap{max-width:1320px;margin:0 auto;padding:0 22px}.wc-pf-nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:22px}.wc-pf-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--wc-text);font-weight:950}.wc-pf-logo img{width:138px;height:auto;object-fit:contain}.wc-pf-menu{display:flex;gap:24px;align-items:center}.wc-pf-menu a{color:#071832;text-decoration:none;font-weight:900}.wc-pf-quote{background:var(--wc-grad);color:#fff!important;padding:15px 22px;border-radius:16px;box-shadow:0 18px 35px rgba(221,43,144,.22)}.wc-portfolio-hero{position:relative;padding:86px 0 58px;background:radial-gradient(circle at 16% 12%,rgba(1,103,255,.12),transparent 32%),radial-gradient(circle at 85% 18%,rgba(221,43,144,.12),transparent 30%)}.wc-portfolio-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}.wc-eyebrow{display:inline-flex;gap:10px;align-items:center;text-transform:uppercase;letter-spacing:.13em;color:#0659ff;font-size:13px;font-weight:950;margin-bottom:14px}.wc-eyebrow:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--wc-grad);box-shadow:0 0 0 7px rgba(221,43,144,.09)}.wc-portfolio-hero h1{font-size:clamp(42px,5.7vw,80px);line-height:.96;margin:0 0 22px;letter-spacing:-.07em}.wc-portfolio-hero p{font-size:19px;line-height:1.65;color:#50647f;max-width:720px;margin:0 0 26px}.wc-hero-points{display:flex;gap:12px;flex-wrap:wrap}.wc-hero-points span{background:#fff;border:1px solid var(--wc-border);border-radius:999px;padding:12px 16px;font-weight:900;box-shadow:0 12px 28px rgba(7,24,50,.06)}.wc-portfolio-logo-card{height:310px;border-radius:36px;background:linear-gradient(145deg,#fff,#edf6ff);border:1px solid var(--wc-border);display:grid;place-items:center;box-shadow:0 24px 70px rgba(7,24,50,.08);position:relative;overflow:hidden}.wc-portfolio-logo-card:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--wc-grad);opacity:.16;right:-80px;top:-80px}.wc-portfolio-logo-card strong{font-size:54px;line-height:.98;letter-spacing:-.06em;text-align:center;position:relative;z-index:2;background:var(--wc-grad);-webkit-background-clip:text;color:transparent}.wc-filter-shell{margin:-26px auto 38px;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border:1px solid var(--wc-border);border-radius:24px;box-shadow:0 20px 60px rgba(7,24,50,.08);padding:22px;position:relative;z-index:3}.wc-filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.wc-filter-btn{border:1px solid var(--wc-border);background:#fff;color:#102243;border-radius:13px;padding:12px 16px;font-weight:900;cursor:pointer}.wc-filter-btn:hover,.wc-filter-btn.active{background:var(--wc-grad);border-color:transparent;color:#fff;box-shadow:0 14px 28px rgba(1,103,255,.18)}.wc-filter-search{margin-left:auto;display:flex;gap:12px;min-width:360px}.wc-filter-search input,.wc-filter-search select{width:100%;border:1px solid var(--wc-border);border-radius:14px;background:#fff;padding:13px 15px;color:#102243;font-weight:750;outline:0}.wc-portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-bottom:48px}.wc-project-card{background:#fff;border:1px solid var(--wc-border);border-radius:24px;overflow:hidden;box-shadow:0 18px 46px rgba(7,24,50,.07);transition:.25s;display:flex;flex-direction:column}.wc-project-card:hover{transform:translateY(-7px);box-shadow:0 30px 70px rgba(7,24,50,.12)}.wc-project-img{aspect-ratio:16/10;background:#eef5ff;overflow:hidden;display:block}.wc-project-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.wc-project-card:hover .wc-project-img img{transform:scale(1.05)}.wc-project-body{padding:24px;display:flex;flex-direction:column;min-height:310px}.wc-project-platform{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:950;color:#6f39ff;margin-bottom:10px}.wc-project-body h3{font-size:25px;line-height:1.08;letter-spacing:-.04em;margin:0 0 12px}.wc-project-body p{font-size:16px;line-height:1.55;color:#60708a;margin:0 0 18px}.wc-tech-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}.wc-tech-tag{border-radius:999px;background:#edf5ff;border:1px solid #d8e7ff;color:#075eff;padding:8px 11px;font-size:12px;font-weight:900}.wc-project-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid var(--wc-border);padding-top:16px;margin-top:18px;font-weight:900;font-size:14px}.wc-preview-link,.wc-case-link{color:#075eff;text-decoration:none}.wc-empty{display:none;grid-column:1/-1;background:#fff;border:1px dashed var(--wc-border);border-radius:24px;padding:46px;text-align:center;color:#60708a;font-weight:900}.wc-portfolio-cta{margin:12px 0 70px;background:linear-gradient(135deg,#071832,#0d4f8c);border-radius:26px;padding:32px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}.wc-portfolio-cta h2{margin:0 0 8px;font-size:30px}.wc-portfolio-cta p{margin:0;color:#cfe1ff}.wc-cta-actions{display:flex;gap:12px}.wc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;padding:15px 20px;text-decoration:none;font-weight:950;border:1px solid transparent}.wc-btn-primary{background:var(--wc-grad);color:#fff}.wc-btn-light{background:#fff;color:#071832}.wc-pf-footer{background:#061331;color:#fff;padding:48px 0}.wc-pf-footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px}.wc-pf-footer a{color:#cfe1ff;text-decoration:none;display:block;margin:9px 0}.wc-pf-footer p{color:#cfe1ff;line-height:1.65}
/* detail */
.wc-case-hero{padding:68px 0 42px;background:linear-gradient(120deg,#f6fbff,#fff6f0)}.wc-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.wc-back{display:inline-flex;color:#075eff;text-decoration:none;font-weight:900;margin-bottom:20px}.wc-case-hero h1{font-size:clamp(40px,5.4vw,70px);line-height:.99;letter-spacing:-.065em;margin:0 0 18px}.wc-case-hero p{font-size:18px;line-height:1.65;color:#60708a;margin:0 0 22px}.wc-case-badges{display:flex;gap:10px;flex-wrap:wrap}.wc-case-badge{background:#fff;border:1px solid var(--wc-border);border-radius:12px;padding:11px 14px;font-weight:900}.wc-browser-shot{background:#fff;border:1px solid var(--wc-border);border-radius:24px;padding:14px;box-shadow:0 24px 70px rgba(7,24,50,.1)}.wc-browser-bar{display:flex;gap:6px;padding:6px 8px 12px}.wc-browser-bar span{width:11px;height:11px;border-radius:50%;background:#ff5f57}.wc-browser-bar span:nth-child(2){background:#ffbd2e}.wc-browser-bar span:nth-child(3){background:#28c840}.wc-browser-shot img{width:100%;border-radius:16px;display:block;aspect-ratio:16/10;object-fit:cover;background:#eef5ff}.wc-case-content{padding:42px 0 74px}.wc-case-block-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:22px;margin-bottom:22px}.wc-case-card{background:#fff;border:1px solid var(--wc-border);border-radius:24px;padding:28px;box-shadow:0 15px 45px rgba(7,24,50,.05)}.wc-case-card h2{margin:0 0 16px;font-size:26px;letter-spacing:-.04em}.wc-case-card p,.wc-case-card li{color:#60708a;line-height:1.65;font-size:16px}.wc-solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.wc-solution-box{border:1px solid var(--wc-border);border-radius:18px;padding:20px;background:#fbfdff}.wc-solution-icon{width:42px;height:42px;border-radius:14px;background:#edf5ff;color:#075eff;display:grid;place-items:center;font-weight:950;margin-bottom:12px}.wc-before-after{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}.wc-score{background:#fff;border:1px solid var(--wc-border);border-radius:22px;padding:24px;text-align:center}.wc-score .num{font-size:64px;line-height:1;font-weight:950;letter-spacing:-.07em}.wc-score.before .num{color:#ff4d4d}.wc-score.after .num{color:#08a75a}.wc-arrow-round{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--wc-grad);color:#fff;font-weight:950}.wc-results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.wc-result-card{background:#fff;border:1px solid var(--wc-border);border-radius:18px;padding:22px}.wc-result-card strong{font-size:28px;color:#075eff;display:block;margin-bottom:6px}.wc-testimonial-wrap{display:grid;grid-template-columns:1.6fr .8fr;gap:22px}.wc-quote{border:1px solid rgba(221,43,144,.25);background:linear-gradient(135deg,#fff,#fff7fb);border-radius:24px;padding:28px}.wc-quote p{font-size:18px;font-weight:750;color:#30425c}.wc-case-contact{background:linear-gradient(135deg,#fff8eb,#fff);border:1px solid rgba(254,161,0,.32);border-radius:24px;padding:28px}.wc-case-contact input,.wc-case-contact textarea{width:100%;border:1px solid var(--wc-border);border-radius:13px;padding:13px 14px;margin-bottom:10px;font-weight:750}.wc-case-contact button{border:0;cursor:pointer;width:100%}
@media(max-width:1100px){.wc-portfolio-grid{grid-template-columns:repeat(2,1fr)}.wc-case-grid,.wc-case-block-grid,.wc-testimonial-wrap,.wc-portfolio-hero-grid{grid-template-columns:1fr}.wc-results-grid{grid-template-columns:repeat(2,1fr)}.wc-filter-search{min-width:100%;margin-left:0}.wc-pf-menu{display:none}.wc-pf-footer-grid{grid-template-columns:1fr 1fr}.wc-portfolio-logo-card{display:none}}
@media(max-width:720px){.wc-wrap{padding:0 16px}.wc-pf-top .wc-wrap{font-size:12px;flex-direction:column;gap:4px}.wc-pf-nav{height:70px}.wc-pf-logo img{width:125px}.wc-portfolio-hero{padding:48px 0 42px}.wc-portfolio-hero h1,.wc-case-hero h1{font-size:42px}.wc-portfolio-grid,.wc-solution-grid,.wc-results-grid{grid-template-columns:1fr}.wc-project-body{min-height:auto}.wc-portfolio-cta,.wc-cta-actions{flex-direction:column;align-items:flex-start}.wc-btn{width:100%}.wc-before-after{grid-template-columns:1fr}.wc-arrow-round{margin:auto;transform:rotate(90deg)}.wc-pf-footer-grid{grid-template-columns:1fr}.wc-filter-search{flex-direction:column}}