@charset "UTF-8";
:root{color-scheme:dark;--bg:#07111f;--panel:#0b1a30;--text:#edf7ff;--muted:#9ab1c6;--line:#1c4264;--accent:#08c8ff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible,section:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}p{line-height:1.7}.shell{max-width:1600px;min-height:100dvh;margin:auto;padding:0 clamp(18px,4vw,64px);display:flex;flex-direction:column}.topbar{min-height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:23px;font-weight:800;letter-spacing:-1px}.brand span{color:var(--accent)}.brand small{display:block;font:8px Consolas,monospace;letter-spacing:3px;margin-top:6px;color:var(--muted)}.contact-top{font-size:12px}.contact-top span{color:var(--accent);margin-left:18px}.identity{padding:29px 0 32px}.meta{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font:10px Consolas,monospace;letter-spacing:1.5px}.location{color:var(--accent)}.headline{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-top:22px}h1{font-size:clamp(28px,3vw,46px);letter-spacing:-1.5px;line-height:1.15;margin:0;font-weight:600}h1 span{color:var(--accent)}.headline p{color:var(--muted);font-size:12px;margin:0}.view-nav{display:flex;gap:clamp(14px,2vw,30px);border-block:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}.view-nav button{flex-shrink:0;border:0;border-bottom:2px solid transparent;padding:17px 0;background:none;font-size:12px;color:var(--muted);min-height:48px}.view-nav button span{font:9px Consolas,monospace;margin-right:9px}.view-nav button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}main{flex:1}.workspace{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.6fr);border-bottom:1px solid var(--line);min-height:500px}.studio{padding:30px 32px 30px 0;border-right:1px solid var(--line);background-image:radial-gradient(#ffffff12 .8px,transparent .8px);background-size:20px 20px}.mono,.studio-bottom{font:9px Consolas,monospace;letter-spacing:1.4px;color:var(--muted)}.orbit{height:260px;max-width:360px;margin:auto;position:relative;display:grid;place-items:center}.orbit:before,.orbit:after{content:"";position:absolute;width:190px;height:190px;border:1px solid var(--line);border-radius:50%;transform:rotate(-30deg) scaleX(1.5)}.orbit:after{transform:rotate(30deg) scaleX(1.5)}.orbit-core{width:100px;height:100px;display:grid;place-content:center;grid-auto-flow:column;border:1px solid var(--accent);border-radius:50%;background:var(--panel);color:var(--text);font-size:30px;font-weight:700;z-index:1;box-shadow:0 0 50px #08c8ff14}.orbit-core span{color:var(--accent)}.orbit-label{position:absolute;background:var(--bg);border:1px solid var(--line);padding:9px;font:9px Consolas,monospace;color:var(--accent);z-index:2}.one{top:35px;left:25px}.two{right:10px;top:125px}.three{left:12px;bottom:26px}.studio h2{font-size:22px;letter-spacing:-.5px}.studio p{color:var(--muted);max-width:330px;font-size:13px}.cta{display:flex;justify-content:space-between;align-items:center;max-width:330px;padding:15px 17px;margin:22px 0 36px;border:1px solid var(--accent);color:var(--accent);font-size:12px}.cta:hover{background:#08c8ff12}.dot{display:inline-block;background:var(--accent);width:5px;height:5px;border-radius:50%;margin-right:8px}.details{padding:30px 0 35px 32px;min-width:0}section h3{font-size:26px;margin:0 0 22px;letter-spacing:-.7px}section h5{font-size:16px;color:var(--accent);margin:25px 0 8px}.section-inner>div>span{color:var(--muted);line-height:1.8;display:block;max-width:800px}.image_panel{width:100%;max-height:250px;object-fit:cover;filter:saturate(.7);border:1px solid var(--line);margin-top:25px;border-radius:4px}.container_apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.container_app{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0;line-height:1.6;font-size:12px}.container_app>img{height:100px;width:100%;object-fit:contain;align-self:center}.container_app strong{font-size:14px}.container_app>div>span{color:var(--muted)}.container_app a{display:inline-block;color:var(--accent);max-width:100%}.container_app a img{width:100px;height:34px;object-fit:contain}.container_app:hover{border-color:#08c8ff88}footer{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--muted);font-size:10px}footer div{display:flex;gap:22px;flex-wrap:wrap}footer a:hover{color:var(--accent)}.skip{position:absolute;left:20px;top:-90px;padding:12px;background:var(--accent);color:var(--bg);z-index:5}.skip:focus{top:8px}
@media(min-width:1100px){.details{max-height:calc(100dvh - 340px);min-height:500px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}}
@media(max-width:1000px){.container_apps{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace{grid-template-columns:250px minmax(0,1fr)}.orbit{transform:scale(.8)}.studio{padding-right:20px}.details{padding-left:22px}}
@media(max-width:700px){.topbar{min-height:72px}.contact-top{font-size:10px}.meta{font-size:8px;letter-spacing:.5px}.headline{display:block}.headline p{margin-top:16px}.workspace{display:flex;flex-direction:column}.studio{order:2;border-right:0;border-top:1px solid var(--line);padding:25px 0}.orbit{height:210px;max-width:330px}.studio h2,.studio p,.cta{max-width:none}.details{padding:25px 0;min-height:300px}.container_apps{gap:12px}.container_app{padding:12px}.view-nav{gap:24px}footer{padding:22px 0;flex-direction:column;align-items:start}footer div{gap:16px}}
@media(max-width:360px){.container_apps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.view-nav button>i{margin-right:9px;color:var(--accent);width:16px;text-align:center}.contact-top>i{color:var(--accent);margin-left:12px}.orbit-label>i{margin-right:4px}footer a>i{margin-right:5px}

/* Motion inspired by the local JohanSeas atlas. */
.motion-toggle{border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:10px;padding:9px 12px;border-radius:4px;min-height:36px}.motion-toggle i{color:var(--accent);margin-right:6px}
.orbit-core{position:relative;overflow:hidden}
.orbit-core::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#08c8ff30 48%,transparent 70%);background-size:250% 100%;animation:seasware-scan 7s linear infinite;animation-play-state:paused}
.motion-running .orbit-core::after{animation-play-state:running}
@keyframes seasware-scan{from{background-position:130% 0}to{background-position:-130% 0}}
.container_app,.cta,.view-nav button{transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.container_app:hover{box-shadow:0 0 20px #08c8ff12}
@media(prefers-reduced-motion:reduce){.orbit-core::after{animation:none}.container_app,.cta,.view-nav button{transition:none}}

/* Visual review: readable labels and consistent platform illustrations. */
.view-nav{position:relative}
.orbit-label{font-size:11px;padding:10px 12px}
.mono,.studio-bottom{font-size:10px;letter-spacing:.8px}
.motion-toggle{font-size:12px;min-height:44px;padding:11px 13px}
footer{font-size:12px}
.brand small{font-size:9px}
.platform-icon{height:100px;display:grid;place-items:center;color:var(--accent);font-size:62px;background:radial-gradient(ellipse,#08c8ff12,transparent 70%)}
.platform-icon i{filter:drop-shadow(0 0 14px #08c8ff20)}
@media(max-width:700px){.orbit{height:245px;transform:none}.orbit-label{font-size:10px}.meta{font-size:9px}}

/* Consistent centered technology cards and uncropped presentation photos. */
#developmentplatforms .container_app,#developmenttools .container_app{align-items:center;justify-content:center;text-align:center;min-height:172px}
#developmentplatforms .platform-icon{width:100%}
#developmenttools .container_app>img{width:100px;height:100px;filter:grayscale(1) invert(1) sepia(1) saturate(6) hue-rotate(145deg);mix-blend-mode:screen}
.image_panel{height:auto;max-height:none;object-fit:contain}
/* Fill the navigation width while keeping readable tabs on narrow screens. */
.view-nav{gap:0}.view-nav button{flex:1 0 auto;text-align:center;padding-inline:14px}

.orbit-core{display:grid;place-items:center;grid-auto-flow:row}.orbit-core>img{display:block;width:70px;height:70px;object-fit:contain}

.brand{display:flex;align-items:center;flex-shrink:0}.brand>img{display:block;width:220px;height:auto;max-width:100%}@media(max-width:700px){.brand>img{width:180px}}@media(max-width:360px){.brand>img{width:150px}}

/* Gyroscope: independent axes around a stable brand mark. */
.orbit{isolation:isolate}
.orbit::before,.orbit::after{display:none}
.gyro-rings{position:absolute;inset:0;display:grid;place-items:center;perspective:650px;pointer-events:none}
.gyro-ring{position:absolute;width:220px;height:220px;border:1px solid #08c8ff66;border-radius:50%;box-shadow:0 0 9px #08c8ff10,inset 0 0 9px #08c8ff10;animation-play-state:paused!important}
.gyro-ring::after{content:"";position:absolute;top:-3px;left:calc(50% - 3px);width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent)}
.gyro-ring-one{animation:gyro-one 18s linear infinite;transform:rotateX(65deg) rotateY(15deg)}
.gyro-ring-two{width:240px;height:240px;animation:gyro-two 23s linear infinite;transform:rotateX(25deg) rotateY(65deg)}
.gyro-ring-three{width:200px;height:200px;animation:gyro-three 28s linear infinite;transform:rotateX(-45deg) rotateY(35deg)}
.motion-running .gyro-ring{animation-play-state:running!important}
@keyframes gyro-one{from{transform:rotateX(65deg) rotateY(15deg) rotateZ(0)}to{transform:rotateX(425deg) rotateY(375deg) rotateZ(360deg)}}
@keyframes gyro-two{from{transform:rotateX(25deg) rotateY(65deg) rotateZ(0)}to{transform:rotateX(-335deg) rotateY(425deg) rotateZ(-360deg)}}
@keyframes gyro-three{from{transform:rotateX(-45deg) rotateY(35deg) rotateZ(0)}to{transform:rotateX(315deg) rotateY(-325deg) rotateZ(360deg)}}
@media(prefers-reduced-motion:reduce){.gyro-ring{animation:none!important}}
/* The brand symbol rotates on three axes within its stationary housing. */
.orbit-core{perspective:380px}
.orbit-core>img{animation:gyro-logo 20s linear infinite;animation-play-state:paused;transform-origin:center;backface-visibility:visible}
.motion-running .orbit-core>img{animation-play-state:running}
@keyframes gyro-logo{
 0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
 25%{transform:rotateX(180deg) rotateY(90deg) rotateZ(-90deg)}
 50%{transform:rotateX(360deg) rotateY(-180deg) rotateZ(90deg)}
 75%{transform:rotateX(180deg) rotateY(-270deg) rotateZ(270deg)}
 100%{transform:rotateX(0deg) rotateY(-360deg) rotateZ(360deg)}
}
@media(prefers-reduced-motion:reduce){.orbit-core>img{animation:none}}
/* Icon planets: spherical shading with no labels or central scanning effect. */
.orbit-core::after{display:none;animation:none}
.orbit-core{box-shadow:none}
.orbit-label{width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;border:1px solid #08c8ff80;background:radial-gradient(circle at 28% 24%,#3fc9e8 0%,#127291 23%,#0a354f 55%,#030c18 88%);box-shadow:inset -7px -7px 11px #0009,inset 2px 2px 5px #c4f7ff55,0 0 10px #08c8ff18;color:#e5fbff;font-size:17px}
.orbit-label>i{margin:0;text-shadow:0 1px 3px #001a2e}
.orbit-label.two{background:radial-gradient(circle at 28% 24%,#8cadf0 0%,#405fa7 23%,#152649 55%,#030c18 88%)}
.orbit-label.three{background:radial-gradient(circle at 28% 24%,#9cddd5 0%,#237f80 23%,#0a3944 55%,#030c18 88%)}
@media(max-width:700px){.orbit-label{font-size:17px}}
/* The tracks and planets share the same perspective and center. */
.gyro-ring{animation:none!important;border-color:#08c8ff85}
.gyro-ring::after{display:none}
.gyro-rings{z-index:0}
.orbit-core{z-index:2;background:radial-gradient(circle at 32% 26%,#103d52,#081a2d 65%,#05101f);border-color:#08c8ff99;box-shadow:inset -5px -5px 12px #0005}
@keyframes gyro-logo{
 0%{transform:rotateX(12deg) rotateY(-18deg) rotateZ(0deg)}
 25%{transform:rotateX(-22deg) rotateY(20deg) rotateZ(90deg)}
 50%{transform:rotateX(18deg) rotateY(24deg) rotateZ(180deg)}
 75%{transform:rotateX(24deg) rotateY(-20deg) rotateZ(270deg)}
 100%{transform:rotateX(12deg) rotateY(-18deg) rotateZ(360deg)}
}
/* Transparent center: only the brand symbol occludes the rear orbit. */
.orbit-core{background:transparent;border:0;box-shadow:none;overflow:visible}

.view-nav button .tab-label{font:inherit;margin:0}
@media(max-width:700px){
 .view-nav{overflow:visible;gap:0}
 .view-nav button{flex:1 1 0;min-width:0;padding:14px 0;min-height:48px;display:flex;align-items:center;justify-content:center}
 .view-nav button .tab-label{display:none}
 .view-nav button>i{margin:0;width:auto;font-size:18px}
}
@media(max-width:700px){
 .shell{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
 .view-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bg);padding:0 max(12px,env(safe-area-inset-left,0px)) env(safe-area-inset-bottom,0px);border-top:1px solid var(--line);border-bottom:0;box-shadow:0 -8px 24px #0005}
 .view-nav button{min-height:56px;border-bottom:0;border-top:2px solid transparent}
 .view-nav button[aria-selected=true]{border-top-color:var(--accent);background:#08c8ff0a}
}
/* Editorial desktop layout: copy left, complete photograph right. */
@media(min-width:1100px){
 #home .section-inner,#aboutus .section-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:28px;align-items:start}
 #home .section-inner>div,#aboutus .section-inner>div{grid-column:1}
 #home .image_panel,#aboutus .image_panel{grid-column:2;grid-row:1 / span 4;margin:0;width:100%;height:auto;align-self:center}
 #home h3,#aboutus h3{margin-bottom:18px}
 #aboutus h5{margin-top:18px}
}
.about-stories{display:flex;flex-direction:column;gap:42px}
.story-copy>div>span{display:block;color:var(--muted);line-height:1.8}
.story-row .image_panel{margin-top:24px}
@media(min-width:1100px){
 .story-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
 .story-row .image_panel{margin:0;grid-column:2;grid-row:1;width:100%;height:auto}
 .story-row .story-copy{grid-column:1;grid-row:1}
 .story-mission{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
 .story-mission .image_panel{grid-column:1}
 .story-mission .story-copy{grid-column:2}
}
@media(min-width:1100px){#aboutus .story-row .image_panel{grid-row:1;grid-column:2;align-self:center}#aboutus .story-mission .image_panel{grid-column:1}}