/* SystemON glass surface and motion system */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--glass-edge:rgba(255,255,255,.85);--glass-shadow:0 16px 48px #173a5e0b,0 2px 8px #173a5e05}
body{background:radial-gradient(ellipse at 85% 5%,#dcece355,transparent 32%),var(--paper)}
header{position:sticky;top:12px;width:94%;height:80px;margin:12px auto 0;padding:0 3%;border:1px solid var(--glass-edge);border-radius:24px;background:rgba(248,250,245,.82);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);box-shadow:var(--glass-shadow);transition:background .4s,box-shadow .4s;z-index:30}
header nav a{position:relative;padding:11px 0}header nav a:after{content:'';position:absolute;left:0;bottom:3px;width:100%;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}header nav a:hover:after{transform:scaleX(1)}
.nav-cta{border:1px solid #ffffffa6;border-radius:100px;padding:12px 18px;background:linear-gradient(130deg,#ffffffb8,#e7f0e59e);box-shadow:inset 0 1px 0 white,0 4px 12px #173a5e06;transition:box-shadow .35s,transform .35s var(--ease-out)}.nav-cta:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 white,0 8px 22px #173a5e12}
.button{position:relative;border-radius:100px;border:1px solid #ffffff30;isolation:isolate;overflow:hidden;min-height:54px;box-shadow:0 8px 22px #173a5e18,inset 0 1px 0 #ffffff45;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background .4s;transform:translate3d(var(--mx,0px),var(--my,0px),0)}.button.dark{background:linear-gradient(135deg,#2b5578 0%,#173a5e 55%,#102e49 100%);color:#fff}.button:before{content:'';position:absolute;inset:-80% -40%;z-index:-1;background:linear-gradient(110deg,transparent 35%,#ffffff28 48%,#ffffff06 55%,transparent 65%);transform:translateX(-65%) rotate(8deg);transition:transform .9s var(--ease-out);pointer-events:none}.button:after{content:'';position:absolute;inset:2px;border:1px solid #ffffff10;border-radius:inherit;pointer-events:none}.button:hover{transform:translate3d(var(--mx,0px),calc(var(--my,0px) - 3px),0);box-shadow:0 14px 30px #173a5e26,inset 0 1px 0 #ffffff70}.button:hover:before{transform:translateX(65%) rotate(8deg)}.button:active{transform:translateY(0) scale(.98)}.button span{transition:transform .4s var(--ease-out)}.button:hover span{transform:translate(3px,-2px)}.button.outline{background:#ffffff70;border-color:#ffffffd9;box-shadow:inset 0 1px 0 white,0 7px 20px #173a5e09;color:var(--navy)}
.filters button{background:#ffffff61;border-color:#ffffffba;box-shadow:inset 0 1px 0 #ffffffad;transition:transform .35s var(--ease-out),background .35s,box-shadow .35s;color:#425f50}.filters button:hover{transform:translateY(-2px);background:#ffffffc7;box-shadow:0 6px 16px #173a5e0d}.filters .active{background:linear-gradient(135deg,#315c7c,#173a5e);border-color:#ffffff45;box-shadow:inset 0 1px 0 #ffffff55,0 6px 16px #173a5e18;color:white}
.product-hero{border-radius:30px;border:1px solid #ffffff90;box-shadow:0 28px 65px #173a5e20,inset 0 1px 0 #ffffff65;background:linear-gradient(135deg,#23495f,#102b43);isolation:isolate}.product-hero:before{content:'';position:absolute;inset:-30%;background:radial-gradient(ellipse at 70% 25%,#5cd8b527,transparent 48%),radial-gradient(ellipse at 10% 85%,#70b3ed22,transparent 45%);z-index:0;animation:glass-drift 14s ease-in-out infinite alternate;pointer-events:none}.product-hero>*{position:relative}.product-hero-label{background:#ffffff06;border-bottom:1px solid #ffffff1c;backdrop-filter:blur(12px)}.hero-atlas{background:transparent}.hero-atlas img{border:1px solid #ffffff80;box-shadow:0 20px 50px #0004;animation:phone-breathe 8s ease-in-out infinite}.hero-atlas:hover img{animation-play-state:paused;transform:rotate(3deg) translateY(-8px)}.hero-product-bottom{background:#071f3266;border-top:1px solid #ffffff1c;backdrop-filter:blur(18px);transition:background .4s}.hero-product-bottom:hover{background:#0a304eaa}.hero-product-bottom b{transition:transform .4s var(--ease-out)}.hero-product-bottom:hover b{transform:translate(4px,-4px)}
.hero-copy .eyebrow{animation:hero-arrive .9s var(--ease-out) both}.hero h1{animation:hero-arrive 1.2s .08s var(--ease-out) both}.hero-copy>p{animation:hero-arrive 1.2s .16s var(--ease-out) both}.hero .actions{animation:hero-arrive 1.2s .24s var(--ease-out) both}.hero-note{animation:hero-arrive 1.2s .32s var(--ease-out) both}.product-hero{animation:hero-arrive 1.4s .14s var(--ease-out) both}.hero-note .mini-switch{background:#ffffff90;box-shadow:0 2px 8px #0eb68112}.hero-note .mini-switch:after{box-shadow:0 0 12px #0eb68135}
.work-image,.portfolio-art,.case-cover,.case-screens,.finance-art{border-radius:24px;border:1px solid #ffffff90}.work-image{box-shadow:var(--glass-shadow)}.work-image:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 #ffffffa0}.work-image>img,.case-cover>img{border-radius:12px}.work-image:hover>img{transform:translateY(-7px) scale(1.015)}
.portfolio{background:radial-gradient(ellipse at 80% 5%,#cfe6dc77,transparent 45%),#edf0e9}.portfolio-grid{gap:30px}.portfolio-card{position:relative;isolation:isolate;border-radius:26px;overflow:hidden;background:linear-gradient(135deg,#ffffffe0,#ffffff70);border:1px solid #ffffffc9;box-shadow:0 9px 28px #173a5e07,inset 0 1px 0 white;transition:transform .65s var(--ease-out),box-shadow .65s var(--ease-out),border-color .4s;backdrop-filter:blur(10px)}.portfolio-card:before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(500px circle at var(--px,50%) var(--py,0%),#ffffff55,transparent 55%);transition:opacity .5s}.portfolio-card:hover{transform:translateY(-7px);border-color:#ffffff;box-shadow:0 22px 44px #173a5e14,inset 0 1px 0 white}.portfolio-card:hover:before{opacity:1}.portfolio-card .portfolio-art{border-radius:20px;margin:7px 7px 0;border:1px solid #ffffff40}.portfolio-copy{position:relative;background:linear-gradient(120deg,#ffffff70,#ffffff05);border-top:1px solid #ffffff90}.portfolio-copy h3>span{transition:transform .4s var(--ease-out)}.portfolio-card:hover .portfolio-copy h3>span{transform:translate(3px,-3px)}.portfolio-card:hover img{transform:translateY(-8px) scale(1.025)}
.partner-grid article{border-radius:24px;background:linear-gradient(140deg,#ffffffb3,#ffffff45);border-color:#ffffffe0;box-shadow:var(--glass-shadow);transition:transform .5s var(--ease-out),box-shadow .5s}.partner-grid article:hover{transform:translateY(-5px);box-shadow:0 18px 38px #173a5e10}.partner-grid article>div{border-radius:15px;background:#ffffff60;padding:15px}.expertise-grid article{padding:28px;border:1px solid #ffffff99;border-radius:22px;background:linear-gradient(135deg,#ffffffb0,#ffffff40);box-shadow:inset 0 1px 0 #ffffffd0;transition:background .4s,transform .5s var(--ease-out)}.expertise-grid article:hover{background:#ffffffd4;transform:translateY(-4px)}
.delivery{position:relative;overflow:hidden;background:radial-gradient(ellipse at 90% 0,#1d665a55,transparent 65%),#112e46}.delivery-grid article{padding:26px;border:1px solid #ffffff22;border-radius:22px;background:linear-gradient(140deg,#ffffff0c,#ffffff03);box-shadow:inset 0 1px 0 #ffffff15}.principles span{border-radius:30px;padding:10px 14px;background:#ffffff80;border:1px solid #ffffffb0}.industry-list details,.faq details{border-radius:16px;padding:20px;margin-bottom:8px;border:1px solid #ffffff9c;background:#ffffff52;transition:background .4s,box-shadow .4s}.industry-list details[open],.faq details[open]{background:#ffffffa3;box-shadow:0 8px 25px #173a5e06}.industry-list summary span,.faq summary span{transition:transform .4s var(--ease-out)}details[open] summary span{transform:rotate(45deg)}
.contact{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#dfebe0,#e9f1e6 45%,#d6e9df)}.contact:before{content:'';position:absolute;z-index:-1;inset:-30%;background:radial-gradient(ellipse at 20% 25%,#ffffffc0,transparent 40%),radial-gradient(ellipse at 85% 75%,#7ac4b330,transparent 35%);animation:glass-drift 16s ease-in-out infinite alternate;pointer-events:none}.contact:after{content:'';position:absolute;z-index:-1;inset:22px;border:1px solid #ffffff85;border-radius:30px;box-shadow:inset 0 1px 0 #fff8;pointer-events:none}.contact .button{margin-top:4px}.brief-trigger{padding:12px 20px;border-radius:30px;background:#ffffff55;border:1px solid #ffffffa8;box-shadow:inset 0 1px 0 white;transition:background .3s}.brief-trigger:hover{background:#ffffffb0}dialog{border-radius:26px;border-color:#ffffffd0;background:linear-gradient(130deg,#f8fbf5f5,#edf4edeb);backdrop-filter:blur(28px);box-shadow:0 35px 100px #0e2e4940;animation:dialog-arrive .45s var(--ease-out)}dialog[open]{overflow:auto}.close{width:32px;height:32px;top:14px;right:14px;border-radius:50%;font-size:24px;background:#ffffffa0;border:1px solid white}.close:hover{background:white}input,textarea{border-radius:12px;background:#ffffffb8;border-color:#d1ded2;transition:box-shadow .3s,border-color .3s}input:focus,textarea:focus{border-color:#0eb681;box-shadow:0 0 0 4px #0eb6810b;outline:0}
.case-meta{border-radius:20px;border:1px solid #ffffffb5;background:linear-gradient(135deg,#ffffff9c,#ffffff45);padding:26px;box-shadow:var(--glass-shadow)}.case-demo{border-radius:26px;border:1px solid #fff;box-shadow:var(--glass-shadow);background:linear-gradient(120deg,#e3eee4,#f2f6ec)}.case-hero h1{animation:hero-arrive 1s var(--ease-out) both}.motion-control{background:#ffffff85;border:1px solid #dce6db;border-radius:30px;padding:9px 13px;font-size:9px;color:#486252;cursor:pointer}.motion-control:hover{background:white}.footer-bottom .motion-control{background:#fff8;border:1px solid #dce6db;padding:7px 12px;color:#486252}.case-footer{align-items:center}
.motion-enabled .reveal-item{transition:opacity .9s var(--ease-out),translate .9s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}.motion-enabled .reveal-item.pending-reveal{opacity:0;translate:0 24px}.motion-enabled .reveal-item.is-visible{opacity:1;translate:0 0}.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important;transition:none!important}.motion-paused .pending-reveal{opacity:1!important;translate:none!important}
@keyframes hero-arrive{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}@keyframes glass-drift{to{transform:translate3d(4%,-3%,0) rotate(5deg)}}@keyframes phone-breathe{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(6deg) translateY(-10px)}}@keyframes dialog-arrive{from{opacity:0;translate:0 12px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:900px){header{width:94%;padding:0 3%;height:76px;top:8px;border-radius:21px}header nav{gap:18px;font-size:11px}.product-hero{border-radius:24px}.expertise-grid article,.delivery-grid article{padding:23px}.contact:after{inset:14px;border-radius:24px}.portfolio-grid{gap:22px}}
@media(max-width:540px){header{height:68px;margin-top:8px}.nav-cta{padding:10px 14px;font-size:11px}.nav-cta span{margin-left:18px}.hero{padding-top:38px}.portfolio-card{border-radius:22px}.portfolio-card .portfolio-art{border-radius:17px}.product-hero-label{padding:20px 17px}.product-hero{box-shadow:0 16px 35px #173a5e15}.button{min-height:52px}.work-image,.case-cover,.case-screens,.finance-art{border-radius:20px}.principles{gap:8px}.principles span{font-size:9px}.contact:after{inset:10px;border-radius:22px}.case-meta{padding:20px}.case-hero{padding-top:40px}.case-footer{gap:18px}.motion-control{font-size:9px}.portfolio-copy{padding:24px}}
@media(hover:none){.button:hover,.portfolio-card:hover,.partner-grid article:hover,.expertise-grid article:hover{transform:none}.portfolio-card:before{display:none}.hero-atlas img{animation:none}.contact:before,.product-hero:before{animation-duration:22s}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-enabled .reveal-item.pending-reveal{opacity:1;translate:none}.button,.portfolio-card{transform:none!important}}
/* Compact glass navigation for narrow desktop panels and phones. */
.menu-glass{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:1px solid #ffffffd0;border-radius:50%;background:#ffffff90;color:var(--navy);box-shadow:inset 0 1px 0 white;font-size:18px}.menu-glass span{display:block;width:15px;height:1px;background:currentColor;position:relative}.menu-glass span:after{content:'';position:absolute;width:15px;height:1px;background:currentColor;left:0;top:5px;transition:transform .3s}.menu-glass[aria-expanded=true] span{transform:rotate(45deg)}.menu-glass[aria-expanded=true] span:after{top:0;transform:rotate(90deg)}
@media(max-width:760px){header{gap:10px}.logo{width:135px}header>a:first-child{margin-right:auto}.menu-glass{display:flex}header nav{display:none;position:absolute;top:calc(100% + 9px);left:0;right:0;flex-direction:column;gap:0;padding:13px 22px;border-radius:22px;border:1px solid #ffffffd0;background:#f5f9f1f5;backdrop-filter:blur(22px);box-shadow:0 15px 40px #173a5e18;font-size:14px}header nav.menu-open{display:flex}header nav a{padding:14px 0;border-bottom:1px solid #173a5e0b}header nav a:last-child{border:0}header nav a:after{display:none}.nav-cta{white-space:nowrap;padding:11px 15px;font-size:11px}.nav-cta span{margin-left:10px}}