.portfolio-section{position:relative;z-index:2;overflow:hidden;padding:110px 0 65px;background:linear-gradient(180deg,#fbfcff,#edf4ff 65%,#f8fbff);color:#061631;isolation:isolate}.portfolio-section::before{content:'';position:absolute;width:700px;height:700px;right:-280px;top:-240px;border:1px solid #92b8ee33;border-radius:50%;box-shadow:0 0 0 80px #90b7ed08,0 0 0 160px #90b7ed05;z-index:-1}.portfolio-heading,.portfolio-toolbar,.portfolio-foot{margin:0 6%}.portfolio-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:55px}.portfolio-heading h2{margin:0;font-size:clamp(58px,6.4vw,98px);line-height:1.08;letter-spacing:-.065em;font-weight:900}.portfolio-heading h2 span{color:#0866ff}.portfolio-intro{padding-bottom:8px}.portfolio-intro p{font-size:22px;font-weight:750;letter-spacing:-.045em;margin:0 0 16px}.portfolio-intro>span{font-size:15px;line-height:1.85;color:#647a99}.portfolio-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.portfolio-label{display:flex;gap:12px;align-items:center;font-size:10px;font-weight:750;letter-spacing:1.8px}.portfolio-label>i{width:6px;height:6px;background:#0866ff;border-radius:50%}.portfolio-label b{letter-spacing:0;font-size:10px;font-weight:500;color:#71849e;border:1px solid #bccce3;border-radius:20px;padding:4px 9px}.portfolio-controls{display:flex;align-items:center;gap:9px}.portfolio-position{font-size:10px;letter-spacing:1px;margin-right:15px;color:#5a7090}.portfolio-controls button{border:1px solid #cedcf0;background:#ffffffa8;color:#0b376d;width:43px;height:43px;border-radius:50%;font-size:20px;cursor:pointer;transition:background .2s,color .2s}.portfolio-controls button:hover{background:#0866ff;color:#fff}.portfolio-controls button:disabled{opacity:.3;cursor:default}.portfolio-rail{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;padding:28px 6% 50px;scroll-padding-inline:6vw;scroll-snap-type:x proximity;scrollbar-width:none;outline:none;overscroll-behavior-x:contain}.portfolio-rail::-webkit-scrollbar{display:none}.work-card{position:relative;display:block;flex:0 0 clamp(330px,31vw,440px);height:570px;border-radius:28px;overflow:hidden;scroll-snap-align:start;background:#fff;border:1px solid #fff;color:#071a37;box-shadow:0 12px 24px #31578012;transform:perspective(1000px) translateY(var(--work-y,0px)) rotateY(var(--work-rotate,0deg));transition:box-shadow .35s;text-decoration:none;isolation:isolate}.work-card:hover{box-shadow:0 20px 45px #31578025}.work-top{position:relative;z-index:3;display:flex;flex-direction:column;gap:10px;margin:28px 28px 26px;font-size:8px;letter-spacing:1px;font-weight:650}.work-type{font-size:9px;color:#6784a7;letter-spacing:1.4px}.work-copy{position:relative;z-index:3;margin:0 28px;pointer-events:none}.work-copy h3{font-size:clamp(29px,2.5vw,38px);line-height:1.22;letter-spacing:-.055em;font-weight:850;margin:0 0 18px}.work-copy p{font-size:13px;line-height:1.75;letter-spacing:-.025em;color:#5d7392;margin:0}.work-art{position:absolute;left:0;right:0;bottom:45px;height:300px;transform:translateY(var(--art-y,0px));pointer-events:none}.work-bottom{position:absolute;z-index:4;bottom:0;left:28px;right:28px;height:50px;border-top:1px solid #9baec42d;display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1px;gap:10px;color:#57708e}.work-bottom>span:last-child{font-size:10px}.portfolio-foot{display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:9px;letter-spacing:1.4px;color:#7083a0}.portfolio-track{height:2px;background:#cbd9ed;flex:1;max-width:450px;overflow:hidden}.portfolio-track i{display:block;width:20%;height:100%;background:#0866ff;transform:translateX(var(--track-x,0%));transition:transform .15s}.portfolio-hint{font-size:8px}
.work-ai{background:linear-gradient(145deg,#f7fbff,#dbeaff)}.ai-orbit{position:absolute;width:265px;height:265px;border:1px solid #83b4ef55;border-radius:50%;left:20%;top:35px;box-shadow:0 0 0 30px #a9d0ff18}.ai-film{position:absolute;display:flex;gap:12px;left:-60px;top:58px;transform:rotate(-15deg)}.ai-frame{position:relative;width:165px;height:155px;background:linear-gradient(150deg,#628ac2,#10365f);border:5px solid white;border-radius:14px;box-shadow:0 15px 25px #16417025;overflow:hidden}.ai-frame:nth-child(2){background:linear-gradient(140deg,#a9daee,#37799e);transform:translateY(22px)}.ai-frame:nth-child(3){background:linear-gradient(150deg,#3d658f,#071e3d)}.ai-frame>span{position:absolute;bottom:10px;left:10px;font-size:8px;color:#fff8;letter-spacing:1px}.ai-mountain{position:absolute;inset:40% -30% -20%;background:linear-gradient(140deg,#f4faff,#2a7192);clip-path:polygon(0 100%,32% 5%,50% 45%,67% 15%,100% 100%)}.ai-person{position:absolute;width:48px;height:75px;background:#d7f1ff;border-radius:25px 25px 0 0;left:56px;top:66px}.ai-person::before{content:'';position:absolute;width:35px;height:35px;border-radius:50%;background:#e8faff;top:-38px;left:7px}.ai-city{position:absolute;inset:30px 20px 0;background:repeating-linear-gradient(90deg,#7cb8ee 0 19px,transparent 19px 27px);clip-path:polygon(0 25%,25% 25%,25% 0,50% 0,50% 37%,75% 37%,75% 15%,100% 15%,100% 100%,0 100%)}.ai-focus{position:absolute;left:calc(50% - 80px);top:63px;width:160px;height:175px}.ai-focus>i{position:absolute;width:20px;height:20px;border:2px solid #fff}.ai-focus>i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.ai-focus>i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}.ai-focus>i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.ai-focus>i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}.ai-focus>span{position:absolute;right:0;top:-23px;font-size:8px;color:#1c61ba;letter-spacing:2px}.ai-tags{position:absolute;bottom:12px;left:30px;right:30px;display:flex;gap:8px;transform:rotate(-4deg)}.ai-tags>span{padding:10px 13px;border:1px solid #fff;background:#ffffffb3;box-shadow:0 6px 12px #27518d10;border-radius:10px;font-size:10px;color:#2565b9}.ai-tags i{display:inline-block;width:5px;height:5px;background:#0866ff;border-radius:50%;margin-right:5px}
.work-security{background:linear-gradient(150deg,#131c2a,#283c58);color:white;border-color:#3e4d63}.work-security .work-copy p,.work-security .work-type{color:#a6b8d0}.work-security .work-bottom{color:#9dafc6;border-color:#ffffff20}.security-ring{position:absolute;border:1px solid #93c5ff38;border-radius:50%;width:280px;height:110px;left:calc(50% - 140px);top:140px;transform:rotate(-18deg)}.ring-two{width:340px;height:140px;left:calc(50% - 170px);top:125px;border-color:#93c5ff20}.ring-three{width:400px;height:170px;left:calc(50% - 200px);top:110px;border-color:#93c5ff10}.device-plinth{position:absolute;bottom:10px;left:15%;width:70%;height:60px;background:linear-gradient(150deg,#5b718a,#19283e);border-radius:50%;box-shadow:0 20px 20px #0003}.security-device{position:absolute;width:124px;height:235px;top:13px;left:calc(50% - 60px);border-radius:24px;padding:6px;background:linear-gradient(120deg,#96adc7,#182739 40%,#d8e5f2 80%,#4a617b);transform:rotate(16deg) skewY(-5deg);box-shadow:12px 17px 20px #0004}.device-screen{height:100%;background:linear-gradient(135deg,#1f4163,#071528);border-radius:19px;display:flex;align-items:center;flex-direction:column;justify-content:center}.device-speaker{position:absolute;top:12px;left:43px;width:35px;height:5px;border-radius:10px;background:#050d1a}.device-screen>span{font-size:7px;letter-spacing:1.5px;color:#87bcf1}.device-screen svg{width:53px;height:65px;fill:none;stroke:#bcddff;stroke-width:2;margin:20px 0}.device-screen>i{width:5px;height:5px;border-radius:50%;background:#8ce0c0;box-shadow:0 0 12px #8ce0c0}.device-screen small{font-size:6px;letter-spacing:1px;margin-top:15px;color:#a0b7d0}.security-chip{position:absolute;right:20px;bottom:55px;background:#dbeeff18;backdrop-filter:blur(10px);border:1px solid #c1dcff40;padding:13px 17px;border-radius:14px;font-size:10px;transform:rotate(-6deg);color:#e3f2ff}.security-chip i{display:inline-block;width:6px;height:6px;background:#8ce0c0;border-radius:50%;margin-right:7px}
.work-kok{background:linear-gradient(150deg,#58b8ff,#0866ff 70%,#0048d4);color:white;border-color:#91d3ff;box-shadow:0 15px 35px #0866ff25}.work-kok .work-copy p,.work-kok .work-type,.work-kok .work-bottom{color:#e4f4ff}.work-kok .work-bottom{border-color:#ffffff3d}.work-kok .work-copy h3{font-size:clamp(34px,3.1vw,46px)}.kok-art{height:320px}.kok-word{position:absolute;left:16px;top:50px;font-size:95px;font-weight:950;letter-spacing:-8px;color:#ffffff15;transform:rotate(-12deg)}.court-line{position:absolute;left:-20%;right:-20%;height:170px;bottom:-48px;border:2px solid #b4e7ff55;transform:perspective(300px) rotateX(55deg) rotateZ(-18deg)}.court-line::after{content:'';position:absolute;left:50%;height:100%;border-left:2px solid #b4e7ff55}.kok-shuttle{position:absolute;width:220px;height:250px;left:5%;top:65px;transform:rotate(-23deg);filter:drop-shadow(15px 20px 10px #00399555)}.kok-racket{position:absolute;width:135px;height:270px;right:14px;top:20px;transform:rotate(24deg);filter:drop-shadow(8px 10px 5px #00399555)}.kok-ball{position:absolute;width:18px;height:18px;right:22%;bottom:27px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#d5f7ff,#5ebcff 45%,#0050e1);box-shadow:0 7px 12px #00399555}.work-visit{font-weight:800;transition:letter-spacing .3s}.work-kok:hover .work-visit{letter-spacing:2px}
.work-dashboard{background:linear-gradient(150deg,#f9fbff,#c5d9f3)}.dashboard-window{position:absolute;left:30px;top:42px;width:350px;height:250px;display:flex;background:#f9fcff;border:5px solid #ffffff;border-radius:15px;overflow:hidden;box-shadow:10px 25px 30px #264d8530;transform:perspective(600px) rotateY(-13deg) rotateZ(-8deg)}.dashboard-side{width:62px;background:#142f5a;padding:17px 12px;flex:none}.dashboard-side>b{font-size:13px;color:#fff;letter-spacing:-1px}.dashboard-side>i{display:block;width:30px;height:5px;background:#728fb6;border-radius:5px;margin-top:24px}.dashboard-side>i:first-of-type{background:#72b6ff;box-shadow:0 0 0 6px #2363a6}.dashboard-main{padding:20px 15px;flex:1}.dashboard-head{display:flex;justify-content:space-between;font-size:13px;font-weight:800;color:#173963}.dashboard-head>i{width:14px;height:14px;background:#a2c7fa;border-radius:50%}.dashboard-widgets{display:flex;gap:10px;margin-top:17px}.dashboard-widgets>div{width:50%;height:80px;background:#fff;border:1px solid #e3ebf8;padding:10px;border-radius:8px}.dashboard-main small{font-size:7px;letter-spacing:1px;color:#91a2bb}.dashboard-bars{display:flex;gap:5px;height:40px;align-items:flex-end;margin-top:3px}.dashboard-bars>i{width:9px;height:45%;background:#0866ff;border-radius:2px}.dashboard-bars>i:nth-child(2n){height:80%;background:#a3c9ff}.dashboard-bars>i:nth-child(3n){height:65%}.dashboard-donut{display:block;width:45px;height:45px;border-radius:50%;background:conic-gradient(#0866ff 0 58%,#a8cbff 58% 85%,#e4edf9 85%);margin:1px auto;position:relative}.dashboard-donut::after{content:'';position:absolute;inset:10px;border-radius:50%;background:white}.dashboard-chart{margin-top:10px;border-radius:8px;background:white;padding:8px 10px}.dashboard-chart svg{width:100%;height:65px}.dashboard-float{position:absolute;left:18px;top:14px;padding:13px 17px;background:#fff;border-radius:12px;box-shadow:0 8px 20px #31578020;transform:rotate(5deg);font-size:10px;color:#355c91}.dashboard-float>i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#0866ff;margin-right:8px}
.work-ideas{background:linear-gradient(145deg,#f8f4ff,#e6dff7)}.work-ideas .work-type{color:#9383b1}.idea-orbit{position:absolute;width:230px;height:230px;border:1px solid #b3a1d74d;left:22%;top:30px;border-radius:50%;transform:scaleX(1.3) rotate(-20deg)}.idea-note{position:absolute;width:180px;height:125px;left:12%;top:40px;background:linear-gradient(135deg,#fff,#eee7ff);border:1px solid #fff;border-radius:16px;padding:17px;box-shadow:0 12px 25px #66568e25;transform:rotate(-15deg)}.idea-note>span{display:block;font-size:8px;color:#9c8abb;letter-spacing:2px}.idea-note>b{display:block;font-size:23px;letter-spacing:-1px;color:#6a509d;margin-top:18px}.idea-note>i{position:absolute;right:18px;bottom:15px;font-style:normal;font-size:27px;color:#a48acd}.note-two{top:110px;left:36%;transform:rotate(13deg);background:linear-gradient(135deg,#977ad2,#5e4691);z-index:2}.note-two>b,.note-two>span,.note-two>i{color:#fff}.note-three{top:180px;left:13%;transform:rotate(-5deg);z-index:3}.idea-spark{position:absolute;right:28px;top:8px;font-size:62px;color:#9974cf;text-shadow:3px 5px 0 #c9b6e6;transform:rotate(10deg)}.idea-mini-spark{position:absolute;left:25px;bottom:36px;font-size:32px;color:#8063b0}
@media(max-width:760px){.portfolio-section{padding:75px 0 45px}.portfolio-heading{display:block;margin-bottom:30px}.portfolio-heading h2{font-size:56px}.portfolio-intro{margin-top:24px}.portfolio-intro p{font-size:17px;margin-bottom:9px}.portfolio-intro>span{font-size:13px}.portfolio-rail{gap:16px;padding-top:15px;padding-bottom:30px;scroll-snap-type:x mandatory}.work-card{flex-basis:86%;height:545px;border-radius:23px}.work-copy h3{font-size:33px}.work-kok .work-copy h3{font-size:40px}.work-top,.work-copy{margin-left:24px;margin-right:24px}.portfolio-foot{gap:15px;font-size:7px;letter-spacing:1px}.portfolio-hint{display:none}.portfolio-track{max-width:120px}.portfolio-controls button{width:37px;height:37px}.portfolio-position{margin-right:5px}.portfolio-label{font-size:8px;letter-spacing:1px}.portfolio-section::before{width:450px;height:450px}.dashboard-window{width:320px;left:24px}}
@media(prefers-reduced-motion:reduce){.work-card{transform:none;transition:none}.work-art{transform:none}.portfolio-track i{transition:none}}
.security-art{height:270px}
.portfolio-foot{justify-content:center}.portfolio-track{max-width:none;width:100%;flex:none}.portfolio-rail{cursor:grab;user-select:none}.portfolio-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}.is-dragging .work-card{cursor:grabbing}.work-card img{-webkit-user-drag:none;user-select:none}.kok-mascot{position:absolute;width:86%;height:310px;object-fit:contain;right:-1%;bottom:-2px;transform:rotate(-8deg);filter:drop-shadow(10px 17px 14px #003a9855);transition:transform .6s cubic-bezier(.2,.7,.2,1)}.work-kok:hover .kok-mascot{transform:translateY(-6px) rotate(-4deg)}.work-kok .kok-word{top:40px;left:15px;font-size:100px}.work-kok .kok-ball{left:18px;right:auto;bottom:34px}.work-kok .kok-art{height:295px}
@media(max-width:760px){.kok-mascot{width:99%;height:280px;right:-4%;bottom:0}.work-kok .kok-art{height:280px}.portfolio-track{max-width:none}}
@media(prefers-reduced-motion:reduce){.kok-mascot,.work-kok:hover .kok-mascot{transform:rotate(-8deg);transition:none}}
.portfolio-section{background:radial-gradient(ellipse at 80% 15%,#2587ff,transparent 55%),linear-gradient(135deg,#075fe9,#0049d8);color:#fff}.portfolio-section::before{border-color:#ffffff26;box-shadow:0 0 0 80px #ffffff05,0 0 0 160px #ffffff03}.portfolio-section::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.portfolio-heading h2 span{color:#fff}.portfolio-heading .section-kicker{color:#c4deff}.portfolio-intro>span{color:#c8dfff}.portfolio-label>i{background:#b9e7ff}.portfolio-position{color:#d8e8ff}.portfolio-controls button{background:#ffffff14;border-color:#ffffff55;color:white}.portfolio-controls button:hover{background:white;color:#0866ff}.portfolio-track{background:#ffffff30}.portfolio-track i{background:#c4edff}.portfolio-section .work-card{box-shadow:0 15px 30px #002e8d30}.portfolio-section .work-card:hover{box-shadow:0 24px 45px #00276e50}.portfolio-section .work-kok{background:linear-gradient(145deg,#74c8ff,#2384fa 55%,#0871ea);border-color:#99d5ff}