.portfolio-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 18px;scrollbar-width:none}.portfolio-tabs::-webkit-scrollbar{display:none}.portfolio-tab{flex:0 0 auto;border:1px solid #2c4566;background:#0b1728;color:#a8bdd8;border-radius:5px;padding:11px 17px;font-size:.88rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s}.portfolio-tab:hover{border-color:#4c91e4;color:#fff}.portfolio-tab[aria-selected="true"]{background:linear-gradient(135deg,#177ae6,#0a57c6);border-color:#348dea;color:#fff;box-shadow:0 8px 24px rgba(17,109,237,.19)}.portfolio-stage{border:1px solid #254265;background:linear-gradient(145deg,#0b182a,#07111f);border-radius:12px;padding:28px;overflow:hidden}.portfolio-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:25px}.portfolio-overline{color:#66b7ff;font-size:.7rem;letter-spacing:.2em;font-weight:800}.portfolio-intro h3{font-size:clamp(1.5rem,2.3vw,2.35rem);letter-spacing:-.04em;line-height:1.12;margin:8px 0 7px}.portfolio-intro p{color:#a9bdd8;font-size:.95rem;margin:0;max-width:650px}.portfolio-topics{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:7px;max-width:460px}.portfolio-topics span{border:1px solid #2c4566;border-radius:100px;padding:6px 10px;color:#a9c9ec;font-size:.72rem;font-weight:650;white-space:nowrap}.portfolio-viewport{overflow:hidden;outline:none}.portfolio-viewport:focus-visible{box-shadow:0 0 0 3px #53aaff;border-radius:8px}.portfolio-track{display:flex;gap:18px;transition:transform .5s cubic-bezier(.22,.7,.12,1);will-change:transform}.portfolio-card{flex:0 0 76%;min-width:0;background:#0b1829;border:1px solid #2a4567;border-radius:9px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.16)}.preview-frame{aspect-ratio:16/9;overflow:hidden;background:#e9edf4;display:flex;flex-direction:column;border-bottom:1px solid #2a4567}.preview-browser{height:25px;flex:0 0 25px;background:#dce3ed;color:#6b7990;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:9px;font-weight:700;letter-spacing:.04em}.preview-dots{display:flex;gap:4px}.preview-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#9eacc0}.preview-screen{flex:1;min-height:0;overflow:hidden;position:relative;font-size:clamp(7px,.8vw,12px)}.portfolio-card-meta{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:18px 20px 20px}.portfolio-card-meta h4{font-size:1.22rem;letter-spacing:-.025em;margin:0 0 3px;color:#f2f7ff}.portfolio-card-meta p{color:#9fb3d0;font-size:.84rem;margin:0}.portfolio-card-meta span{color:#68baff;border:1px solid #2b598b;border-radius:3px;font-size:.68rem;letter-spacing:.12em;padding:6px 8px;text-transform:uppercase;white-space:nowrap}.portfolio-controls{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.portfolio-count{color:#7ebfff;font-size:.78rem;font-weight:800;letter-spacing:.19em}.portfolio-buttons{display:flex;gap:8px}.portfolio-buttons button{background:#11233a;color:#d4e7ff;border:1px solid #31577f;border-radius:5px;min-height:39px;padding:0 16px;font-weight:700;font-size:.81rem;cursor:pointer}.portfolio-buttons button:hover:not(:disabled){background:#1a477d;border-color:#58a7f7}.portfolio-buttons button:disabled{opacity:.4;cursor:default}
.preview-image{display:block;width:100%;height:100%;object-fit:cover}
.portfolio-card{cursor:pointer}.portfolio-card:hover{border-color:#4f8bd1}
/* Website previews: complete miniature web pages, inspired by the supplied reference. */
.web-ui{height:100%;background:var(--web-bg,#f6f6f8);color:var(--web-ink,#263151);display:flex;flex-direction:column;font-family:Arial,"Segoe UI",sans-serif}.web-top{height:13%;min-height:31px;background:var(--web-dark,#392354);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 4%;font-size:.84em}.web-top strong{font-size:1.35em;letter-spacing:-.03em}.web-nav{display:flex;gap:1.3em;align-items:center;font-weight:700}.web-nav b{background:var(--web-pop,#caff12);color:var(--web-dark,#392354);padding:.55em 1em;border-radius:99px}.web-main{flex:1;padding:3.8% 6%;text-align:center;background-image:radial-gradient(var(--web-pattern,#e9e5ed) 1.5px,transparent 1.5px);background-size:36px 36px}.web-kicker{color:var(--web-accent,#8d2678);font-size:.9em;letter-spacing:.18em;font-weight:800;text-transform:uppercase}.web-main h5{font-size:2.65em;max-width:70%;line-height:1.11;letter-spacing:-.045em;margin:1.1% auto 1%}.web-main>p{font-size:1.05em;color:var(--web-muted,#667089);max-width:65%;margin:0 auto}.web-filters{display:flex;justify-content:center;gap:6px;margin:2.1% 0}.web-filters span{border:1px solid #d6d6e0;background:#fff;border-radius:99px;padding:.45em 1em;font-size:.8em;font-weight:700}.web-filters span:first-child{background:var(--web-dark,#392354);color:#fff;border-color:var(--web-dark,#392354)}.web-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.1%;width:88%;margin:auto;text-align:left}.web-service{background:#fff;border:1px solid #e0e3eb;border-radius:11px;padding:10%;box-shadow:0 5px 17px rgba(32,39,62,.035)}.web-service .web-icon{width:2.4em;height:2.4em;border-radius:8px;background:var(--web-pop,#caff12);display:grid;place-items:center;color:var(--web-dark,#392354);font-size:1.18em;font-weight:900;margin-bottom:.5em}.web-service strong{font-size:1.05em;display:block;line-height:1.15}.web-service p{font-size:.77em;color:var(--web-muted,#667089);line-height:1.35;margin:.55em 0 1em}.web-service .web-action{display:block;background:var(--web-pop,#caff12);color:var(--web-dark,#392354);border-radius:30px;padding:.6em;text-align:center;font-size:.76em;font-weight:800}.web-bottom{font-size:.7em;color:var(--web-muted,#667089);margin-top:1.4%}
/* System previews */
.system-ui,.agent-ui,.integration-ui,.food-ui{height:100%;display:flex;font-family:Arial,"Segoe UI",sans-serif}.system-ui{background:#eef3fa;color:#142642}.mock-side{width:17%;flex:0 0 17%;background:#10233e;color:#93a9c9;padding:2.6% 1.7%;font-size:.78em}.mock-side strong{color:#f4f9ff;display:block;font-size:1.25em;letter-spacing:-.04em;margin:0 0 2em}.mock-side span{display:block;padding:.75em .7em;margin-bottom:.35em;border-radius:4px}.mock-side span.active{background:#1b4f8d;color:#fff}.system-main{flex:1;padding:2.3% 3%;min-width:0}.mock-topline{display:flex;justify-content:space-between;align-items:center;color:#70819d;font-size:.79em;margin-bottom:1.7%}.mock-topline b{color:#1a3151}.system-main h5,.integration-main h5,.food-main h5{font-size:1.7em;letter-spacing:-.035em;margin:0 0 .7em}.system-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2%;margin-bottom:1.5%}.system-stat{background:#fff;border:1px solid #dfe7f2;border-radius:7px;padding:6% 8%}.system-stat small{display:block;color:#7588a3;font-size:.7em}.system-stat strong{display:block;font-size:1.45em;margin-top:.35em;color:#183958}.system-workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:1.4%;height:48%}.system-panel{background:#fff;border:1px solid #dfe7f2;border-radius:7px;padding:3%;overflow:hidden}.system-panel h6{font-size:.88em;margin:0 0 1.2em;color:#314866}.system-chart{height:73%;display:flex;align-items:end;gap:3%;border-bottom:1px solid #dbe4f1;background:repeating-linear-gradient(to top,transparent,transparent 25%,#edf3f9 25.3%)}.system-chart i{flex:1;background:linear-gradient(0deg,var(--sys-accent,#187bdc),#78c3f7);border-radius:3px 3px 0 0}.system-list{display:grid;gap:.45em}.system-list div{display:flex;justify-content:space-between;border-bottom:1px solid #edf1f6;padding:.5em 0;font-size:.75em;color:#60738e}.system-list b{color:#214567}.system-foot{font-size:.7em;color:#8ca0ba;margin-top:1.2%}
/* Agent/chat previews */
.agent-ui{background:#f3f7fb;color:#1c344d}.agent-side{width:20%;flex:0 0 20%;background:#0e273b;color:#9cb6cb;padding:3% 2%}.agent-side strong{display:block;color:#e5f7ff;font-size:1.2em;margin-bottom:2em}.agent-side span{display:block;padding:.8em .5em;font-size:.8em}.agent-side span.active{background:#176d80;border-radius:5px;color:#fff}.agent-main{width:53%;padding:2.5%;border-right:1px solid #d8e3ee}.agent-header{display:flex;justify-content:space-between;border-bottom:1px solid #d9e4ed;padding-bottom:1em}.agent-header b{font-size:1.1em}.agent-header small{color:#2d9e84;font-weight:700}.chat-line{max-width:78%;background:#fff;border:1px solid #dbe4ed;border-radius:9px 9px 9px 2px;padding:.8em 1em;margin:1.1em 0;font-size:.83em;line-height:1.3}.chat-line.out{margin-left:auto;background:#d8f4ed;border-color:#bfe8dc;border-radius:9px 9px 2px 9px}.chat-time{font-size:.65em;color:#8498ab;margin:0 0 .4em}.agent-right{flex:1;padding:3%;background:#fff}.agent-right h6{margin:0 0 1.3em;font-size:.9em}.agent-flow{display:grid;gap:.75em}.agent-flow span{display:block;border:1px solid #dae7ef;border-left:3px solid #2ca7bb;border-radius:4px;padding:.7em;font-size:.76em;color:#557082}.agent-tag{background:#e5f8f1;color:#218a6d;border-radius:99px;padding:.45em .8em;font-size:.7em;display:inline-block;margin-top:1.1em}
/* Integration previews */
.integration-ui{background:#eff4fa;color:#20364f}.integration-main{flex:1;padding:2.6% 3%}.integration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4%;margin:1.5% 0}.integration-tile{background:#fff;border:1px solid #dce6f1;border-radius:8px;padding:8%}.integration-tile i{width:2em;height:2em;display:grid;place-items:center;background:#def1ff;color:#126aaf;border-radius:5px;font-style:normal;font-weight:900;margin-bottom:1em}.integration-tile b{font-size:.88em;display:block}.integration-tile small{display:block;color:#7d91a8;margin-top:.4em;font-size:.7em}.integration-tile em{display:inline-block;margin-top:1em;font-style:normal;color:#16916e;background:#e7f8f1;border-radius:30px;padding:.3em .65em;font-size:.65em;font-weight:800}.integration-log{background:#fff;border:1px solid #dce6f1;border-radius:8px;padding:2%;height:43%}.integration-log h6{font-size:.86em;margin:0 0 .8em}.integration-log div{display:flex;justify-content:space-between;border-top:1px solid #edf2f7;padding:.55em 0;font-size:.74em;color:#637992}.integration-log b{color:#2c8d70}
/* Restaurant and bakery systems */
.food-ui{background:#f7f6f3;color:#273441}.food-side{width:16%;flex:0 0 16%;background:#182939;color:#b5c3d0;padding:2.5% 1.5%}.food-side strong{color:#fff;display:block;font-size:1.2em;margin-bottom:2em}.food-side span{display:block;padding:.7em .5em;font-size:.8em}.food-side span.active{background:#b55332;color:#fff;border-radius:4px}.food-main{flex:1;padding:2.5%;min-width:0}.food-cats{display:flex;gap:1%;margin:1.3% 0}.food-cats span{background:#fff;border:1px solid #e5e6e4;border-radius:30px;padding:.5em .9em;font-size:.72em}.food-cats span:first-child{background:var(--food-accent,#bc5934);color:#fff;border-color:var(--food-accent,#bc5934)}.food-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2%;height:62%}.food-product{background:#fff;border:1px solid #e3e5e5;border-radius:7px;padding:8%;display:flex;flex-direction:column;justify-content:space-between}.food-product i{width:2.7em;height:2.7em;background:#f4dfd1;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:1.25em}.food-product strong{font-size:.78em}.food-product small{color:#9a745f;font-weight:700;font-size:.68em}.food-order{width:25%;flex:0 0 25%;background:#fff;border-left:1px solid #e3e5e5;padding:3% 2%}.food-order h6{font-size:1em;margin:0 0 1.4em}.food-order div{display:flex;justify-content:space-between;border-bottom:1px solid #f0efec;padding:.8em 0;font-size:.7em}.food-total{font-size:.9em;font-weight:800;margin-top:2em}.food-checkout{background:var(--food-accent,#bc5934);color:#fff;border-radius:5px;text-align:center;margin-top:1.5em;padding:.75em;font-size:.76em;font-weight:800}
@media(max-width:900px){.portfolio-intro{display:block}.portfolio-topics{justify-content:flex-start;max-width:none;margin-top:17px}.portfolio-card{flex-basis:88%}}@media(max-width:600px){.portfolio-stage{padding:17px}.portfolio-tab{padding:9px 12px;font-size:.8rem}.portfolio-card{flex-basis:100%}.portfolio-card-meta{padding:14px;gap:10px}.portfolio-card-meta h4{font-size:1rem}.portfolio-card-meta p{font-size:.76rem}.portfolio-card-meta span{font-size:.56rem}.portfolio-intro p{font-size:.87rem}.portfolio-topics span{font-size:.64rem}.preview-browser{height:18px;flex-basis:18px;padding:0 6px;font-size:6px}.preview-screen{font-size:7px}.web-main{padding:3% 3%}.web-main h5{max-width:88%;font-size:2.15em}.web-main>p{max-width:85%}.web-cards{width:98%}.web-service{padding:6%}.portfolio-controls{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.portfolio-track{transition:none}}