body { --header-ink: #f3f5f8; }
.header { position: fixed; transition: color .45s ease, background .45s ease; }
.header .brand img { transition: filter .45s ease, opacity .45s ease; }
body[data-ui-theme="light"] { --header-ink: #080b10; }body[data-ui-theme="blue"] { --header-ink: #f3f5f8; }
body[data-ui-theme="light"] .header .brand img { filter: brightness(0); }body[data-ui-theme="dark"] .header .brand img,body[data-ui-theme="blue"] .header .brand img { filter: none; }
body[data-ui-theme="light"] .header .menu { border-color: rgba(8,11,16,.48); }body[data-ui-theme="light"] .header .menu span { background: #080b10; }body[data-ui-theme="light"] .header .menu[aria-expanded="true"] span { background: #fff; }
.header { color: var(--header-ink); }.header .menu span { background: var(--header-ink); }
.scroll-branding { position: fixed; inset: 0; z-index: 12; pointer-events: none; mix-blend-mode: normal; }
.brand-chip { position: absolute; display: grid; place-items: center; border: 1px solid currentColor; color: #76a9ef; background: rgba(8,11,16,.18); backdrop-filter: blur(5px); transition: color .45s, background .45s, border-color .45s, transform .35s; }
.brand-chip img { display: block; width: 47px; height: auto; }.brand-chip.one { width: 65px; height: 65px; top: 50%; left: 2.2vw; border-radius: 50%; transform: translateY(-50%) rotate(-12deg); }.brand-chip.two { width: 43px; height: 43px; right: 2.6vw; top: 33%; font: 700 10px/.85 'DM Mono'; letter-spacing: -.08em; transform: rotate(12deg); }.brand-chip.three { width: 29px; height: 29px; right: 8.5vw; bottom: 10%; font: 19px/1 Syne; border-radius: 50%; transform: rotate(-18deg); }
body[data-ui-theme="light"] .brand-chip { color: #17447f; background: rgba(243,245,248,.4); }body[data-ui-theme="blue"] .brand-chip { color: #eaf2ff; background: rgba(8,11,16,.18); }
.project { overflow: visible; }.project-art { transition: filter .7s ease; }.project::after { content: ""; position: absolute; z-index: 4; left: 7%; right: 7%; bottom: -18px; height: 37px; border-bottom: 2px solid rgba(116,166,235,.55); border-radius: 0 0 50% 50%; pointer-events: none; transform: scaleX(.6); opacity: 0; transition: transform 1s cubic-bezier(.2,.8,.2,1),opacity .7s; }.project.is-story-active::after { transform: scaleX(1); opacity: 1; }.project-showcase .phone,.project-showcase .showroom-card,.project-delivery .app-preview,.project-delivery .development-card { transition: transform .85s cubic-bezier(.16,1,.3,1), box-shadow .85s; }.project-showcase.is-story-active .phone { transform: translate(-50%,-55%) rotate(1deg) scale(1.035); box-shadow: 28px 30px 0 rgba(0,0,0,.17); }.project-showcase.is-story-active .showroom-card.one { transform: translate(-16px,20px) rotate(-17deg); }.project-showcase.is-story-active .showroom-card.two { transform: translate(17px,-12px) rotate(20deg); }.project-delivery.is-story-active .app-preview:nth-of-type(1) { transform: rotate(-20deg) translate(-19px,-18px); }.project-delivery.is-story-active .app-preview:nth-of-type(2) { transform: rotate(0deg) translateY(-27px) scale(1.07); }.project-delivery.is-story-active .app-preview:nth-of-type(3) { transform: rotate(20deg) translate(19px,-18px); }.project-delivery.is-story-active .development-card { transform: rotate(3deg) scale(1.08); }
.work { position: relative; overflow: clip; }.work::before { content:""; position:absolute; width:76vw; height:76vw; left:-35vw; top:28%; border:1px solid rgba(83,133,207,.25); border-radius:50%; box-shadow:0 0 0 90px rgba(83,133,207,.025),0 0 0 180px rgba(83,133,207,.015); pointer-events:none; }.statement { position: relative; overflow: hidden; }.statement::before { content:""; position:absolute; width:90vw; height:180px; left:5vw; top:-95px; border-top:2px solid rgba(40,96,173,.45); border-radius:50% 50% 0 0; transform:rotate(-2deg); }
@media (max-width:720px) { .scroll-branding { display:none; }.project::after { left: 12%; right: 12%; }.header { padding-left:20px; padding-right:20px; }.project-showcase.is-story-active .phone { transform: translate(-50%,-55%) rotate(1deg) scale(.8); } }