@font-face{font-family:Manrope;src:url('/assets/manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/manrope-bold.ttf') format('truetype');font-weight:600 800;font-display:swap}
:root{--ink:#24205f;--muted:#777fa8;--light:#f4f7ff;--ring:#cbd6f1;--hover:#7586d5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 40%,#fff 0%,#f3f6ff 44%,#e5ecfb 100%);color:var(--ink);font-family:Manrope,sans-serif;-webkit-font-smoothing:antialiased;isolation:isolate}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:3px solid #666dc1;outline-offset:7px}
.skip-link{position:fixed;top:-80px;left:20px;padding:12px 18px;background:white;z-index:20;border-radius:8px}.skip-link:focus{top:16px}
.atmosphere{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.atmosphere svg{width:100%;height:100%;min-height:850px}
.ambient-light{position:absolute;width:60vmax;height:60vmax;border-radius:50%;pointer-events:none}
.ambient-light-left{top:-15vmax;left:-18vmax;background:radial-gradient(circle,#a4b7ec45 0%,#bfcdf326 35%,transparent 68%)}
.ambient-light-right{right:-20vmax;bottom:-20vmax;background:radial-gradient(circle,#bac0ef50 0%,#c2d6f42e 35%,transparent 68%)}
.site-header{height:83px;padding:0 48px;display:flex;align-items:center;justify-content:space-between}
.home-label{display:flex;align-items:center;gap:9px;border-radius:8px}.home-label img{width:47px;height:47px;object-fit:contain}.wordmark{font-size:34px;font-weight:600;letter-spacing:-1px}.brand-divider{height:27px;width:1px;background:#b7c1e2;margin:0 8px 0 10px}.home-word{font-size:15px;letter-spacing:4px;color:#696c9d;font-weight:700}
.support-link{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#75799e;padding:10px 12px;border-radius:20px;transition:background .2s,color .2s}.support-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4}.support-link:hover{background:#fff9;color:var(--ink)}
.intro{text-align:center;padding:0 20px}.intro h1{font-size:44px;font-weight:700;letter-spacing:-1.6px;line-height:1.2;margin:0 0 7px}.intro p{font-size:20px;letter-spacing:-.45px;color:var(--muted);margin:0;line-height:1.5}
.workspace{position:relative;width:1000px;height:826px;margin:20px auto 0;isolation:isolate}.connections{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}.outer-orbit{stroke:#d4ddf1;stroke-width:1;opacity:.65}.inner-orbit{stroke:#c7d3f1;stroke-dasharray:2 8;stroke-width:1.4}.close-orbit{stroke:#e0e6f4;stroke-width:1.2}.spoke{stroke:#bccbee;stroke-width:1.15;transition:stroke .35s,stroke-width .35s,filter .35s}.spoke.active{stroke:#7c8ed2;stroke-width:2;filter:drop-shadow(0 0 5px #8c9fdf88)}.connection-nodes circle{fill:#c4d0ed;stroke:#fff;stroke-width:2;transition:fill .3s,filter .3s}.connection-nodes circle.active{fill:#7b8ed2;filter:drop-shadow(0 0 5px #8c9fdf)}.orbit-dots{fill:#dce4f7}
.hub{position:absolute;top:406px;left:50%;width:330px;height:330px;transform:translate(-50%,-50%);border:1px solid #fff;border-radius:50%;padding:15px;background:linear-gradient(140deg,#fff9,#d2dcf380 46%,#f6f8ff80 75%,#a9b9e145);box-shadow:0 22px 40px -17px #445b9847,inset 0 2px 2px #fff,inset 0 -5px 6px #93a6d535;transition:box-shadow .35s,scale .35s;transform-origin:0 0;z-index:2}
.hub:before{content:'';position:absolute;inset:-10px;border:1px solid #c6d2f0;border-radius:50%;box-shadow:0 0 0 3px #ffffff80;pointer-events:none;transition:border-color .35s,box-shadow .35s}
.hub-inner{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:30px;border-radius:50%;border:2px solid #fff;background:radial-gradient(circle at 36% 29%,#fff 0%,#fff 45%,#f0f3fc 80%,#e5eafa 100%);box-shadow:0 7px 14px #6077ad26,inset 0 -2px 10px #d9e1f561}
.hub img{width:254px;max-width:100%;height:auto;transition:transform .35s}.hub-prompt{position:absolute;bottom:37px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:.15px;color:#757ba4;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}.hub:is(:hover,:focus-visible){box-shadow:0 28px 50px -15px #445b9850,inset 0 2px 2px #fff,inset 0 -5px 6px #93a6d535;scale:1.025}.hub:is(:hover,:focus-visible):before{border-color:#92a5da;box-shadow:0 0 0 4px #ffffffa0,0 0 30px #94a8e733}.hub:is(:hover,:focus-visible) img{transform:translateY(-6px)}.hub:is(:hover,:focus-visible) .hub-prompt{opacity:1;transform:translateY(0)}
.application{position:absolute;width:214px;display:flex;flex-direction:column;align-items:center;left:50%;transform:translateX(-50%);text-align:center;border-radius:23px;touch-action:manipulation;z-index:3}.client{top:0}.employee{left:82%;top:176px}.sec{left:18%;top:176px}.cygem{left:18%;top:481px}.trevport{left:82%;top:481px}.backoffice{top:616px}
.glass-tile{position:relative;isolation:isolate;display:grid;place-items:center;width:124px;height:124px;border:1px solid #98a8ef;border-radius:25px;background:radial-gradient(ellipse at 18% 0%,#929ce363 0,transparent 57%),linear-gradient(148deg,#4e559e 0%,#343575 40%,#22225d 78%,#373f87 100%);box-shadow:0 14px 23px -8px #334a8b63,0 4px 6px #4b5daa21,inset 0 2px 2px #d8e3ff,inset 2px 0 3px #c5d4ffb3,inset -2px -2px 4px #6684d9,0 0 0 2px #bac8ed70;transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s;z-index:2}
.glass-tile:before{content:'';position:absolute;inset:4px;border:1px solid #c7d5ff6b;border-bottom-color:#91abed80;border-radius:20px;pointer-events:none;box-shadow:inset 0 0 8px #c6d5ff25}
.glass-tile:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,transparent 10%,#ffffff15 35%,#ffffff03 52%,transparent 70%);opacity:.65;pointer-events:none;transition:opacity .3s,background-position .45s;background-size:200% 100%;background-position:100% 0}
.app-icon{width:91px;height:91px;overflow:visible;filter:drop-shadow(0 3px 1px #12164355);position:relative;z-index:1}.icon-detail{stroke:#c3d3fb}.cygem-icon{width:101px;height:101px;filter:drop-shadow(0 3px 1px #12164344)}
.app-label{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;width:214px;min-height:74px;margin-top:-10px;padding:17px 8px 12px;border:1px solid #ffffffbd;border-radius:20px;background:linear-gradient(150deg,#ffffffbb,#f9fbff9c 60%,#ecf1ff8c);box-shadow:0 12px 21px -10px #778cbf35,inset 0 1px 1px #fff;backdrop-filter:blur(14px);transition:background .3s,box-shadow .3s,transform .3s}
.app-title{font-weight:700;font-size:17px;line-height:1.4;letter-spacing:-.6px}.app-description{font-size:12px;line-height:1.7;color:#656e99;letter-spacing:-.2px;transition:opacity .2s,transform .25s}.launch{position:absolute;left:10px;right:10px;bottom:12px;height:20px;font-size:9px;font-weight:700;letter-spacing:.5px;color:#596999;display:flex;align-items:center;justify-content:center;gap:7px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}.launch>span{font-size:13px}.launch.pending{font-weight:400;letter-spacing:.2px;color:#7b83a4}
.application:is(:hover,:focus-visible){z-index:4}
.application:is(:hover,:focus-visible) .app-description{opacity:0;transform:translateY(-3px)}
.application:is(:hover,:focus-visible) .glass-tile{transform:translateY(-8px) scale(1.045);box-shadow:0 23px 30px -10px #334a8b70,0 0 26px #8b9fef4a,inset 0 2px 2px #eef5ff,inset 2px 0 3px #d4e0ff,inset -2px -2px 4px #87a4f6,0 0 0 2px #b7c9ffb3}
.application:is(:hover,:focus-visible) .glass-tile:after{opacity:1;background-position:0 0}.application:is(:hover,:focus-visible) .app-label{background:linear-gradient(145deg,#fffffff0,#f0f5ffd9);box-shadow:0 16px 26px -12px #778cbf50;transform:translateY(-2px)}.application:is(:hover,:focus-visible) .launch{opacity:1;transform:translateY(0)}.application[aria-disabled=true]{cursor:default}.application:active .glass-tile{transform:translateY(-3px) scale(1.015)}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}footer{max-width:1344px;margin:0 auto;padding:14px 0 22px;display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;color:#8b92ac;font-size:10px}footer a{color:#717b9f}footer a span{margin-left:4px}
@media(min-width:1001px) and (max-height:930px){.site-header{height:70px}.intro h1{font-size:40px}.intro p{font-size:18px}.workspace{zoom:.86;margin-top:16px}footer{padding-top:4px}}
@media(min-width:1001px) and (max-height:790px){.site-header{height:61px}.intro h1{font-size:35px}.intro p{font-size:16px}.workspace{zoom:.74;margin-top:14px}}
@media(max-width:1440px){footer{margin-left:40px;margin-right:40px}}
@media(min-width:721px) and (max-width:1000px){.site-header{padding:0 30px}.intro{padding-top:12px}.intro h1{font-size:38px}.intro p{font-size:17px}.workspace{zoom:.71;margin-top:25px}footer{margin-top:20px}}
@media(max-width:720px){.site-header{height:77px;padding:0 22px}.home-label{gap:6px}.home-label img{width:34px;height:34px}.wordmark{font-size:25px}.brand-divider{height:20px;margin:0 5px}.home-word{font-size:11px;letter-spacing:2.4px}.support-link{font-size:11px;padding:8px 0}.support-link svg{width:14px;height:14px}.intro{padding:16px 16px 0}.intro h1{font-size:29px;letter-spacing:-1.2px;margin-bottom:7px}.intro p{font-size:13px;letter-spacing:-.15px}.atmosphere svg{min-height:100vh}.workspace{width:auto;height:auto;margin:0 20px 36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 16px}.connections{display:none}.hub{position:relative;grid-column:1/-1;top:auto;left:auto;transform:none;width:220px;height:220px;margin:38px auto 18px;padding:10px;transform-origin:50% 50%}.hub-inner{padding:20px}.hub img{width:177px}.hub-prompt{bottom:20px;font-size:9px;opacity:1;transform:none}.hub-inner>img{transform:translateY(-5px)}.hub:is(:hover,:focus-visible){scale:1.02}.application{position:relative;top:auto;left:auto;width:100%;transform:none;border-radius:18px}.glass-tile{width:98px;height:98px;border-radius:21px}.glass-tile:before{border-radius:17px;inset:4px}.app-icon{width:74px;height:74px}.cygem-icon{width:82px;height:82px}.app-label{width:100%;min-height:71px;padding:16px 5px 10px;border-radius:16px}.app-title{font-size:13px;letter-spacing:-.3px}.app-description{font-size:10px;letter-spacing:-.15px}.launch{font-size:8px;bottom:10px;height:17px}.launch.pending{font-size:8px}.client{order:1}.employee{order:2}.sec{order:3}.cygem{order:4}.trevport{order:5}.backoffice{order:6}footer{margin:0 22px;padding:10px 0 22px;font-size:9px}}
@media(max-width:360px){.intro h1{font-size:25px}.workspace{margin-left:14px;margin-right:14px;column-gap:10px}.app-title{font-size:12px}.app-description{font-size:9px}}
@media(hover:none){.hub-prompt{opacity:1;transform:none}}
/* Shared timing keeps each connector and its application in clockwise order. */
:is([data-app="client"],[data-path="client"],[data-node="client"]){--step:0}
:is([data-app="employee"],[data-path="employee"],[data-node="employee"]){--step:1}
:is([data-app="trevport"],[data-path="trevport"],[data-node="trevport"]){--step:2}
:is([data-app="backoffice"],[data-path="backoffice"],[data-node="backoffice"]){--step:3}
:is([data-app="cygem"],[data-path="cygem"],[data-node="cygem"]){--step:4}
:is([data-app="sec"],[data-path="sec"],[data-node="sec"]){--step:5}
.client{--arrival-x:0px;--arrival-y:22px}
.employee{--arrival-x:-18px;--arrival-y:12px}
.trevport{--arrival-x:-18px;--arrival-y:-12px}
.backoffice{--arrival-x:0px;--arrival-y:-22px}
.cygem{--arrival-x:18px;--arrival-y:-12px}
.sec{--arrival-x:18px;--arrival-y:12px}
@media(prefers-reduced-motion:no-preference){
  /* Backwards fill hides delayed elements without retaining a compositing layer. */
  .intro{animation:fade-in .65s backwards}
  .hub{animation:fade-in .65s backwards}
  .hub-inner{animation:hub-arrive .8s cubic-bezier(.16,1,.3,1) backwards}
  .outer-orbit,.inner-orbit,.close-orbit,.orbit-dots{animation:orbit-arrive 1s .25s backwards}
  .ambient-light-left{animation:light-drift-left 24s ease-in-out infinite alternate}
  .ambient-light-right{animation:light-drift-right 29s -12s ease-in-out infinite alternate}
  .atmosphere>svg{animation:ribbon-drift 32s -8s ease-in-out infinite alternate;transform-origin:50% 50%}
  .orbit-dots{transform-origin:500px 406px;animation:orbit-arrive 1s .25s backwards,orbit-drift 100s linear infinite}
  @keyframes light-drift-left{from{transform:translate(0,0) scale(.95);opacity:.6}to{transform:translate(28vw,25vh) scale(1.15);opacity:1}}
  @keyframes light-drift-right{from{transform:translate(0,0);opacity:.65}to{transform:translate(-25vw,-22vh) scale(1.12);opacity:1}}
  @keyframes ribbon-drift{from{transform:translate(-1.5%,0) scale(1.03)}to{transform:translate(1.5%,-2%) scale(1.08)}}
  @keyframes orbit-drift{to{transform:rotate(360deg)}}
  .application{animation:app-arrive .7s cubic-bezier(.16,1,.3,1) calc(.7s + var(--step)*.24s) backwards}
  .spoke{stroke-dasharray:1;animation:connect .55s cubic-bezier(.22,1,.36,1) calc(.55s + var(--step)*.24s) backwards}
  [data-node]{animation:fade-in .4s calc(.6s + var(--step)*.24s) backwards}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  @keyframes hub-arrive{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
  @keyframes orbit-arrive{from{opacity:0}}
  @keyframes app-arrive{from{opacity:0;translate:var(--arrival-x) var(--arrival-y)}to{opacity:1;translate:0 0}}
  @keyframes connect{from{opacity:0;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
}
@media(max-width:720px){.application{--arrival-x:0px;--arrival-y:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}