:root {
  --white: #fff;
  --black: #0a0a0a;
  --red: #ec212c;
  --pad: clamp(18px, 3.3vw, 52px);
}

* { box-sizing: border-box; }
[hidden], .cases-grid[hidden], .confidential-work[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--black); background: var(--white); font-family: "DM Sans", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.work-header { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; padding: 18px var(--pad); display: flex; justify-content: space-between; align-items: center; }
.work-logo { width: 142px; height: 66px; display: grid; place-items: center; }
.work-logo img { width: 142px; height: auto; }
.back-link { display: flex; align-items: center; gap: 14px; font-size: clamp(52px,8.6vw,137px); letter-spacing: 0; text-transform: uppercase; }
.back-link b { font-size: 10px; font-weight: 400; letter-spacing: .12em; white-space: nowrap; }
.back-link span { display: inline-grid; width: .72em; height: .72em; place-items: center; flex: 0 0 auto; border: 2px solid currentColor; border-radius: 50%; color: var(--black); background: transparent; font-size: .45em; font-weight: 400; line-height: 1; vertical-align: .15em; transition: .35s ease; }
.back-link span::before, .back-link span::after { content: none; }
.back-link:hover span { color: var(--white); background: var(--red); border-color: var(--red); transform: rotate(45deg); }

.work-hero { min-height: 100svh; padding: 130px var(--pad) 28px; display: flex; flex-direction: column; }
.eyebrow { display: flex; gap: 24px; margin: 0; font-size: 9px; letter-spacing: .14em; }
.eyebrow span { color: var(--red); }
.work-hero h1 { margin: auto 0; font-size: clamp(86px, 17vw, 270px); font-weight: 400; line-height: .72; letter-spacing: -.085em; }
.work-hero h1 em { margin-left: 13vw; color: var(--red); font-style: normal; }
.hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 20px; border-top: 1px solid var(--black); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.hero-bottom p { width: min(430px, 100%); margin: 0; line-height: 1.55; }
.hero-bottom > span { text-align: right; }

.projects-shell { padding: 90px var(--pad) 130px; overflow: hidden; color: var(--white); background: var(--black); }
.section-head { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 9px; letter-spacing: .13em; }
.section-head p { margin: 0; }

.portfolio-intro { min-height: 78vh; padding: 110px 0; display: grid; grid-template-columns: 1.5fr .72fr; align-items: end; gap: 8vw; }
.portfolio-intro h2 { margin: 0; font-size: clamp(54px, 8.4vw, 134px); font-weight: 400; line-height: .82; letter-spacing: -.065em; }
.portfolio-intro h2 em { color: var(--red); font-style: normal; }
.portfolio-intro > div { display: grid; gap: 28px; padding-bottom: 8px; }
.portfolio-intro p { margin: 0; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.5; }
.portfolio-intro p:last-child { color: rgba(255,255,255,.56); }

