@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#142737;--muted:#62717b;--line:#d9deda;--accent:#e99658;--green:#c4e1be;--paper:#f6f7f4;--white:#fff;--mono:'DM Mono',ui-monospace,monospace;--display:'Manrope',Inter,Arial,sans-serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #d99450;outline-offset:4px}::selection{background:#f0ba80;color:#142737}.page-shell{max-width:1700px;margin:auto;overflow:hidden}.skip-link{position:fixed;left:12px;top:-80px;background:#fff;padding:10px;z-index:100}.skip-link:focus{top:12px}
.site-header{height:94px;display:flex;align-items:center;gap:36px;padding:0 clamp(25px,5.1vw,92px);border-bottom:1px solid var(--line);position:relative;z-index:20;background:var(--paper)}.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.brand-icon{font:800 36px/1 var(--display);letter-spacing:-.09em}.brand-dot{color:var(--accent)}.brand-name{font:700 12px/1.25 var(--display);letter-spacing:.01em}.brand-name small{display:block;font:400 9px/1.8 var(--mono);color:var(--muted);letter-spacing:.08em}.desktop-nav{display:flex;gap:27px;margin-left:auto}.desktop-nav a{font-size:12px;font-weight:700;white-space:nowrap;transition:color .25s}.desktop-nav a:hover{color:#d17a3d}.desktop-nav span{font:400 8px var(--mono);vertical-align:top;color:#a5aca9;margin-left:2px}.header-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:23px;background:var(--ink);color:white;padding:14px 17px;border-radius:4px;font-size:12px;font-weight:700;white-space:nowrap;transition:background .2s,transform .2s}.header-cta:hover{background:#2c4b62;transform:translateY(-2px)}.header-cta span{font-size:18px}.menu-toggle,.mobile-menu{display:none}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,3.5vw,56px);padding:58px clamp(25px,5.1vw,92px) 62px;align-items:center;min-height:695px}.hero-copy{padding-top:8px;min-width:0}.eyebrow,.section-kicker{font:500 10px var(--mono);letter-spacing:.1em;display:flex;align-items:center;gap:14px;white-space:nowrap}.eyebrow-line{width:28px;height:1px;background:var(--ink)}.availability{color:#4b6a54;display:inline-flex;align-items:center;gap:8px}.availability-dot,.small-dot{height:7px;width:7px;background:#73a17d;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px rgba(115,161,125,.13)}.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(55px,5.5vw,92px);letter-spacing:-.075em;line-height:1.08;margin:32px 0 24px;white-space:nowrap}.hero h1 em,.section h2 em{font-weight:500;font-style:italic;letter-spacing:-.075em}.hero-outline{color:transparent;-webkit-text-stroke:1.4px #a5b2b7}.hero-lead{max-width:500px;font-size:15px;line-height:1.9;color:#66757d;margin:0 0 26px}.hero-lead strong{color:var(--ink)}.hero-actions{display:flex;align-items:center;gap:26px}.button-primary{background:var(--ink);color:white;display:inline-flex;align-items:center;gap:40px;padding:18px 20px;font-size:12px;font-weight:700;border-radius:4px;transition:transform .2s,background .2s}.button-primary:hover{transform:translateY(-3px);background:#29475c}.button-primary span{font-size:18px}.button-text{border-bottom:1px solid #80909a;padding:11px 1px;font-size:12px;font-weight:700;display:inline-flex;gap:13px}.button-text:hover{color:#c7773b}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:66px;padding-top:26px;border-top:1px solid var(--line)}.hero-stats strong{font:800 clamp(24px,2.7vw,36px)/1 var(--display);letter-spacing:-.07em;display:block}.hero-stats strong span{font-weight:400;color:var(--accent)}.hero-stats small{font:400 9px/1.5 var(--mono);color:#829096;letter-spacing:.06em;display:block;margin-top:10px}
.hero-feature{background:#112536;color:#edf1ef;border:1px solid #284356;border-radius:10px;min-width:0;overflow:hidden;box-shadow:0 22px 40px rgba(18,37,52,.12)}.feature-header{height:77px;padding:24px 27px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #294254}.feature-header>div{display:flex;align-items:center;gap:17px}.feature-index{font:400 10px var(--mono);color:#9eb2b9}.feature-header h2{font:700 16px var(--display);letter-spacing:-.035em;margin:0}.feature-status{font:400 8px var(--mono);letter-spacing:.08em;color:#b2c5b9;display:flex;align-items:center;gap:8px}.feature-status span{width:6px;height:6px;background:#93d0b2;border-radius:50%;box-shadow:0 0 10px #93d0b2}.illustration-wrap{height:405px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 49%,#244256 0%,#152b3b 61%,#132838 100%)}.diagram-grid{inset:0;position:absolute;opacity:.27;background-image:linear-gradient(to right,transparent calc(100% - 1px),#7891a0 100%),linear-gradient(to bottom,transparent calc(100% - 1px),#7891a0 100%);background-size:29px 29px;mask-image:radial-gradient(ellipse,#0000 0%,#000 90%);pointer-events:none}.illustration-wrap:after{content:'WORKSTATION / SYSTEM 001';position:absolute;left:25px;bottom:14px;font:400 9px var(--mono);color:#91a7b4;letter-spacing:.13em}#system-illustration{width:100%;height:100%;display:block;overflow:visible;transform:scale(1.08) translateY(-8px)}.system-object{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .3s,opacity .3s}.system-object.is-selected{filter:drop-shadow(0 0 10px rgba(255,205,136,.24))}.system-object.is-dim{opacity:.72}.system-object:hover{filter:drop-shadow(0 0 16px rgba(255,211,136,.35))}.exploded .system-object[data-layer="interface"]{transform:translate(-24px,-28px)}.exploded .system-object[data-layer="logic"]{transform:translate(7px,-51px)}.exploded .system-object[data-layer="data"]{transform:translate(21px,-20px)}.visual-controls{display:flex;flex-wrap:wrap;gap:5px}.feature-bottom{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:17px 19px;border-top:1px solid #284356}.layer-btn,.explode-toggle{padding:10px 11px;background:transparent;color:#93abba;font:400 10px var(--mono);border:1px solid transparent;border-radius:4px;white-space:nowrap;transition:all .2s}.layer-btn:hover,.explode-toggle:hover{color:white;border-color:#53697a}.layer-btn.selected{background:#2a475a;border-color:#53677b;color:#fff}.layer-dot{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle;margin-right:4px}.layer-blue{background:#a9d6f3}.layer-orange{background:#e6a26d}.layer-green{background:#92cbb6}.explode-toggle{color:#bfd0d6;border-color:#3b5464}.explode-toggle[aria-pressed="true"]{color:#f1d6b8;border-color:#b08b70}.explode-icon{font-size:16px;vertical-align:middle}.readout{display:grid;grid-template-columns:auto 1fr auto;gap:17px;align-items:center;padding:16px 24px;border-top:1px solid #294254;font:400 10px var(--mono);color:#adbfca;min-height:54px}.readout-label{color:#d3a879;font-size:8px;letter-spacing:.05em}.readout-number{color:#86a4b5;font-size:9px}
.marquee{overflow:hidden;background:#e8eee9;border-block:1px solid #d9e2da;height:53px;display:flex;align-items:center}.marquee-inner{display:flex;align-items:center;gap:34px;white-space:nowrap;animation:marquee 42s linear infinite}.marquee span{font:500 10px var(--mono);letter-spacing:.1em}.marquee .star{font-size:16px;color:#c48a57}@keyframes marquee{to{transform:translateX(-50%)}}
.section{padding:114px clamp(25px,5.1vw,92px)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:47px}.section-kicker{color:#687981}.section-kicker span:first-child{color:#cb7b42}.kicker-rule{height:1px;width:31px;background:#b6c1bf}.section h2{font:800 clamp(40px,4.4vw,70px)/1.15 var(--display);letter-spacing:-.07em;margin:17px 0 0}.section-heading>p{max-width:385px;font-size:13px;line-height:1.85;color:#6c7a80;margin:0 0 7px}.section-work{padding-bottom:105px}.work-toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:20px;margin-bottom:24px}.work-toolbar>span{font:500 10px var(--mono);letter-spacing:.08em;display:flex;align-items:center;gap:12px}.filter-group{display:flex;gap:4px}.filter{padding:10px 13px;font:400 11px var(--sans);background:transparent;border:1px solid transparent;color:#78858c;border-radius:4px}.filter:hover{color:var(--ink)}.filter.active{color:var(--ink);background:white;border-color:#d8dfdd}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.project-card{background:#fff;border:1px solid #d8dedb;border-radius:7px;overflow:hidden;transition:transform .25s,box-shadow .25s}.project-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,47,57,.09)}.project-card[hidden]{display:none}.project-card.featured{grid-column:span 2;display:grid;grid-template-columns:1.08fr 1fr}.project-card.featured .project-art{min-height:415px}.project-card.featured .project-content{display:flex;flex-direction:column;justify-content:center;padding:48px}.project-art{height:280px;position:relative;overflow:hidden;padding:27px;background:#dce6e3}.project-art:after{content:'CONCEPTUAL VISUAL / NOT CLIENT SCREENSHOT';font:400 9px var(--mono);letter-spacing:.06em;color:rgba(24,44,58,.55);position:absolute;bottom:16px;left:20px;pointer-events:none}.project-art.erp{background:#e2ebe8}.project-art.inventory{background:#e8ebde}.project-art.organization{background:#e7e4ef}.project-art.iot{background:#dce9ee}.project-art.expert{background:#eee6dd}.project-art .art-index{position:absolute;right:22px;top:17px;color:#566973;font:500 10px var(--mono);z-index:3}.art-surface{width:100%;height:100%;display:grid;place-items:center;position:relative}.mock-app{width:min(89%,400px);max-height:265px;border-radius:9px;background:#fff;box-shadow:0 21px 38px rgba(31,56,65,.18),0 3px 8px rgba(31,56,65,.08);border:1px solid rgba(70,90,99,.13);transform:rotate(-5deg) skewY(1deg);overflow:hidden}.featured .mock-app{width:min(93%,480px);max-height:320px}.mock-header{height:29px;background:#f3f6f5;display:flex;align-items:center;gap:5px;padding:0 13px;border-bottom:1px solid #e3e8e6}.mock-header i{height:6px;width:6px;border-radius:50%;background:#d4deda}.mock-header i:first-child{background:#f0b18c}.mock-header i:nth-child(2){background:#ebd69c}.mock-header span{font:600 8px var(--mono);margin-left:12px;color:#687f87}.mock-body{display:grid;grid-template-columns:66px 1fr;min-height:175px}.mock-sidebar{background:#1c3b4a;padding:17px 11px;display:grid;align-content:start;gap:12px}.mock-sidebar b{display:block;height:5px;border-radius:3px;background:#607a85}.mock-sidebar b:nth-child(1){width:23px;background:#f3be89}.mock-sidebar b:nth-child(2){width:32px}.mock-sidebar b:nth-child(3){width:29px}.mock-sidebar b:nth-child(4){width:36px}.mock-main{padding:15px 15px 17px}.mock-main .tiny-label{font:700 9px var(--display);color:#34505d}.mock-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}.mock-metric{background:#edf2f1;border-radius:4px;padding:9px 8px}.mock-metric span{font:400 6px var(--mono);color:#6d8188}.mock-metric strong{display:block;font:800 14px var(--display);color:#335668;margin-top:3px}.mock-table{background:#fff;border:1px solid #e3e8e6;border-radius:4px;overflow:hidden}.mock-tr{display:grid;grid-template-columns:1.5fr .75fr .6fr;gap:7px;padding:7px 10px;border-bottom:1px solid #e9eeec;align-items:center}.mock-tr:first-child{background:#eef3f1}.mock-tr:last-child{border:0}.mock-tr span{height:5px;border-radius:2px;background:#cedcdb}.mock-tr span:nth-child(2){width:70%}.mock-tr span:nth-child(3){width:62%;background:#a1ceac}.mock-tr:first-child span{background:#a6b9bd}.project-content{padding:26px 29px 25px}.project-topline{font:500 9px var(--mono);letter-spacing:.09em;color:#7b8d91;display:flex;justify-content:space-between;gap:9px}.project-topline .project-number{color:#c17b4c}.project-content h3{font:800 clamp(22px,2.3vw,34px)/1.17 var(--display);letter-spacing:-.055em;margin:21px 0 10px}.project-content>p{font-size:13px;line-height:1.85;color:#758087;margin:0 0 22px}.project-stack{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px}.project-stack span{padding:8px 10px;border:1px solid #dce4df;border-radius:3px;font:500 10px var(--mono);color:#576b74;background:#fafbf9}.project-detail-trigger{display:flex;gap:15px;justify-content:space-between;align-items:center;width:100%;background:transparent;border:0;border-top:1px solid #e1e6e3;text-align:left;padding:18px 0 0;font-size:11px;letter-spacing:.01em;font-weight:700;color:#264456}.project-detail-trigger span:last-child{font-size:20px;transition:transform .2s}.project-detail-trigger[aria-expanded="true"] span:last-child{transform:rotate(45deg)}.project-details{border-top:1px solid #e1e6e3;margin-top:15px;padding-top:17px;font-size:12px;line-height:1.8;color:#64747b}.project-details h4{font:600 10px var(--mono);color:#355468;margin:12px 0 5px;letter-spacing:.03em}.project-details ul{padding-left:19px;margin:6px 0}.project-details p{margin:0 0 6px}.project-details small{font-size:10px;color:#8a9699}.project-details[hidden]{display:none}
.inventory-art{width:min(91%,420px);height:205px;transform:rotate(5deg);position:relative}.featured .inventory-art{height:270px}.inv-panel{background:#fff;border-radius:10px;box-shadow:0 18px 28px rgba(40,60,44,.14);padding:21px;position:absolute;inset:10px 24px 10px 8px}.inv-heading{font:700 13px var(--display);color:#2b4c41}.inv-sub{font:400 8px var(--mono);color:#8da095;margin-top:5px}.inv-graph{height:85px;display:flex;align-items:end;gap:10px;margin:24px 0 12px;padding-bottom:1px;border-bottom:1px solid #d9e3dd}.inv-graph i{display:block;flex:1;border-radius:3px 3px 0 0;background:#b5d0b4}.inv-graph i:nth-child(2){height:55%;background:#7baf9d}.inv-graph i:nth-child(1){height:35%}.inv-graph i:nth-child(3){height:82%}.inv-graph i:nth-child(4){height:66%;background:#7baf9d}.inv-graph i:nth-child(5){height:92%;background:#517c73}.inv-graph i:nth-child(6){height:62%}.inv-graph i:nth-child(7){height:74%;background:#7baf9d}.inv-foot{display:flex;gap:7px}.inv-foot b{height:14px;flex:1;background:#e9f0e9;border-radius:3px}.inv-float{position:absolute;right:-3px;bottom:-6px;background:#243f38;color:#fff;padding:16px;border-radius:8px;box-shadow:0 8px 19px #52695344;font:500 10px var(--mono)}.inv-float strong{display:block;font:800 19px var(--display);margin-top:5px}
.org-art{position:relative;width:80%;height:205px;background:#fff;border:1px solid #d7d4e4;border-radius:8px;box-shadow:0 15px 35px #4d46652f;transform:rotate(-6deg);padding:20px}.org-logo{background:#6c6799;color:#fff;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--display)}.org-title{font:800 15px var(--display);color:#514e72;position:absolute;left:59px;top:21px}.org-rule{border-top:1px solid #e7e5ef;margin-top:17px}.org-header{margin-top:16px;color:#545477;font:700 10px var(--display)}.org-avatars{display:flex;align-items:center;margin:13px 0 16px}.org-avatars i{width:22px;height:22px;border-radius:50%;background:#aab9d1;border:2px solid #fff;margin-right:-6px}.org-avatars i:nth-child(2){background:#e3bb9d}.org-avatars i:nth-child(3){background:#b7c7b8}.org-avatars i:nth-child(4){background:#b8a9db}.org-row{display:flex;gap:9px;align-items:center;padding:7px;border-top:1px solid #f0eef3}.org-row b{height:5px;flex:2;background:#e3deea;border-radius:3px}.org-row b:last-child{flex:1;background:#bbd3c8}
.iot-art{position:relative;width:90%;height:205px;background:#102e42;border:1px solid #3e6877;border-radius:9px;box-shadow:0 15px 38px #1c3f5a33;transform:rotate(4deg);padding:19px}.iot-head{display:flex;justify-content:space-between;color:#b9e0e7;font:500 9px var(--mono)}.iot-head .pulse{height:7px;width:7px;border-radius:50%;background:#8dd5bb;box-shadow:0 0 11px #8dd5bb}.iot-display{display:flex;justify-content:space-between;gap:12px;margin-top:17px}.iot-value{font:800 37px var(--display);color:#e7f4f6;letter-spacing:-.06em}.iot-value span{font-size:13px;color:#7daabd}.iot-mini{color:#9fc4cf;font:400 8px var(--mono);margin-top:5px}.iot-chart{height:82px;position:relative}.iot-chart svg{width:100%;height:100%}.iot-card{position:absolute;right:-6px;bottom:-16px;background:#e1f4f0;color:#254f53;border-radius:6px;padding:13px 18px;font:600 10px var(--mono);box-shadow:0 8px 20px #13374338}
.expert-art{position:relative;width:94%;max-width:400px;height:210px;display:flex;align-items:center;justify-content:center}.expert-art svg{width:100%;height:100%;filter:drop-shadow(0 10px 10px #785a4d22)}
.confidentiality{margin-top:31px;display:flex;gap:18px;align-items:flex-start;border:1px solid #d6dfda;background:#edf1ed;border-radius:6px;padding:23px 27px}.confidentiality-icon{display:grid;place-items:center;width:33px;height:33px;flex:none;background:#d9e8dd;border-radius:50%;font-size:19px}.confidentiality strong{display:block;font-size:12px;margin:0 0 7px}.confidentiality p{font-size:12px;color:#718081;line-height:1.75;max-width:790px;margin:0}
.section-skills{background:#ebefec;border-block:1px solid #dce3dc}.skills-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:22px}.skills-story{background:#173343;color:#fff;min-height:413px;border-radius:6px;padding:40px 38px;display:flex;flex-direction:column}.skills-number{font:800 63px var(--display);letter-spacing:-.14em;color:#d8e5da}.skills-story h3{font:800 31px/1.24 var(--display);letter-spacing:-.055em;margin:26px 0 10px}.skills-story p{font-size:12px;line-height:1.9;max-width:380px;color:#bacbd0}.skills-corner{margin-top:auto;border-top:1px solid #476170;padding-top:20px;display:flex;justify-content:space-between;font:400 9px var(--mono);letter-spacing:.09em;color:#bfdbd2}.skills-corner span{font-size:16px}.skills-groups{background:#fff;border:1px solid #dce2dd;border-radius:6px;padding:15px 30px}.skill-group{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:21px 0;border-bottom:1px solid #e3e8e4}.skill-group:last-child{border:0}.skill-index{font:500 11px var(--mono);color:#c68a58;padding-top:4px}.skill-group h3{font:800 16px var(--display);letter-spacing:-.03em;margin:0 0 5px}.skill-group p{font-size:11px;line-height:1.6;color:#83918d;margin:0 0 11px}.tags{display:flex;gap:6px;flex-wrap:wrap}.tags span{background:#f0f3f0;padding:6px 10px;border-radius:4px;color:#5c7270;font:400 10px var(--mono)}
.experience-list{border-top:1px solid var(--line)}.exp-row{display:grid;grid-template-columns:48px minmax(240px,1fr) minmax(200px,.88fr) 105px;gap:24px;align-items:center;padding:26px 5px;border-bottom:1px solid var(--line)}.exp-icon{width:47px;height:47px;display:grid;place-items:center;background:#e3eae6;color:#557076;font:700 13px var(--mono);border-radius:5px}.exp-title h3{font:800 17px var(--display);letter-spacing:-.035em;margin:0 0 6px}.exp-title span{font-size:11px;color:#819095}.exp-description{font-size:12px;color:#718188;line-height:1.75}.exp-label{font:400 9px var(--mono);color:#a3adab;letter-spacing:.02em;text-align:right}
.section-about{padding-top:35px}.about-panel{display:grid;grid-template-columns:.83fr 1.17fr;background:#173343;border-radius:9px;overflow:hidden}.about-left{padding:42px;background:#1f4350;min-height:515px;display:flex;flex-direction:column;position:relative;overflow:hidden}.about-left:before{content:'';position:absolute;inset:0;background-image:linear-gradient(90deg,#ffffff10 1px,transparent 1px),linear-gradient(#ffffff10 1px,transparent 1px);background-size:34px 34px;opacity:.5}.section-kicker.light{color:#a9c2c5;position:relative}.section-kicker.light span:first-child{color:#ebae80}.about-monogram{font:800 clamp(140px,20vw,300px)/1 var(--display);letter-spacing:-.14em;color:#e3f0e7;position:relative;margin:auto 0;text-align:center;padding-right:45px}.about-monogram span{color:#ef9d5c}.about-caption{font:400 9px/1.8 var(--mono);letter-spacing:.08em;color:#accccf;margin:0;position:relative}.about-right{padding:65px clamp(30px,5vw,77px);color:#e4edeb}.about-right h2{font:800 clamp(32px,3.4vw,55px)/1.2 var(--display);letter-spacing:-.065em;margin:0 0 24px}.about-right h2 em{font-weight:500;color:#ebaa73}.about-right>p{font-size:13px;color:#b7c8ca;line-height:1.92;max-width:565px;margin:0 0 18px}.about-facts{display:grid;gap:17px;margin-top:38px;border-top:1px solid #44636e;padding-top:25px}.about-facts>div{display:grid;grid-template-columns:160px 1fr;gap:9px;align-items:baseline}.about-facts span{font:400 9px var(--mono);color:#8faab2}.about-facts strong{font:600 12px var(--sans);color:#e3ebe9}
.contact-section{padding-top:80px;padding-bottom:95px}.contact-overline{display:flex;align-items:center;gap:13px;font:500 11px var(--mono);letter-spacing:.08em;color:#70857b}.contact-asterisk{font-size:24px;margin-left:auto;color:#d99559}.contact-section h2{font-size:clamp(52px,7vw,113px);margin:21px 0 40px;line-height:1.14}.contact-section h2 em{color:#9daeb1}.contact-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:40px;padding-top:26px}.contact-bottom p{max-width:460px;font-size:13px;line-height:1.8;color:#708188}.contact-links{display:flex;gap:12px;flex-wrap:wrap}.contact-link{padding:13px 18px;border-radius:4px;border:1px solid #bdc9c7;display:inline-flex;align-items:center;gap:20px;font:700 12px var(--sans);transition:background .2s}.contact-link:hover{background:#fff}.contact-placeholder{color:#7c8b90;font:400 11px var(--mono)}
.footer{background:#102939;color:#e6efed;padding:26px clamp(25px,5.1vw,92px);display:flex;align-items:center;gap:35px}.footer-brand{font:800 31px var(--display);gap:8px}.footer-brand>span:last-child{font:500 9px var(--mono);letter-spacing:.1em;margin-left:8px}.footer p{font-size:10px;color:#95aab4;margin:auto}.back-top{font:500 10px var(--mono);color:#bbcdd0}.footer-year{font:500 10px var(--mono);color:#95aab4}
.profile-photo-frame{width:min(100%,330px);aspect-ratio:4/5;margin:auto;position:relative;overflow:hidden;border:1px solid #55717b;border-radius:6px;background:#193545;box-shadow:18px 18px 0 rgba(239,157,92,.82)}.profile-photo{width:100%;height:100%;display:block;object-fit:cover;object-position:center}.profile-photo-fallback{height:100%;padding:0!important;align-items:center;justify-content:center}.profile-photo-fallback:not([hidden]){display:flex}.about-left:has(.profile-photo:not([hidden])) .about-monogram:not(.profile-photo-fallback){display:none}
@media(max-width:1260px){.site-header{gap:20px}.desktop-nav{gap:17px}.brand-name small{display:none}.hero{gap:20px}.hero h1{font-size:clamp(52px,5.5vw,75px)}.feature-status{display:none}.feature-bottom{flex-wrap:wrap}.hero-stats{margin-top:42px}.layer-btn{font-size:9px;padding:8px}.readout{grid-template-columns:auto 1fr}.readout-number{display:none}}
@media(max-width:1030px){.desktop-nav{display:none}.header-cta{margin-left:auto}.menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:4px;width:41px;height:41px;background:none}.menu-toggle span{display:block;width:18px;height:2px;background:var(--ink)}.mobile-menu:not([hidden]){position:absolute;z-index:40;left:0;right:0;top:94px;display:grid;gap:0;background:var(--paper);box-shadow:0 20px 24px #1d34421e;padding:10px 24px 24px}.mobile-menu a{padding:14px;border-bottom:1px solid var(--line);font-weight:700}.hero{grid-template-columns:1fr;padding-top:60px}.hero-copy{max-width:720px}.hero h1{font-size:clamp(60px,8vw,92px)}.hero-stats{margin-top:46px}.hero-feature{max-width:790px;width:100%;margin:15px auto 0}.project-card.featured{grid-template-columns:1fr 1fr}.section{padding-top:85px;padding-bottom:85px}.exp-row{grid-template-columns:46px 1fr minmax(170px,1fr);gap:17px}.exp-label{display:none}}
@media(max-width:740px){.site-header{height:76px;padding-inline:22px}.mobile-menu:not([hidden]){top:76px}.brand-name{font-size:10px}.header-cta{display:none}.menu-toggle{margin-left:auto}.hero{padding:43px 20px 50px;gap:25px}.eyebrow{font-size:9px;gap:8px;flex-wrap:wrap}.availability{margin-left:0}.hero h1{font-size:clamp(43px,10vw,68px);letter-spacing:-.07em;margin:24px 0 20px}.hero-lead{font-size:14px}.hero-actions{gap:22px;flex-wrap:wrap}.button-primary{padding:15px 16px;gap:20px}.hero-stats{margin-top:40px;gap:8px}.hero-stats strong{font-size:25px}.hero-stats small{font-size:8px}.feature-header{padding:17px 18px;height:61px}.feature-header h2{font-size:14px}.illustration-wrap{height:285px}.feature-bottom{padding:10px;gap:6px}.layer-btn,.explode-toggle{padding:8px 7px;font-size:9px}.readout{padding:13px 15px;gap:8px;font-size:9px}.readout-label{font-size:7px}.section{padding:75px 20px}.section-heading{display:block;margin-bottom:27px}.section h2{font-size:clamp(42px,10vw,62px)}.section-heading>p{margin-top:20px;font-size:12px}.work-toolbar{flex-direction:column;align-items:start;gap:11px}.filter{font-size:10px;padding:8px 9px}.project-grid{grid-template-columns:1fr;gap:20px}.project-card.featured{display:block;grid-column:auto}.project-card.featured .project-art{min-height:auto;height:280px}.project-card.featured .project-content{padding:26px 29px 25px;display:block}.project-art{height:245px}.project-content h3{font-size:27px}.confidentiality{padding:18px}.skills-layout{grid-template-columns:1fr}.skills-story{min-height:330px}.skills-groups{padding:6px 20px}.exp-row{grid-template-columns:43px 1fr;align-items:start}.exp-description{grid-column:2}.exp-title h3{font-size:15px}.section-about{padding-top:0}.about-panel{grid-template-columns:1fr}.about-left{min-height:280px;padding:25px}.about-monogram{font-size:130px;margin:auto}.about-right{padding:44px 28px}.about-right h2{font-size:40px}.about-facts>div{grid-template-columns:1fr;gap:5px}.contact-section h2{font-size:clamp(45px,11vw,70px)}.contact-bottom{display:block}.contact-links{margin-top:20px}.footer{flex-wrap:wrap;gap:14px;padding:26px 20px}.footer p{order:4;width:100%;margin:0}.back-top{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}


/* V2 - hands-on interactive engineering model */
.model-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(1050px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(var(--zoom,1));transition:transform .22s ease;cursor:grab;touch-action:pan-y;user-select:none;z-index:2;outline-offset:-5px}
.model-stage.is-dragging{transition:none;cursor:grabbing}
.model-stage #system-illustration{pointer-events:auto}
.model-hotspot{position:absolute;z-index:6;display:flex;align-items:center;gap:5px;background:#0c2735df;color:#eaf6f3;border:1px solid #7999a888;border-radius:50px;padding:5px 8px 5px 5px;box-shadow:0 4px 18px #00152370;font:500 8px var(--mono);letter-spacing:.045em;white-space:nowrap;transition:background .2s,transform .2s,border .2s;transform:translate(-50%,-50%);backdrop-filter:blur(8px)}
.model-hotspot:hover,.model-hotspot.is-active{background:#315163;border-color:#efb886;transform:translate(-50%,-50%) scale(1.08)}
.hotspot-pip{width:8px;height:8px;border-radius:50%;background:#93c8b3;box-shadow:0 0 0 3px #93c8b32a,0 0 12px #93c8b3;animation:hotspot-breathe 2.3s ease-in-out infinite}
.hotspot-interface{left:27%;top:21%}.hotspot-interface .hotspot-pip{background:#add5ee;box-shadow:0 0 0 3px #add5ee28,0 0 12px #add5ee}
.hotspot-logic{left:76%;top:28%}.hotspot-logic .hotspot-pip{background:#e7b184;box-shadow:0 0 0 3px #e7b18428,0 0 12px #e7b184}
.hotspot-data{left:72%;top:71%}
@keyframes hotspot-breathe{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.4)}}
.scene-guidance{position:absolute;z-index:4;bottom:14px;right:18px;display:flex;align-items:center;gap:8px;color:#b6cdd4;font:400 8px var(--mono);letter-spacing:.04em;pointer-events:none;text-shadow:0 1px 7px #10293b}
.gesture-icon{font:500 17px var(--mono);color:#e8b785}
.illustration-wrap:after{bottom:14px}
.lab-actions{border-top:1px solid #294254;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;min-height:51px;background:#11293b}
.lab-kicker{font:400 9px var(--mono);letter-spacing:.09em;color:#849fae;display:flex;align-items:center;gap:8px;white-space:nowrap}
.lab-status-dot{width:6px;height:6px;border-radius:50%;background:#92cbb6;box-shadow:0 0 8px #92cbb6}
.lab-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.lab-action{padding:8px 12px;background:#173345;border:1px solid #3e5c6b;color:#d0e1e6;font:500 9px var(--mono);border-radius:4px;transition:border .2s,background .2s,color .2s;white-space:nowrap}
.lab-action:hover{background:#25495c;color:#fff;border-color:#7694a2}
.flow-action{background:#244b50;color:#d0ecdf;border-color:#517e78}
.flow-action[aria-pressed="true"]{background:#c88956;color:#142b36;border-color:#e1b18b}
.flow-running #signal{stroke:#ffcf8c;stroke-width:4;opacity:1;filter:url(#glow)}
.flow-running .lab-status-dot{background:#f0b47d;box-shadow:0 0 8px #f0b47d;animation:hotspot-breathe 1s ease-in-out infinite}
.flow-running .system-object.is-selected{filter:drop-shadow(0 0 20px #f7ca86a0)}
@media(max-width:740px){.model-hotspot{font-size:7px;padding:4px 6px 4px 4px}.hotspot-pip{width:6px;height:6px}.scene-guidance{right:12px;font-size:7px}.lab-actions{padding:11px 12px;flex-wrap:wrap}.lab-kicker{font-size:8px}.lab-action{font-size:9px;padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.hotspot-pip,.flow-running .lab-status-dot{animation:none!important}}

/* V3: bilingual navigation, project links, real-image galleries, accessible lightbox */
.language-switch{display:flex;align-items:center;gap:4px;margin-left:auto;padding:4px;border:1px solid #ced9d5;border-radius:5px;background:#eaf0ee;white-space:nowrap}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid #ced9d5;border-radius:5px;background:#fff;color:#385260;font:700 10px var(--mono);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}.theme-toggle span:first-child{font-size:15px;line-height:1}
.language-switch>span{color:#a7b5b5;font-size:10px}
.lang-btn{border:0;background:transparent;color:#6c7e7d;font:700 10px var(--mono);border-radius:3px;cursor:pointer;padding:8px 10px;transition:background .18s,color .18s}
.lang-btn.is-active{background:#173847;color:#f7faf9;box-shadow:0 2px 5px #18394816}
.lang-btn:focus-visible,.project-visit:focus-visible,.gallery-thumb:focus-visible,.lightbox-toolbar button:focus-visible,.lightbox-arrow:focus-visible{outline:2px solid #f5a568;outline-offset:3px}
.project-art.has-cover{overflow:hidden}.project-cover{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;z-index:1;transition:transform .3s ease}.project-card:hover .project-cover{transform:scale(1.035)}
.project-art.has-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#142d3c49,transparent 55%);z-index:2;pointer-events:none}
.project-art.has-cover .art-index{z-index:3}
.project-links{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0 10px}
.demo-account{display:grid;gap:7px;margin:14px 0 8px;padding:14px 16px;border:1px solid #c8d8d0;border-left:3px solid #d88b51;border-radius:4px;background:#f1f6f3;color:#486169;font:400 11px/1.55 var(--mono)}.demo-account strong{font:700 10px var(--mono);letter-spacing:.08em;color:#254b58}.demo-account span{display:grid;grid-template-columns:130px 1fr;gap:12px}.demo-account b{font-weight:500;color:#6c807e}.demo-account small{font:400 10px/1.55 var(--sans);color:#6a7b7e;margin-top:2px}
.project-visit{display:inline-flex;align-items:center;gap:10px;padding:10px 13px;color:#e9f2ef;background:#204655;text-decoration:none;font:700 10px var(--sans);border-radius:4px;transition:background .15s,transform .15s}
.project-visit:hover{background:#2f6573;transform:translateY(-2px)}
.project-visit.secondary{color:#203c48;background:#e7eeec;border:1px solid #ccd9d5}
.project-visit.secondary:hover{background:#dbe9e5}
.gallery-section{margin:22px 0 5px;padding-top:17px;border-top:1px solid #dde4e0}
.gallery-section h4{margin-bottom:10px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.gallery-thumb{display:block;position:relative;aspect-ratio:1.25/1;cursor:zoom-in;background:#e5edeb;border:1px solid #d5dfdc;border-radius:5px;overflow:hidden;padding:0}
.gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.gallery-thumb:hover img{transform:scale(1.06)}
.gallery-thumb .gallery-zoom{position:absolute;right:6px;bottom:5px;color:white;background:#10303fce;padding:3px 5px;border-radius:3px;font-size:12px}
.gallery-note{color:#788887;font-size:11px;line-height:1.7;margin:12px 0 0}
.gallery-lightbox[hidden]{display:none!important}
.gallery-lightbox{position:fixed;inset:0;z-index:1000;background:#091721ee;color:#f3f7f7;display:flex;flex-direction:column;align-items:stretch;justify-content:center;backdrop-filter:blur(12px);padding:24px}
.lightbox-toolbar{position:absolute;top:18px;left:clamp(20px,5vw,80px);right:clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between;font:500 12px var(--mono);color:#adc6cc}
.lightbox-toolbar button{background:#254452;border:1px solid #4b6973;color:#e3f0ec;border-radius:4px;min-width:39px;min-height:39px;font-size:20px;cursor:pointer}
.lightbox-body{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:16px;align-items:center;width:min(1150px,100%);margin:auto;min-height:0}
.lightbox-media{text-align:center;min-width:0}.lightbox-media img{display:block;max-width:100%;max-height:min(75vh,750px);width:auto;height:auto;object-fit:contain;margin:0 auto;box-shadow:0 14px 45px #0005;border-radius:5px}.lightbox-media p{font-size:12px;color:#c0d2d6;margin:14px 0 0}
.lightbox-arrow{border:1px solid #4b6973;border-radius:5px;background:#173748;color:#d7e8e7;min-height:52px;cursor:pointer;font-size:32px}.lightbox-arrow:hover{background:#2b5262}
body.is-lightbox-open{overflow:hidden}
@media(max-width:1260px){.language-switch{margin-left:auto}.header-cta{margin-left:0}}
@media(max-width:740px){.language-switch{margin-left:auto}.lang-btn{padding:8px}.lightbox-body{grid-template-columns:33px minmax(0,1fr) 33px;gap:5px}.lightbox-arrow{font-size:24px;min-height:43px}.gallery-lightbox{padding:15px 8px}.gallery-grid{gap:5px}.gallery-thumb .gallery-zoom{font-size:9px}.project-links{gap:7px}}

/* User-selected dark theme. */
.dark-theme{--ink:#e7f0ef;--muted:#a8bdc0;--line:#34515a;--paper:#10242f;--white:#17323e;background:#10242f;color:#e7f0ef}.dark-theme body{background:#10242f;color:#e7f0ef}.dark-theme .site-header{background:#10242f;border-color:#34515a}.dark-theme .language-switch{background:#183845;border-color:#41606a}.dark-theme .lang-btn{color:#b5c9cc}.dark-theme .lang-btn.is-active,.dark-theme .theme-toggle{background:#28505b;color:#f4f8f7;border-color:#52727a}.dark-theme .theme-toggle{background:#17343f}.dark-theme .mobile-menu:not([hidden]){background:#10242f}.dark-theme .hero-lead,.dark-theme .section-heading>p,.dark-theme .project-content>p,.dark-theme .exp-description,.dark-theme .exp-title span,.dark-theme .contact-bottom p{color:#b4c7c9}.dark-theme .hero-outline{color:transparent;-webkit-text-stroke-color:#809ba2}.dark-theme .marquee{background:#173540;border-color:#36535d}.dark-theme .project-card,.dark-theme .skills-groups{background:#17313c;border-color:#3b5962}.dark-theme .project-content h3,.dark-theme .skill-group h3,.dark-theme .exp-title h3{color:#edf4f2}.dark-theme .project-stack span,.dark-theme .filter.active{background:#203f4a;border-color:#45646b;color:#e4eeec}.dark-theme .filter{color:#aec0c3}.dark-theme .project-detail-trigger{border-color:#3b5962;color:#dce8e6}.dark-theme .project-details{color:#b7c9c9;border-color:#3b5962}.dark-theme .demo-account{background:#1b3a42;border-color:#4e7071;color:#d5e2df}.dark-theme .demo-account strong{color:#f0bd91}.dark-theme .demo-account b,.dark-theme .demo-account small{color:#b9cac5}.dark-theme .contact-link{border-color:#587178;color:#e4efed}.dark-theme .section-skills{background:#142d37;border-color:#34515a}.dark-theme .confidentiality{background:#183640;border-color:#3e5b62}.dark-theme .confidentiality p{color:#b6c6c6}.dark-theme .exp-row,.dark-theme .hero-stats,.dark-theme .work-toolbar,.dark-theme .contact-bottom{border-color:#34515a}.dark-theme .project-visit.secondary{background:#d9e7e2;color:#163440}.dark-theme .skip-link{background:#e9f1ef;color:#17313c}@media(max-width:740px){.theme-toggle{padding:8px}.theme-toggle-label{display:none}}

/* V4: clearly marked conceptual artwork and longer professional name. */
.project-art:after{content:'ILUSTRASI KONSEPTUAL · BUKAN SCREENSHOT';}
html[lang="en"] .project-art:after{content:'CONCEPTUAL ILLUSTRATION · NOT A SCREENSHOT';}
.project-art.has-cover:after{content:'';}
.site-header .brand-name{max-width:220px;white-space:normal;line-height:1.2;}
.project-details h4{margin-top:18px;}
.project-details p,.project-details li{line-height:1.85;}
.project-art .art-index{background:#ffffffbd;padding:5px 6px;border-radius:2px;}
@media(max-width:740px){.site-header .brand-name{max-width:158px;font-size:9px;}.brand-icon{font-size:31px}.hero h1{font-size:clamp(39px,9.8vw,66px);white-space:normal;}}
@media(max-width:420px){.site-header{gap:8px}.site-header .brand-name{max-width:140px;font-size:9px}.language-switch{gap:2px}.lang-btn{font-size:10px;padding:7px}}