.cases-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 130px 3vw; }
.case-card { min-width: 0; opacity: 0; transform: translateY(70px); transition: opacity .75s ease, transform .9s cubic-bezier(.16,.75,.2,1); }
.case-card.is-visible { opacity: 1; transform: translateY(0); }
.case-card--wide { grid-column: 1 / -1; }
.case-visual { --tilt-x:0deg; --tilt-y:0deg; --move-x:0px; --move-y:0px; position: relative; height: clamp(480px, 61vw, 820px); overflow: hidden; background: #1a1a1a; perspective: 1200px; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; transition: transform .28s ease; }
.case-card:not(.case-card--wide) .case-visual { height: clamp(540px, 58vw, 760px); }
.case-card--menu .case-visual { background: radial-gradient(circle at 20% 55%, rgba(255,255,255,.16), transparent 32%), linear-gradient(125deg, #5f0710, #ec212c 52%, #210206); }
.case-card--sop .case-visual { background: linear-gradient(90deg, rgba(10,10,10,.05) 1px, transparent 1px), linear-gradient(rgba(10,10,10,.05) 1px, transparent 1px), linear-gradient(145deg, #f5f2ec, #a9a7a2); background-size: 42px 42px, 42px 42px, auto; }
.case-card--app .case-visual { background: radial-gradient(circle at 78% 28%, #ffd900 0 5%, transparent 5.5%), radial-gradient(circle at 72% 30%, rgba(0,130,255,.85), transparent 28%), linear-gradient(155deg, #050505 20%, #093c68 72%, #0a0a0a); }
.case-card--rent .case-visual { background: radial-gradient(ellipse at 86% 30%, rgba(255,255,255,.28), transparent 30%), linear-gradient(115deg, #171717 5%, #6f1017 48%, #ec212c 72%, #2a0205); }
.case-card--bot .case-visual { background: radial-gradient(circle at 72% 35%, rgba(255,255,255,.94) 0 4%, #328ac1 4.5% 11%, #080808 11.5% 16%, rgba(26,109,163,.42) 16.5% 28%, transparent 29%), linear-gradient(145deg, #030303, #12344e 64%, #020202); }
.case-card--site .case-visual { background: radial-gradient(circle at 82% 18%, rgba(236,33,44,.9) 0 8%, transparent 8.5%), linear-gradient(135deg, #d8d8d4, #fff 58%, #bdbdb9); }
.case-visual::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 35%, rgba(0,0,0,.25)); pointer-events: none; }
.case-visual > img { width: calc(100% + 30px); height: calc(100% + 30px); margin: -15px; object-fit: cover; filter: saturate(.76) contrast(1.04); transform: translate(var(--move-x),var(--move-y)) scale(1.04); transition: transform .4s ease, filter .5s ease; }
.case-card:hover .case-visual > img { filter: saturate(1) contrast(1.03); }
.case-index { position: absolute; z-index: 5; top: 20px; left: 20px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(10,10,10,.26); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 9px; }
.ui-device { position: absolute; z-index: 3; color: var(--black); background: rgba(255,255,255,.94); box-shadow: 0 35px 85px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform: translateZ(45px); }
.ui-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(10,10,10,.15); font-size: 8px; letter-spacing: .12em; }
.ui-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.ui-top b { font-weight: 400; }

.menu-device { right: 9%; top: 11%; width: min(330px, 31%); padding: 24px; border-radius: 28px; animation: deviceFloat 5s ease-in-out infinite alternate; }
.dish-photo { height: 230px; margin: 22px 0; border-radius: 18px; background: radial-gradient(circle at 48% 45%, #f2d8b7 0 17%, #6e3421 18% 25%, #dfd1bd 26% 33%, #222 34% 35%, #caa66f 36% 52%, #eee 53%); }
.menu-device strong { display: block; font-size: 18px; font-weight: 500; }.menu-device p { margin: 8px 0 18px; font-size: 10px; }.ui-chips { display: flex; gap: 5px; flex-wrap: wrap; }.ui-chips span { padding: 7px 9px; border: 1px solid #bbb; border-radius: 999px; font-size: 7px; }

.paper-stack { position: absolute; z-index: 3; right: 7%; bottom: 7%; width: 64%; height: 69%; transform: translateZ(45px) rotate(4deg); }
.paper-stack > i, .paper-stack > div { position: absolute; inset: 0; background: #eeeae3; box-shadow: 0 25px 55px rgba(0,0,0,.35); }.paper-stack > i:first-child { transform: rotate(-9deg) translate(-12px,6px); }.paper-stack > i:nth-child(2) { transform: rotate(-3deg) translate(-5px,3px); }.paper-stack > div { padding: 11%; display: flex; flex-direction: column; color: #111; }.paper-stack small { font-size: 8px; letter-spacing: .13em; }.paper-stack strong { margin: 25% 0 auto; font-size: clamp(25px,3vw,46px); line-height: .9; }.paper-stack span { padding: 10px 0; border-top: 1px solid #aaa; font-size: 8px; letter-spacing: .1em; }

.test-phone { left: 8%; bottom: 6%; width: 58%; min-width: 290px; padding: 24px; border-radius: 31px; animation: deviceFloat 5.7s .3s ease-in-out infinite alternate; }.test-phone > small { display: block; margin: 28px 0 13px; font-size: 8px; color: #777; }.test-phone > strong { display: block; margin-bottom: 30px; font-size: 18px; line-height: 1.2; }.test-phone button { width: 100%; margin: 5px 0; padding: 12px; border: 1px solid #ccc; border-radius: 12px; text-align: left; background: transparent; font: 9px "DM Sans"; }.test-phone button:first-of-type { color: #fff; background: var(--red); border-color: var(--red); }.test-progress { height: 4px; margin-top: 24px; overflow: hidden; border-radius: 5px; background: #ddd; }.test-progress i { display: block; width: 42%; height: 100%; background: var(--red); }

.rent-dashboard { left: 14%; top: 17%; width: 72%; height: 62%; display: grid; grid-template-columns: 72px 1fr; border-radius: 24px; overflow: hidden; transform: translateZ(45px) rotate(-2deg); }.dash-side { padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 24px; color: #fff; background: #151515; }.dash-side b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--red); }.dash-side i { width: 16px; height: 2px; background: #777; }.dash-main { padding: 28px; overflow: hidden; }.dash-main > strong { display: block; margin: 28px 0 20px; font-size: clamp(20px,3vw,45px); }.dash-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 22px; }.dash-stats span { padding: 14px; border-radius: 10px; background: #eee; font-size: 7px; }.dash-stats b { display: block; margin-bottom: 6px; font-size: 20px; }.dash-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #ddd; font-size: 9px; }.dash-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }.dash-row em { font-size: 7px; font-style: normal; }

.bot-phone { left: 8%; top: 12%; width: 57%; min-width: 290px; padding: 22px; border-radius: 31px; animation: deviceFloat 5.4s ease-in-out infinite alternate; }.bot-msg { max-width: 82%; margin: 22px 0; padding: 12px 14px; border-radius: 16px; font-size: 10px; }.bot-msg--in { background: #eee; }.bot-msg--out { margin-left: auto; color: #fff; background: var(--red); }.bot-file { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #ddd; border-radius: 14px; }.bot-file > b { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--red); font-size: 8px; }.bot-file span { font-size: 10px; }.bot-file small { color: #888; }.bot-input { margin-top: 38px; padding: 12px; border-radius: 999px; color: #888; background: #eee; font-size: 9px; }.bot-input i { float: right; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #111; font-style: normal; }

.site-browser { left: 7%; top: 16%; width: 86%; height: 63%; padding: 0 8%; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.95); }.browser-bar { height: 40px; margin: 0 -10% 8%; padding: 0 15px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #ddd; }.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #bbb; }.browser-bar span { margin-left: 12px; font-size: 8px; }.site-browser > img { width: 95px; filter: none; }.site-browser > small { display: block; margin: 8% 0 3%; font-size: 8px; letter-spacing: .13em; }.site-browser > strong { display: block; color: var(--red); font-size: clamp(18px,2.35vw,34px); line-height: .92; }.site-browser > button { margin-top: 9%; padding: 11px 16px; border: 0; border-radius: 999px; color: #fff; background: #111; font: 8px "DM Sans"; }

.case-copy { display: grid; grid-template-columns: 1.05fr 1.25fr .8fr; gap: clamp(20px,3vw,54px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.45); }
.case-title small, .case-result small { display: block; margin-bottom: 12px; color: rgba(255,255,255,.52); font-size: 8px; letter-spacing: .12em; }.case-title h3 { margin: 0; font-size: clamp(24px,2.4vw,40px); font-weight: 400; line-height: .95; }.case-about p, .case-result p { margin: 0; font-size: 12px; line-height: 1.5; }.case-about ul { margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }.case-about li { padding: 6px 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: 8px; text-transform: uppercase; }.case-result { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.25); }

.confidential-work { padding-top: 210px; }
.confidential-heading { display: grid; grid-template-columns: .48fr 1.5fr .65fr; gap: 4vw; align-items: start; padding-bottom: 85px; }
.confidential-heading small { padding-top: 10px; color: rgba(255,255,255,.52); font-size: 8px; letter-spacing: .13em; }
.confidential-heading h2 { margin: 0; font-size: clamp(47px,6.8vw,108px); font-weight: 400; line-height: .83; letter-spacing: -.06em; }
.confidential-heading h2 em { color: var(--red); font-style: normal; }
.confidential-heading p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.66); }
.confidential-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.35); border-left: 1px solid rgba(255,255,255,.35); }
.private-case { position: relative; min-height: 520px; padding: clamp(25px,3vw,48px); overflow: hidden; border-right: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.35); opacity: 0; transform: translateY(45px); transition: opacity .7s ease, transform .8s cubic-bezier(.16,.75,.2,1), background .4s ease; }
.private-case.is-visible { opacity: 1; transform: translateY(0); }
.private-case:hover { background: rgba(255,255,255,.045); }
.private-case > *:not(.flow-map,.private-mark,.auto-orbit,.network-pulse) { position: relative; z-index: 2; }
.private-number { position: absolute !important; top: 24px; right: 28px; color: var(--red); font-size: 11px; }
.private-case > small { color: rgba(255,255,255,.48); font-size: 8px; letter-spacing: .12em; }
.private-case h3 { max-width: 560px; margin: 95px 0 20px; font-size: clamp(31px,4vw,62px); font-weight: 400; line-height: .9; letter-spacing: -.045em; }
.private-case > p { width: min(430px,88%); margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.55; }
.private-case ul { position: absolute !important; left: clamp(25px,3vw,48px); bottom: 32px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.private-case li { padding: 7px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: 8px; text-transform: uppercase; }
.flow-map { position: absolute; right: 7%; bottom: 13%; width: 210px; height: 150px; opacity: .42; }.flow-map i { position: absolute; width: 34px; height: 34px; border: 1px solid #fff; border-radius: 8px; }.flow-map i:nth-child(1) { left: 0; top: 58px; background: var(--red); }.flow-map i:nth-child(2) { left: 88px; top: 0; }.flow-map i:nth-child(3) { left: 88px; bottom: 0; }.flow-map i:nth-child(4) { right: 0; top: 58px; }.flow-map span { position: absolute; height: 1px; width: 74px; background: #fff; transform-origin: left; }.flow-map span:nth-of-type(1) { left: 32px; top: 73px; transform: rotate(-32deg); }.flow-map span:nth-of-type(2) { left: 32px; top: 76px; transform: rotate(32deg); }.flow-map span:nth-of-type(3) { left: 120px; top: 74px; }
.private-mark { position: absolute; right: -25px; bottom: -50px; color: rgba(236,33,44,.22); font-size: 240px; font-weight: 500; line-height: 1; letter-spacing: -.14em; }
.auto-orbit { position: absolute; right: -30px; bottom: -55px; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; animation: orbitSpin 16s linear infinite; }.auto-orbit::before { content: ""; position: absolute; inset: 48px; border: 1px solid rgba(236,33,44,.7); border-radius: 50%; }.auto-orbit i { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--red); }.auto-orbit i:first-child { left: 32px; top: 60px; }.auto-orbit i:nth-child(2) { right: 60px; bottom: 30px; }.auto-orbit span { position: absolute; inset: 105px; border-radius: 50%; background: #fff; }
.network-pulse { position: absolute; right: 6%; bottom: 8%; width: 220px; height: 180px; opacity: .48; }.network-pulse i { position: absolute; width: 22px; height: 22px; border: 1px solid #fff; border-radius: 50%; background: #111; }.network-pulse i:first-child { left: 0; top: 75px; }.network-pulse i:nth-child(2) { left: 96px; top: 0; }.network-pulse i:nth-child(3) { right: 0; bottom: 0; }.network-pulse span { position: absolute; left: 10px; top: 85px; width: 185px; height: 1px; background: var(--red); transform: rotate(-24deg); transform-origin: left; box-shadow: 0 0 12px var(--red); }
.nda-note { display: grid; grid-template-columns: .25fr 1fr; gap: 4vw; align-items: start; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.35); }.nda-note span { color: var(--red); font-size: clamp(40px,6vw,92px); line-height: .8; }.nda-note p { width: min(700px,100%); margin: 0; font-size: 13px; line-height: 1.55; }

.portfolio-nda { margin: 0 0 1px; padding: 42px clamp(24px,3vw,48px); display: grid; grid-template-columns: .25fr 1fr; gap: 4vw; align-items: start; border: 1px solid rgba(255,255,255,.3); background: #0a0a0a; }.portfolio-nda span { color: var(--red); font-size: clamp(45px,6vw,90px); line-height: .8; }.portfolio-nda p { width: min(760px,100%); margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.55; }
.experience-showcase { position: relative; height: 100svh; min-height: 680px; overflow: hidden; isolation: isolate; background: var(--black); border: 1px solid rgba(255,255,255,.3); }
.experience-card { position: absolute; inset: 0; z-index: var(--stack,1); width: 100%; height: 100%; min-height: 0; padding: clamp(24px,3vw,48px); overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 48px; background: var(--black); opacity: 0; visibility: hidden; clip-path: inset(32% 12% round 48px); transform: translateZ(0) scale(.86); transform-origin: center; box-shadow: 0 0 90px rgba(0,0,0,.55); pointer-events: none; will-change: transform, clip-path, opacity, border-radius; transition: clip-path .82s cubic-bezier(.76,0,.18,1), transform .82s cubic-bezier(.76,0,.18,1), border-radius .82s cubic-bezier(.76,0,.18,1), opacity .35s ease, visibility 0s .82s; }
.experience-card.is-active, .experience-card.is-past { visibility: visible; opacity: 1; clip-path: inset(0 round 0); transform: translateZ(0) scale(1); border-radius: 0; transition-delay: 0s; }
.experience-card.is-active { pointer-events: auto; }
.experience-card { grid-column: 1 / -1; }
.experience-meta { position: relative; z-index: 5; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .13em; }.experience-meta span { color: var(--red); }.experience-meta small { font-size: inherit; }
.experience-copy { position: relative; z-index: 4; width: 47%; margin-top: 90px; }.experience-copy > p { margin: 0 0 16px; color: rgba(255,255,255,.52); font-size: 8px; letter-spacing: .13em; }.experience-copy h3 { margin: 0; font-size: clamp(43px,5.6vw,88px); font-weight: 400; line-height: .84; letter-spacing: -.055em; }.experience-copy > div { width: min(460px,90%); margin-top: 28px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.55; }
.experience-card:not(.experience-card--horeca):not(.experience-card--automation):not(.experience-card--commerce) .experience-copy { width: 47%; }.experience-card:not(.experience-card--horeca):not(.experience-card--automation):not(.experience-card--commerce) .experience-copy h3 { font-size: clamp(43px,5.6vw,88px); }
.experience-card > ul { position: absolute; z-index: 5; left: clamp(24px,3vw,48px); bottom: 34px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }.experience-card > ul li { padding: 7px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; font-size: 8px; text-transform: uppercase; }
.experience-art { position: absolute; z-index: 2; inset: 0; clip-path: inset(0 0 0 48%); pointer-events: none; }
.experience-card--horeca { background: radial-gradient(circle at 77% 48%, rgba(236,33,44,.5), transparent 28%), #090909; }.horeca-phone { position: absolute; right: 10%; top: 17%; width: 250px; height: 390px; padding: 26px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.42); border-radius: 34px; background: rgba(255,255,255,.1); box-shadow: 0 35px 90px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: expFloat 4.8s ease-in-out infinite alternate; }.horeca-phone > i { width: 42px; height: 5px; margin: 0 auto 55px; border-radius: 5px; background: rgba(255,255,255,.55); }.horeca-phone strong { margin-bottom: auto; color: var(--red); font-size: 55px; font-weight: 400; }.horeca-phone span { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.3); font-size: 8px; letter-spacing: .12em; }.horeca-ring { position: absolute; right: 5%; top: 9%; width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; animation: ringTurn 18s linear infinite; }.horeca-ring i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--red); }.horeca-ring i:nth-child(1) { left: 30px; top: 90px; }.horeca-ring i:nth-child(2) { right: 4px; top: 180px; }.horeca-ring i:nth-child(3) { left: 160px; bottom: -8px; }
.experience-card--mobility { background: linear-gradient(145deg,#102b3b,#061016 68%); }.road { position: absolute; right: -12%; bottom: -23%; width: 90%; height: 65%; border: 2px solid rgba(255,255,255,.25); border-radius: 50% 0 0; transform: rotate(-12deg); }.road::before { content:""; position:absolute; inset:42px; border:1px dashed rgba(255,255,255,.45); border-radius:inherit; }.car { position: absolute; right: 18%; bottom: 22%; width: 165px; height: 58px; border-radius: 55px 70px 18px 18px; background: var(--red); animation: carDrive 5.5s ease-in-out infinite alternate; }.car::before { content:""; position:absolute; left:35px; top:-28px; width:82px; height:42px; border-radius:60px 60px 0 0; background:#ec212c; }.car i { position:absolute; bottom:-14px; width:31px; height:31px; border:7px solid #ddd; border-radius:50%; background:#111; }.car i:first-child { left:24px; }.car i:last-child { right:22px; }.booking-ticket { position:absolute; right:7%; top:18%; width:190px; padding:20px; border:1px solid rgba(255,255,255,.4); border-radius:20px; background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }.booking-ticket small,.booking-ticket span { display:block; font-size:8px; letter-spacing:.12em; }.booking-ticket b { display:block; margin:25px 0; font-size:32px; font-weight:400; }.booking-ticket span { color:#6cff9a; }
.experience-card--automation { background: radial-gradient(circle at 77% 48%,rgba(236,33,44,.22),transparent 30%),linear-gradient(125deg,#090909,#17120f); }.workflow { position:absolute; right:5%; top:18%; width:45%; height:64%; }.workflow i { position:absolute; z-index:2; width:92px; height:92px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.4); border-radius:22px; background:rgba(255,255,255,.08); font-style:normal; font-size:12px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }.workflow i:nth-child(1){left:0;top:38%;}.workflow i:nth-child(2){left:38%;top:0;color:#fff;background:var(--red);}.workflow i:nth-child(3){right:0;top:38%;}.workflow i:nth-child(4){left:38%;bottom:0;}.workflow span { position:absolute; height:1px; background:rgba(255,255,255,.5); transform-origin:left; }.workflow span:nth-of-type(1){left:80px;top:43%;width:180px;transform:rotate(-36deg);}.workflow span:nth-of-type(2){left:50%;top:91px;width:190px;transform:rotate(35deg);}.workflow span:nth-of-type(3){left:49%;bottom:91px;width:170px;transform:rotate(-35deg);}.workflow b { position:absolute; z-index:3; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 18px #fff; animation:workflowPulse 3s linear infinite; }
.experience-card--government { background:linear-gradient(145deg,#ece9e1,#9a9a95); color:#111; }.experience-card--government .experience-copy > p,.experience-card--government .experience-copy > div { color:rgba(10,10,10,.62); }.experience-card--government > ul li { border-color:rgba(10,10,10,.3); }.city { position:absolute; right:4%; bottom:0; width:46%; height:43%; display:flex; align-items:end; gap:9px; }.city i { flex:1; background:#222; }.city i:nth-child(1){height:42%;}.city i:nth-child(2){height:78%;}.city i:nth-child(3){height:58%;}.city i:nth-child(4){height:100%;}.city i:nth-child(5){height:68%;}.gov-browser { position:absolute; right:9%; top:21%; width:43%; padding:24px; border-radius:18px; background:#fff; box-shadow:0 25px 70px rgba(0,0,0,.25); animation:expFloat 5s ease-in-out infinite alternate; }.gov-browser span,.gov-browser b { display:block; }.gov-browser span{font-size:8px;letter-spacing:.12em;}.gov-browser b{margin:32px 0;font-size:14px;font-weight:400;}.gov-browser i{display:block;height:9px;margin:9px 0;border-radius:8px;background:#ddd;}.gov-browser i:last-child{width:60%;background:var(--red);}
.experience-card--learning { background:radial-gradient(circle at 80% 30%,rgba(64,154,255,.38),transparent 25%),#080d14; }.factory { position:absolute; right:2%; bottom:0; width:55%; height:38%; }.factory i { position:absolute; bottom:0; width:29%; background:#29323b; }.factory i:nth-child(1){left:0;height:45%;}.factory i:nth-child(2){left:31%;height:72%;}.factory i:nth-child(3){right:0;height:58%;}.factory span{position:absolute;left:38%;bottom:72%;width:18px;height:120px;background:#29323b;}.ai-core { position:absolute; right:14%; top:18%; width:150px; height:150px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; animation:ringTurn 12s linear infinite; }.ai-core::before,.ai-core::after{content:"";position:absolute;border:1px solid rgba(64,154,255,.5);border-radius:50%;}.ai-core::before{inset:16px}.ai-core::after{inset:35px}.ai-core b{font-weight:400;font-size:24px}.ai-core i{position:absolute;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--red)}.learning-card{position:absolute;right:30%;bottom:13%;width:190px;padding:20px;border-radius:20px;color:#111;background:rgba(255,255,255,.92);box-shadow:0 25px 60px rgba(0,0,0,.35);animation:expFloat 4.6s ease-in-out infinite alternate}.learning-card small,.learning-card span{display:block;font-size:8px}.learning-card strong{display:block;margin:28px 0;font-size:23px;line-height:.9}.learning-card span{color:var(--red)}
.experience-card--accounting { background:linear-gradient(145deg,#35101c,#0b0809 70%); }.ledger { position:absolute; right:6%; bottom:9%; width:48%; padding:22px;border:1px solid rgba(255,255,255,.32);border-radius:20px;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.ledger div{display:flex;justify-content:space-between;padding-bottom:18px;font-size:8px}.ledger i{display:block;height:30px;margin:5px 0;border-radius:7px;background:linear-gradient(90deg,rgba(255,255,255,.2) 0 42%,transparent 42% 46%,rgba(255,255,255,.1) 46% 76%,transparent 76% 80%,rgba(236,33,44,.65) 80%);transform-origin:left;animation:ledgerLoad 3.2s ease-in-out infinite alternate}.ledger i:nth-child(2n){animation-delay:.35s}.ledger em{position:absolute;right:22px;top:65px;width:8px;height:8px;border-radius:50%;background:#6cff9a;box-shadow:0 0 10px #6cff9a}
.experience-card--commerce { background:radial-gradient(circle at 82% 24%,rgba(236,33,44,.7),transparent 18%),linear-gradient(125deg,#efeee9,#aaa); color:#111; }.experience-card--commerce .experience-copy > p,.experience-card--commerce .experience-copy > div{color:rgba(10,10,10,.62)}.experience-card--commerce > ul li{border-color:rgba(10,10,10,.3)}.shop-window{position:absolute;right:6%;top:15%;width:46%;height:62%;padding:22px;border-radius:24px;background:rgba(255,255,255,.92);box-shadow:0 30px 80px rgba(0,0,0,.3);animation:expFloat 5s ease-in-out infinite alternate}.shop-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid #ddd;font-size:8px}.shop-top i{width:8px;height:8px;border-radius:50%;background:var(--red)}.products{height:65%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:24px 0}.products i{border-radius:12px;background:linear-gradient(145deg,#ddd,#999)}.products i:nth-child(2){background:linear-gradient(145deg,#ec212c,#730b12)}.shop-line{width:45%;height:8px;border-radius:8px;background:#111}.cart-bubble{position:absolute;right:3%;top:11%;width:55px;height:55px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--red);font-size:12px;animation:cartPop 1.8s ease-in-out infinite}
.experience-nda { display:none; }

.work-principle { min-height: 95vh; padding-top: 180px; display: flex; flex-direction: column; justify-content: space-between; }.work-principle > p { font-size: 9px; letter-spacing: .13em; }.work-principle h2 { margin: 90px 0; font-size: clamp(47px,7.8vw,124px); font-weight: 400; line-height: .85; letter-spacing: -.06em; }.work-principle h2 em { color: var(--red); font-style: normal; }.work-principle > div { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.5); }.work-principle span { padding: 18px 8px; border-right: 1px solid rgba(255,255,255,.25); font-size: 9px; }.work-principle span:last-child { border: 0; }

.work-cta { min-height: 88vh; padding: 90px var(--pad); display: flex; flex-direction: column; justify-content: space-between; }.work-cta small { font-size: 9px; letter-spacing: .13em; }.work-cta a { position: relative; font-size: clamp(52px,8.6vw,137px); line-height: .84; letter-spacing: -.065em; }.work-cta em { color: var(--red); font-style: normal; }.work-cta a span { display: inline-grid; width: .72em; height: .72em; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: .45em; vertical-align: .15em; transition: .35s ease; }.work-cta a:hover span { color: #fff; background: var(--red); border-color: var(--red); transform: rotate(45deg); }

@keyframes deviceFloat { to { transform: translateZ(45px) translateY(-13px) rotate(1deg); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes expFloat { to { transform: translateY(-13px) rotate(1deg); } }
@keyframes ringTurn { to { transform: rotate(360deg); } }
@keyframes carDrive { to { transform: translate(-58px,-28px) rotate(-7deg); } }
@keyframes workflowPulse { 0%{left:18%;top:43%} 48%{left:47%;top:18%} 100%{left:80%;top:43%} }
@keyframes ledgerLoad { from { transform:scaleX(.55);opacity:.6 } to { transform:scaleX(1);opacity:1 } }
@keyframes cartPop { 50% { transform:scale(1.13);box-shadow:0 0 0 12px rgba(236,33,44,.12) } }

.work-footer { padding: 24px var(--pad); display: flex; justify-content: space-between; border-top: 1px solid rgba(10,10,10,.2); font-size: 9px; letter-spacing: .12em; }

@media (max-width: 760px) {
  :root { --pad: 15px; }
  .work-header { padding-top: 13px; }
  .work-logo, .work-logo img { width: 110px; }
  .work-logo { height: 52px; }
  .back-link { gap: 0; }
  .back-link b { display: none; }
  .work-hero { padding-top: 105px; }
  .work-hero h1 { font-size: 22vw; line-height: .78; }
  .work-hero h1 em { margin-left: 6vw; }
  .hero-bottom { grid-template-columns: 1fr; }
  .hero-bottom > span { display: none; }
  .projects-shell { padding: 65px 15px 85px; }
  .section-head span { display: none; }
  .portfolio-intro { min-height: 82vh; padding: 85px 0; grid-template-columns: 1fr; align-content: space-between; gap: 70px; }
  .portfolio-intro h2 { font-size: 15vw; }
  .portfolio-intro > div { width: 92%; }
  .cases-grid { grid-template-columns: 1fr; gap: 90px; }
  .case-card--wide { grid-column: auto; }
  .case-visual, .case-card:not(.case-card--wide) .case-visual { height: 520px; }
  .case-index { top: 14px; left: 14px; }
  .menu-device { top: 12%; right: 5%; width: 72%; padding: 18px; }
  .dish-photo { height: 185px; }
  .paper-stack { right: 8%; width: 76%; height: 66%; }
  .paper-stack strong { font-size: 31px; }
  .test-phone, .bot-phone { left: 7%; width: 79%; min-width: 0; padding: 18px; }
  .test-phone { bottom: 5%; }.test-phone > strong { font-size: 15px; }
  .rent-dashboard { left: 4%; top: 18%; width: 92%; height: 61%; grid-template-columns: 45px 1fr; }
  .dash-side { padding: 14px 8px; }.dash-main { padding: 17px; }.dash-main > strong { font-size: 24px; }.dash-stats span { padding: 9px 6px; }.dash-stats b { font-size: 15px; }.dash-row { grid-template-columns: 8px 1fr; }.dash-row em { display: none; }
  .site-browser { left: 5%; top: 18%; width: 90%; height: 62%; }
  .site-browser > strong { font-size: 19px; }
  .case-copy { grid-template-columns: 1fr; gap: 24px; }
  .case-result { padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.25); border-left: 0; }
  .confidential-work { padding-top: 130px; }
  .confidential-heading { grid-template-columns: 1fr; gap: 28px; padding-bottom: 60px; }
  .confidential-heading h2 { font-size: 14vw; }
  .confidential-heading p { width: 92%; }
  .confidential-grid { grid-template-columns: 1fr; }
  .private-case { min-height: 470px; }
  .private-case h3 { margin-top: 75px; font-size: 11vw; }
  .private-case > p { width: 92%; }
  .flow-map, .auto-orbit, .network-pulse { opacity: .2; transform: scale(.72); transform-origin: bottom right; }
  .private-mark { font-size: 180px; opacity: .72; }
  .nda-note { grid-template-columns: 1fr; gap: 22px; }
  .experience-showcase { grid-template-columns: 1fr; }
  .portfolio-nda { grid-template-columns: 1fr; gap: 22px; padding: 30px 18px; }
  .experience-card, .experience-card--horeca, .experience-card--automation, .experience-card--commerce { grid-column: auto; min-height: 680px; padding: 24px 18px; }
  .experience-art { clip-path: none; }
  .experience-meta small { max-width: 72%; text-align: right; line-height: 1.4; }
  .experience-copy, .experience-card:not(.experience-card--horeca):not(.experience-card--automation):not(.experience-card--commerce) .experience-copy { width: 100%; margin-top: 55px; }
  .experience-copy h3, .experience-card:not(.experience-card--horeca):not(.experience-card--automation):not(.experience-card--commerce) .experience-copy h3 { font-size: 12vw; }
  .experience-copy > div { width: 100%; font-size: 12px; }
  .experience-card > ul { left: 18px; right: 18px; bottom: 20px; }
  .horeca-phone { right: 8%; top: 49%; width: 165px; height: 245px; padding: 17px; border-radius: 24px; }.horeca-phone > i { margin-bottom: 25px; }.horeca-phone strong { font-size: 37px; }.horeca-phone span { padding: 8px 0; }.horeca-ring { right: -12%; top: 45%; width: 270px; height: 270px; }
  .road { width: 115%; height: 43%; }.car { right: 12%; bottom: 19%; transform: scale(.74); }.booking-ticket { right: 5%; top: 52%; width: 155px; }
  .workflow { right: 0; top: 48%; width: 100%; height: 38%; transform: scale(.72); }.workflow i { width: 74px; height: 74px; }
  .city { width: 72%; height: 28%; }.gov-browser { right: 5%; top: 52%; width: 73%; }
  .factory { width: 80%; height: 26%; }.ai-core { right: 7%; top: 47%; width: 110px; height: 110px; }.learning-card { right: 35%; bottom: 17%; width: 155px; }
  .ledger { right: 4%; bottom: 14%; width: 84%; }
  .shop-window { right: 5%; top: 48%; width: 90%; height: 36%; }.cart-bubble { top: 44%; }
  .experience-nda { grid-template-columns: 1fr; gap: 22px; }
  .work-principle { min-height: 82vh; padding-top: 120px; }
  .work-principle h2 { font-size: 14vw; }
  .work-principle > div { grid-template-columns: 1fr 1fr; }
  .work-principle span:nth-child(2) { border-right: 0; }
  .work-principle span { border-bottom: 1px solid rgba(255,255,255,.25); }
  .work-cta { min-height: 76vh; padding: 70px 15px; }
  .work-cta a { font-size: 14vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .case-card { opacity: 1; transform: none; }
  .experience-card { transition: clip-path .82s cubic-bezier(.76,0,.18,1), transform .82s cubic-bezier(.76,0,.18,1), border-radius .82s cubic-bezier(.76,0,.18,1), opacity .35s ease, visibility 0s .82s !important; }
}

/* Full-screen nested deck */
body.deck-mode { height: 100svh; overflow: hidden; overscroll-behavior: none; }
body.deck-mode .work-header { position: fixed; z-index: 120; }
body.deck-mode main { height: 100svh; }
body.deck-mode .projects-shell, body.deck-mode .experience-showcase { display: contents; }
body.deck-mode .section-head, body.deck-mode .portfolio-intro, body.deck-mode .portfolio-nda,
body.deck-mode .work-principle, body.deck-mode .work-footer { display: none !important; }
body.deck-mode .deck-slide { position: fixed !important; inset: 0 !important; z-index: 20; width: 100vw !important; height: 100svh !important; min-height: 0 !important; margin: 0 !important; visibility: hidden !important; opacity: 0 !important; clip-path: none !important; transform: none !important; border-radius: 0 !important; pointer-events: none !important; transition: none !important; }
body.deck-mode .deck-slide.is-deck-active { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
body.deck-mode .work-hero.deck-slide { padding-top: 130px; background: var(--white); }
body.deck-mode .experience-card.deck-slide { padding: clamp(82px,8vh,105px) var(--pad) 34px; }
body.deck-mode .work-cta.deck-slide { display: flex !important; padding-top: 120px; background: var(--white); }
.hero-bottom small { display: inline-block; margin-top: 8px; font-size: 8px; line-height: 1.45; opacity: .55; }

.deck-door-layer { position: fixed; z-index: 100; inset: 0; overflow: hidden; pointer-events: none; }
.deck-door { position: absolute; top: 0; width: 50.05%; height: 100%; overflow: hidden; background: transparent; will-change: transform; }
.deck-door--left { left: 0; }
.deck-door--right { right: 0; }
body.deck-mode .deck-door .door-clone { position: absolute !important; top: 0 !important; bottom: 0 !important; z-index: 1 !important; display: flex !important; width: 100vw !important; height: 100svh !important; min-height: 0 !important; margin: 0 !important; visibility: visible !important; opacity: 1 !important; clip-path: none !important; transform: none !important; border-radius: 0 !important; pointer-events: none !important; }
body.deck-mode .deck-door--left .door-clone { left: 0 !important; right: auto !important; }
body.deck-mode .deck-door--right .door-clone { left: auto !important; right: 0 !important; }
body.deck-mode .deck-door .experience-card.door-clone { padding: clamp(82px,8vh,105px) var(--pad) 34px; }
body.deck-mode .deck-door .experience-card.door-clone { display: block !important; }
body.deck-mode .deck-door .work-hero.door-clone { padding: 130px var(--pad) 28px; background: var(--white); }
body.deck-mode .deck-door .work-cta.door-clone { padding: 120px var(--pad) 90px; background: var(--white); }

.page-exit-transition { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--red); clip-path: circle(0 at var(--exit-x) var(--exit-y)); pointer-events: all; transition: clip-path .78s cubic-bezier(.76,0,.18,1); }
.page-exit-transition.is-active { clip-path: circle(160vmax at var(--exit-x) var(--exit-y)); }
.exit-word { display: flex; align-items: baseline; font-size: clamp(48px,11vw,180px); line-height: .8; letter-spacing: -.08em; }
.exit-word span { display: inline-block; opacity: 0; transform: translate(var(--x),var(--y)) rotate(25deg) scale(.35); transition: transform .68s cubic-bezier(.16,.8,.2,1), opacity .22s ease; }
.exit-word i { width: .14em; height: .14em; margin: 0 .08em .02em .12em; border-radius: 50%; background: #fff; opacity: 0; transform: scale(0); transition: transform .35s .5s ease, opacity .2s .5s ease; }
.page-exit-transition.is-active .exit-word span { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
.page-exit-transition.is-active .exit-word span:nth-child(2) { transition-delay: .04s; }.page-exit-transition.is-active .exit-word span:nth-child(3) { transition-delay: .08s; }.page-exit-transition.is-active .exit-word span:nth-child(4) { transition-delay: .12s; }.page-exit-transition.is-active .exit-word span:nth-child(5) { transition-delay: .16s; }.page-exit-transition.is-active .exit-word span:nth-child(7) { transition-delay: .2s; }.page-exit-transition.is-active .exit-word span:nth-child(8) { transition-delay: .24s; }.page-exit-transition.is-active .exit-word span:nth-child(9) { transition-delay: .28s; }
.page-exit-transition.is-active .exit-word i { opacity: 1; transform: scale(1); }
body.is-leaving .back-link span { color: #fff; background: var(--red); border-color: var(--red); transform: rotate(45deg) scale(.84); }

@media (max-width: 760px) {
  body.deck-mode .work-hero.deck-slide, body.deck-mode .deck-door .work-hero.door-clone { padding: 105px 15px 20px; }
  body.deck-mode .experience-card.deck-slide, body.deck-mode .deck-door .experience-card.door-clone { padding: 82px 18px 20px; }
  body.deck-mode .work-cta.deck-slide, body.deck-mode .deck-door .work-cta.door-clone { padding: 100px 15px 60px; }
}