/* Global stylesheet, in the same cascade order as source/original.html:
   1. the outer wrapper document's \3c style> (it still applies in the original),
   2. Google Fonts (self-hosted, same @font-face rules),
   3-5. the design's three \3c style> blocks, ported verbatim. *//* PORTED VERBATIM from source/original.html lines 1-1 by tools/port/port-css.mjs.
   Do not edit by hand: cascade order and every rule are part of the approved design. */
:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}/* Self-hosted copy of the Google Fonts css2 response used by source/original.html
   (Manrope 300-800 as discrete faces over one variable file, IBM Plex Mono 400/500).
   Generated by tools/port/port-fonts.mjs. Keep discrete faces: CSS weights 650/750 must snap to
   700/800 exactly as they do in the original. Fonts: SIL Open Font License 1.1. */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/manrope/v23/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* PORTED VERBATIM from source/original.html lines 17-476 by tools/port/port-css.mjs.
   Do not edit by hand: cascade order and every rule are part of the approved design. */

:root{
  --deep:#020910; --navy:#061d31; --ink:#102a40; --steel:#123b59;
  --orange:#e35d26; --orange2:#ff8a59; --orange3:#ffb08a;
  --mint:#54d8a0;
  --paper:#ffffff; --mist:#f4f8fa; --mist2:#eaf1f5;
  --line:#dde6ec; --line-dark:rgba(255,255,255,.10);
  --body:#4a6274; --muted:#6d8496; --muted-d:#8ea3b4; --muted-dd:#5f7688;
  --sans:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shell:min(1220px, 100% - 48px);
  --r:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ms-sprite:url("/_astro/ms-sprite.CzqgtSeg.webp");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
svg:not(.xeetek-logo){width:1em;height:1em;flex:0 0 auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.shell{width:var(--shell);margin:0 auto}
.kicker{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);font-weight:500;
}
.kicker.dim{color:#8fa8bb}

/* ============ 3D CUBE ============ */
.cube-scene{width:29px;height:29px;perspective:420px;flex:0 0 auto;position:relative;transition:transform .45s var(--ease)}
.cube-scene::after{
  content:"";position:absolute;inset:-40%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(227,93,38,.26),transparent 62%);filter:blur(7px);
}
.cube{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cube .f{
  position:absolute;inset:0;border-radius:30%;
  background:linear-gradient(150deg,#ffa878 0%,var(--orange2) 26%,var(--orange) 62%,#b8431a 100%);
  box-shadow:inset 0 0 12px rgba(255,255,255,.30), inset 0 -7px 15px rgba(96,28,6,.42);
  backface-visibility:visible;
}
.cube .core{
  position:absolute;inset:22%;border-radius:32%;background:var(--orange);
  transform:translateZ(0);box-shadow:0 0 18px rgba(227,93,38,.7);
}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;position:relative;z-index:1}

.xeetek-logo{width:104px;height:auto;display:block;transition:width .4s var(--ease)}
.scrolled .cube-scene{transform:scale(.8)}
.scrolled .xeetek-logo{width:92px}

/* ============ HEADER ============ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s,padding .4s var(--ease);
  border-bottom:1px solid transparent;padding:18px 0;
}
.hdr.scrolled{
  background:rgba(3,13,22,.86);backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line-dark);padding:11px 0;
}
.hdr-in{display:flex;align-items:center;gap:26px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-item{position:relative}
.nav-btn{
  appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;
  color:#c3d3de;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  padding:9px 13px;border-radius:10px;transition:color .2s,background .2s;text-decoration:none;
}
.nav-btn:hover,.nav-item.open .nav-btn{color:#fff;background:rgba(255,255,255,.08)}
.nav-btn svg{width:13px;height:13px;transition:transform .25s var(--ease);opacity:.65}
.nav-item.open .nav-btn svg{transform:rotate(180deg)}
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);
  min-width:290px;padding:10px;border-radius:16px;
  background:rgba(6,22,36,.97);backdrop-filter:blur(20px);
  border:1px solid var(--line-dark);box-shadow:0 28px 60px -24px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transition:opacity .24s var(--ease),transform .3s var(--ease),visibility .24s;
}
.mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega a{
  display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:10px;
  text-decoration:none;color:#dbe6ee;font-size:13.5px;font-weight:650;transition:background .18s,color .18s;
}
.mega a small{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#7d94a6;font-weight:400}
.mega a:hover{background:rgba(227,93,38,.16);color:#fff}
.mega a.lead{border-bottom:1px solid var(--line-dark);border-radius:10px 10px 0 0;margin-bottom:5px;padding-bottom:11px}
.mega a.lead small{color:var(--orange2)}
.hdr-cta{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  background:var(--orange);color:#fff;font-size:13px;font-weight:750;
  padding:11px 19px;border-radius:99px;box-shadow:0 16px 32px -18px rgba(227,93,38,1);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.hdr-cta:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(227,93,38,1)}
.hdr-cta svg{width:14px;height:14px}
.burger{display:none;appearance:none;border:1px solid var(--line-dark);background:transparent;color:#fff;width:40px;height:40px;border-radius:11px;cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:19px;height:19px}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--orange),var(--orange2));transition:width .1s linear}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:79;background:rgba(2,9,16,.98);backdrop-filter:blur(14px);
  padding:96px 0 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.drawer.open{opacity:1;visibility:visible}
.drawer h4{color:var(--orange2);font-size:11px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:26px 0 10px}
.drawer a{display:block;color:#dbe6ee;text-decoration:none;font-size:16px;font-weight:650;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}

/* ============ HERO ============ */
.hero{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(150px,15vw,200px) 0 clamp(80px,9vw,110px);
  background:
    radial-gradient(circle at 82% 34%,var(--steel) 0,transparent 34%),
    radial-gradient(circle at 8% 12%,#133652 0,transparent 30%),
    linear-gradient(145deg,var(--navy),var(--deep) 74%);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 42%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 42%,#000,transparent 78%);
}
#net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-glow{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(90px);background:rgba(227,93,38,.09);top:4%;right:0;pointer-events:none;animation:drift 20s ease-in-out infinite alternate}
.hero-glow.b{background:rgba(84,216,160,.05);left:-6%;top:auto;bottom:-16%;right:auto;width:520px;height:520px;animation-duration:26s}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-46px,38px,0)}}
.hero .shell{position:relative;z-index:2;text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 10px;border-radius:99px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#a9bccb;
}
.ms-mark{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:14px;height:14px;flex:0 0 auto}
.ms-mark i{display:block;border-radius:1px}
.ms-mark i:nth-child(1){background:#f25022}.ms-mark i:nth-child(2){background:#7fba00}
.ms-mark i:nth-child(3){background:#00a4ef}.ms-mark i:nth-child(4){background:#ffb900}

.headline{margin:28px 0 0;font-size:clamp(38px,6.9vw,76px);line-height:.98;letter-spacing:-.045em;color:#fff}
.line{display:block;padding:.055em 0}
/* only the rotating line is masked, with room for descenders (g, y, p) */
.line-rot{overflow:visible}
.line>span{display:block}
.accent{padding:.06em 0 .18em;margin:-.06em 0 -.18em;
  background:linear-gradient(96deg,var(--orange) 0%,#f4713a 28%,var(--orange2) 46%,#f4713a 64%,var(--orange) 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:sheen 8s ease-in-out 1.6s infinite;
}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.line>span.rot{display:block;position:relative;height:.98em}
/* Plain opacity crossfade only. blur() and translate() each force this element
   onto its own compositing layer, and a composited layer that paints its text
   through background-clip:text can drop the gradient mid-transition — which
   shows up as a blank box where the word should be. Nothing here composites. */
.rot>span{
  position:absolute;top:0;left:0;right:0;display:block;opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s;
}
.rot>span.on{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.rot>span.out{opacity:0;visibility:visible;transition:opacity .45s ease,visibility 0s linear .45s}
.rail{margin:26px auto 0;width:min(300px,66%);height:2px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden}
.rail i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--orange2));animation:fill 3.6s linear infinite}
@keyframes fill{from{width:0}to{width:100%}}
.hero-lede{margin:26px auto 0;max-width:670px;font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.75;color:#a8bac6}
.tok{position:relative;display:inline-block;color:#d5e2ea;font-weight:650;padding:1px 5px;margin:0 -1px;border-radius:6px;transition:color .5s ease,background .5s ease,box-shadow .5s ease}
.tok.lit{color:#fff;background:rgba(227,93,38,.17);box-shadow:inset 0 0 0 1px rgba(255,138,89,.34),0 8px 22px -14px rgba(227,93,38,.9)}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:38px}
.note{display:inline-flex;align-items:center;gap:9px;color:#7890a1;font-size:12.5px;font-weight:700}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--mint);position:relative;flex:0 0 auto}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mint);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.4);opacity:0}}

/* page hero (inner routes) */
.phero{padding:clamp(140px,13vw,180px) 0 clamp(64px,7vw,88px)}
.phero .shell{text-align:left;max-width:none}
.phero .headline{font-size:clamp(34px,5.2vw,60px);max-width:16ch}
.phero .hero-lede{margin-left:0;max-width:640px}
.phero .hero-actions{justify-content:flex-start}
.crumb{display:flex;gap:9px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7d94a6;margin-bottom:20px}
.crumb a{text-decoration:none;color:var(--orange2)}
.crumb svg{width:11px;height:11px;opacity:.5}


/* inner hero panel */
.phero .shell{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,64px);align-items:center}
.phero .headline{max-width:none}
.glance{border:1px solid var(--line-dark);border-radius:20px;background:rgba(255,255,255,.04);backdrop-filter:blur(10px);overflow:hidden;box-shadow:0 44px 84px -44px rgba(0,0,0,.85)}
.glance-h{display:flex;align-items:center;gap:9px;padding:15px 20px;border-bottom:1px solid var(--line-dark);font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:#9db2c2}
.glance-h b{margin-left:auto;color:var(--mint);font-weight:500;letter-spacing:.12em}
.glance ul{padding:8px}
.glance li{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:11px;font-size:14.5px;font-weight:650;color:#dbe6ee;transition:background .3s}
.glance li:hover{background:rgba(255,255,255,.06)}
.glance li i{width:23px;height:23px;border-radius:7px;display:grid;place-items:center;background:rgba(227,93,38,.16);border:1px solid rgba(255,138,89,.28);font-family:var(--mono);font-size:9px;font-style:normal;color:var(--orange2);flex:0 0 auto}
.glance-f svg{width:15px;height:15px;flex:0 0 auto;color:var(--mint)}
.glance-f{padding:13px 20px;border-top:1px solid var(--line-dark);display:flex;gap:9px;align-items:center;font-size:12px;color:#7d94a6;font-weight:650}
.pscene{position:relative;display:grid;place-items:center;padding:clamp(10px,1.6vw,20px)}
.pscene::before{content:"";position:absolute;inset:-6% -4%;border-radius:36px;z-index:0;
  background:radial-gradient(60% 60% at 70% 22%, color-mix(in srgb, var(--c1) 26%, transparent), transparent 70%);
  filter:blur(6px)}
.pscene .scene{max-width:430px;width:100%;
  box-shadow:0 46px 92px -46px color-mix(in srgb, var(--c1) 70%, rgba(14,36,56,.9))}
@media (max-width:980px){.pscene{padding-top:8px}.pscene .scene{max-width:400px}}
@media (max-width:980px){.phero .shell{grid-template-columns:1fr}}

/* ============ BUTTONS ============ */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:9px;padding:15px 25px;border-radius:99px;
  text-decoration:none;background:var(--orange);color:#fff;font-size:13.5px;font-weight:750;
  border:0;cursor:pointer;box-shadow:0 20px 40px -20px rgba(227,93,38,.95);
  transition:transform .28s var(--ease),box-shadow .28s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 28px 52px -20px rgba(227,93,38,1)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.34) 50%,transparent 60%);transform:translateX(-130%)}
.btn:hover::after{animation:shine .85s ease forwards}
@keyframes shine{to{transform:translateX(130%)}}
.btn svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.22);box-shadow:none;color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.08);box-shadow:none}
.btn.dark{background:var(--ink);box-shadow:0 20px 40px -22px rgba(16,42,64,.9)}
.btn.dark:hover{box-shadow:0 26px 48px -22px rgba(16,42,64,1)}


/* ---- Microsoft product logos (sprite sheet, 7x5 @64px) ---- */
.a2-hq{font-style:normal;display:inline-block;vertical-align:middle;margin-left:7px;
  padding:3px 7px;border-radius:6px;background:rgba(227,93,38,.12);color:var(--orange);
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em}
.a2-map{text-decoration:none;transition:color .25s var(--ease)}
.a2-map em{font-style:normal;display:block;margin-top:4px;padding-left:22px;
  font-size:11.5px;font-weight:650;letter-spacing:.01em;color:var(--orange);opacity:0;
  transform:translateY(-3px);transition:opacity .28s var(--ease),transform .28s var(--ease)}
.a2-map:hover em,.a2-map:focus-visible em{opacity:1;transform:none}
.a2-map:hover svg{color:var(--orange)}
@media (prefers-reduced-motion:reduce){.a2-map em{opacity:1;transform:none;transition:none}}
[data-ms].ms-tint>b{color:inherit;font-weight:800}
.ms-img{display:block;background-image:var(--ms-sprite);background-repeat:no-repeat;background-size:700% 500%;background-position:var(--x) var(--y)}
.tile b,.mark b,.mega-logo b,.glance-logo b{display:block}
.tile.has-logo,.mega-logo.has-logo,.glance-logo.has-logo{background:none;border-color:transparent;box-shadow:none}
.tile.has-logo b,.mark.has-logo b,.mega-logo.has-logo b,.glance-logo.has-logo b,.wapps span.has-logo i:not(.ms-img){display:none}
.tile .ms-img{width:100%;height:100%}
.mark.has-logo{background:var(--mist);border-color:var(--line)}
.mark .ms-img{width:28px;height:28px}
.sec.dark .mark.has-logo{background:rgba(255,255,255,.07);border-color:var(--line-dark)}
.mega-logo{width:17px;height:17px;flex:0 0 auto}
.mega-logo .ms-img{width:100%;height:100%}
.mega a{flex-direction:row;align-items:center;gap:9px}
.mega a.lead{flex-direction:column;align-items:flex-start;gap:1px}
.glance-logo{width:18px;height:18px;flex:0 0 auto}
.glance-logo .ms-img{width:100%;height:100%}
.wapps span .ms-img{width:16px;height:16px;flex:0 0 auto;border-radius:0;background-color:transparent;background-image:var(--ms-sprite);background-repeat:no-repeat;background-size:700% 500%;background-position:var(--x) var(--y)}
.node-logos{display:flex;gap:7px;margin-bottom:11px}
.node-logos.center{justify-content:center}
.node-logos .tile{width:26px;height:26px;border-radius:8px;font-size:8px}

/* ============ SECTIONS ============ */
.sec{padding:clamp(56px,6.4vw,94px) 0}
.suite-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.suite-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sec.mist{position:relative;background:var(--mist);border-block:1px solid var(--line)}
.sec.mist::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 52% at 90% 0%,
    color-mix(in srgb,var(--ac,var(--orange)) 7%,transparent),transparent 70%)}
.sec.mist>*{position:relative}
.sec.dark{background:linear-gradient(160deg,var(--navy),var(--deep));color:#fff}
.sec.dark p{color:#a3b7c5}
.sec-head{position:relative;max-width:720px;margin-bottom:clamp(30px,3.4vw,48px);padding-top:16px}
.sec-head::before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--ac,var(--orange)),transparent)}
.sec-head.center::before{left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--ac,var(--orange)),transparent);width:64px}
.proofdk .sec-head::before,.sec.dark .sec-head::before{background:linear-gradient(90deg,var(--ac2,var(--orange2)),transparent)}
.proofdk .sec-head.center::before,.sec.dark .sec-head.center::before{background:linear-gradient(90deg,transparent,var(--ac2,var(--orange2)),transparent)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(28px,3.9vw,46px);margin:16px 0 0}
.sec-head p{margin-top:18px;color:var(--body);font-size:16.5px;line-height:1.72}
.sec.dark .sec-head p{color:#a3b7c5}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}

/* trust bar */
.trust{background:var(--deep);border-top:1px solid rgba(255,255,255,.06);padding:0}
.trust-in{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(255,255,255,.07)}
.trust-in>div{background:var(--deep);padding:26px 20px;text-align:center}
.trust-in strong{display:block;color:#fff;font-size:19px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.trust-in span{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#6e8697}

/* card grids */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:28px;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s;
}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(16,42,64,.5);border-color:#c4d5e0}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange2));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.card:hover::before{transform:scaleX(1)}
.card h3{font-size:19px;margin:14px 0 0;letter-spacing:-.03em}
.card p{margin-top:9px;color:var(--body);font-size:14.5px;line-height:1.66}
.card .more{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;color:var(--orange);font-size:12.5px;font-weight:750}
.card .more svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.card:hover .more svg{transform:translateX(4px)}
.sec.mist .card{background:var(--paper)}
.sec.dark .card{background:rgba(255,255,255,.04);border-color:var(--line-dark);color:#fff}
.sec.dark .card:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);box-shadow:none}
.sec.dark .card p{color:#a3b7c5}

.mark{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,rgba(227,93,38,.14),rgba(227,93,38,.05));
  border:1px solid rgba(227,93,38,.22);color:var(--orange);
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;
}
.mark svg{width:20px;height:20px}
.sec.dark .mark{background:rgba(255,138,89,.12);border-color:rgba(255,138,89,.26);color:var(--orange2)}

/* list of ticks */
.ticks{display:grid;gap:13px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.55;
  color:var(--ink);font-weight:600;letter-spacing:-.012em}
.ticks svg{width:23px;height:23px;padding:4px;border-radius:8px;box-sizing:border-box;flex:0 0 auto;
  margin-top:1px;color:var(--mint);background:color-mix(in srgb,var(--mint) 15%,transparent)}
.sec.dark .ticks li{color:#d7e3eb}
.sec.dark .ticks svg{color:var(--mint)}

/* numbered capability grid */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.caps li{background:var(--paper);padding:24px 22px;display:flex;gap:14px;align-items:flex-start;transition:background .3s}
.caps li:hover{background:var(--mist)}
/* avoid a dead cell when the last row is short */
.caps li:last-child:nth-child(3n+1){grid-column:1/-1}
.caps li:last-child:nth-child(3n+2){grid-column:span 2}
.caps b{font-family:var(--mono);font-size:11px;color:var(--orange);font-weight:500;padding-top:2px}
.caps span{font-size:15px;font-weight:650;letter-spacing:-.015em;line-height:1.45}

/* stat / value row */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.val{padding:26px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid var(--line-dark)}
.val strong{display:block;font-size:15px;letter-spacing:-.02em}
.val p{margin-top:8px;font-size:14px;line-height:1.62}

/* pill row */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:99px;
  border:1px solid var(--line);background:var(--paper);font-size:13px;font-weight:650;text-decoration:none;color:var(--ink);
  transition:border-color .25s,transform .25s var(--ease),color .25s;
}
.pill svg{width:15px;height:15px;flex:0 0 auto;opacity:.85}
.pill:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.sec.dark .pill{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:#dbe6ee}
.sec.dark .pill:hover{border-color:var(--orange2);color:var(--orange2)}

/* FAQ */
.faqgrp+.faqgrp{margin-top:clamp(36px,4.4vw,58px)}
.faqgrp-h{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px}
.faqgrp-h>i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  font-family:var(--mono);font-size:12px;font-style:normal;font-weight:600;
  background:color-mix(in srgb,var(--orange) 11%,transparent);color:var(--orange);
  border:1px solid color-mix(in srgb,var(--orange) 26%,transparent)}
.faqgrp-h h2{font-size:clamp(21px,2.4vw,27px);margin:3px 0 0;letter-spacing:-.02em}
.faqgrp-h p{margin:7px 0 0;color:var(--body);font-size:14.5px;line-height:1.6;max-width:62ch}
.faqgrp .faq{margin-top:18px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:17px;font-weight:750;letter-spacing:-.025em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-8px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq p{padding:0 40px 24px 0;color:var(--body);font-size:15.5px;line-height:1.72;max-width:76ch}

/* CTA band */
.band{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--navy),var(--deep) 78%);color:#fff;padding:clamp(60px,7vw,88px) 0}
.band::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:rgba(227,93,38,.14);filter:blur(90px);top:-30%;right:-6%}
.band-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.band h2{font-size:clamp(26px,3.4vw,40px);max-width:18ch}
.band p{margin-top:14px;color:#a3b7c5;max-width:52ch;font-size:15.5px}

/* footer */
.foot{background:var(--deep);color:#8ea3b4;padding:72px 0 34px;border-top:1px solid rgba(255,255,255,.07)}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:34px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.07)}
.foot h5{color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;margin:0 0 15px}
.foot li{margin-bottom:9px}
.foot a{color:#8ea3b4;text-decoration:none;font-size:13.5px;transition:color .2s}
.foot a:hover{color:var(--orange2)}
.foot-blurb{font-size:13.5px;line-height:1.75;max-width:38ch;margin-top:18px}
.foot-bot a{font-size:10.5px}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#5f7688}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--paper);
  transition:border-color .25s,box-shadow .25s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(227,93,38,.12)}
.form-note{grid-column:1/-1;font-size:13px;color:var(--muted);line-height:1.65}
.sent{grid-column:1/-1;padding:16px 18px;border-radius:12px;background:rgba(84,216,160,.12);border:1px solid rgba(84,216,160,.4);color:#1c6b4c;font-size:14.5px;font-weight:650}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:inline-flex}
  .g4{grid-template-columns:repeat(2,1fr)}
  .caps{grid-template-columns:repeat(2,1fr)}
  .caps li:last-child:nth-child(3n+1),.caps li:last-child:nth-child(3n+2){grid-column:auto}
  .caps li:last-child:nth-child(2n+1){grid-column:1/-1}
  .trust-in{grid-template-columns:repeat(3,1fr)}
  .foot-top{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:760px){
  :root{--shell:min(1220px, 100% - 32px)}
  .hdr-cta{display:none}
  .g2,.g3,.g4,.split,.vals,.caps,.form{grid-template-columns:1fr}
  .trust-in{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
  .headline{letter-spacing:-.035em}
  .band-in{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .rot>span{opacity:0;visibility:hidden}.rot>span.on{opacity:1;visibility:visible}
  .rail i{width:100%}
  .sect-grid.in .sect{animation:none}
}
/* PORTED VERBATIM from source/original.html lines 517-795 by tools/port/port-css.mjs.
   Do not edit by hand: cascade order and every rule are part of the approved design. */

/* ================= HOMEPAGE (mirrors the live XEETEK homepage) ================= */
.hm h2{font-size:clamp(28px,3.9vw,46px);letter-spacing:-.04em}
.hm em{font-style:normal;color:var(--orange2)}
.hm-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:end;margin-bottom:clamp(34px,4vw,52px)}
.hm-head p{color:#9db1c0;font-size:16px;line-height:1.72}
.sec-dk{position:relative;overflow:hidden;color:#fff;padding:clamp(64px,7.5vw,96px) 0}
.sec-dk .shell{position:relative;z-index:2}

/* ---- hero core stage ---- */
.core-stage{
  position:relative;z-index:2;margin-top:clamp(44px,5vw,64px);text-align:left;
  border:1px solid var(--line-dark);border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  backdrop-filter:blur(12px);box-shadow:0 60px 110px -60px rgba(0,0,0,.9);
}
.core-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:15px 22px;border-bottom:1px solid var(--line-dark);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:#93a9ba}
.core-head>div{display:flex;align-items:center;gap:9px}
.core-head strong{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:-.02em;color:#e7eef3;text-transform:none;margin-inline:auto}
.core-head em{font-style:normal;color:var(--mint);letter-spacing:.14em}
.core-map{display:grid;grid-template-columns:1fr 54px 1.06fr 54px 1fr;align-items:stretch;gap:0;padding:20px}
.zone{border:1px solid var(--line-dark);border-radius:16px;padding:16px;background:rgba(255,255,255,.02);transition:border-color .5s,background .5s,box-shadow .5s}
.zone.active{border-color:rgba(255,138,89,.4);background:rgba(227,93,38,.07);box-shadow:0 0 0 1px rgba(227,93,38,.16),0 24px 50px -32px rgba(227,93,38,.8)}
.zone-t{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.zone-t small,.zone>small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#7f97a9}
.zone-t strong{display:block;font-size:15px;letter-spacing:-.025em;margin-top:2px}
.tile{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.02em;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:#cfe0ea}
.tile.o{background:rgba(227,93,38,.18);border-color:rgba(255,138,89,.32);color:var(--orange2)}
.tile.m{background:rgba(84,216,160,.14);border-color:rgba(84,216,160,.3);color:var(--mint)}
.zone-list{display:grid;gap:7px}
.zone-row{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.zone-row strong{display:block;font-size:12.5px;letter-spacing:-.015em}
.zone-row small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#7f97a9;margin-top:1px}
.engine{display:flex;align-items:center;gap:11px;padding:11px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);margin-bottom:8px;transition:border-color .5s,background .5s}
.engine.on{border-color:rgba(255,138,89,.42);background:rgba(227,93,38,.1)}
.engine strong{display:block;font-size:13.5px;letter-spacing:-.02em}
.engine span{display:block;font-size:11px;color:#93a9ba;margin-top:1px}
.ai-signal{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:#8ba2b4}
.ai-signal svg{width:13px;height:13px;color:var(--orange2)}
.ai-signal i{width:3px;height:3px;border-radius:50%;background:#4d6376;font-style:normal}
.conn{position:relative;display:grid;place-items:center}
.conn::before{content:"";position:absolute;left:6px;right:6px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.conn b{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange2);box-shadow:0 0 12px 2px rgba(227,93,38,.75);animation:flow 2.8s linear infinite}
.conn b:nth-child(2){animation-delay:.95s}
.conn b:nth-child(3){animation-delay:1.9s}
@keyframes flow{0%{left:4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.core-caption{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:13px 20px;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#7f97a9;background:rgba(0,0,0,.22)}
.core-caption b{color:var(--orange2)}
.core-caption span{display:inline-flex;align-items:center;gap:6px;color:#b9cbd8}
.core-caption i{width:5px;height:5px;border-radius:50%;background:var(--mint);font-style:normal}

/* ---- manifesto core ---- */
.world-core{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;align-items:stretch;margin-bottom:26px}
.wc-engine{display:flex;align-items:center;gap:12px;padding:16px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid var(--line-dark)}
.wc-engine small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#7f97a9}
.wc-engine strong{display:block;font-size:15px;letter-spacing:-.025em;margin-top:2px}
.wc-copy{padding:18px 22px;border-radius:16px;text-align:center;border:1px solid rgba(255,138,89,.24);
  background:linear-gradient(150deg,rgba(227,93,38,.14),rgba(227,93,38,.04))}
.wc-copy small{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange3)}
.wc-copy strong{display:block;font-size:clamp(15px,1.7vw,19px);letter-spacing:-.03em;margin:8px 0 7px;line-height:1.25}
.wc-copy span{font-size:11.5px;color:#a7bcc9}
.world-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wcard{position:relative;overflow:hidden;padding:22px;border-radius:18px;border:1px solid var(--line-dark);background:rgba(255,255,255,.035);
  transition:transform .35s var(--ease),border-color .35s,background .35s}
.wcard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.wcard::after{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:2px;background:var(--ac);opacity:.85}
.wcard-t{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;color:var(--ac)}
.wcard-t span{font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.wcard-t svg{width:19px;height:19px}
.wcard>small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#7f97a9}
.wcard h3{font-size:17.5px;letter-spacing:-.03em;margin:8px 0 9px}
.wcard p{font-size:13.5px;line-height:1.62;color:#9db1c0}
.wapps{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.wapps span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:650;color:#cfdde6}
.wapps i{width:16px;height:16px;border-radius:5px;display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:7.5px;background:var(--ac);color:#04121d;font-weight:500}

/* ---- experience ---- */
.exp-tabs{display:inline-flex;gap:5px;padding:5px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line-dark);margin-bottom:20px;flex-wrap:wrap}
.exp-tab{appearance:none;border:0;background:transparent;cursor:pointer;color:#a5bac8;font-size:13px;font-weight:700;letter-spacing:-.015em;padding:9px 15px;border-radius:10px;transition:background .25s,color .25s}
.exp-tab:hover{color:#fff}
.exp-tab[aria-selected="true"]{background:var(--orange);color:#fff;box-shadow:0 12px 26px -16px rgba(227,93,38,1)}
.exp-wrap{border:1px solid var(--line-dark);border-radius:22px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.018))}
.exp-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--line-dark);font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#8ba2b4}
.exp-head span:first-child{color:#dbe7ee}
.exp-head small{margin-left:auto;letter-spacing:.14em}
.exp-body{display:grid;grid-template-columns:1.08fr .92fr;gap:0}
.convo{padding:24px;border-right:1px solid var(--line-dark)}
.panel-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:#7f97a9}
.bubble{margin-top:14px;padding:16px 18px;border-radius:16px;border:1px solid var(--line-dark);background:rgba(255,255,255,.04)}
.bubble small{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#7f97a9}
.bubble h3{font-size:clamp(17px,2vw,22px);letter-spacing:-.032em;margin-top:8px;line-height:1.25}
.bubble.ai{border-color:rgba(255,138,89,.26);background:linear-gradient(150deg,rgba(227,93,38,.12),rgba(227,93,38,.035))}
.bubble.ai p{margin-top:8px;font-size:14.5px;line-height:1.62;color:#dcE7ee}
.grounded svg{width:16px;height:16px;color:var(--mint)}
.grounded{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:11.5px;color:#8ba2b4;font-weight:650}
.grounded b{margin-left:auto;padding:4px 10px;border-radius:99px;background:rgba(84,216,160,.14);border:1px solid rgba(84,216,160,.3);color:var(--mint);font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.trace{padding:24px}
.trace-h{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:#7f97a9}
.trace-h small{margin-left:auto;color:var(--orange2)}
.trace-list{display:grid;gap:8px;margin-top:14px}
.trace-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025);transition:border-color .45s,background .45s,transform .45s var(--ease)}
.trace-row.on{border-color:rgba(255,138,89,.4);background:rgba(227,93,38,.1);transform:translateX(4px)}
.trace-row .n{font-family:var(--mono);font-size:10px;color:var(--orange2);width:18px;flex:0 0 auto}
.trace-row strong{display:block;font-size:13px;letter-spacing:-.02em}
.trace-row small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#7f97a9;margin-top:2px}
.trace-row .dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#3c5468;transition:background .45s,box-shadow .45s}
.trace-row.on .dot{background:var(--mint);box-shadow:0 0 10px 2px rgba(84,216,160,.6)}
.exp-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 22px;border-top:1px solid var(--line-dark);background:rgba(0,0,0,.22);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#7f97a9}
.exp-foot strong{margin-left:auto;color:var(--mint);font-weight:500}

/* ---- xee layer ---- */
.xee-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px;border-radius:18px;border:1px solid var(--line-dark);background:rgba(255,255,255,.04);margin-bottom:14px}
.xee-strip small{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange3)}
.xee-strip strong{display:block;font-size:clamp(14px,1.6vw,17px);letter-spacing:-.028em;margin-top:4px;max-width:46ch}
.xee-steps{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.xee-steps b{padding:7px 14px;border-radius:99px;background:rgba(227,93,38,.14);border:1px solid rgba(255,138,89,.28);color:var(--orange2);font-family:var(--mono);font-size:9px;letter-spacing:.13em;font-weight:500}
.xee-conn{display:grid;grid-template-columns:1fr 44px 1.1fr 44px 1fr;align-items:center;padding:18px;border-radius:18px;border:1px solid var(--line-dark);background:rgba(255,255,255,.03)}
.xee-node{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.xee-node.mid{border-color:rgba(255,138,89,.3);background:linear-gradient(150deg,rgba(227,93,38,.13),rgba(227,93,38,.04));text-align:center}
.xee-node small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#7f97a9}
.xee-node strong{display:block;font-size:15px;letter-spacing:-.025em;margin:5px 0 3px}
.xee-node span{font-size:11.5px;color:#93a9ba}
.xee-caption{text-align:center;margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#7f97a9}
.xee-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.xcard{display:flex;flex-direction:column;padding:22px;border-radius:18px;border:1px solid var(--line-dark);background:rgba(255,255,255,.035);text-decoration:none;color:#fff;
  transition:transform .35s var(--ease),border-color .35s,background .35s}
.xcard:hover{transform:translateY(-5px);border-color:rgba(255,138,89,.38);background:rgba(227,93,38,.07)}
.xcard-t{display:flex;align-items:baseline;gap:8px}
.xcard-t small{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--orange2)}
.xcard-t strong{font-size:20px;letter-spacing:-.035em;font-weight:800}
.xcard p{margin-top:10px;font-size:13.5px;line-height:1.6;color:#9db1c0}
.xquote{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12.5px;line-height:1.5;color:#d5e2ea;font-style:italic}
.xchips{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:14px}
.xchips span{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:650;color:#a9bdc9}
.xchips svg{width:13px;height:13px;color:var(--mint);flex:0 0 auto}


/* ---- connector: hub down into the four XEE apps ----
   NB: class names are prefixed bus-* because .rail is already the hero progress bar */
.xee-bus{position:relative;height:104px;margin-top:6px;--g:14px;--col:calc((100% - (var(--g) * 3)) / 4)}
.xee-bus i{position:absolute;background:var(--line);display:block}
.bus-stem{left:50%;width:2px;margin-left:-1px}
.bus-stem.a{top:0;height:22px}
.bus-stem.b{top:52px;height:18px}
.bus-label{
  position:absolute;top:22px;left:50%;transform:translateX(-50%);
  padding:6px 15px;border-radius:99px;white-space:nowrap;
  background:#fff;border:1px solid var(--line);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.bus-rail{top:70px;height:2px;left:calc(var(--col) * .5);right:calc(var(--col) * .5)}
.bus-drop{top:70px;width:2px;height:34px;margin-left:-1px}
.bus-drop.d1{left:calc(var(--col) * .5)}
.bus-drop.d2{left:calc((var(--col) * 1.5) + var(--g))}
.bus-drop.d3{left:calc((var(--col) * 2.5) + (var(--g) * 2))}
.bus-drop.d4{left:calc((var(--col) * 3.5) + (var(--g) * 3))}
.bus-spark{
  position:absolute;width:7px;height:7px;border-radius:50%;margin-left:-3px;
  background:var(--orange2);box-shadow:0 0 12px 2px rgba(227,93,38,.6);
  animation:busdrop 2.6s ease-in-out infinite;
}
.bus-spark.s1{left:calc(var(--col) * .5);animation-delay:0s}
.bus-spark.s2{left:calc((var(--col) * 1.5) + var(--g));animation-delay:.45s}
.bus-spark.s3{left:calc((var(--col) * 2.5) + (var(--g) * 2));animation-delay:.9s}
.bus-spark.s4{left:calc((var(--col) * 3.5) + (var(--g) * 3));animation-delay:1.35s}
@keyframes busdrop{0%{top:70px;opacity:0}18%{opacity:1}80%{opacity:1}100%{top:100px;opacity:0}}
@media (max-width:1080px){
  .xee-bus{height:62px;--col:calc((100% - var(--g)) / 2)}
  .bus-rail,.bus-drop,.bus-spark,.bus-stem.b{display:none}
}

/* ---- proposed action card in the Copilot scenario ---- */
.outcome{
  margin-top:14px;padding:15px 17px;border-radius:14px;
  border:1px dashed rgba(227,93,38,.34);background:rgba(227,93,38,.045);
}
.outcome-h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange)}
.outcome-h svg{width:13px;height:13px}
.outcome strong{display:block;margin:8px 0 9px;font-size:14.5px;letter-spacing:-.02em;line-height:1.45;color:var(--ink)}
.outcome-guard{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);font-weight:650}
.outcome-guard svg{width:13px;height:13px;color:var(--mint);flex:0 0 auto}
.trace-row .res{
  margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.04em;
  color:var(--muted);text-align:right;max-width:11ch;line-height:1.35;
}
.trace-row.on .res{color:var(--orange)}
.trace-row .dot{margin-left:10px}
@media (max-width:760px){.trace-row .res{display:none}}

/* ---- architecture stack ---- */
.arch-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4.5vw,64px);align-items:center}
.layer{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:14px;border:1px solid var(--line-dark);background:rgba(255,255,255,.04);
  transition:transform .4s var(--ease),border-color .4s,background .4s}
.layer:hover{transform:translateX(6px);border-color:rgba(255,138,89,.36);background:rgba(227,93,38,.08)}
.layer small{font-family:var(--mono);font-size:10px;color:var(--orange2);width:20px;flex:0 0 auto}
.layer strong{display:block;font-size:14.5px;letter-spacing:-.025em}
.layer span{display:block;font-size:11.5px;color:#93a9ba;margin-top:2px}


/* ---- architecture stack (rebuilt) ---- */
.arch-points{display:grid;gap:12px;margin-top:28px}
.arch-point{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:15px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 32px -32px rgba(14,36,56,.5);transition:border-color .3s,transform .3s var(--ease)}
.arch-point:hover{border-color:rgba(227,93,38,.3);transform:translateX(4px)}
.arch-point .mark{width:38px;height:38px;border-radius:11px}
.arch-point .mark svg{width:17px;height:17px}
.arch-point strong{display:block;font-size:14.5px;letter-spacing:-.02em;color:var(--ink)}
.arch-point p{margin-top:5px;font-size:13px;line-height:1.6;color:var(--body)}
.stack{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:stretch}
.stack-axis{position:relative;display:block}
.stack-axis i{position:absolute;left:50%;top:8px;bottom:8px;width:2px;margin-left:-1px;background:linear-gradient(180deg,var(--orange),rgba(227,93,38,.15))}
.stack-axis i::before{content:"";position:absolute;left:-4px;top:-6px;border:5px solid transparent;border-bottom-color:var(--orange)}
.stack-axis em{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);
  transform-origin:center;white-space:nowrap;font-style:normal;background:var(--mist);padding:4px 8px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.stack-layers{display:grid;gap:9px}
.layer{
  display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:0 14px 32px -32px rgba(14,36,56,.5);
  transition:transform .4s var(--ease),border-color .4s,background .4s,box-shadow .4s;
}
.layer:hover{transform:translateX(6px);border-color:rgba(227,93,38,.36);background:#fffaf7;box-shadow:0 20px 40px -30px rgba(14,36,56,.55)}
.layer small{font-family:var(--mono);font-size:10px;color:var(--orange);width:20px;flex:0 0 auto}
.layer-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;background:var(--mist2);border:1px solid var(--line);color:var(--ink)}
.layer-ico svg{width:16px;height:16px}
.layer strong{display:block;font-size:14.5px;letter-spacing:-.025em;color:var(--ink)}
.layer span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.layer-tag{
  margin-left:auto;flex:0 0 auto;padding:5px 11px;border-radius:99px;
  background:var(--mist2);border:1px solid var(--line);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:500;
}
.layer:hover .layer-tag{background:rgba(227,93,38,.1);border-color:rgba(227,93,38,.24);color:var(--orange)}
@media (max-width:760px){
  .stack{grid-template-columns:1fr}
  .stack-axis{display:none}
  .layer-tag{display:none}
}

/* ---- proof (light) ---- */
.proof-sec{background:linear-gradient(#f5f8fa,#fff);color:var(--ink);padding:clamp(64px,7.5vw,96px) 0;border-block:1px solid var(--line)}
.proof-sec h2{font-size:clamp(28px,3.9vw,46px);letter-spacing:-.04em;margin-top:16px}
.proof-sec em{font-style:normal;color:var(--orange)}

/* ---- home contact ---- */
.hcontact{text-align:center;background:linear-gradient(150deg,var(--navy),var(--deep) 76%)}
.hcontact::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:rgba(227,93,38,.2);filter:blur(100px);top:-24%;right:4%}
.hcontact h2{margin:16px auto 0;max-width:24ch}
.hcontact p{margin:20px auto 0;max-width:58ch;color:#a3b7c5;font-size:16px;line-height:1.72}
.hcontact .hero-actions{margin-top:32px}
.hc-lines a{color:#cfdde6;text-decoration:none}
.hc-lines a:hover{color:var(--orange2)}

@media (max-width:1080px){
  .core-map{grid-template-columns:1fr;gap:14px}
  .conn{height:34px}
  .conn::before{left:50%;right:auto;top:4px;bottom:4px;width:1px;height:auto;background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent)}
  .conn b{animation:flowv 2.8s linear infinite;left:calc(50% - 3px)}
  @keyframes flowv{0%{top:2px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
  .world-grid{grid-template-columns:repeat(2,1fr)}
  .xee-cards{grid-template-columns:repeat(2,1fr)}
  .exp-body{grid-template-columns:1fr}
  .convo{border-right:0;border-bottom:1px solid var(--line-dark)}
  .xee-conn{grid-template-columns:1fr}
  .xee-conn .conn{height:34px}
}
@media (max-width:760px){
  .hm-head{grid-template-columns:1fr;align-items:start}
  .world-grid,.xee-cards,.arch-grid,.world-core{grid-template-columns:1fr}
  .xee-steps{margin-left:0}
}
/* PORTED VERBATIM from source/original.html lines 797-6325 by tools/port/port-css.mjs.
   Do not edit by hand: cascade order and every rule are part of the approved design. */

/* ==========================================================================
   LIGHT MODE — XEETEK
   Loaded after the base sheet; redefines every dark surface for a white site.
   ========================================================================== */
:root{
  --paper:#ffffff;
  --mist:#f5f9fb;
  --mist2:#eef4f8;
  --ink:#0e2438;
  --body:#466073;
  --muted:#6b8395;
  --muted-d:#7b91a2;
  --muted-dd:#8ba0ae;
  --line:#e3ebf1;
  --line-dark:rgba(14,36,56,.10);
  --mint:#0f9d6b;
  --panel:#ffffff;
  --panel-2:#f8fbfc;
  --tint:rgba(14,36,56,.035);
}
body{background:var(--paper);color:var(--ink)}

/* ---------- header ---------- */
.hdr{border-bottom-color:transparent}
.hdr.scrolled{
  background:rgba(255,255,255,.86);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(14,36,56,.55);
}
.brand{color:var(--ink)}
.cube-scene::after{background:radial-gradient(circle,rgba(227,93,38,.22),transparent 62%)}
.nav-btn{color:var(--body)}
.nav-btn:hover,.nav-item.open .nav-btn{color:var(--ink);background:var(--mist2)}
.burger{border-color:var(--line);color:var(--ink)}
.mega{
  background:rgba(255,255,255,.98);
  border-color:var(--line);
  box-shadow:0 30px 60px -26px rgba(14,36,56,.35);
}
.mega a{color:var(--ink)}
.mega a small{color:var(--muted)}
.mega a:hover{background:var(--mist2);color:var(--orange)}
.mega a.lead{border-bottom-color:var(--line)}
.drawer{background:rgba(255,255,255,.98)}
.drawer a{color:var(--ink);border-bottom-color:var(--line)}

/* ---------- hero ---------- */
.hero{
  color:var(--ink);
  background:
    radial-gradient(circle at 84% 30%,#e9f2f9 0,transparent 38%),
    radial-gradient(circle at 6% 8%,#fdf1eb 0,transparent 34%),
    linear-gradient(170deg,#f8fbfd,#ffffff 70%);
}
.hero-grid{
  background-image:linear-gradient(rgba(14,36,56,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,36,56,.05) 1px,transparent 1px);
}
.hero-glow{background:rgba(227,93,38,.10)}
.hero-glow.b{background:rgba(15,157,107,.07)}
.headline{color:var(--ink)}
.eyebrow{border-color:var(--line);background:#fff;color:var(--muted);box-shadow:0 8px 20px -14px rgba(14,36,56,.4)}
.hero-lede{color:var(--body)}
.tok{color:var(--ink)}
.tok.lit{background:rgba(227,93,38,.10);box-shadow:inset 0 0 0 1px rgba(227,93,38,.26),0 8px 22px -16px rgba(227,93,38,.7);color:var(--orange)}
.rail{background:var(--line)}
.note{color:var(--muted)}
.crumb{color:var(--muted)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn.ghost:hover{background:var(--mist2)}

/* ---------- generic sections ---------- */
.sec.dark{background:linear-gradient(180deg,#f7fafc,#eef4f8);color:var(--ink);border-block:1px solid var(--line)}
.sec.dark p,.sec.dark .sec-head p{color:var(--body)}
.sec.dark .card{background:#fff;border-color:var(--line);color:inherit}
.sec.dark .card:hover{background:#fff;border-color:#cfdde7;box-shadow:0 26px 50px -30px rgba(14,36,56,.45)}
.sec.dark .card p{color:var(--body)}
.sec.dark .mark{background:linear-gradient(150deg,rgba(227,93,38,.13),rgba(227,93,38,.05));border-color:rgba(227,93,38,.2);color:var(--orange)}
.sec.dark .mark.has-logo{background:var(--mist);border-color:var(--line)}
.sec.dark .ticks li{color:var(--ink)}
.sec.dark .ticks svg{color:var(--mint)}
.sec.dark .pill{background:#fff;border-color:var(--line);color:var(--ink)}
.sec.dark .pill:hover{border-color:var(--orange);color:var(--orange)}
.val{background:#fff;border-color:var(--line)}
.val p{color:var(--body)}
.kicker.dim{color:var(--muted)}

/* ---------- trust bar ---------- */
.trust{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-in{background:var(--line)}
.trust-in>div{background:var(--mist)}
.trust-in strong{color:var(--ink)}
.trust-in span{color:var(--muted)}

/* ---------- inner-page glance panel ---------- */
.glance{background:#fff;border-color:var(--line);box-shadow:0 34px 64px -40px rgba(14,36,56,.5)}
.glance-h{border-bottom-color:var(--line);color:var(--muted)}
.glance-h b{color:var(--mint)}
.glance li{color:var(--ink)}
.glance li:hover{background:var(--mist2)}
.glance li i{background:rgba(227,93,38,.10);border-color:rgba(227,93,38,.22);color:var(--orange)}
.glance-f{border-top-color:var(--line);color:var(--muted)}

/* ---------- homepage: shared surfaces ---------- */
.hm-head p{color:var(--body)}
.bg-plain{background:#fff}
.bg-tint{background:linear-gradient(180deg,#f7fafc,#eef4f8)}
.bg-warm{background:radial-gradient(circle at 78% 6%,rgba(227,93,38,.07),transparent 32%),linear-gradient(180deg,#fffaf7,#ffffff 70%)}
.bg-cool{background:radial-gradient(circle at 86% 16%,rgba(15,157,107,.06),transparent 30%),linear-gradient(180deg,#f6fafc,#ffffff 72%)}
.sec-dk{color:var(--ink)}
.sec-dk p{color:var(--body)}

/* core stage */
.core-stage{
  background:#fff;border-color:var(--line);
  box-shadow:0 44px 90px -56px rgba(14,36,56,.55);backdrop-filter:none;
}
.core-head{border-bottom-color:var(--line);color:var(--muted)}
.core-head strong{color:var(--ink)}
.core-head em{color:var(--mint)}
.zone{border-color:var(--line);background:var(--panel-2)}
.zone.active{border-color:rgba(227,93,38,.34);background:rgba(227,93,38,.045);box-shadow:0 0 0 1px rgba(227,93,38,.12),0 22px 46px -34px rgba(227,93,38,.6)}
.zone-t small,.zone>small{color:var(--muted)}
.zone-t strong{color:var(--ink)}
.tile{background:var(--mist2);border-color:var(--line);color:var(--muted)}
.tile.o{background:rgba(227,93,38,.12);border-color:rgba(227,93,38,.24);color:var(--orange)}
.tile.m{background:rgba(15,157,107,.11);border-color:rgba(15,157,107,.24);color:var(--mint)}
.zone-row{background:#fff;border-color:var(--line)}
.zone-row strong{color:var(--ink)}
.zone-row small{color:var(--muted)}
.engine{background:#fff;border-color:var(--line)}
.engine.on{border-color:rgba(227,93,38,.34);background:rgba(227,93,38,.055)}
.engine strong{color:var(--ink)}
.engine span{color:var(--muted)}
.ai-signal{border-top-color:var(--line);color:var(--muted)}
.ai-signal i{background:#c3d1db}
.conn::before{background:linear-gradient(90deg,transparent,rgba(14,36,56,.18),transparent)}
.core-caption{border-top-color:var(--line);background:var(--mist);color:var(--muted)}
.core-caption span{color:var(--ink)}

/* manifesto */
.wc-engine{background:#fff;border-color:var(--line);box-shadow:0 16px 34px -28px rgba(14,36,56,.5)}
.wc-engine small{color:var(--muted)}
.wc-engine strong{color:var(--ink)}
.wc-copy{border-color:rgba(227,93,38,.22);background:linear-gradient(150deg,rgba(227,93,38,.09),rgba(227,93,38,.02))}
.wc-copy small{color:var(--orange)}
.wc-copy strong{color:var(--ink)}
.wc-copy span{color:var(--body)}
.wcard{background:#fff;border-color:var(--line);box-shadow:0 18px 40px -34px rgba(14,36,56,.45)}
.wcard:hover{background:#fff;border-color:#cfdde7;box-shadow:0 28px 54px -32px rgba(14,36,56,.5)}
.wcard>small{color:var(--muted)}
.wcard h3{color:var(--ink)}
.wcard p{color:var(--body)}
.wapps span{background:var(--mist2);border-color:var(--line);color:var(--ink)}
.wapps i{color:#fff}

/* experience */
.exp-tabs{background:var(--mist2);border-color:var(--line)}
.exp-tab{color:var(--body)}
.exp-tab:hover{color:var(--ink)}
.exp-wrap{background:#fff;border-color:var(--line);box-shadow:0 34px 70px -48px rgba(14,36,56,.5)}
.exp-head{border-bottom-color:var(--line);color:var(--muted)}
.exp-head span:first-child{color:var(--ink)}
.convo{border-right-color:var(--line)}
.panel-label{color:var(--muted)}
.bubble{background:var(--mist);border-color:var(--line)}
.bubble small{color:var(--muted)}
.bubble h3{color:var(--ink)}
.bubble.ai{border-color:rgba(227,93,38,.2);background:linear-gradient(150deg,rgba(227,93,38,.07),rgba(227,93,38,.02))}
.bubble.ai p{color:var(--body)}
.grounded{color:var(--muted)}
.grounded b{background:rgba(15,157,107,.10);border-color:rgba(15,157,107,.28);color:var(--mint)}
.trace-h{color:var(--muted)}
.trace-row{background:var(--mist);border-color:var(--line)}
.trace-row.on{border-color:rgba(227,93,38,.32);background:rgba(227,93,38,.055)}
.trace-row strong{color:var(--ink)}
.trace-row small{color:var(--muted)}
.trace-row .dot{background:#c3d1db}
.exp-foot{border-top-color:var(--line);background:var(--mist);color:var(--muted)}

/* xee layer */
.xee-strip{background:#fff;border-color:var(--line);box-shadow:0 18px 40px -34px rgba(14,36,56,.45)}
.xee-strip small{color:var(--orange)}
.xee-strip strong{color:var(--ink)}
.xee-steps b{background:rgba(227,93,38,.10);border-color:rgba(227,93,38,.22);color:var(--orange)}
.xee-conn{background:#fff;border-color:var(--line)}
.xee-node{background:var(--mist);border-color:var(--line)}
.xee-node.mid{border-color:rgba(227,93,38,.22);background:linear-gradient(150deg,rgba(227,93,38,.08),rgba(227,93,38,.02))}
.xee-node small{color:var(--muted)}
.xee-node strong{color:var(--ink)}
.xee-node span{color:var(--body)}
.xee-caption{color:var(--muted)}
.xcard{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:0 18px 40px -34px rgba(14,36,56,.45)}
.xcard:hover{border-color:rgba(227,93,38,.34);background:#fffaf7;box-shadow:0 28px 56px -32px rgba(14,36,56,.5)}
.xcard p{color:var(--body)}
.xquote{background:var(--mist2);border-color:var(--line);color:var(--body)}
.xchips span{color:var(--body)}

/* architecture */
.layer{background:#fff;border-color:var(--line);box-shadow:0 14px 32px -30px rgba(14,36,56,.45)}
.layer:hover{border-color:rgba(227,93,38,.3);background:#fffaf7}
.layer strong{color:var(--ink)}
.layer span{color:var(--muted)}

/* proof */
.proof-sec{background:linear-gradient(180deg,#f7fafc,#ffffff);border-color:var(--line)}

/* closing question */
.hcontact{background:radial-gradient(circle at 82% 18%,rgba(227,93,38,.10),transparent 34%),linear-gradient(180deg,#fffaf7,#ffffff 72%);color:var(--ink)}
.hcontact::before{display:none}
.hcontact h2{color:var(--ink)}
.hcontact p{color:var(--body)}
.hc-lines{color:var(--muted)}
.hc-lines a{color:var(--ink)}

/* CTA band */
.band{background:linear-gradient(150deg,#f7fafc,#eef4f8);color:var(--ink);border-block:1px solid var(--line)}
.band::before{background:rgba(227,93,38,.10)}
.band h2{color:var(--ink)}
.band p{color:var(--body)}

/* footer */
.foot{background:var(--mist);color:var(--body);border-top:1px solid var(--line)}
.foot .xeetek-logo{color:var(--ink)}
.foot h5{color:var(--ink)}
.foot a{color:var(--body)}
.foot a:hover{color:var(--orange)}
.foot-top{border-bottom-color:var(--line)}
.foot-bot{color:var(--muted)}

/* misc */
.field input,.field select,.field textarea{background:#fff}
.sent{background:rgba(15,157,107,.10);border-color:rgba(15,157,107,.32);color:#0b6f4b}
::selection{background:rgba(227,93,38,.18)}

/* ==========================================================================
   Proof + closing section
   ========================================================================== */
.proof-sec .sec-head h2{font-size:clamp(28px,3.9vw,46px);letter-spacing:-.04em;margin-top:16px}
.proof-sec em{font-style:normal;color:var(--orange)}
.quote-card{
  position:relative;margin:0 auto;max-width:940px;
  padding:clamp(34px,4vw,50px) clamp(26px,4vw,52px) clamp(24px,3vw,34px);
  background:#fff;border:1px solid var(--line);border-radius:24px;
  box-shadow:0 40px 80px -52px rgba(14,36,56,.5);
}
.quote-mark{
  position:absolute;top:-22px;left:clamp(22px,4vw,46px);
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:var(--orange);color:#fff;box-shadow:0 16px 32px -16px rgba(227,93,38,.9);
}
.quote-mark svg{width:21px;height:21px}
.quote-card blockquote{
  margin:0;font-size:clamp(18px,2.3vw,26px);line-height:1.5;letter-spacing:-.028em;
  font-weight:700;color:var(--ink);text-wrap:balance;
}
.quote-card figcaption{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(22px,3vw,30px);padding-top:22px;border-top:1px solid var(--line);
}
.avatar{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--orange2),var(--orange));color:#fff;
  font-size:14px;font-weight:800;box-shadow:0 12px 26px -14px rgba(227,93,38,.9);
}
.who{display:block}
.who strong{display:block;font-size:15.5px;letter-spacing:-.02em;color:var(--ink)}
.who small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.stack-used{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.stack-used b{
  padding:6px 12px;border-radius:99px;background:var(--mist2);border:1px solid var(--line);
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--body);font-weight:500;
}
.proof-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:clamp(30px,4vw,44px);
}
.proof-stats>div{background:#fff;padding:26px 20px;text-align:center}
.proof-stats strong{
  display:block;font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.proof-stats span{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--muted);font-weight:650}
.creds{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.cred{
  display:flex;align-items:flex-start;gap:15px;padding:22px 24px;border-radius:18px;
  background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -36px rgba(14,36,56,.5);
  transition:border-color .3s,transform .3s var(--ease);text-align:left;
}
.cred:hover{border-color:#c9d9e4;transform:translateY(-3px)}
.cred .ms-mark{width:20px;height:20px;margin-top:3px}
.cred strong{display:block;font-size:15.5px;letter-spacing:-.025em;color:var(--ink)}
.cred p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--body)}
.cred>svg{width:18px;height:18px;color:var(--mint);flex:0 0 auto;margin-top:3px;margin-left:auto}

.hcontact .shell{text-align:center}
.reach{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(34px,4vw,48px)}
.reach-card{
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:24px 18px;border-radius:18px;
  background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;
  box-shadow:0 18px 40px -36px rgba(14,36,56,.5);
  transition:transform .32s var(--ease),border-color .32s,box-shadow .32s;
}
a.reach-card:hover{transform:translateY(-4px);border-color:rgba(227,93,38,.36);box-shadow:0 26px 50px -32px rgba(14,36,56,.55)}
.reach-card .mark{width:40px;height:40px;border-radius:12px}
.reach-card .mark svg{width:18px;height:18px}
.reach-card small{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.reach-card strong{font-size:14.5px;letter-spacing:-.02em;color:var(--ink);word-break:break-word}
.reach-note{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:11px 20px;border-radius:99px;
  background:#fff;border:1px solid var(--line);font-size:13px;color:var(--body);font-weight:650;text-align:left;
}
.reach-note svg{width:15px;height:15px;color:var(--mint);flex:0 0 auto}

@media (max-width:980px){
  .proof-stats{grid-template-columns:repeat(2,1fr)}
  .creds{grid-template-columns:1fr}
  .reach{grid-template-columns:repeat(2,1fr)}
  .stack-used{margin-left:0;width:100%}
}
@media (max-width:560px){
  .reach,.proof-stats{grid-template-columns:1fr}
}

/* ==========================================================================
   Flagship product page — journey rail, module explorer, outcome tiles
   ========================================================================== */
.jrny{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.jrny::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:2px;background:var(--line);z-index:0}
.jstep{position:relative;z-index:1;appearance:none;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:13px;padding:0;font-family:inherit}
.jstep i{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--muted);
  font-family:var(--mono);font-size:12px;font-style:normal;
  box-shadow:0 14px 30px -24px rgba(14,36,56,.7);
  transition:transform .35s var(--ease),background .35s,border-color .35s,color .35s,box-shadow .35s}
.jstep b{font-size:13.5px;font-weight:720;letter-spacing:-.022em;color:var(--muted);transition:color .3s}
.jstep:hover i{border-color:rgba(227,93,38,.42);color:var(--orange)}
.jstep.on i{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-4px);
  box-shadow:0 18px 34px -16px rgba(227,93,38,.95)}
.jstep.on b{color:var(--ink)}
.jsay{display:none}
.jsay.on{display:block;margin-top:30px;padding:24px 28px;border-radius:18px;background:#fff;
  border:1px solid var(--line);box-shadow:0 24px 52px -44px rgba(14,36,56,.7);
  animation:mfade .4s var(--ease)}
.jsay p{margin-top:10px;font-size:16px;line-height:1.7;color:var(--body);max-width:78ch}

.mod{display:grid;grid-template-columns:288px 1fr;gap:18px;align-items:start}
.mod-nav{display:grid;gap:5px}
.mtab{appearance:none;cursor:pointer;text-align:left;font-family:inherit;
  display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:13px;
  border:1px solid transparent;background:transparent;
  font-size:14px;font-weight:680;letter-spacing:-.018em;color:var(--body);
  transition:background .28s,border-color .28s,color .28s,box-shadow .28s,transform .28s var(--ease)}
.mtab svg{width:17px;height:17px;flex:0 0 auto;color:var(--muted-dd);transition:color .28s}
.mtab em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;color:var(--muted-dd);opacity:0;transition:opacity .28s,color .28s}
.mtab:hover{background:#fff;border-color:var(--line);color:var(--ink)}
.mtab.on{background:#fff;border-color:rgba(227,93,38,.34);color:var(--ink);transform:translateX(3px);
  box-shadow:0 18px 36px -30px rgba(14,36,56,.7)}
.mtab.on svg{color:var(--orange)}
.mtab.on em{opacity:1;color:var(--orange)}
.mod-panel{position:relative;min-height:352px;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(26px,3vw,38px);box-shadow:0 28px 62px -50px rgba(14,36,56,.8)}
.mpane{display:none}
.mpane.on{display:block;animation:mfade .45s var(--ease)}
@keyframes mfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mpane h3{font-size:clamp(19px,2.2vw,26px);letter-spacing:-.032em;margin:13px 0 0;max-width:24ch;color:var(--ink)}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.mlist li{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:12px;
  background:var(--mist);border:1px solid var(--line);
  font-size:13.5px;font-weight:640;line-height:1.45;color:var(--ink);
  transition:border-color .28s,background .28s}
.mlist li:hover{background:#fffaf7;border-color:rgba(227,93,38,.26)}
.mlist svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--orange)}

.outs-sec{background:radial-gradient(circle at 82% 4%,rgba(227,93,38,.07),transparent 40%),#fff;
  border-block:1px solid var(--line)}
.outs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.outcard{padding:26px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:0 20px 44px -40px rgba(14,36,56,.6);
  transition:transform .32s var(--ease),border-color .32s,box-shadow .32s}
.outcard:hover{transform:translateY(-4px);border-color:rgba(227,93,38,.32);box-shadow:0 28px 54px -34px rgba(14,36,56,.6)}
.outcard .mark{width:38px;height:38px;border-radius:11px}
.outcard .mark svg{width:17px;height:17px}
.outcard strong{display:block;margin-top:16px;font-size:15.5px;letter-spacing:-.028em;color:var(--ink)}
.outcard p{margin-top:8px;font-size:13.5px;line-height:1.62;color:var(--body)}

@media (max-width:1080px){
  .mod{grid-template-columns:1fr}
  .mod-nav{grid-auto-flow:column;grid-auto-columns:minmax(186px,1fr);overflow-x:auto;padding-bottom:6px}
  .mtab em{display:none}
  .mtab.on{transform:none}
  .outs{grid-template-columns:repeat(2,1fr)}
  .jrny{grid-auto-flow:row;gap:8px}
  .jrny::before{display:none}
  .jstep{flex-direction:row;justify-content:flex-start;gap:15px;padding:4px 0}
  .jstep i{width:44px;height:44px;border-radius:14px}
  .jstep.on i{transform:none}
}
@media (max-width:760px){
  .mlist{grid-template-columns:1fr}
  .outs{grid-template-columns:1fr}
}


/* ---- Microsoft app chips: real product artwork beside each name ---- */
.apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.app-chip{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:0 16px 36px -34px rgba(14,36,56,.6);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.app-chip:hover{transform:translateY(-3px);border-color:rgba(227,93,38,.3);box-shadow:0 22px 44px -30px rgba(14,36,56,.55)}
.app-ico{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:9px;background:var(--mist2);border:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.app-ico.has-logo{background:none;border-color:transparent}
.app-ico.has-logo b{display:none}
.app-ico .ms-img{width:100%;height:100%}
.app-chip strong{font-size:13.5px;font-weight:680;letter-spacing:-.022em;color:var(--ink);line-height:1.3}
@media (max-width:1080px){.apps-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.apps-grid{grid-template-columns:repeat(2,1fr)}}


/* ==========================================================================
   XEETEK 2026 — visual system overhaul
   Accent-per-section, XEE app marks, bento suite, product window, proof.
   ========================================================================== */
:root{--ac:#e35d26;--ac2:#ff8a59;--acs:rgba(227,93,38,.10)}
.pg{--ac:#e35d26;--ac2:#ff8a59;--acs:rgba(227,93,38,.10)}
.pg[data-g="Solutions"]{--ac:#5b5bd6;--ac2:#8b8bf0;--acs:rgba(91,91,214,.10)}
.pg[data-g="Industries"]{--ac:#0d8f80;--ac2:#2cc4b0;--acs:rgba(13,143,128,.10)}
.pg[data-g="Microsoft"]{--ac:#0a72c4;--ac2:#38a5f0;--acs:rgba(10,114,196,.10)}
.pg[data-g="Resources"]{--ac:#b4720c;--ac2:#e8a020;--acs:rgba(180,114,12,.10)}
.pg[data-g="Company"]{--ac:#c02a63;--ac2:#ee5f92;--acs:rgba(192,42,99,.10)}

/* careers runs on the brand orange, not the Company crimson */
.pg.careers-pg{--ac:#e35d26;--ac2:#ff9a5c;--acs:rgba(227,93,38,.10)}

/* accent-aware overrides of the shared furniture */
.pg .kicker{color:var(--ac)}
.pg .btn{background:var(--ac);box-shadow:0 20px 40px -20px var(--ac)}
.pg .btn:hover{box-shadow:0 28px 52px -20px var(--ac)}
.pg .mark{background:linear-gradient(150deg,var(--acs),transparent);border-color:var(--ac);color:var(--ac)}
.pg .caps b,.pg .mlist svg,.pg .ticks svg,.pg .crumb a{color:var(--ac)}
.pg .card::before{background:linear-gradient(90deg,var(--ac),var(--ac2))}
.pg .card:hover{border-color:var(--ac)}
.pg .mtab.on{border-color:var(--ac)}
.pg .mtab.on svg,.pg .mtab.on em{color:var(--ac)}
.pg .jstep.on i{background:var(--ac);border-color:var(--ac);box-shadow:0 18px 34px -16px var(--ac)}
.pg .jstep:hover i{border-color:var(--ac);color:var(--ac)}
.pg .outcard:hover,.pg .app-chip:hover,.pg .mlist li:hover{border-color:var(--ac)}
.pg .glance li i{background:var(--acs);border-color:var(--ac);color:var(--ac)}
.pg .hero{background:
  radial-gradient(circle at 84% 26%,var(--acs) 0,transparent 42%),
  radial-gradient(circle at 4% 4%,#eef4f9 0,transparent 34%),
  linear-gradient(170deg,#f8fbfd,#ffffff 68%)}
.pg .hero-glow{background:var(--acs)}
.pg .outs-sec{background:radial-gradient(circle at 82% 4%,var(--acs),transparent 42%),#fff}

/* ---------- XEE application marks ---------- */
.amark{
  --s:46px;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .29);
  display:grid;place-items:center;flex:0 0 auto;position:relative;overflow:hidden;
  background:linear-gradient(148deg,var(--c1),var(--c2));
  box-shadow:0 12px 26px -12px var(--c1), inset 0 1px 0 rgba(255,255,255,.4);
}
.amark::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.32),transparent 52%)}
.amark svg{width:52%;height:52%;color:#fff;position:relative;z-index:1;stroke-width:2}
.amark.lg{background:none;box-shadow:0 12px 26px -14px rgba(6,38,68,.75);
  border-radius:calc(var(--s) * .22);overflow:visible}
.amark.lg.gly{box-shadow:none}
.amark.lg::after{content:"";position:absolute;inset:0;
  background:var(--lg) center/contain no-repeat}

/* ---------- hero: floating suite cluster ---------- */
.hero-suite{display:flex;justify-content:center;flex-wrap:wrap;gap:11px;margin-top:clamp(40px,5vw,58px)}
.hs-tile{
  display:flex;align-items:center;gap:11px;padding:9px 17px 9px 9px;border-radius:16px;
  text-decoration:none;background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 38px -30px rgba(14,36,56,.75);
  animation:hfloat 6s ease-in-out infinite;animation-delay:var(--d);
  transition:transform .34s var(--ease),box-shadow .34s,border-color .34s;
}
.hs-tile b{font-size:13.5px;font-weight:750;letter-spacing:-.025em;color:var(--ink);white-space:nowrap}
.hs-tile:hover{transform:translateY(-6px) scale(1.03);border-color:var(--c1);
  box-shadow:0 26px 48px -26px var(--c1)}
.hs-tile .amark{--s:34px}
@keyframes hfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.hs-tile{animation:none}}

/* ---------- section 2: bento suite ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bcard{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:24px;border-radius:20px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 22px 48px -42px rgba(14,36,56,.75);
  transition:transform .38s var(--ease),box-shadow .38s,border-color .38s;
}
.bcard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 88% -10%,var(--c1),transparent 58%);
  transition:opacity .45s}
.bcard:hover{transform:translateY(-6px);border-color:var(--c1);
  box-shadow:0 34px 62px -34px var(--c1)}
.bcard:hover::before{opacity:.10}
.bcard-h{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.bcard-h small{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block}
.bcard-h strong{display:block;font-size:17px;letter-spacing:-.032em;color:var(--ink);margin-top:2px}
.bcard p{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--body);position:relative;z-index:1}
.bcard .go{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:760;color:var(--c1);position:relative;z-index:1}
.bcard .go svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.bcard:hover .go svg{transform:translateX(4px)}

.bfeat{grid-column:span 2;grid-row:span 2;padding:30px}
.bfeat .amark{--s:60px}
.bfeat .bcard-h strong{font-size:26px;letter-spacing:-.04em}
.bfeat p{font-size:15.5px;line-height:1.66;max-width:36ch}
.bchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;position:relative;z-index:1}
.bchips span{padding:6px 12px;border-radius:99px;background:var(--mist);border:1px solid var(--line);
  font-size:11.5px;font-weight:680;color:var(--body)}

/* schematic app window inside the featured card */
.mini{margin-top:20px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:var(--mist);position:relative;z-index:1;box-shadow:0 18px 40px -34px rgba(14,36,56,.8)}
.mini-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#fff;border-bottom:1px solid var(--line)}
.mini-bar i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.mini-bar b{margin-left:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.mini-body{display:grid;gap:7px;padding:13px}
.mini-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;background:#fff;border:1px solid var(--line)}
.mini-row u{width:22px;height:22px;border-radius:7px;background:linear-gradient(148deg,var(--c1),var(--c2));flex:0 0 auto;opacity:.9}
.mini-row s{flex:1;height:6px;border-radius:3px;background:var(--mist2);text-decoration:none;display:block}
.mini-row s.sm{max-width:38%}
.mini-row em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c1);font-weight:500}

.bcta{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(140deg,var(--navy),var(--deep));border-color:transparent}
.bcta:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 34px 62px -34px rgba(6,29,49,.9)}
.bcta h3{font-size:19px;letter-spacing:-.032em;color:#fff;max-width:16ch}
.bcta p{color:#9db1c0;margin-top:7px;font-size:13px}
.bcta .go{color:var(--orange2);padding-top:0}
.bcta-arrow{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--orange);color:#fff;box-shadow:0 16px 32px -16px rgba(227,93,38,1)}
.bcta-arrow svg{width:18px;height:18px}

@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bfeat{grid-column:span 2;grid-row:auto}
  .bcta{grid-column:span 2}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .bfeat,.bcta{grid-column:span 1}
  .bcta{flex-direction:column;align-items:flex-start}
}

/* ---------- section 3: the three shelves ---------- */
.shelves{position:relative;display:grid;gap:14px;padding-left:44px}
.shelf-rail{position:absolute;left:17px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--orange),rgba(227,93,38,.16))}
.shelf-rail i{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--orange2);box-shadow:0 0 14px 3px rgba(227,93,38,.6);
  animation:rise 3.4s ease-in-out infinite}
.shelf-rail i:nth-child(2){animation-delay:1.1s}
.shelf-rail i:nth-child(3){animation-delay:2.2s}
@keyframes rise{0%{top:100%;opacity:0}14%{opacity:1}86%{opacity:1}100%{top:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.shelf-rail i{display:none}}
.shelf{position:relative;padding:20px 22px;border-radius:18px;background:#fff;
  border:1px solid var(--line);box-shadow:0 20px 44px -40px rgba(14,36,56,.8);
  transition:transform .38s var(--ease),border-color .38s,box-shadow .38s}
.shelf:hover{transform:translateX(6px);border-color:var(--sc);box-shadow:0 28px 54px -34px var(--sc)}
.shelf::after{content:"";position:absolute;left:-44px;top:50%;width:32px;height:2px;
  margin-top:-1px;background:linear-gradient(90deg,transparent,var(--sc))}
.shelf-t{display:flex;align-items:baseline;gap:11px;margin-bottom:15px}
.shelf-t small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--sc);font-weight:500}
.shelf-t strong{font-size:16px;letter-spacing:-.03em;color:var(--ink)}
.shelf-t span{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:640;text-align:right}
.shelf-logos{display:flex;flex-wrap:wrap;gap:8px}
.slogo{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:11px;
  background:var(--mist);border:1px solid var(--line);font-size:12px;font-weight:680;color:var(--ink)}
.slogo .ms-img{width:18px;height:18px;flex:0 0 auto}
.slogo b{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--mist2);font-family:var(--mono);font-size:7.5px;color:var(--muted);font-weight:500}
.slogo.has-logo b{display:none}

.plain{display:grid;gap:16px}
.plain-row{display:flex;gap:16px;align-items:flex-start}
.plain-n{width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--acs);border:1px solid var(--ac);color:var(--ac);
  font-family:var(--mono);font-size:11px;font-weight:500}
.plain-row strong{display:block;font-size:16.5px;letter-spacing:-.03em;color:var(--ink)}
.plain-row p{margin-top:5px;font-size:14px;line-height:1.6;color:var(--body)}

/* ---------- section 4: the product window ---------- */
.flow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:9px;
  padding:16px clamp(20px,2.6vw,30px);border-top:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.2)}
.fstep{position:relative;padding:12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);transition:border-color .45s,background .45s,transform .45s var(--ease)}
.fstep.on{border-color:rgba(255,138,89,.42);background:rgba(227,93,38,.11);transform:translateY(-3px)}
.fstep-t{display:flex;align-items:center;gap:8px}
.fstep-t .ms-img{width:17px;height:17px;flex:0 0 auto}
.fstep-t b{width:17px;height:17px;border-radius:5px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.1);font-family:var(--mono);font-size:7px;color:#cfdde6;font-weight:500}
.fstep-t.has-logo b{display:none}
.fstep-t strong{font-size:12px;letter-spacing:-.02em;color:#e7eef3}
.fstep small{display:block;margin-top:7px;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#7f97a9}
.fstep em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:#8ba2b4;font-weight:640}
.fstep.on em{color:var(--orange2)}
@media (max-width:860px){
  .flow{grid-auto-flow:row}
}

/* ---------- section 5: proof ---------- */
.proof-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;align-items:stretch}
.qcard{position:relative;padding:clamp(30px,3.4vw,44px);border-radius:22px;background:#fff;
  border:1px solid var(--line);box-shadow:0 34px 74px -52px rgba(14,36,56,.8);
  display:flex;flex-direction:column}
.qmark{position:absolute;top:-20px;left:clamp(24px,3vw,42px);width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;background:var(--orange);color:#fff;
  box-shadow:0 16px 32px -16px rgba(227,93,38,.95)}
.qmark svg{width:19px;height:19px}
.qcard blockquote{margin:0;font-size:clamp(18px,2.2vw,25px);line-height:1.5;letter-spacing:-.03em;
  font-weight:700;color:var(--ink);text-wrap:balance}
.qfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:26px;
  border-top:1px solid var(--line)}
.qav{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--orange2),var(--orange));color:#fff;font-size:15px;font-weight:800;
  box-shadow:0 14px 28px -14px rgba(227,93,38,.9)}
.qwho strong{display:block;font-size:15.5px;letter-spacing:-.025em;color:var(--ink)}
.qwho small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.qtags{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.qtags b{padding:6px 12px;border-radius:99px;background:var(--mist2);border:1px solid var(--line);
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--body);font-weight:500}

.facts{display:grid;gap:12px;align-content:stretch}
.fact{position:relative;overflow:hidden;padding:20px 22px;border-radius:18px;
  background:linear-gradient(150deg,var(--navy),var(--deep));color:#fff;
  display:flex;align-items:baseline;gap:14px;flex:1;
  box-shadow:0 24px 50px -40px rgba(6,29,49,.9)}
.fact::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:rgba(227,93,38,.18);filter:blur(28px)}
.fact strong{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;line-height:1;color:#fff;position:relative;z-index:1}
.fact span{font-size:12.5px;line-height:1.45;color:#a3b7c5;font-weight:650;position:relative;z-index:1}
.fact:nth-child(2)::after{background:rgba(84,216,160,.16)}
.fact:nth-child(3)::after{background:rgba(59,154,225,.16)}
.fact:nth-child(4)::after{background:rgba(124,108,240,.16)}

.served{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:clamp(28px,3.2vw,40px)}
.served a{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:99px;
  background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);
  font-size:13px;font-weight:680;transition:transform .28s var(--ease),border-color .28s,color .28s}
.served a svg{width:15px;height:15px;color:var(--sc)}
.served a:hover{transform:translateY(-3px);border-color:var(--sc);color:var(--sc)}

/* the closing line types itself in when the section arrives */
.typer{display:inline-flex;align-items:baseline;gap:2px;min-height:1.1em}
.typer-t{white-space:pre-wrap}
.typer-c{display:inline-block;width:.06em;min-width:2px;height:.82em;border-radius:2px;
  background:currentColor;transform:translateY(.04em);
  animation:caret 1s steps(1,end) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.typer.done .typer-c{animation:none;opacity:0;transition:opacity .5s ease .2s}
@media (prefers-reduced-motion:reduce){.typer-c{display:none}}


/* ==========================================================================
   XEE Agent — launcher and panel
   ========================================================================== */
.agent-fab{position:fixed;right:clamp(16px,2.2vw,30px);bottom:clamp(16px,2.2vw,30px);z-index:70;
  display:inline-flex;align-items:center;justify-content:flex-start;overflow:hidden;
  width:62px;height:62px;padding:0;border:0;border-radius:99px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:750;letter-spacing:-.02em;color:#fff;
  background:radial-gradient(120% 120% at 32% 26%,#ef7440,var(--orange) 56%,#d2511d);
  box-shadow:0 10px 30px -6px rgba(227,93,38,.5),0 22px 60px -18px rgba(227,93,38,.6);
  transition:width .42s var(--ease),transform .4s var(--ease),box-shadow .4s,
             opacity .25s,visibility .25s}
.agent-fab::after{content:"";position:absolute;inset:-18%;border-radius:99px;z-index:-1;
  pointer-events:none;background:radial-gradient(circle,rgba(227,93,38,.3),transparent 66%);
  filter:blur(10px)}
.agent-fab:hover{width:168px;transform:translateY(-3px);
  box-shadow:0 14px 34px -6px rgba(227,93,38,.58),0 28px 68px -18px rgba(227,93,38,.7)}
.agent-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.agent-fab.hid{opacity:0;visibility:hidden;transform:scale(.9)}
.af-i{display:grid;place-items:center;width:62px;height:62px;flex:0 0 auto}
.af-i svg{width:28px;height:28px;filter:drop-shadow(0 2px 5px rgba(120,36,8,.4))}
.agent-fab b{white-space:nowrap;opacity:0;transform:translateX(-6px);padding-right:22px;
  transition:opacity .3s ease,transform .34s var(--ease)}
.agent-fab:hover b{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .agent-fab{transition:none}
  .agent-fab:hover{width:62px;transform:none}
  .agent-fab b{display:none}
}

.agent{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:71;
  display:flex;flex-direction:column;width:min(384px,calc(100vw - 28px));height:min(548px,calc(100vh - 40px));
  border-radius:22px;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 40px 90px -36px rgba(14,36,56,.6);
  opacity:0;transform:translateY(14px) scale(.98);transform-origin:100% 100%;
  transition:opacity .26s ease,transform .3s var(--ease)}
.agent.on{opacity:1;transform:none}
/* display:flex above would otherwise defeat the hidden attribute */
.agent[hidden]{display:none}
.ag-h{display:flex;align-items:center;gap:11px;padding:14px 14px 13px;
  background:linear-gradient(140deg,var(--navy),var(--deep));color:#fff}
.ag-av{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(145deg,var(--orange2),var(--orange));
  box-shadow:0 10px 22px -10px var(--orange)}
.ag-av svg{width:16px;height:16px}
.ag-t{min-width:0;flex:1}
.ag-t strong{display:block;font-size:14px;letter-spacing:-.028em}
.ag-t small{display:block;margin-top:1px;font-family:var(--mono);font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:#8fa6b8}
.ag-x{appearance:none;border:0;cursor:pointer;display:grid;place-items:center;
  width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.08);color:#cfe0ec;
  transition:background .25s,color .25s}
.ag-x:hover{background:rgba(255,255,255,.16);color:#fff}
.ag-x svg{width:13px;height:13px}
.ag-log{flex:1;overflow-y:auto;padding:16px 14px 6px;display:flex;flex-direction:column;gap:11px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.ag-log::-webkit-scrollbar{width:6px}
.ag-log::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.ag-m{max-width:88%;padding:11px 13px;border-radius:14px;font-size:13.4px;line-height:1.62;
  animation:agIn .34s var(--ease) both}
@keyframes agIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ag-bot{align-self:flex-start;background:var(--mist);color:var(--ink);font-weight:520;
  border:1px solid var(--line);border-bottom-left-radius:5px}
.ag-bot b{font-weight:800;letter-spacing:-.02em}
.ag-you{align-self:flex-end;color:#fff;font-weight:600;border-bottom-right-radius:5px;
  background:linear-gradient(140deg,var(--orange2),var(--orange))}
.ag-links{display:grid;gap:6px;margin-top:11px}
.ag-links a{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 11px;border-radius:9px;text-decoration:none;font-size:12.5px;font-weight:700;
  color:var(--orange);background:#fff;border:1px solid color-mix(in srgb,var(--orange) 32%,transparent);
  transition:background .25s,border-color .25s}
.ag-links a:hover{background:color-mix(in srgb,var(--orange) 8%,#fff);
  border-color:var(--orange)}
.ag-links svg{width:12px;height:12px;flex:0 0 auto}
.ag-alt{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:12px;font-weight:700}
.ag-alt a{color:var(--steel);text-decoration:none;border-bottom:1px solid var(--line)}
.ag-alt a:hover{color:var(--orange);border-color:var(--orange)}
.ag-dots{display:inline-flex;gap:4px;padding:2px 0}
.ag-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted-d);
  animation:agDot 1.1s ease-in-out infinite}
.ag-dots i:nth-child(2){animation-delay:.16s}
.ag-dots i:nth-child(3){animation-delay:.32s}
@keyframes agDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ag-sug{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 0}
.ag-sug button{appearance:none;cursor:pointer;font-family:inherit;padding:6px 10px;border-radius:99px;
  font-size:11.5px;font-weight:650;letter-spacing:-.01em;color:var(--steel);
  background:var(--mist);border:1px solid var(--line);
  transition:background .25s,border-color .25s,color .25s}
.ag-sug button:hover{background:#fff;border-color:var(--orange);color:var(--orange)}
.ag-in{display:flex;gap:8px;padding:12px 14px 14px;border-top:1px solid var(--line);margin-top:10px}
.ag-in input{flex:1;min-width:0;appearance:none;font-family:inherit;font-size:13.4px;color:var(--ink);
  padding:11px 13px;border-radius:11px;background:var(--mist);border:1px solid var(--line);
  transition:border-color .25s,background .25s}
.ag-in input:focus{outline:0;background:#fff;border-color:var(--orange)}
.ag-in button{appearance:none;border:0;cursor:pointer;display:grid;place-items:center;
  width:42px;height:42px;flex:0 0 auto;border-radius:11px;color:#fff;
  background:linear-gradient(140deg,var(--orange2),var(--orange));
  box-shadow:0 12px 24px -12px var(--orange);transition:transform .3s var(--ease)}
.ag-in button:hover{transform:translateY(-2px)}
.ag-in button svg{width:15px;height:15px}
@media (max-width:460px){
  .agent{right:8px;left:8px;bottom:8px;width:auto;height:min(76vh,560px)}
  .agent-fab{right:12px;bottom:12px;padding:10px 15px 10px 10px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .agent-fab,.agent,.ag-m{transition:none;animation:none}
  .af-dot::after,.ag-dots i{animation:none}
}

/* ---- Contact: a centred opening with the steps and both offices ---- */
.chero-shell .shell{display:block;text-align:center;max-width:var(--shell)}
.chero{display:grid;justify-items:center}
.chero .crumb{justify-content:center}
.chero .headline{max-width:18ch;margin-inline:auto}
.chero .hero-lede{max-width:600px;margin-inline:auto}
.chero-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin:clamp(34px,4vw,48px) 0 0;padding:0;width:100%;text-align:left}
.chero-steps li{position:relative;padding:20px 20px 18px;border-radius:17px;background:#fff;
  border:1px solid var(--line);box-shadow:0 20px 44px -36px rgba(14,36,56,.7);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.chero-steps li:hover{transform:translateY(-3px);border-color:var(--orange);
  box-shadow:0 26px 52px -34px rgba(227,93,38,.6)}
.chero-steps i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;
  font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:600;color:#fff;
  background:linear-gradient(145deg,var(--orange2),var(--orange));
  box-shadow:0 10px 20px -12px var(--orange)}
.chero-steps strong{display:block;margin-top:13px;font-size:15px;letter-spacing:-.03em;color:var(--ink)}
.chero-steps span{display:block;margin-top:7px;font-size:13.2px;line-height:1.62;color:var(--body)}
/* both offices and the inbox, on one aligned row */
.chero-reach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-top:14px;width:100%;text-align:left}
.creach{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:15px;
  text-decoration:none;background:var(--mist);border:1px solid var(--line);
  transition:transform .35s var(--ease),border-color .3s,background .3s}
.creach:hover{transform:translateY(-3px);background:#fff;
  border-color:color-mix(in srgb,var(--rc) 55%,transparent)}
.creach-i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;flex:0 0 auto;
  background:color-mix(in srgb,var(--rc) 13%,transparent);color:var(--rc);
  border:1px solid color-mix(in srgb,var(--rc) 26%,transparent)}
.creach-i svg{width:15px;height:15px}
.creach-t{min-width:0}
.creach-t small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.creach-t strong{display:block;margin-top:3px;font-size:14.5px;letter-spacing:-.028em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the closing band lists the offices as rows, so the numbers line up */
.callrows{display:grid;gap:8px;margin-top:18px;max-width:420px}
.callrow{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:12px;
  padding:10px 14px;border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s,background .3s}
.callrow:hover{transform:translateX(3px);background:#fff;border-color:var(--orange)}
.cr-c{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.cr-n{font-size:15px;font-weight:750;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.callrow svg{width:13px;height:13px;color:var(--orange);opacity:.55}
.callrow:hover svg{opacity:1}
@media (max-width:900px){
  .chero-steps,.chero-reach{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .chero-steps li,.creach,.callrow{transition:none}
}
/* ---- Contact: no opening band, so the first section carries the clearance ---- */
.sec.ctop{padding-top:clamp(128px,12vw,168px)}
.sec.ctop .crumb{margin-bottom:18px}
.chead{font-size:clamp(27px,3.3vw,39px);line-height:1.14;letter-spacing:-.02em;margin:14px 0 18px;max-width:23ch}
@media(max-width:900px){.sec.ctop{padding-top:clamp(104px,20vw,128px)}}

/* ---- Across All Sectors — a compact strip, detail on hover ---- */

.sect-wrap{margin-top:clamp(40px,4.6vw,62px)}
.sect-head{text-align:center;max-width:560px;margin:0 auto clamp(18px,2.1vw,26px)}
.sect-head h2.sect-h2{margin:11px 0 8px;font-size:clamp(20px,2.2vw,27px);letter-spacing:-.036em}
.sect-head p{margin:0;color:#9db2c2;font-size:.83rem;line-height:1.6}
.sect-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.sect{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;
  border-radius:13px;text-decoration:none;overflow:hidden;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  transition:transform .4s var(--ease),border-color .3s,background .3s,box-shadow .3s}
.sect::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--sc) 30%, transparent), transparent 64%)}
.sect::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;
  background:var(--sc);transform:scaleY(0);transform-origin:50% 0;transition:transform .4s var(--ease)}
.sect:hover{transform:translateY(-3px);background:rgba(255,255,255,.085);
  border-color:color-mix(in srgb, var(--sc) 55%, transparent);
  box-shadow:0 14px 30px -20px color-mix(in srgb, var(--sc) 80%, transparent)}
.sect:hover::before{opacity:1}
.sect:hover::after{transform:scaleY(1)}
.sect-i{position:relative;flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:color-mix(in srgb, var(--sc) 24%, transparent);color:#fff;
  border:1px solid color-mix(in srgb, var(--sc) 46%, transparent);transition:transform .4s var(--ease)}
.sect-i svg{width:13px;height:13px}
.sect:hover .sect-i{transform:scale(1.08)}
.sect-t{position:relative;min-width:0}
.sect-t b{display:block;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:-.018em;line-height:1.25}
/* the sector tiles carry the name alone */
.sect-grid.in .sect{animation:sectIn .55s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes sectIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sect-t small{transition:none}
  .sect-grid.in .sect{animation:none}
}
.sect-all{text-align:center;margin-top:clamp(24px,2.8vw,34px)}
.proofdk .sect-all .btn.ghost{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.05)}
.proofdk .sect-all .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
@media (max-width:1180px){ .sect-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:820px){ .sect-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .sect-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .sect{padding:14px 15px}
  .sect-grid{grid-template-columns:1fr}
}

/* ---------- section 6: partner strip ---------- */
.partners{display:grid;grid-template-columns:minmax(210px,.8fr) 1fr 1fr;gap:16px;align-items:center}
.partners-t strong{display:block;font-size:17px;letter-spacing:-.03em;color:var(--ink);max-width:18ch}
.partners-t small{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);max-width:24ch;line-height:1.55}
.pbadge{display:flex;align-items:center;gap:14px;padding:19px 22px;border-radius:16px;background:#fff;
  border:1px solid var(--line);box-shadow:0 18px 40px -36px rgba(14,36,56,.6);
  transition:transform .3s var(--ease),border-color .3s}
.pbadge:hover{transform:translateY(-3px);border-color:#c9d9e4}
.pbadge .ms-mark{width:24px;height:24px;flex:0 0 auto}
.pbadge strong{display:block;font-size:14.5px;letter-spacing:-.025em;color:var(--ink)}
.pbadge small{display:block;margin-top:3px;font-size:12px;color:var(--muted);line-height:1.5}
.pbadge>svg{width:17px;height:17px;color:var(--mint);margin-left:auto;flex:0 0 auto}
@media (max-width:980px){.partners{grid-template-columns:1fr}}

/* ---------- section 7: contact ---------- */
.reach-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(30px,3.4vw,42px)}
.rcard{display:flex;align-items:center;gap:13px;padding:18px 20px;border-radius:16px;background:#fff;
  border:1px solid var(--line);text-decoration:none;color:inherit;text-align:left;
  box-shadow:0 18px 40px -36px rgba(14,36,56,.6);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
a.rcard:hover{transform:translateY(-4px);border-color:var(--rc);box-shadow:0 26px 48px -32px var(--rc)}
.rcard .mark{width:38px;height:38px;border-radius:12px;background:var(--rcs);border-color:var(--rc);color:var(--rc)}
.rcard .mark svg{width:17px;height:17px}
.rcard small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.rcard strong{display:block;margin-top:3px;font-size:13.5px;letter-spacing:-.022em;color:var(--ink);word-break:break-word}
@media (max-width:980px){.reach-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.reach-row{grid-template-columns:1fr}}

/* ---------- inner pages: capability cards replace the numbered list ------- */
.capcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.capcard{position:relative;overflow:hidden;padding:26px 24px;border-radius:19px;background:#fff;
  border:1px solid var(--line);box-shadow:0 18px 42px -38px rgba(14,36,56,.65);
  transition:transform .32s var(--ease),border-color .32s,box-shadow .32s}
.capcard:hover{transform:translateY(-4px);border-color:var(--ac);box-shadow:0 26px 50px -34px var(--acs)}
.capcard i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-style:normal;
  background:linear-gradient(150deg,var(--ac,var(--orange)),var(--ac2,var(--orange2)));color:#fff;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  box-shadow:0 12px 24px -14px var(--ac,var(--orange))}
.capcard p{margin-top:16px;font-size:14.8px;line-height:1.62;font-weight:620;
  letter-spacing:-.011em;color:var(--ink)}
/* capability cards: accent wash + a hairline that draws on hover */
.capcard::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--ac),var(--ac2));transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.capcard:hover::before{transform:scaleX(1)}
.capcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(120% 120% at 100% 0%, var(--acs), transparent 60%)}
.capcard:hover::after{opacity:1}

/* the credentials strip that closes every inner page */
.credsec{padding-top:0}
.credbar{position:relative;display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;
  border:1px solid var(--line);border-radius:22px;background:#fff;
  box-shadow:0 30px 60px -46px rgba(14,36,56,.7)}
.credbar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--ac),var(--ac2),var(--ac))}
.credi{position:relative;padding:clamp(22px,2.6vw,32px) 18px;text-align:center;
  animation:credIn .6s var(--ease) both;animation-delay:var(--d,0s)}
.credi+.credi::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--line)}
.credi b{display:block;font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.045em;
  background:linear-gradient(150deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;
  color:transparent;line-height:1}
.credi span{display:block;margin-top:9px;font-size:12.5px;font-weight:660;line-height:1.45;color:var(--muted)}
@keyframes credIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:900px){.credbar{grid-template-columns:repeat(2,1fr)}
  .credi+.credi::before{display:none}
  .credi{border-top:1px solid var(--line)}
  .credi:nth-child(-n+2){border-top:0}
  .credi:nth-child(odd)+.credi{border-left:1px solid var(--line)}
  .credi:last-child{grid-column:1/-1}}
@media (max-width:460px){.credbar{grid-template-columns:1fr}
  .credi{border-top:1px solid var(--line);border-left:0!important}
  .credi:first-child{border-top:0}}

@media (max-width:1080px){.capcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.capcards{grid-template-columns:1fr}}

/* ---------- events: team moments, collapsed by default ---------- */
.mom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,20px);align-items:start}
.mom{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 24px 50px -40px rgba(14,36,56,.5);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.mom:hover{transform:translateY(-3px);box-shadow:0 34px 60px -40px rgba(14,36,56,.6)}
.mom-ph{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;overflow:hidden;
  cursor:zoom-in;background:var(--mist2)}
.mom-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.mom-ph::after{content:"";position:absolute;inset:auto 0 0;height:45%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,16,28,.55))}
.mom-ph:hover img{transform:scale(1.05)}
.mom-ph:hover .tmx-gz,.mom-ph:focus-visible .tmx-gz{opacity:1;transform:none}
.mom-type{position:absolute;left:12px;bottom:12px;z-index:2;padding:5px 11px;border-radius:99px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.mom-b{padding:18px 20px 16px}
.mom-b h3{margin:0;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.mom-b>p{margin:7px 0 0;font-size:14px;line-height:1.6;color:var(--body)}
.mom-more{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.mom-more summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;
  font-size:13.5px;font-weight:700;color:var(--orange)}
.mom-more summary::-webkit-details-marker{display:none}
.mom-more summary svg{width:15px;height:15px;transform:rotate(90deg);transition:transform .3s var(--ease)}
.mom-more[open] summary svg{transform:rotate(-90deg)}
.mom-more[open] summary span{font-size:0}
.mom-more[open] summary span::after{content:"Show less";font-size:13.5px}
.mom-x p{margin:10px 0 0;font-size:13.8px;line-height:1.65;color:var(--body)}
.mom-x ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.mom-x li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink)}
.mom-x li svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--orange)}
@media (max-width:1080px){.mom-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.mom-grid{grid-template-columns:1fr}}

/* ---------- insights: article cards + reader ---------- */
.res-art{cursor:pointer}
.rcov-img{background:#0d2440}
.rcov-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.res-art:hover .rcov-img img{transform:scale(1.05)}
.res-list .res-art:not(.res-feat) .rcov{aspect-ratio:16/10}
.res-list .res-art .rcov img{object-position:center 30%}
.res-cat{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);font-weight:600}
.res-read{margin-top:16px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--ac);cursor:pointer}
.res-read svg{width:15px;height:15px;transition:transform .25s}
.res-art:hover .res-read svg{transform:translateX(4px)}
.ar-lb{position:fixed;inset:0;z-index:2000;background:rgba(8,20,34,.66);backdrop-filter:blur(6px);
  overflow-y:auto;padding:clamp(0px,3vw,40px) clamp(0px,3vw,32px);opacity:0;transition:opacity .28s}
.ar-lb.on{opacity:1}
.ar-sheet{position:relative;max-width:900px;margin:0 auto;background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);transform:translateY(18px);transition:transform .35s var(--ease)}
.ar-lb.on .ar-sheet{transform:none}
.ar-x{position:absolute;right:16px;top:16px;z-index:3;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.35);background:rgba(10,26,44,.55);color:#fff;cursor:pointer}
.ar-x svg{width:18px;height:18px}
.ar-hero{position:relative;min-height:280px;display:flex;align-items:flex-end;background:#0d2440;color:#fff}
.ar-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.ar-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,36,64,.96) 0%,rgba(13,36,64,.75) 50%,rgba(13,36,64,.15) 100%)}
.ar-hero-t{position:relative;z-index:1;padding:clamp(28px,5vw,52px)}
.ar-cat{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#ff8a4c;font-weight:600}
.ar-hero h2{margin:12px 0 0;max-width:20ch;font-size:clamp(26px,4vw,40px);line-height:1.12;letter-spacing:-.03em;color:#fff}
.ar-hero h2::after{content:"";display:block;width:56px;height:4px;margin-top:18px;background:var(--ac)}
.ar-by{display:block;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ar-body{padding:clamp(24px,5vw,52px)}
.ar-lede{font-size:clamp(16px,1.6vw,18px);line-height:1.6;font-weight:650;color:var(--ink)}
.ar-body section{margin-top:clamp(34px,4vw,48px)}
.ar-k{display:flex;align-items:center;gap:12px}
.ar-k b{font-size:20px;color:var(--ac);font-weight:800}
.ar-k span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ar-body h3{margin-top:8px;font-size:clamp(20px,2.2vw,25px);letter-spacing:-.025em;line-height:1.25;color:var(--ink)}
.ar-body section>p{margin-top:10px;font-size:15px;line-height:1.7;color:var(--body)}
.ar-q{display:flex;gap:16px;margin:26px 0 0;padding:6px 0 6px 0}
.ar-q>span{font-size:58px;line-height:.9;color:var(--ac);font-weight:800}
.ar-q p{margin:0;padding-left:16px;border-left:2px solid var(--line);font-size:clamp(16px,1.7vw,19px);font-weight:700;line-height:1.5;color:var(--ink)}
.ar-q em{font-style:normal;color:var(--ac)}
.ar-pil{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);border-radius:14px;overflow:hidden}
.ar-pil>div{padding:20px 18px;background:#0d2440;color:#fff}
.ar-pil>div:nth-child(2){background:var(--ac)}
.ar-pil>div:nth-child(3){background:#eef2f6;color:var(--ink)}
.ar-pil b{font-size:20px;font-weight:800;color:#ff8a4c}
.ar-pil>div:nth-child(2) b{color:#fff}
.ar-pil h4{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.ar-pil p{margin-top:8px;font-size:12.5px;line-height:1.5;opacity:.85}
.ar-hub{position:relative;margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px) clamp(90px,16vw,200px);
  padding:10px clamp(0px,4vw,40px)}
.ar-hub::before{content:"";position:absolute;left:50%;top:50%;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;
  border:1px solid var(--line);box-shadow:0 0 0 22px #fff,0 0 0 23px var(--line)}
.ar-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;background:#0d2440;color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;
  box-shadow:0 0 0 6px #fff,0 0 0 7px var(--line)}
.ar-hub>div{position:relative;z-index:1;padding:14px 16px;background:#f5f7fa;border:1px solid var(--line);border-left:3px solid var(--ac);border-radius:6px}
.ar-hub i{display:block;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);font-weight:600}
.ar-hub>div>b{display:block;margin-top:4px;font-size:14px;color:var(--ink)}
.ar-hub>div>p{margin-top:6px;font-size:12px;line-height:1.5;color:var(--body)}
.ar-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:end}
.ar-steps li>div{position:relative;height:clamp(90px,14vw,150px);display:flex;flex-direction:column;justify-content:space-between;
  padding:12px 14px;background:#d6dde6;color:#0d2440}
.ar-steps li:nth-child(1)>div{height:clamp(70px,9vw,90px)}
.ar-steps li:nth-child(2)>div{height:clamp(85px,11vw,115px);background:#98a8bb}
.ar-steps li:nth-child(3)>div{background:#0d2440;color:#fff;height:clamp(100px,13vw,140px)}
.ar-steps li:nth-child(4)>div{background:var(--ac);color:#fff;height:clamp(115px,15vw,165px)}
.ar-steps b{font-size:26px;font-weight:800;line-height:1}
.ar-steps span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.ar-steps p{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--body)}
.ar-pr{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ar-pr>div{padding:16px 18px;background:#f5f7fa;border-radius:10px}
.ar-pr h4{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ar-pr h4::before{content:"";width:8px;height:8px;background:var(--ac);flex:none}
.ar-pr p{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--body)}
.ar-stack{margin-top:22px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.ar-stack span{display:grid;place-items:center;text-align:center;min-height:48px;padding:10px 8px;background:#0d2440;color:#fff;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.ar-stack span:nth-child(even){background:var(--ac)}
.ar-cta{margin-top:clamp(34px,4vw,48px);display:grid;grid-template-columns:1.6fr 1fr;border-radius:16px;overflow:hidden}
.ar-cta>div{padding:clamp(24px,3.5vw,36px);background:var(--ac);color:#fff}
.ar-cta .ar-cat{color:rgba(255,255,255,.85)}
.ar-cta h3{margin-top:10px;color:#fff}
.ar-cta p{margin-top:8px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.92)}
.ar-cta .btn{margin-top:18px;background:#fff;color:var(--ac)}
.ar-cta ul{list-style:none;margin:0;padding:clamp(24px,3.5vw,36px);background:#0d2440;display:flex;flex-direction:column;justify-content:center;gap:16px}
.ar-cta li{display:flex;align-items:center;gap:10px;color:#fff}
.ar-cta li svg{width:17px;height:17px;color:#ff8a4c;flex:none}
.ar-cta li a{color:#fff;font-weight:700;font-size:14.5px;text-decoration:none}
.ar-note{margin-top:16px;font-size:12px;color:var(--muted)}
@media (max-width:760px){
  .ar-sheet{border-radius:0}
  .ar-pil,.ar-steps{grid-template-columns:1fr 1fr}
  .ar-hub{grid-template-columns:1fr;gap:10px;padding:0}
  .ar-hub::before,.ar-core{display:none}
  .ar-pr,.ar-cta{grid-template-columns:1fr}
  .ar-stack{grid-template-columns:1fr 1fr}
  .ar-steps li>div{height:auto!important;min-height:84px}
}
@media (prefers-reduced-motion:reduce){.ar-lb,.ar-sheet,.rcov-img img{transition:none}}

/* drawn covers */
.rcov-art::after{display:none}
.rcov.rcov-art{background:#0b1f38}
.rcov-art:not(.rcov-ai) img{opacity:.55}
.rcov-art:not(.rcov-ai)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 8%,rgba(227,93,38,.34),transparent 55%),
             radial-gradient(90% 80% at 10% 100%,rgba(40,90,150,.35),transparent 60%)}
.rc-ill{position:absolute;inset:0;z-index:2;padding:5% 6%;pointer-events:none}
.rcov .rc-ill svg{position:static;display:block;width:100%;height:100%;transform:none;transition:transform .7s var(--ease);
  font-family:var(--sans);filter:drop-shadow(0 14px 24px rgba(4,14,28,.35))}
.res-art:hover .rcov .rc-ill svg{transform:scale(1.035)}
.rcov-ai .rc-ill svg{filter:none}
.rc-tag{position:absolute;right:14px;top:13px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;
  border:1.5px solid rgba(255,255,255,.85);border-radius:5px;background:rgba(13,36,64,.35);backdrop-filter:blur(4px);
  font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#fff}
.rc-tag i{width:8px;height:8px;background:#e35d26}
.cv-flow{animation:cvFlow 1.4s linear infinite}
.cv-float{animation:cvFloat 5.5s ease-in-out infinite alternate}
.cv-bob{animation:cvFloat 3.2s ease-in-out infinite alternate}
.cv-spin{transform-origin:200px 126px;animation:cvSpin 30s linear infinite}
.cv-pulse{transform-origin:270px 80px;animation:cvPulse 2.6s ease-in-out infinite}
@keyframes cvFlow{to{stroke-dashoffset:-22}}
@keyframes cvFloat{from{transform:translateY(2px)}to{transform:translateY(-4px)}}
@keyframes cvSpin{to{transform:rotate(360deg)}}
@keyframes cvPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.55}}
.ar-ill{position:absolute;right:0;top:0;bottom:0;width:50%;z-index:1;padding:34px 40px 30px 0}
.ar-ill svg{display:block;width:100%;height:100%;font-family:var(--sans);filter:drop-shadow(0 14px 24px rgba(4,14,28,.4))}
.ar-hero.has-ill .ar-hero-t{max-width:54%}
@media (max-width:760px){.ar-ill{display:none}.ar-hero.has-ill .ar-hero-t{max-width:none}}
@media (prefers-reduced-motion:reduce){.cv-flow,.cv-float,.cv-bob,.cv-spin,.cv-pulse{animation:none}}

/* ---------- recognition: designation cards ---------- */
.rcg{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:0 30px 60px -44px rgba(14,36,56,.65);transition:transform .35s var(--ease),box-shadow .35s}
.rcg:hover{transform:translateY(-4px);box-shadow:0 36px 70px -40px rgba(14,36,56,.7)}
.rcg-h{position:relative;overflow:hidden;padding:clamp(24px,3vw,34px);color:#fff;
  background:radial-gradient(110% 120% at 100% 0%,rgba(227,93,38,.42),transparent 55%),linear-gradient(150deg,#12305a,#0b1f38)}
.rcg-alt .rcg-h{background:radial-gradient(110% 120% at 100% 0%,rgba(0,164,239,.32),transparent 55%),linear-gradient(150deg,#12305a,#0b1f38)}
.rcg-h::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);background-size:16px 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000);mask-image:linear-gradient(90deg,transparent 35%,#000)}
.rcg-id{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.rcg-id .a2-ms{width:24px;height:24px;padding:4px;box-sizing:content-box;background:#fff;border-radius:7px}
.rcg-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.rcg-h h3{position:relative;z-index:1;margin-top:18px;font-size:clamp(21px,2.2vw,26px);letter-spacing:-.03em;line-height:1.2;color:#fff;max-width:24ch}
.rcg{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.rcg-h{display:flex;flex-direction:column;justify-content:flex-start}
.rcg-h p{position:relative;z-index:1;margin-top:10px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82);max-width:46ch}
.rcg-big{position:relative;z-index:1;margin-top:20px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rcg-big b{font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#ff8a4c}
.rcg-alt .rcg-big b{color:#5cc8ff}
.rcg-big small{font-size:.42em;font-weight:700;letter-spacing:0;margin-left:4px;color:rgba(255,255,255,.75)}
.rcg-big span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.rcg-ic{position:absolute;right:clamp(20px,3vw,30px);top:clamp(20px,3vw,28px);z-index:1;width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;background:linear-gradient(140deg,#ff9a5c,#e35d26);box-shadow:0 14px 30px -12px rgba(227,93,38,.8)}
.rcg-alt .rcg-ic{background:linear-gradient(140deg,#4fc3ff,#0078d4);box-shadow:0 14px 30px -12px rgba(0,120,212,.8)}
.rcg-ic svg{width:26px;height:26px;color:#fff}
.rcg-b{flex:1;display:flex;flex-direction:column;padding:clamp(22px,3vw,32px)}
.rcg-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#e35d26;font-weight:600}
.rcg-alt .rcg-k{color:#0078d4}
.rcg-b ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px}
.rcg-b li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;font-size:14.5px;line-height:1.5;color:var(--body);
  transition:background .25s}
.rcg-b li:hover{background:var(--mist)}
.rcg-b li svg{flex:none;width:22px;height:22px;padding:4px;margin-top:-1px;border-radius:50%;color:#fff;background:#e35d26}
.rcg-alt .rcg-b li svg{background:#0078d4}
.rcg-b li b{color:var(--ink);font-weight:750}
.rcg-chips{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.rcg-chips b{padding:7px 13px;border-radius:99px;background:var(--mist);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink)}
@media (max-width:600px){.rcg-ic{width:44px;height:44px;border-radius:13px}.rcg-ic svg{width:21px;height:21px}}

/* ---------- success stories: live story + coming soon ---------- */
.rcov.rcov-story{background:radial-gradient(90% 120% at 85% 0%,rgba(230,43,61,.38),transparent 55%),linear-gradient(150deg,#14315a,#0b1f38);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px}
.rcov-story::after{display:none}
.rcov-story::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);background-size:16px 16px}
.cs-plate{position:relative;z-index:1;display:grid;place-items:center;width:min(78%,300px);padding:18px 26px;border-radius:18px;background:#fff;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.65)}
.cs-plate img{display:block;width:100%;height:auto;max-height:84px;object-fit:contain}
.cs-ms{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cs-ms .slogo{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;font-size:12px}
.cs-live{position:absolute;left:16px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 7px;border-radius:99px;
  background:rgba(35,153,90,.2);border:1px solid rgba(80,210,140,.5);color:#bff3d6;font-size:11px;font-weight:700}
.rcov .cs-live svg{position:static;inset:auto;width:15px;height:15px;padding:2px;border-radius:50%;background:#23995a;color:#fff;transform:none}
.res-story .res-cat{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);font-weight:600}
.cs-q{margin:18px 0 0;padding:16px 18px;border-radius:14px;background:var(--mist);border-left:3px solid #e62b3d}
.cs-q p{margin:0;font-size:14px;line-height:1.6;font-style:italic;color:var(--ink)}
.cs-q footer{margin-top:10px;display:flex;flex-direction:column}
.cs-q strong{font-size:13px;color:var(--ink)}
.cs-q small{font-size:12px;color:var(--muted)}
.res-list.res-lead .res-feat.res-story .rcov{flex:0 0 42%}
.res-soon{cursor:default;pointer-events:none;user-select:none}
.res-soon:hover{transform:none;border-color:var(--line)}
.res-soon:hover::before{transform:scaleX(0)}
.soon-in{display:flex;flex-direction:column;flex:1;filter:blur(5px) saturate(.8);opacity:.75}
.soon-b{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;border-radius:99px;background:rgba(255,255,255,.92);border:1px solid var(--line);
  box-shadow:0 16px 36px -18px rgba(14,36,56,.6);font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.soon-b i{width:8px;height:8px;border-radius:50%;background:#e35d26;box-shadow:0 0 0 4px rgba(227,93,38,.18);animation:soonP 1.8s ease-in-out infinite}
@keyframes soonP{50%{box-shadow:0 0 0 7px rgba(227,93,38,.05)}}
@media (prefers-reduced-motion:reduce){.soon-b i{animation:none}}

/* ---------- insights: downloads ---------- */
.res-acts{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.res-acts .res-read{margin-top:0}
.res-dl{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 11px;border-radius:99px;border:1px solid var(--line);
  background:#fff;font:inherit;font-size:12.5px;font-weight:750;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.res-dl svg{width:15px;height:15px;color:#e35d26}
.res-dl:hover,.res-dl:focus-visible{background:#fff4ee;border-color:#e35d26;color:#c2461a}
.res-dl.busy,.ar-dl.busy{opacity:.6;cursor:progress}
.ar-dls{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.ar-dl{display:inline-flex;align-items:center;gap:8px;padding:10px 18px 10px 14px;border-radius:99px;border:0;background:#fff;
  font:inherit;font-size:13.5px;font-weight:800;color:#0d2440;cursor:pointer;box-shadow:0 12px 28px -14px rgba(0,0,0,.6);transition:background .2s,color .2s}
.ar-dl+.ar-dl{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:none}
.ar-dl svg{width:16px;height:16px;color:#e35d26}
.ar-dl:hover{background:#e35d26;color:#fff}.ar-dl:hover svg{color:#fff}

/* success story facts */
.cs-facts{margin:14px 0 4px;display:grid;grid-template-columns:auto auto 1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cs-facts>div{padding:10px 14px;border-right:1px solid var(--line)}
.cs-facts>div:last-child{border-right:0}
.cs-facts dt{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cs-facts dd{margin:3px 0 0;font-size:14px;font-weight:800;color:var(--ink)}
@media (max-width:600px){.cs-facts{grid-template-columns:1fr 1fr}.cs-facts>div:last-child{grid-column:1/-1;border-top:1px solid var(--line)}.cs-facts>div:nth-child(2){border-right:0}}

/* ---------- event detail sheet ---------- */
.ev{cursor:pointer}
.ev-cta{border:0;background:none;padding:0;font:inherit;cursor:pointer}
.evd-hero{position:relative;min-height:300px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.evd-hero .rcov{position:absolute;inset:0;aspect-ratio:auto}
.evd-hero .rcov-m{display:none}
.evd-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,56,.15),rgba(11,31,56,.9))}
.evd-hero-t{position:relative;z-index:1;padding:clamp(26px,5vw,48px)}
.evd-hero h2{margin:12px 0 0;max-width:24ch;font-size:clamp(24px,3.6vw,36px);line-height:1.15;letter-spacing:-.03em;color:#fff}
.evd-m{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.evd-m>div{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:99px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.evd-m svg{width:15px;height:15px;color:#ffb48a}
.evd-m dd{margin:0;font-size:13px;font-weight:700}
.evd-p{margin-top:10px;font-size:15px;line-height:1.7;color:var(--body)}
.evd-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.evd-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--body)}
.evd-list svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:#e35d26;color:#fff}
.evd-ph{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.evd-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.evd-tags{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.evd-tags b{padding:6px 12px;border-radius:99px;background:var(--mist);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted)}

/* success story with a photo: photo on top, story underneath */
.res-list.res-lead .res-feat.has-photo{flex-direction:column}
.rcov.cs-photo{display:block;width:100%;aspect-ratio:21/9;min-height:0;padding:0;border:0;cursor:zoom-in;background:#0b1f38}
.res-list.res-lead .res-feat.has-photo .rcov{flex:none;aspect-ratio:21/9;min-height:0}
.cs-photo::after{background:linear-gradient(180deg,rgba(6,22,38,0) 55%,rgba(6,22,38,.75))}
.cs-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;transition:transform .8s var(--ease)}
.res-story.has-photo:hover .cs-photo>img{transform:scale(1.03)}
.cs-cap{position:absolute;left:18px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:14px;font-weight:750;
  text-shadow:0 2px 10px rgba(0,0,0,.4)}
.cs-mini{display:grid;place-items:center;width:86px;height:36px;padding:4px 8px;border-radius:9px;background:#fff;box-sizing:border-box}
.cs-mini img{max-width:100%;max-height:100%;object-fit:contain}
.cs-photo .tmx-gz{z-index:2}
.cs-photo .cs-live{background:rgba(10,40,26,.78);border-color:rgba(80,210,140,.6);color:#d6ffe8;backdrop-filter:blur(6px)}
.rcov .tmx-gz svg{position:static;inset:auto;width:15px;height:15px;transform:none}
.cs-cols{margin-top:6px;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(18px,3vw,36px);align-items:start}
.cs-cols .cs-q{margin-top:12px}
.cs-ms2{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.cs-ms2 .slogo{font-size:12px}
@media (max-width:860px){.cs-cols{grid-template-columns:1fr}.rcov.cs-photo,.res-list.res-lead .res-feat.has-photo .rcov{aspect-ratio:16/10}
  .cs-cap span:last-child{display:none}}

/* featured event + coming soon events */
.ev-list .ev-feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(280px,32%) 1fr;min-height:420px}
.ev-feat .ev-cov.ev-poster{aspect-ratio:auto;height:100%;min-height:100%}
.ev-feat .ev-poster img{position:absolute;inset:0}
.ev-poster{position:relative;display:block;overflow:hidden;background:#eaf3fb}
.ev-poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.ev-feat:hover .ev-poster img{transform:scale(1.03)}
.ev-feat .ev-b{padding:clamp(26px,3.4vw,44px);justify-content:center}
.ev-feat h3{font-size:clamp(22px,2.4vw,30px);line-height:1.18;letter-spacing:-.03em}
.ev-feat p{font-size:15.5px;max-width:60ch}
.ev-feat .ev-date{left:18px;top:18px}
.ev-soon{cursor:default;pointer-events:none;user-select:none}
.ev-soon .soon-b{font-size:12.5px}
.evd-facts{margin-top:26px;grid-template-columns:repeat(3,1fr)}
.evd-poster{margin:26px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);max-width:460px}
.evd-poster img{display:block;width:100%;height:auto}
@media (max-width:860px){.ev-list .ev-feat{grid-template-columns:1fr;min-height:0}.ev-feat .ev-cov.ev-poster{aspect-ratio:4/5;height:auto}.evd-facts{grid-template-columns:1fr}.evd-facts>div{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- XEE E-Invoicing (multi-country) ---------- */
.ei-ms{display:inline-grid;place-items:center;width:22px;height:22px;flex:none}
.ei-ms .ms-img{width:100%;height:100%}
.ei-ms.has-logo>b{display:none}
.ei-ms.lg{width:40px;height:40px}
.ei-flag{display:block;width:30px;height:20px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(14,36,56,.12)}
.ei-flag.lg{width:48px;height:32px;border-radius:5px}
.ei-eyebrow{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 14px 7px 8px;border-radius:99px;background:#fff;
  border:1px solid var(--line);font-size:12.5px;font-weight:650;color:var(--muted);box-shadow:0 10px 24px -18px rgba(14,36,56,.5)}
.ei-eyebrow b{color:var(--ink);font-weight:800}
.ei-eyebrow>i{width:1px;height:14px;background:var(--line)}
@media (max-width:640px){.ei-eyebrow{border-radius:14px}.ei-eyebrow>i{display:none}}
.ei-h1{font-size:clamp(34px,4.6vw,58px);line-height:1.04}
.ei-h1 em{font-style:normal;color:#e35d26}
.ei-hero .hero-lede{margin-left:0;max-width:60ch}
.ei-acts{justify-content:flex-start;gap:12px}
.ei-acts .btn{font:inherit;font-weight:750;cursor:pointer}
/* hero diagram */
.ei-dia{position:relative;display:grid;grid-template-columns:1fr 34px 1.05fr 34px 1fr;align-items:center;gap:0;padding:clamp(18px,2.4vw,28px);
  border-radius:24px;background:linear-gradient(160deg,#ffffff,#f3f6fa);border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(14,36,56,.55)}
.ei-col{display:flex;flex-direction:column;gap:8px}
.ei-cap{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.ei-src-c,.ei-dst-c{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;background:#fff;border:1px solid var(--line);
  font-size:12px;line-height:1.25;color:var(--ink);box-shadow:0 8px 18px -16px rgba(14,36,56,.6)}
.ei-src-c b,.ei-dst-c b{font-weight:750}
.ei-src-c>i,.ei-dst-c>i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--mist);color:var(--navy);font-style:normal;flex:none}
.ei-src-c>i svg,.ei-dst-c>i svg{width:14px;height:14px}
.ei-txt{font-style:normal;font-weight:900;font-size:12px;color:var(--ink)}
.ei-dst-c>i{background:#eef3fb;color:#1f4f8a}
.ei-dst-c.ok>i{background:#e5f5ec;color:#1c8a52}
.ei-wire{position:relative;display:flex;flex-direction:column;justify-content:center;gap:34px;height:100%}
.ei-wire i:nth-child(2){background-image:repeating-linear-gradient(90deg,#1f4f8a 0 6px,transparent 6px 11px);animation-direction:reverse}
.ei-lg{background:#fff!important;border:1px solid var(--line)}
.ei-lg img{width:16px;height:16px;object-fit:contain}
.ei-lgimg{width:36px;height:36px;object-fit:contain}
.ei-flowkey{grid-column:1/-1;display:flex;justify-content:center;gap:18px;margin-top:14px;font-size:11.5px;font-weight:700;color:var(--muted)}
.ei-flowkey span{display:inline-flex;align-items:center;gap:7px}
.ei-flowkey i{width:18px;height:2px;background:repeating-linear-gradient(90deg,#e35d26 0 4px,transparent 4px 7px)}
.ei-flowkey span+span i{background:repeating-linear-gradient(90deg,#1f4f8a 0 4px,transparent 4px 7px)}
.ei-wire i{display:block;height:2px;background:repeating-linear-gradient(90deg,#e35d26 0 6px,transparent 6px 11px);background-size:22px 2px;
  animation:eiFlow 1.1s linear infinite;opacity:.85}
@keyframes eiFlow{to{background-position:22px 0}}
.ei-core{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px 12px;border-radius:20px;
  background:radial-gradient(120% 120% at 50% 0%,rgba(227,93,38,.16),transparent 60%),#0d2440;color:#fff;box-shadow:0 24px 50px -24px rgba(13,36,64,.8)}
.ei-core-m{display:grid;place-items:center;width:76px;height:76px}
.ei-core>b{font-size:14px;font-weight:800}
.ei-core-s{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#ffb48a}
/* country strip */
.ei-strip{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.ei-strip .shell{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ei-strip-l{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ei-strip-f{display:flex;flex-wrap:wrap;gap:8px}
.ei-sf{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border-radius:99px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:12.5px;font-weight:750;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.ei-sf .ei-flag{width:22px;height:15px}
.ei-sf:hover{border-color:#e35d26;background:#fff6f1}
.ei-sf-more{color:#c2461a;border-style:dashed;padding-left:12px}
/* country selector */
.ei-sel{display:grid;grid-template-columns:300px 1fr;gap:clamp(16px,2vw,24px);align-items:start}
.ei-tabs{display:flex;flex-direction:column;gap:6px}
.ei-tab{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;border:1px solid var(--line);background:#fff;text-align:left;
  font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.ei-tab span{display:flex;flex-direction:column;min-width:0}
.ei-tab b{font-size:14px;color:var(--ink)}
.ei-tab small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ei-tab:hover{border-color:#f0b394}
.ei-tab.on{border-color:#e35d26;background:#fff6f1;box-shadow:0 12px 26px -20px rgba(227,93,38,.9)}
.ei-tab-more{border-style:dashed}
.ei-tab-more>i{display:grid;place-items:center;width:30px;height:20px;color:#e35d26}
.ei-tab-more>i svg{width:18px;height:18px}
.ei-pan{padding:clamp(22px,3vw,34px);border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -46px rgba(14,36,56,.6)}
.ei-pan-h{display:flex;align-items:center;gap:16px}
.ei-fw{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#e35d26;font-weight:600}
.ei-pan-h h3{margin-top:2px;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em;color:var(--ink)}
.ei-pan-p{margin-top:14px;font-size:15.5px;line-height:1.65;color:var(--body);max-width:68ch}
.ei-pan-g{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px)}
.ei-k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px}
.ei-ul,.ei-ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ei-ul li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--body)}
.ei-ul svg{flex:none;width:20px;height:20px;padding:4px;border-radius:50%;background:#e35d26;color:#fff}
.ei-ol{counter-reset:eio}
.ei-ol li{counter-increment:eio;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--body)}
.ei-ol li::before{content:counter(eio);flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#0d2440;color:#fff;font-size:11px;font-weight:800}
.ei-dates{margin-top:22px;padding:16px;border-radius:14px;background:var(--mist)}
.ei-dates>div{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ei-dates p{margin:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:1.4;color:var(--body)}
.ei-dates b{font-size:15px;color:var(--ink)}
.ei-pan-f{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ei-pan-f .btn{font:inherit;font-weight:750;cursor:pointer}
.ei-pan-f small{font-size:11.5px;color:var(--muted);max-width:44ch}
/* ERP tiles */
.ei-erps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ei-erp{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:24px;border-radius:18px;background:#fff;border:1px solid var(--line);font:inherit}
.ei-erp-m{display:grid;place-items:center;min-width:52px;height:52px;padding:0 10px;border-radius:14px;background:var(--mist);color:var(--navy)}
.ei-erp-m>svg{width:24px;height:24px}
.ei-txt.lg{font-size:15px;letter-spacing:.02em}
.ei-erp h3{margin-top:16px;font-size:17px;color:var(--ink);letter-spacing:-.02em}
.ei-erp p{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--body)}
.ei-erp-other{cursor:pointer;border-style:dashed;transition:border-color .2s,background .2s}
.ei-erp-other:hover{border-color:#e35d26;background:#fff6f1}
.ei-erp-go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:#e35d26}
.ei-erp-go svg{width:14px;height:14px}
.ei-fine{margin-top:14px;font-size:11.5px;color:var(--muted)}
/* capabilities */
.ei-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ei-capc{padding:24px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s}
.ei-capc:hover{transform:translateY(-3px);border-color:#f0b394}
.ei-capi{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1.5px solid #f3c2a8;color:#e35d26}
.ei-capi svg{width:20px;height:20px}
.ei-capc h3{margin-top:16px;font-size:16px;color:var(--ink)}
.ei-out{margin-top:6px;font-size:14.5px;font-weight:800;color:var(--ink)}
.ei-capc p:not(.ei-out){margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--body)}
/* lifecycle */
.ei-life{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:relative}
.ei-life::before{content:"";position:absolute;left:4%;right:4%;top:22px;height:2px;background:repeating-linear-gradient(90deg,#c9d3df 0 6px,transparent 6px 11px)}
.ei-st{position:relative;padding:0 6px;text-align:center;transition:opacity .3s}
.ei-st-n{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;margin:0 auto;border-radius:50%;background:#fff;border:2px solid #c9d3df;
  font-weight:800;color:var(--ink);transition:background .35s,border-color .35s,color .35s,transform .35s}
.ei-st b{display:block;margin-top:12px;font-size:15px;color:var(--ink)}
.ei-st p{margin-top:6px;font-size:12.8px;line-height:1.55;color:var(--body)}
.ei-st.on .ei-st-n{background:#e35d26;border-color:#e35d26;color:#fff;transform:scale(1.08);box-shadow:0 0 0 7px rgba(227,93,38,.14)}
.ei-ovl{margin-top:30px;padding:clamp(18px,2.4vw,26px);border-radius:20px;background:#fff;border:1px solid var(--line)}
.ei-ovl-tabs{display:flex;flex-wrap:wrap;gap:6px}
.ei-ot{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:99px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:12.5px;font-weight:750;color:var(--ink);cursor:pointer}
.ei-ot .ei-flag{width:20px;height:13px}
.ei-ot.on{border-color:#0d2440;background:#0d2440;color:#fff}
.ei-ovl-b{margin-top:16px}
.ei-ovl-h{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.ei-ovl-f{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ei-ovl-f li{position:relative;padding:12px 14px;border-radius:12px;background:var(--mist);font-size:13px;font-weight:700;line-height:1.4;color:var(--ink)}
.ei-ovl-f li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-top:2px solid #e35d26;border-right:2px solid #e35d26;transform:translateY(-50%) rotate(45deg);z-index:1}
.ei-ovl-n{margin-top:12px;font-size:12.5px;color:var(--muted)}
/* why + peppol */
.ei-why{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:center}
.ei-why h2{margin-top:10px;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.12;color:var(--ink)}
.ei-why>div>p{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--body)}
.ei-diff{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.ei-diff li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:var(--mist);font-size:15px;font-weight:750;color:var(--ink)}
.ei-diff b{color:#e35d26;font-size:13px}
.ei-peppol{padding:clamp(22px,3vw,30px);border-radius:20px;background:#0d2440;color:#fff;box-shadow:0 30px 60px -36px rgba(13,36,64,.9)}
.ei-peppol .ei-k{color:#ffb48a}
.ei-peppol h3{font-size:20px;color:#fff;letter-spacing:-.02em}
.ei-peppol p{margin-top:10px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82)}
.ei-peppol p b{color:#fff}
.ei-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;font-weight:800;color:#ffb48a;text-decoration:none}
.ei-link svg{width:14px;height:14px}
.ei-peppol small{display:block;margin-top:14px;font-size:11.5px;color:rgba(255,255,255,.6)}
/* form */
.ei-formsec{background:linear-gradient(180deg,#fff,#fff6f1)}
.ei-form-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start}
.ei-form-g h2{margin-top:10px;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.12;color:var(--ink)}
.ei-form-g>div>p{margin:14px 0 18px;font-size:15.5px;line-height:1.7;color:var(--body)}
.ei-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:clamp(20px,3vw,30px);border-radius:22px;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -44px rgba(14,36,56,.6)}
.ei-form label{display:flex;flex-direction:column;gap:6px}
.ei-form label>span,.ei-fc legend{font-size:12px;font-weight:750;color:var(--ink)}
.ei-form input:not([type=checkbox]),.ei-form select,.ei-form textarea{font:inherit;font-size:14px;padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:#fbfcfe;color:var(--ink)}
.ei-form input:focus,.ei-form select:focus,.ei-form textarea:focus{outline:2px solid rgba(227,93,38,.35);border-color:#e35d26}
.ei-full{grid-column:1/-1}
.ei-fc{grid-column:1/-1;margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px}
.ei-fc legend{margin-bottom:8px}
.ei-form .ei-chk{flex-direction:row;align-items:center;gap:7px;padding:6px 11px 6px 8px;border-radius:99px;border:1px solid var(--line);cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink)}
.ei-chk input{accent-color:#e35d26;margin:0}
.ei-chk .ei-flag{width:20px;height:13px}
.ei-chk:has(input:checked){border-color:#e35d26;background:#fff6f1}
.ei-form-f{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ei-form-f .btn{font:inherit;font-weight:800;cursor:pointer;border:0}
.ei-form-f small{font-size:11.5px;color:var(--muted)}
.ei-sent{margin:0;padding:12px 14px;border-radius:12px;background:#e5f5ec;color:#1c6b42;font-size:13.5px;font-weight:650}
@media (max-width:1080px){.ei-erps,.ei-caps{grid-template-columns:1fr 1fr}.ei-life{grid-template-columns:repeat(3,1fr);row-gap:26px}.ei-life::before{display:none}
  .ei-dates>div{grid-template-columns:1fr 1fr}}
@media (max-width:980px){.ei-sel,.ei-why,.ei-form-g{grid-template-columns:1fr}
  .ei-tabs{flex-direction:row;overflow-x:auto;padding-bottom:4px}.ei-tab{flex:0 0 auto}.ei-tab small{display:none}}
@media (max-width:640px){.ei-dia{grid-template-columns:1fr;gap:10px}.ei-wire{flex-direction:row;height:22px;gap:0;justify-content:center}
  .ei-wire i{width:2px;height:22px;background:repeating-linear-gradient(180deg,#e35d26 0 6px,transparent 6px 11px);background-size:2px 22px}
  .ei-wire i:not(:first-child){display:none}
  .ei-erps,.ei-caps,.ei-pan-g,.ei-form{grid-template-columns:1fr}.ei-life{grid-template-columns:1fr 1fr}
  .ei-ovl-f{grid-template-columns:1fr}.ei-ovl-f li:not(:last-child)::after{right:50%;top:auto;bottom:-9px;transform:translateX(50%) rotate(135deg)}}
@media (prefers-reduced-motion:reduce){.ei-wire i{animation:none}}

/* ---------- About (refresh) ---------- */
.ab-chip-l{position:absolute;left:50%;top:100%;margin-top:8px;transform:translateX(-50%);white-space:nowrap;font-style:normal;
  font-size:10.5px;font-weight:750;letter-spacing:.01em;color:var(--muted)}
.ab-chip-x{background:linear-gradient(140deg,#ff8a4c,#e35d26);border-color:transparent}
.ab-chip-x b{color:#fff;font-size:11px;letter-spacing:.06em}
.ab-cred.ab-cred6{grid-template-columns:repeat(6,1fr)}
.ab-cred.ab-cred6>div:nth-child(5){--cd:.41s}.ab-cred.ab-cred6>div:nth-child(6){--cd:.5s}
.ab-cred.ab-cred6>div{padding-left:10px;padding-right:10px}
.ab-cred6>div+div::before{top:24%;bottom:24%}
.a2-claim em{font-style:normal}
.a2-man-more{margin-top:16px;font-size:15px;line-height:1.75;opacity:.82}
.abx-eco{display:grid;gap:clamp(18px,2.2vw,26px)}
.abx-row{display:grid;grid-template-columns:180px 1fr;gap:clamp(14px,2vw,24px);align-items:start}
.abx-g{position:sticky;top:90px;padding-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#e35d26;font-weight:600}
.abx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.abx-cards.n1{grid-template-columns:1fr}
.abx-cards.n1 .abx-c{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center}
.abx-cards.n1 .abx-c>*:not(.abx-ms){grid-column:2}
.abx-cards.n1 .abx-ms{grid-row:1 / span 4}
.abx-c{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:22px;border-radius:18px;background:#fff;border:1px solid var(--line);
  text-decoration:none;color:inherit;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
a.abx-c:hover{transform:translateY(-3px);border-color:#f0b394;box-shadow:0 22px 40px -30px rgba(14,36,56,.6)}
.abx-m{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--mist);flex:none}
.abx-m .ms-img{width:26px;height:26px}
.abx-m.has-logo>b{display:none}
.abx-m.sm{width:38px;height:38px}
.abx-m.sm .ms-img{width:22px;height:22px}
.abx-ms{display:flex;gap:6px}
.abx-x{background:none!important;border:0!important}
.abx-sub{margin-top:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.abx-c h3{margin-top:6px;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.abx-c p{margin-top:6px;font-size:13.8px;line-height:1.6;color:var(--body)}
.abx-go{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:#e35d26}
.abx-go svg{width:13px;height:13px}
.abx-life{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.abx-life::before{content:"";position:absolute;left:24px;right:24px;top:25px;height:2px;background:linear-gradient(90deg,#e35d26,#0d2440)}
.abx-life li{position:relative;padding:0 4px}
.abx-n{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#0d2440;color:#fff;
  font-family:var(--mono);font-weight:700;font-size:13px;box-shadow:0 0 0 6px var(--mist)}
.abx-life li:first-child .abx-n{background:#e35d26}
.abx-i{position:absolute;top:0;right:4px;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;border:1px solid var(--line);color:#e35d26}
.abx-i svg{width:15px;height:15px}
.abx-life h3{margin-top:16px;font-size:16.5px;letter-spacing:-.02em;color:var(--ink)}
.abx-life p{margin-top:6px;font-size:13.6px;line-height:1.6;color:var(--body)}
.abx-rech{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.abx-rech .ab-recc-i{margin:0}
.abx-mslogo{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 10px;border-radius:10px;background:#fff}
.abx-mslogo svg{width:22px;height:22px}
.abx-mslogo b{font-family:'Segoe UI',var(--sans);font-size:17px;font-weight:600;color:#737373;letter-spacing:-.01em}
.abx-more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;font-weight:800;color:#e35d26;text-decoration:none}
.abx-more svg{width:15px;height:15px}
.abx-ind{display:flex;flex-wrap:wrap;gap:8px}
.abx-ind span,.abx-ind a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);
  font-size:13.5px;font-weight:750;color:var(--ink);text-decoration:none;transition:border-color .2s,color .2s}
.abx-ind a svg{width:13px;height:13px;color:#e35d26}
.abx-ind a:hover{border-color:#e35d26;color:#c2461a}
.abx-ind span{cursor:default}
.abx-logos{margin-top:clamp(22px,2.6vw,30px);display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.abx-logo{position:relative;display:grid;place-items:center;height:78px;border-radius:14px;background:#fff;border:1px solid var(--line);overflow:hidden}
.abx-logo b{font-size:12px;color:var(--muted)}
.abx-logo.has-img b{display:none}
.abx-logo i{position:absolute;inset:10px 14px;background:var(--img) center/contain no-repeat}
@media (max-width:1080px){.abx-life{grid-template-columns:repeat(3,1fr);row-gap:26px}.abx-life::before{display:none}.abx-logos{grid-template-columns:repeat(4,1fr)}
  .ab-cred.ab-cred6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.abx-row{grid-template-columns:1fr}.abx-g{position:static}.abx-cards{grid-template-columns:1fr}.abx-cards.n1 .abx-c{display:flex}}
@media (max-width:600px){.abx-life{grid-template-columns:1fr}.abx-logos{grid-template-columns:repeat(2,1fr)}.ab-cred.ab-cred6{grid-template-columns:1fr 1fr}
  .ab-chip-l{font-size:8.5px}}

/* ---------- recognition refresh ---------- */
.rc-badge{gap:16px}
.rc-badge-i{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;flex:none;background:#fff;border:1px solid var(--line)}
.rc-badge-i svg{width:28px;height:28px}
.rc-means{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rc-means article{padding:24px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.rc-mi{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff4ee;color:#e35d26}
.rc-mi svg{width:20px;height:20px}
.rc-means h3{margin-top:16px;font-size:16.5px;color:var(--ink);letter-spacing:-.02em}
.rc-means p{margin-top:8px;font-size:13.8px;line-height:1.6;color:var(--body)}
.rc-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px}
.rc-col{padding:clamp(20px,2.6vw,28px);border-radius:20px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.rc-col:first-child{background:#0d2440;border-color:#0d2440}
.rc-lab{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#e35d26;margin-bottom:4px}
.rc-col:first-child .rc-lab{color:#ffb48a}
.rc-des{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:15px}
.rc-des svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:#e35d26;color:#fff}
.rc-col small{margin-top:auto;padding-top:8px;font-size:11.5px;color:var(--muted)}
.rc-col:first-child small{color:rgba(255,255,255,.6)}
.rc-exp{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rc-x{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:14px;background:var(--mist);text-align:center;font-size:12.5px;font-weight:750;color:var(--ink)}
.rc-xm{display:grid;place-items:center;width:34px;height:34px}
.rc-xm .ms-img{width:30px;height:30px}
.rc-xm.has-logo>b{display:none}
@media (max-width:1080px){.rc-means{grid-template-columns:1fr 1fr}.rc-split{grid-template-columns:1fr}}
@media (max-width:600px){.rc-means{grid-template-columns:1fr}.rc-exp{grid-template-columns:1fr 1fr}}

/* ---------- team refresh ---------- */
.tnp-chips{flex-wrap:wrap}
.tm-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tm-fc{padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;font-weight:750;color:var(--ink);cursor:pointer;transition:all .2s}
.tm-fc:hover{border-color:#f0b394}
.tm-fc.on{background:#0d2440;border-color:#0d2440;color:#fff}
.tm-disc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tm-d{padding:24px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:opacity .3s,transform .3s var(--ease),border-color .3s,filter .3s}
.tm-d:hover{transform:translateY(-3px);border-color:#f0b394}
.tm-d.dim{opacity:.32;filter:grayscale(.6)}
.tm-dh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tm-di{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#fff4ee;color:#e35d26}
.tm-di svg{width:21px;height:21px}
.tm-dms{display:flex;gap:4px}
.tm-dm{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--mist)}
.tm-dm .ms-img{width:18px;height:18px}
.tm-dm.has-logo>b{display:none}
.tm-dx{width:auto;padding:0 7px;font-size:9.5px;font-weight:900;letter-spacing:.04em;color:#e35d26;background:#fff4ee}
.tm-d h3{margin-top:18px;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.tm-d p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--body)}
.tm-two{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
.tm-two h2{margin-top:10px;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.12;color:var(--ink)}
.tm-two>p{font-size:16.5px;line-height:1.75;color:var(--body)}
.tm-cult{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tm-cult article{padding:22px;border-radius:18px;background:var(--mist);border:1px solid var(--line)}
.tm-cult i{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:700;color:#e35d26}
.tm-cult h3{margin-top:10px;font-size:16.5px;color:var(--ink);letter-spacing:-.02em}
.tm-cult p{margin-top:6px;font-size:14px;color:var(--body)}
.tm-ctas{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:1080px){.tm-disc{grid-template-columns:1fr 1fr}.tm-cult{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.tm-disc,.tm-two{grid-template-columns:1fr}}
@media (max-width:480px){.tm-cult{grid-template-columns:1fr}}

/* ---------- careers refresh ---------- */
.cr-hero .hero-lede{margin-left:0}
.cr-em{font-style:normal;color:#e35d26}
.cr-acts{justify-content:flex-start;gap:12px}
.cr-acts .btn{font:inherit;font-weight:750;cursor:pointer}
.cr-photo{margin:0;position:relative}
.cr-photo .tmx-shot{position:relative;display:block;width:100%;padding:0;border:0;border-radius:24px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;
  box-shadow:0 40px 80px -46px rgba(14,36,56,.7)}
.cr-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cr-photo figcaption{margin-top:10px;font-size:12.5px;color:var(--muted)}
.cr-empty{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:clamp(22px,3vw,34px);border-radius:22px;
  background:#fff;border:1px dashed #f0b394}
.cr-empty-i{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#fff4ee;color:#e35d26}
.cr-empty-i svg{width:26px;height:26px}
.cr-empty h3{font-size:19px;color:var(--ink);letter-spacing:-.02em}
.cr-empty p{margin-top:6px;font-size:14.5px;line-height:1.65;color:var(--body);max-width:70ch}
.cr-jobs{display:grid;gap:14px}
.cr-job{padding:24px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.cr-job-h{display:flex;justify-content:space-between;gap:10px}
.cr-id{font-family:var(--mono);font-size:10px;color:var(--muted)}
.cr-job h3{margin-top:10px;font-size:19px;color:var(--ink)}
.cr-sum{margin-top:10px;font-size:14.5px;color:var(--body)}
.cr-more{margin-top:14px}
.crx-hero .hero-actions{justify-content:center}
.hero.cdark .crx-hero .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;box-shadow:none}
.hero.cdark .crx-hero .btn.ghost:hover{background:rgba(255,255,255,.1)}
.cr-jd{margin-top:14px;padding:clamp(18px,2.4vw,26px);border-radius:16px;background:var(--mist);border:1px solid var(--line)}
.cr-jd h4{margin:18px 0 8px;font-size:15px;color:var(--ink)}
.cv .cr-jd p{margin:0;max-width:none}
.cv-list .cv{align-items:flex-start}
.cv-list .cv-go{margin-top:38px}
.cr-jd ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cr-jd li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--body)}
.cr-jd li svg{flex:none;width:18px;height:18px;padding:3px;margin-top:2px;border-radius:50%;background:#e35d26;color:#fff}
.cr-more[open] summary svg{transform:rotate(-90deg)}
.cr-also{margin-top:18px;font-size:14px;color:var(--muted)}
.cr-also a{color:#e35d26;font-weight:750}
.cr-more summary{cursor:pointer;font-weight:750;color:#e35d26;list-style:none;display:inline-flex;gap:6px;align-items:center}
.cr-more summary svg{width:13px;height:13px;transform:rotate(90deg)}
.cr-cols{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:14px;color:var(--body)}
.cr-apply{margin-top:16px}
@media (max-width:760px){.cr-empty{grid-template-columns:1fr}.cr-cols{grid-template-columns:1fr}}

/* ---------- Copilot hero orbit ---------- */
.cpo{display:flex;flex-direction:column;align-items:center;gap:22px}
.cpo-stage{position:relative;width:min(100% - 56px,460px);aspect-ratio:1}
.cpo-glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(110,94,255,.28),rgba(0,164,239,.14) 45%,transparent 70%);filter:blur(10px)}
.cpo-ring{position:absolute;inset:0;border-radius:50%;animation:cpoSpin var(--dur) linear infinite}
.cpo-ring.outer{border:1px dashed rgba(31,79,138,.22)}
.cpo-ring.inner{inset:19%;border:1px solid rgba(31,79,138,.16);animation-direction:reverse}
.cpo-item{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translateY(-50cqw) rotate(calc(-1 * var(--a)))}
.cpo-stage{container-type:inline-size}
.cpo-ring.inner .cpo-item{transform:rotate(var(--a)) translateY(-31cqw) rotate(calc(-1 * var(--a)))}
.cpo-chip{display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:14px;background:#fff;
  border:1px solid var(--line);box-shadow:0 14px 26px -16px rgba(14,36,56,.55);animation:cpoSpin var(--dur) linear infinite reverse}
.cpo-ring.inner .cpo-chip{animation-direction:normal}
.cpo-chip .ms-img{width:26px;height:26px}
.cpo-chip.has-logo>b{display:none}
.cpo-chip b{font-size:10px;color:var(--muted)}
.cpo-core{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;display:grid;place-items:center}
.cpo-logo{position:relative;z-index:2;display:grid;place-items:center;width:104px;height:104px;border-radius:30px;background:#fff;
  box-shadow:0 26px 50px -20px rgba(70,60,200,.55),0 0 0 8px rgba(255,255,255,.6)}
.cpo-logo .ms-img{width:62px;height:62px}
.cpo-msq svg{width:56%;height:56%}
.cpo-pi.cpo-msq svg{width:22px;height:22px}
.cpo-logo.has-logo>b{display:none}
.cpo-pulse{position:absolute;inset:6px;border-radius:34px;border:2px solid rgba(110,94,255,.45);animation:cpoPulse 3s ease-out infinite}
.cpo-pulse.b{animation-delay:1.5s;border-color:rgba(0,164,239,.4)}
.cpo-prompt{display:flex;align-items:center;gap:10px;width:min(100%,520px);padding:12px 16px 12px 12px;border-radius:16px;background:#fff;
  border:1px solid var(--line);box-shadow:0 22px 44px -32px rgba(14,36,56,.7)}
.cpo-pi{display:grid;place-items:center;width:30px;height:30px;flex:none}
.cpo-pi .ms-img{width:24px;height:24px}
.cpo-pi.has-logo>b{display:none}
.cpo-pt{position:relative;flex:1;height:22px;overflow:hidden}
.cpo-pt em{position:absolute;left:0;top:0;font-style:normal;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;
  opacity:0;animation:cpoType 9s infinite;animation-delay:calc(var(--i)*3s)}
.cpo-caret{width:2px;height:18px;background:#6e5eff;animation:cpoBlink 1s steps(2) infinite}
@keyframes cpoSpin{to{transform:rotate(360deg)}}
@keyframes cpoPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
@keyframes cpoType{0%{opacity:0;transform:translateY(10px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes cpoBlink{50%{opacity:0}}
@media (max-width:600px){.cpo-chip{width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:11px}.cpo-chip .ms-img{width:20px;height:20px}
  .cpo-core{width:90px;height:90px;margin:-45px 0 0 -45px}.cpo-logo{width:78px;height:78px;border-radius:22px}.cpo-logo .ms-img{width:46px;height:46px}
  .cpo-pt em{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.cpo-ring,.cpo-chip,.cpo-pulse,.cpo-caret{animation:none}.cpo-pt em{animation:none}.cpo-pt em:first-child{opacity:1}}

/* ---------- Copilot families ---------- */
.cpf-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.cpf-tab{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#fff;text-align:left;
  font:inherit;cursor:pointer;transition:border-color .25s,box-shadow .25s,background .25s}
.cpf-tab b{display:block;font-size:14.5px;color:var(--ink);line-height:1.25}
.cpf-tab small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)}
.cpf-tab:hover{border-color:color-mix(in srgb,var(--gc) 45%,var(--line))}
.cpf-tab.on{border-color:var(--gc);background:color-mix(in srgb,var(--gc) 6%,#fff);box-shadow:0 16px 30px -24px var(--gc)}
.cpf-tl,.cpf-hl,.cpf-il{display:grid;place-items:center;flex:none;border-radius:12px;background:#fff;border:1px solid var(--line)}
.cpf-tl{width:40px;height:40px}.cpf-tl .ms-img{width:24px;height:24px}
.cpf-tl.has-logo>b,.cpf-hl.has-logo>b,.cpf-il.has-logo>b{display:none}
.cpf-pane{display:none;padding:clamp(22px,3vw,34px);border-radius:22px;background:#fff;border:1px solid var(--line);
  box-shadow:0 30px 60px -46px rgba(14,36,56,.6);border-top:3px solid var(--gc)}
.cpf-pane.on{display:block;animation:cpfIn .45s var(--ease)}
@keyframes cpfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cpf-h{display:flex;gap:18px;align-items:flex-start;margin-bottom:22px}
.cpf-hl{width:60px;height:60px;border-radius:16px}.cpf-hl .ms-img{width:36px;height:36px}
.cpf-tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gc);font-weight:600}
.cpf-h h3{margin-top:4px;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.03em;color:var(--ink)}
.cpf-h p{margin-top:6px;max-width:70ch;font-size:15px;line-height:1.65;color:var(--body)}
.cpf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cpf-i{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:14px;background:var(--mist);border:1px solid transparent;transition:border-color .25s,transform .25s var(--ease)}
.cpf-i:hover{border-color:color-mix(in srgb,var(--gc) 40%,transparent);transform:translateY(-2px)}
.cpf-il{width:38px;height:38px}.cpf-il .ms-img{width:22px;height:22px}
.cpf-il b{font-size:10px;color:var(--muted)}
.cpf-x{background:none!important;border:0!important}
.cpf-i h4{font-size:14.5px;color:var(--ink);letter-spacing:-.01em}
.cpf-i p{margin-top:4px;font-size:13px;line-height:1.55;color:var(--body)}
@media (max-width:1080px){.cpf-nav{grid-template-columns:1fr 1fr}.cpf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cpf-nav,.cpf-grid{grid-template-columns:1fr}.cpf-h{flex-direction:column}}

/* ---------- "In short" intro, brought to life ---------- */
.ix{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(20px,4vw,64px);align-items:center;
  padding:clamp(28px,4vw,52px);border-radius:28px;background:linear-gradient(150deg,#fff,#f4f8fc);border:1px solid var(--line);
  box-shadow:0 40px 80px -60px rgba(14,36,56,.55)}
.ix::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(31,79,138,.12) 1px,transparent 1.3px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(110deg,transparent 40%,#000);mask-image:linear-gradient(110deg,transparent 40%,#000)}
.ix-blob{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;opacity:.55}
.ix-blob.a{width:320px;height:320px;right:-80px;top:-120px;background:color-mix(in srgb,var(--ac,#2f6fe8) 32%,transparent);animation:ixFloat 14s ease-in-out infinite alternate}
.ix-blob.b{width:260px;height:260px;left:-90px;bottom:-140px;background:rgba(227,93,38,.22);animation:ixFloat 18s ease-in-out infinite alternate-reverse}
.ix-l,.ix-r,.ix-marq{position:relative;z-index:1}
.ix-l h2{margin:14px 0 0;font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.035em;color:var(--ink)}
.ix-line{display:block;margin-top:20px;height:4px;width:0;border-radius:4px;background:linear-gradient(90deg,var(--ac,#2f6fe8),#e35d26)}
.rv.in .ix-line{animation:ixLine 1.2s .3s var(--ease) forwards}
.ix-r p{margin:0;color:var(--body);font-size:clamp(16px,1.5vw,18px);line-height:1.75}
.ix-marq{grid-column:1/-1;margin:clamp(6px,1vw,12px) calc(-1 * clamp(28px,4vw,52px)) 0;padding:6px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ix-track{display:flex;gap:10px;width:max-content;animation:ixMarq calc(var(--n) * 3.2s) linear infinite}
.ix-marq:hover .ix-track{animation-play-state:paused}
.ix-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:99px;background:#fff;border:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;box-shadow:0 10px 20px -18px rgba(14,36,56,.6)}
.ix-cl{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--mist)}
.ix-cl .ms-img{width:18px;height:18px}
.ix-cl.has-logo>b{display:none}
.ix-txt{padding-left:12px}
.ix-txt svg{width:16px;height:16px;padding:3px;border-radius:50%;background:var(--ac,#e35d26);color:#fff}
@keyframes ixFloat{to{transform:translate(-40px,40px) scale(1.12)}}
@keyframes ixLine{to{width:96px}}
@keyframes ixMarq{to{transform:translateX(-50%)}}
/* section heads: the accent bar draws itself in */
@media (min-width:1100px){
  .sec-head:not(.center)::after{content:"";position:absolute;left:calc(100% + clamp(60px,8vw,140px));top:10px;width:300px;height:170px;pointer-events:none;
    background-image:radial-gradient(color-mix(in srgb,var(--ac,#2f6fe8) 55%,transparent) 1.4px,transparent 1.8px);background-size:20px 20px;
    -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent);
    opacity:0;transition:opacity 1.2s .3s var(--ease);animation:shDots 16s linear infinite}
  .sec-head.rv.in:not(.center)::after,.sec-head:not(.rv):not(.center)::after{opacity:.85}
  .sec.dark .sec-head::after,.proofdk .sec-head::after,.a2-man .sec-head::after{display:none}
}
@keyframes shDots{to{background-position:200px 100px}}
@media (prefers-reduced-motion:reduce){.sec-head::after{animation:none}}
.sec-head.rv::before{width:0;transition:width 1s .2s var(--ease)}
.sec-head.rv.in::before{width:40px}
.sec-head.center.rv.in::before{width:64px}
@media (max-width:860px){.ix{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ix-blob,.ix-track{animation:none}.rv.in .ix-line{animation:none;width:96px}.sec-head.rv::before{transition:none;width:40px}}

/* ---------- XEE HR Copilot: animated answers ---------- */
.copx-l{justify-content:flex-start}
.hcx-win{width:100%;min-height:312px;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.hcx-q{align-self:flex-end;max-width:85%}
.hcx-q span{display:block;padding:8px 13px;border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,#ff8a4c,#e35d26);color:#fff;font-size:12.5px;font-weight:700}
.hcx-win:not(.ask) .hcx-q{opacity:0}
.hcx-win.ask .hcx-q{animation:hcxIn .35s var(--ease)}
.hcx-think{display:none;gap:5px;padding:10px 12px;align-self:flex-start;border-radius:12px;background:rgba(255,255,255,.08)}
.hcx-win.think .hcx-think{display:inline-flex}
.hcx-think i{width:6px;height:6px;border-radius:50%;background:#ffb48a;animation:hcxDot 1s infinite}
.hcx-think i:nth-child(2){animation-delay:.15s}.hcx-think i:nth-child(3){animation-delay:.3s}
.hcx-a{padding:2px 2px 0}
.hcx-win.done .hcx-a{animation:hcxIn .45s var(--ease)}
.hcx-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#ffb48a;margin-bottom:10px}
.hcx-note{margin-top:10px;font-size:11.5px;line-height:1.5;color:#a9c0d0}.hcx-note b{color:#fff}
.hcx-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end;height:96px}
.hcx-bars span{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.hcx-bars i{display:block;width:100%;height:var(--v);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#ff9a5c,#e35d26);
  transform-origin:bottom;transform:scaleY(0);animation:hcxGrow .7s var(--ease) forwards;animation-delay:calc(var(--i)*.08s)}
.hcx-bars span:nth-child(3) i,.hcx-bars span:nth-child(4) i{background:linear-gradient(180deg,#ffd0b0,#ff7a3d);box-shadow:0 0 18px rgba(255,138,76,.5)}
.hcx-bars b{font-size:9.5px;color:#8fa8bb;font-weight:700}
.hcx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hcx-kpis div{padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.07);opacity:0;animation:hcxIn .4s var(--ease) forwards;animation-delay:calc(var(--i)*.12s)}
.hcx-kpis small{display:block;font-size:10px;color:#8fa8bb}.hcx-kpis b{display:block;margin-top:2px;font-size:17px;color:#fff}
.hcx-kpis em{font-style:normal;font-size:10.5px;font-weight:800;color:#5fd99a}
.hcx-list,.hcx-rank{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.hcx-list li{position:relative;padding-left:16px;font-size:12px;color:#d6e2ec;opacity:0;animation:hcxIn .4s var(--ease) forwards;animation-delay:calc(var(--i)*.12s)}
.hcx-list li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:2px;background:#e35d26}
.hcx-rank{margin:0}
.hcx-rank li{display:grid;grid-template-columns:auto 1fr 70px 26px;gap:10px;align-items:center;padding:7px 9px;border-radius:11px;background:rgba(255,255,255,.06);
  opacity:0;animation:hcxIn .4s var(--ease) forwards;animation-delay:calc(var(--i)*.14s)}
.hcx-av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#ff9a5c,#c4420f);color:#fff;font-size:10.5px;font-weight:800}
.hcx-rank b{display:block;font-size:12.5px;color:#fff}.hcx-rank small{font-size:10.5px;color:#8fa8bb}
.hcx-sc{height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.hcx-sc i{display:block;height:100%;width:0;background:#ff8a4c;animation:hcxW .9s var(--ease) forwards;animation-delay:calc(var(--i)*.14s + .2s)}
.hcx-rank em{font-style:normal;font-size:12px;font-weight:800;color:#ffb48a;text-align:right}
.hcx-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.hcx-rings div{position:relative;opacity:0;animation:hcxIn .4s var(--ease) forwards;animation-delay:calc(var(--i)*.12s)}
.hcx-rings svg{width:72px;height:72px;transform:rotate(-90deg)}
.hcx-rings circle{fill:none;stroke:rgba(255,255,255,.1);stroke-width:5}
.hcx-rings circle.v{stroke:#ff8a4c;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;
  animation:hcxRing 1s var(--ease) forwards;animation-delay:calc(var(--i)*.12s + .2s)}
.hcx-rings b{position:absolute;left:0;right:0;top:26px;font-size:13px;color:#fff}
.hcx-rings small{display:block;margin-top:2px;font-size:10.5px;color:#8fa8bb}
.copx-prompts .hcx-p{position:relative;overflow:hidden;display:block;width:100%;padding:11px 16px;border:0;border-radius:11px;background:#fff;color:#0b2437;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.hcx-p:hover{transform:translateX(3px)}
.hcx-p.on{background:linear-gradient(135deg,#ff8a4c,#e35d26);color:#fff}
.hcx-p u{position:absolute;left:0;bottom:0;height:3px;width:0;background:rgba(255,255,255,.7)}
.hcx-p.run u{animation:hcxW 6.5s linear forwards}
@keyframes hcxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hcxDot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes hcxGrow{to{transform:scaleY(1)}}
@keyframes hcxW{to{width:var(--v,100%)}}
@keyframes hcxRing{to{stroke-dashoffset:calc(113.1 - 113.1 * var(--v) / 100)}}
@media (prefers-reduced-motion:reduce){.hcx-bars i{transform:none;animation:none}.hcx-kpis div,.hcx-list li,.hcx-rank li,.hcx-rings div{opacity:1;animation:none}
  .hcx-sc i{width:var(--v);animation:none}.hcx-rings circle.v{animation:none;stroke-dashoffset:calc(113.1 - 113.1 * var(--v) / 100)}}

/* ---------- journey rail, animated ---------- */
.jrny[data-n]::before{left:calc(50% / var(--n));right:calc(50% / var(--n))}
.jx-track{position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:27px;height:2px;z-index:0;pointer-events:none}
.pg .jstep.on:hover i{color:#fff}
.jx-fill{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width .9s var(--ease)}
.jx-dot{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ac);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--ac) 20%,transparent);transition:left .9s var(--ease);animation:jxPing 1.6s infinite}
.jstep i{position:relative}
.jstep.on i::after{content:"";position:absolute;inset:-6px;border-radius:21px;border:2px solid var(--ac);opacity:0;animation:jxRing 1.8s infinite}
.jstep.done i{background:color-mix(in srgb,var(--ac) 12%,#fff);border-color:color-mix(in srgb,var(--ac) 40%,transparent);color:var(--ac)}
.jstep .jx-bar{display:block;width:44px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.jstep .jx-bar u{display:block;height:100%;width:0;background:var(--ac)}
.jstep.on.run .jx-bar u{animation:jxBar var(--jt,4.6s) linear forwards}
.jsay.on{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(22px,3vw,32px)}
.jsay h3{margin:10px 0 0;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.03em;color:var(--ink)}
.jsay p{margin-top:10px;font-size:15.5px;line-height:1.7;color:var(--body)}
.jsay.on .jsay-t>*{animation:hcxIn .5s var(--ease) both}
.jsay.on .jsay-t>*:nth-child(2){animation-delay:.08s}.jsay.on .jsay-t>*:nth-child(3){animation-delay:.16s}
.jxv{position:relative;display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:220px;padding:18px;border-radius:18px;
  background:radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--ac) 10%,transparent),transparent 60%),var(--mist);border:1px solid var(--line);overflow:hidden}
.jxv-tag{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);
  box-shadow:0 12px 24px -20px rgba(14,36,56,.7);opacity:0;animation:hcxIn .45s var(--ease) 1.2s forwards}
.jxv-tag b{display:block;font-size:13px;color:var(--ink)}.jxv-tag small{display:block;font-size:11.5px;color:var(--muted)}
.jxv-tag>div,.jxv-tag b{flex:1}
.jxv-tag{display:grid;grid-template-columns:1fr auto;column-gap:10px}
.jxv-tag i{grid-row:1/span 2;grid-column:2;align-self:center;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#23995a;color:#fff}
.jxv-tag i svg{width:13px;height:13px}
/* route */
.jxv svg.jxv-route{display:block;width:100%!important;height:120px!important}
.jxv-route .bg{fill:none;stroke:var(--line);stroke-width:3}
.jxv-route .fg{fill:none;stroke:var(--ac);stroke-width:3;stroke-dasharray:400;stroke-dashoffset:400;animation:jxDraw 1.6s var(--ease) forwards}
.jxv-route .pin{fill:#fff;stroke:var(--ac);stroke-width:3;opacity:0;animation:hcxIn .3s var(--ease) forwards;animation-delay:calc(var(--i)*.35s)}
.jxv-route .car{fill:var(--ac)}
/* check-in */
.jxv-map{position:relative;height:130px;border-radius:14px;background:
  linear-gradient(90deg,rgba(14,36,56,.05) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(rgba(14,36,56,.05) 1px,transparent 1px) 0 0/22px 22px,#fff}
.jxv-map .pin{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);color:var(--ac);z-index:2;animation:jxDrop .6s var(--ease) both}
.jxv-map .pin svg{width:34px;height:34px}
.jxv-map .ring{position:absolute;left:50%;top:44%;width:16px;height:16px;margin:-8px;border-radius:50%;border:2px solid var(--ac);animation:jxWave 2s infinite}
.jxv-map .ring.b{animation-delay:1s}
.jxv-map .ph{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.jxv-map .ph i{width:30px;height:24px;border-radius:6px;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 40%,#fff),var(--ac));opacity:0;animation:hcxIn .3s forwards;animation-delay:calc(.6s + var(--i)*.2s)}
/* rows */
.jxv-rows{display:grid;gap:7px}
.jxv-rows p{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;border-radius:10px;background:#fff;font-size:12.5px;color:var(--ink);
  opacity:0;animation:hcxIn .35s var(--ease) forwards;animation-delay:calc(var(--i)*.18s)}
.jxv-rows p span{flex:1}.jxv-rows em{font-style:normal;color:var(--muted)}.jxv-rows b{font-weight:800}
.jxv-rows p.tot{background:var(--ac);color:#fff;animation-delay:.8s}
.jxv-rows .chip{padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--ac) 14%,#fff);color:var(--ac);font-size:10.5px}
.jxv-rows .mini{flex:0 0 80px;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.jxv-rows .mini i{display:block;height:100%;width:0;background:var(--ac);animation:hcxW .8s var(--ease) forwards;animation-delay:calc(var(--i)*.18s + .2s)}
/* pay */
.jxv-pay .bar{display:flex;height:16px;border-radius:9px;overflow:hidden;background:var(--line)}
.jxv-pay .bar i{display:block;height:100%;width:0;animation:hcxW .9s var(--ease) forwards}
.jxv-pay .bar .a{--v:60%;background:var(--ac)}.jxv-pay .bar .b{--v:40%;background:#0d2440;animation-delay:.6s}
.jxv-pay .leg{display:flex;gap:16px;font-size:12px;color:var(--body)}
.jxv-pay .leg u{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:3px;background:var(--ac)}.jxv-pay .leg u.b{background:#0d2440}
.jxv-pay .coins{display:flex;gap:6px;height:40px;align-items:flex-end}
.jxv-pay .coins i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe08a,#e0a21a);box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);
  animation:jxCoin 1.6s var(--ease) infinite;animation-delay:calc(var(--i)*.2s)}
/* sync / queue */
.jxv-sync{display:flex;align-items:center;gap:10px;height:110px}
.jxv-sync .dev{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ac);flex:none}
.jxv-sync .dev svg{width:26px;height:26px}.jxv-sync .dev .ms-img{width:32px;height:32px}.jxv-sync .dev.has-logo>b{display:none}
.jxv-sync .lane{position:relative;flex:1;height:40px}
.jxv-sync .lane::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line)}
.jxv-sync .lane i{position:absolute;top:calc(50% - 9px);left:0;width:10px;height:10px;border-radius:3px;background:var(--ac);animation:jxRun 2.2s linear infinite;animation-delay:calc(var(--i)*.55s)}
.jxv-sync .lane i.r{top:calc(50% + 4px);background:#23995a;animation-direction:reverse}
/* scan */
.jxv-scan .code{position:relative;display:flex;gap:3px;align-items:stretch;height:70px;padding:10px 14px;border-radius:12px;background:#fff;overflow:hidden}
.jxv-scan .code i{width:var(--w);background:#0d2440}
.jxv-scan .beam{position:absolute;left:0;right:0;height:2px;background:#ff2f2f;box-shadow:0 0 12px 2px rgba(255,47,47,.6);animation:jxBeam 1.4s ease-in-out infinite alternate}
.jxv-scan .ok{display:flex;gap:6px;flex-wrap:wrap}
.jxv-scan .ok span{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;background:#fff;font-size:11.5px;font-weight:700;color:var(--ink);
  opacity:0;animation:hcxIn .3s forwards;animation-delay:calc(.4s + var(--i)*.25s)}
.jxv-scan .ok svg{width:13px;height:13px;color:#23995a}
/* bins / count */
.jxv-bins{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.jxv-bins i{height:38px;border-radius:7px;background:#fff;border:1px solid var(--line);opacity:0;animation:hcxIn .3s forwards;animation-delay:calc(var(--i)*.05s)}
.jxv-bins i.hit{background:var(--ac);border-color:var(--ac);animation:hcxIn .3s forwards,jxBlink 1s .8s infinite;animation-delay:.3s,.8s}
.jxv-bins i.okb{background:#e5f5ec;border-color:#bfe6cf}
.jxv-bins i.bad{background:#ffe8e3;border-color:#ff9c86;animation:hcxIn .3s forwards,jxShake .5s 1s 3;animation-delay:.2s,1s}
/* ship */
.jxv-ship{position:relative;height:100px;display:flex;align-items:flex-end;gap:6px}
.jxv-ship .box{width:40px;height:34px;border-radius:5px;background:linear-gradient(#e7b778,#c98f43);opacity:0;animation:hcxIn .3s forwards;animation-delay:calc(var(--i,0)*.2s)}
.jxv-ship .truck{position:absolute;bottom:0;left:55%;color:var(--ac);animation:jxDrive 3s ease-in-out infinite}
.jxv-ship .truck svg{width:46px;height:46px}
/* cert / calendar / rating / dist */
.jxv-cert{display:flex;align-items:center;gap:16px;height:100px}
.jxv-cert .prog{flex:1;height:12px;border-radius:8px;background:var(--line);overflow:hidden}
.jxv-cert .prog i{display:block;height:100%;width:0;--v:100%;background:linear-gradient(90deg,var(--ac),var(--ac2));animation:hcxW 1.1s var(--ease) forwards}
.jxv-cert .badge{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ac);color:#fff;transform:scale(0);animation:jxPop .5s var(--ease) 1.1s forwards}
.jxv-cert .badge svg{width:30px;height:30px}
.jxv-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.jxv-cal i{height:22px;border-radius:5px;background:#fff;opacity:0;animation:hcxIn .25s forwards;animation-delay:calc(var(--i)*.03s)}
.jxv-cal i.due{background:var(--ac);animation:hcxIn .25s forwards,jxBlink 1s 1s infinite}
.jxv-rate{display:flex;gap:8px;justify-content:center;padding:18px 0}
.jxv-rate i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--line);font-style:normal;font-weight:800;color:var(--muted)}
.jxv-rate i.on{animation:jxFill .3s forwards;animation-delay:calc(var(--i)*.2s)}
.jxv-dist{display:flex;align-items:flex-end;gap:10px;height:110px;padding:0 10px}
.jxv-dist i{flex:1;height:var(--v);border-radius:6px 6px 2px 2px;background:var(--ac);opacity:.85;transform-origin:bottom;transform:scaleY(0);animation:hcxGrow .6s var(--ease) forwards;animation-delay:calc(var(--i)*.1s)}
.jxv-pipe{display:flex;align-items:center;gap:8px;padding:28px 0}
.jxv-pipe span{padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted);animation:jxStage .4s forwards;animation-delay:calc(var(--i)*.5s)}
.jxv-pipe u{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--ac) 0 5px,transparent 5px 9px);background-size:18px 2px;animation:eiFlow 1.1s linear infinite}
.jxv-cv{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.jxv-cv i{height:44px;border-radius:7px;background:#fff;border:1px solid var(--line);position:relative;opacity:0;animation:hcxIn .25s forwards;animation-delay:calc(var(--i)*.06s)}
.jxv-cv i::before{content:"";position:absolute;left:7px;right:12px;top:9px;height:3px;border-radius:3px;background:var(--line);box-shadow:0 7px 0 var(--line),0 14px 0 var(--line)}
.jxv-cv i.m{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,#fff);animation:hcxIn .25s forwards,jxPop2 .4s 1s forwards}
@keyframes jxPing{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--ac) 8%,transparent)}}
@keyframes jxRing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
@keyframes jxBar{to{width:100%}}
@keyframes jxDraw{to{stroke-dashoffset:0}}
@keyframes jxDrop{from{opacity:0;transform:translate(-50%,-160%)}to{opacity:1;transform:translate(-50%,-100%)}}
@keyframes jxWave{0%{transform:scale(1);opacity:.9}100%{transform:scale(5);opacity:0}}
@keyframes jxCoin{0%,100%{transform:none}50%{transform:translateY(-10px)}}
@keyframes jxRun{from{left:0;opacity:0}10%{opacity:1}90%{opacity:1}to{left:calc(100% - 10px);opacity:0}}
@keyframes jxBeam{from{top:8px}to{top:calc(100% - 10px)}}
@keyframes jxBlink{50%{opacity:.45}}
@keyframes jxShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes jxDrive{0%{transform:translateX(-10px)}50%{transform:translateX(30px)}100%{transform:translateX(-10px)}}
@keyframes jxPop{to{transform:scale(1)}}
@keyframes jxPop2{to{transform:translateY(-4px);box-shadow:0 10px 18px -10px var(--ac)}}
@keyframes jxFill{to{background:var(--ac);border-color:var(--ac);color:#fff}}
@keyframes jxStage{to{background:color-mix(in srgb,var(--ac) 12%,#fff);border-color:var(--ac);color:var(--ac)}}
@media (max-width:860px){.jsay.on{grid-template-columns:1fr}.jx-track{display:none}}
@media (prefers-reduced-motion:reduce){.jxv *,.jxv-tag,.jx-dot,.jstep.on i::after{animation:none!important;opacity:1!important;transform:none!important}
  .jxv-route .fg{stroke-dashoffset:0}.jxv-pay .bar i,.jxv-cert .prog i,.jxv-rows .mini i{width:var(--v)}}

/* ---------- XEE WMS page ---------- */
.wm-pg{--ac:#12b5a5;--ac2:#2cd3c0;--acs:rgba(18,181,165,.12)}
.wm-hero{position:relative;overflow:hidden;padding:clamp(120px,11vw,150px) 0 clamp(56px,6vw,80px);color:#fff;
  background:radial-gradient(90% 80% at 85% 20%,rgba(18,181,165,.28),transparent 60%),linear-gradient(160deg,#081a2c,#0d2a44 55%,#0a2036)}
.wm-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(80% 70% at 60% 40%,#000,transparent);mask-image:radial-gradient(80% 70% at 60% 40%,#000,transparent)}
.wm-glow{position:absolute;width:520px;height:520px;left:-160px;bottom:-260px;border-radius:50%;background:rgba(227,93,38,.18);filter:blur(80px)}
.wm-hero-in{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:center}
.wm-copy .crumb{color:#7f9bb4}.wm-copy .crumb a{color:#9db6cc}
.wm-eye{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 14px 7px 8px;border-radius:99px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);font-size:12.5px;font-weight:650;color:#b9cbd8}
.wm-eye b{color:#fff}.wm-eye>i{width:1px;height:14px;background:rgba(255,255,255,.2)}
@media (max-width:640px){.wm-eye{border-radius:14px}.wm-eye>i{display:none}}
.wm-eye .amark{background:none;box-shadow:none}
.wm-copy h1{margin-top:22px;font-size:clamp(38px,5.4vw,66px);line-height:1.02;letter-spacing:-.045em;color:#fff}
.wm-copy h1 em{font-style:normal;background:linear-gradient(90deg,#2cd3c0,#12b5a5 60%,#7ee8da);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm-copy>p{margin-top:20px;max-width:56ch;font-size:clamp(15px,1.5vw,17px);line-height:1.75;color:#b3c6d6}
.wm-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.wm-btn{background:linear-gradient(135deg,#2cd3c0,#0b8f82)!important;box-shadow:0 20px 40px -20px rgba(18,181,165,.9)!important}
.wm-acts .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;font:inherit;font-weight:750;cursor:pointer}
.wm-acts .btn.ghost:hover{background:rgba(255,255,255,.08)}
.wm-kpis{position:relative;display:flex;gap:clamp(18px,3vw,36px);flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.wm-kpis div b{display:block;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.wm-kpis div small{font-size:12px;color:#8fa8bb}
.wm-kpis em{position:absolute;right:0;top:-8px;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#6e8aa0}
.wm-stage{position:relative}
.wm-card{border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);padding:14px;box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.wm-card-h{display:flex;justify-content:space-between;padding:4px 6px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8fa8bb}
.wm-live{display:inline-flex;align-items:center;gap:7px;color:#7ee8da}
.wm-live i{width:7px;height:7px;border-radius:50%;background:#2cd3c0;box-shadow:0 0 0 0 rgba(44,211,192,.6);animation:wmLive 1.6s infinite}
.wm-card svg.wf{display:block;width:100%!important;height:auto!important}
.wf-floor{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.08)}
.wf-aisle{fill:none;stroke:rgba(255,255,255,.08);stroke-width:18;stroke-linejoin:round}
.wf-walk{fill:none;stroke:#2cd3c0;stroke-width:2;stroke-dasharray:6 8;opacity:.55;animation:eiFlow 1.2s linear infinite}
.wf-bin{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.14);animation:wfIn .5s var(--ease) both;animation-delay:calc(var(--i)*.03s)}
.wf-bin.hot{fill:rgba(44,211,192,.55);stroke:#2cd3c0;animation:wfIn .5s var(--ease) both,wfHot 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*.03s),calc(var(--i)*.15s)}
.wf-bin.flag{fill:rgba(227,93,38,.55);stroke:#ff8a4c;animation:wfIn .5s var(--ease) both,wfHot 1.4s ease-in-out infinite}
.wf-dock rect{fill:rgba(255,180,138,.35)}
.wf-picker{fill:#fff;stroke:#2cd3c0;stroke-width:4}
.wf-trail{fill:rgba(44,211,192,.25)}
.wm-toast{position:absolute;left:-28px;bottom:-30px;z-index:3;width:min(270px,70%);height:64px}
.wm-t{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;color:var(--ink);
  box-shadow:0 26px 50px -24px rgba(0,0,0,.6);opacity:0;transform:translateY(12px) scale(.96);transition:opacity .45s,transform .45s var(--ease)}
.wm-t.on{opacity:1;transform:none}
.wm-t>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#e3f8f5;color:#0b8f82;flex:none}
.wm-t>span svg{width:18px;height:18px}
.wm-t b{display:block;font-size:13.5px}.wm-t small{font-size:11.5px;color:var(--muted)}
.wm-strip{padding:16px 0;background:#fff;border-bottom:1px solid var(--line)}
.wm-strip .ix-marq{margin:0}
.wm-ic{color:#0b8f82;background:#e3f8f5}.wm-ic svg{width:15px;height:15px}
.wm-jsec{background:linear-gradient(180deg,#f2fbfa,#fff)}
/* bento */
.wm-msec{background:#0b2036;color:#fff}
.wm-msec .sec-head h2{color:#fff}.wm-msec .sec-head p{color:#a9c0d0}.wm-msec .kicker{color:#5fe0d0}
.wm-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wm-m{position:relative;overflow:hidden;padding:22px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:transform .35s var(--ease),border-color .35s,background .35s}
.wm-m:hover{transform:translateY(-4px);border-color:rgba(44,211,192,.5);background:rgba(255,255,255,.08)}
.wm-m::after{content:"";position:absolute;right:-60px;top:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(44,211,192,.22),transparent 70%);transition:transform .5s}
.wm-m:hover::after{transform:scale(1.4)}
.wm-m0{grid-column:span 2;grid-row:span 2}.wm-m3{grid-column:span 2}.wm-m6{grid-column:span 2}
.wm-m6 ul{grid-template-columns:1fr 1fr}
.wm-m-h{display:flex;justify-content:space-between;align-items:center}
.wm-mi{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#2cd3c0,#0b8f82);color:#fff}
.wm-mi svg{width:21px;height:21px}
.wm-mn{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.35)}
.wm-m .kicker{display:block;margin-top:16px}
.wm-m h3{margin-top:6px;font-size:18px;line-height:1.25;letter-spacing:-.02em;color:#fff}
.wm-m ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.wm-m li{display:flex;gap:9px;align-items:flex-start;font-size:13.2px;line-height:1.5;color:#b9cbd8}
.wm-m li svg{flex:none;width:16px;height:16px;padding:3px;margin-top:1px;border-radius:50%;background:rgba(44,211,192,.2);color:#5fe0d0}
.wm-m0 ul{grid-template-columns:1fr 1fr}
.wm-mv{margin-top:16px}
.wm-mv .jxv{min-height:0;background:rgba(255,255,255,.95)}
/* before / after */
.wm-ba-g{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.wm-b,.wm-a{padding:24px;border-radius:20px;display:grid;gap:10px;align-content:start}
.wm-b{background:#f6f3f2;border:1px solid #eee2de}
.wm-a{background:linear-gradient(160deg,#e9fbf8,#fff);border:1px solid #bfeee7;box-shadow:0 30px 60px -44px rgba(18,181,165,.8)}
.wm-bl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#a0776a;margin-bottom:4px}
.wm-a .wm-bl{color:#0b8f82}
.wm-ba p{display:flex;gap:12px;align-items:center;margin:0;padding:12px 14px;border-radius:12px;background:#fff;font-size:14.5px;color:var(--ink)}
.wm-ba p i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none}
.wm-ba p i svg{width:14px;height:14px}
.wm-b p i{background:#ffe3dc;color:#d2492a}
.wm-a p i{background:#12b5a5;color:#fff}
.wm-b p span{position:relative}
.wm-b p span::after{content:"";position:absolute;left:0;top:52%;height:1.5px;width:0;background:#d2492a}
.rv.in .wm-b p span::after{animation:hcxW .5s var(--ease) forwards;animation-delay:calc(.4s + var(--i)*.35s)}
.rv.in .wm-b p{animation:wmFade .5s forwards;animation-delay:calc(.4s + var(--i)*.35s)}
.wm-a p{opacity:0;transform:translateX(-10px)}
.rv.in .wm-a p{animation:hcxIn .45s var(--ease) forwards;animation-delay:calc(.6s + var(--i)*.35s)}
.wm-vs{align-self:center;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#12b5a5;color:#fff;box-shadow:0 0 0 8px #e3f8f5}
.wm-vs svg{width:22px;height:22px}
/* outcomes */
.wm-outs{padding:clamp(64px,7vw,96px) 0;background:linear-gradient(140deg,#0b8f82,#12b5a5 50%,#2cd3c0);color:#fff}
.wm-outs .sec-head h2{color:#fff}.wm-outs .kicker{color:#e0fffb}
.wm-outs .sec-head::before{background:linear-gradient(90deg,#fff,transparent)}
.wm-og{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wm-o{position:relative;overflow:hidden;padding:24px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px)}
.wm-oi{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:#fff;color:#0b8f82;animation:wmBob 3s ease-in-out infinite;animation-delay:calc(var(--i)*.4s)}
.wm-oi svg{width:23px;height:23px}
.wm-o strong{display:block;margin-top:18px;font-size:19px;letter-spacing:-.02em}
.wm-o p{margin-top:8px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.88)}
.wm-o u{position:absolute;left:0;bottom:0;height:3px;width:0;background:#fff}
.rv.in .wm-o u{animation:hcxW 1.2s var(--ease) forwards;animation-delay:calc(var(--i)*.2s)}
/* integration hub */
.wm-int-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.wm-int-g h2{margin-top:10px;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;color:var(--ink)}
.wm-int-g>div>p{margin:14px 0 18px;font-size:15.5px;line-height:1.7;color:var(--body)}
.wm-int .ei-ul svg{background:#12b5a5}
.wm-hub{position:relative;width:min(100%,440px);aspect-ratio:1;margin-inline:auto;container-type:inline-size}
.wm-hub::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(18,181,165,.35);animation:cpoSpin 60s linear infinite}
.wm-hub-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px 22px;border-radius:24px;background:#0b2036;color:#fff;font-size:13px;box-shadow:0 0 0 10px rgba(18,181,165,.12),0 30px 60px -24px rgba(11,32,54,.8)}
.wm-hub-c .amark{background:none;box-shadow:none}
.wm-node{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a))}
.wm-line{position:absolute;left:0;top:-1px;width:36cqw;height:2px;transform-origin:left;background:linear-gradient(90deg,rgba(18,181,165,.15),rgba(18,181,165,.5))}
.wm-line i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#12b5a5;animation:wmPulse 2.4s linear infinite;animation-delay:calc(var(--a) / 360deg * 2.4s)}
.wm-nb{position:absolute;left:40cqw;top:0;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));display:flex;flex-direction:column;align-items:center;gap:6px;width:96px;text-align:center}
.wm-nb>svg,.wm-nl{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 26px -18px rgba(14,36,56,.6)}
.wm-nb>svg{padding:12px;box-sizing:border-box;color:#0b8f82}
.wm-nl .ms-img{width:26px;height:26px}.wm-nl.has-logo>b{display:none}
.wm-nb small{font-size:11.5px;font-weight:700;color:var(--ink)}
@keyframes wmLive{70%{box-shadow:0 0 0 8px rgba(44,211,192,0)}100%{box-shadow:0 0 0 0 rgba(44,211,192,0)}}
@keyframes wfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wfHot{50%{opacity:.55}}
@keyframes wmFade{to{opacity:.6}}
@keyframes wmBob{50%{transform:translateY(-6px)}}
@keyframes wmPulse{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(36cqw - 8px);opacity:0}}
@media (max-width:1080px){.wm-bento{grid-template-columns:1fr 1fr}.wm-m0,.wm-m3,.wm-m6{grid-column:span 2}.wm-og{grid-template-columns:1fr 1fr}}
@media (max-width:980px){.wm-hero-in,.wm-int-g{grid-template-columns:1fr}.wm-toast{left:0}}
@media (max-width:640px){.wm-bento,.wm-og{grid-template-columns:1fr}.wm-m0,.wm-m3,.wm-m6{grid-column:auto;grid-row:auto}.wm-m6{display:block}.wm-m0 ul{grid-template-columns:1fr}
  .wm-ba-g{grid-template-columns:1fr}.wm-vs{transform:rotate(90deg);justify-self:center}.wm-nb{width:76px}.wm-nb small{font-size:10px}.wm-kpis em{position:static;width:100%}}
@media (prefers-reduced-motion:reduce){.wf *,.wm-oi,.wm-line i,.wm-hub::before,.wm-live i{animation:none!important}
  .wm-a p{opacity:1;transform:none}.wm-t{transition:none}}

/* ---------- HR Copilot: a wider palette ---------- */
.hcx-bars i{background:linear-gradient(180deg,color-mix(in srgb,var(--bc) 70%,#fff),var(--bc))!important;box-shadow:0 0 16px -4px var(--bc)!important}
.hcx-kpis div{border-top:3px solid var(--kc);background:color-mix(in srgb,var(--kc) 10%,rgba(255,255,255,.04))}
.hcx-kpis b{color:var(--kc)!important}
.hcx-list li:nth-child(1)::before{background:#38bdf8}.hcx-list li:nth-child(2)::before{background:#34d399}.hcx-list li:nth-child(3)::before{background:#fbbf24}
.hcx-rank .hcx-av{background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 70%,#fff),var(--rc))}
.hcx-rank .hcx-sc i{background:var(--rc)}
.hcx-rank em{color:var(--rc)}
.hcx-rings circle.v{stroke:var(--gc)}
.hcx-rings b{color:var(--gc)}
.hcx-pd{display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:var(--pc);vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 25%,transparent)}
.hcx-p.on .hcx-pd{background:#fff}
.copx-prompts .hcx-p.on{background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 75%,#fff),color-mix(in srgb,var(--pc) 80%,#000));color:#0b1a2a}
.hcx-p.on .hcx-pd{background:#0b1a2a;box-shadow:none}
.hcx-c{position:relative;overflow:hidden;display:flex;flex-direction:column}
.hcx-c::before{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--cc) 35%,transparent),transparent 70%);transition:transform .5s var(--ease)}
.hcx-c:hover::before{transform:scale(1.5)}
.hcx-c:hover{border-color:color-mix(in srgb,var(--cc) 60%,transparent)!important}
.hcx-ci{position:relative;display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:12px;
  background:color-mix(in srgb,var(--cc) 20%,transparent);border:1px solid color-mix(in srgb,var(--cc) 45%,transparent);color:var(--cc)}
.hcx-ci svg{width:20px;height:20px}
.copx-c.hcx-c strong{color:var(--cc)}
.hcx-c u{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--cc),transparent)}
.rv.in .hcx-c u{animation:hcxW 1.2s var(--ease) forwards;animation-delay:.4s}
.hcx-c:nth-child(1) u{animation-delay:.2s}.hcx-c:nth-child(3) u{animation-delay:.5s}.hcx-c:nth-child(5) u{animation-delay:.8s}
.copx-foot{background:linear-gradient(90deg,#fbbf24,#fb923c,#f472b6,#a78bfa,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* ---------- XEE POS page ---------- */
.ps-pg{--ac:#8b5cf6;--ac2:#c084fc;--acs:rgba(139,92,246,.12)}
.ps-hero{position:relative;overflow:hidden;padding:clamp(120px,11vw,150px) 0 clamp(60px,6vw,90px);color:#fff;
  background:linear-gradient(155deg,#130b2e,#22134d 50%,#0f1a3a)}
.ps-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.ps-orb.a{width:460px;height:460px;right:-80px;top:-120px;background:rgba(236,72,153,.35);animation:ixFloat 14s ease-in-out infinite alternate}
.ps-orb.b{width:420px;height:420px;left:-140px;bottom:-200px;background:rgba(20,184,166,.3);animation:ixFloat 18s ease-in-out infinite alternate-reverse}
.ps-hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.ps-copy .crumb{color:#a99cd6}.ps-copy .crumb a{color:#c7bcf0}
.ps-copy h1{margin-top:22px;font-size:clamp(34px,4.8vw,60px);line-height:1.04;letter-spacing:-.045em;color:#fff}
.ps-copy h1 em{font-style:normal;background:linear-gradient(90deg,#f472b6,#c084fc,#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent}
.ps-copy>p{margin-top:20px;max-width:56ch;font-size:clamp(15px,1.5vw,17px);line-height:1.75;color:#cbc3e8}
.ps-btn{background:linear-gradient(135deg,#a855f7,#6d28d9)!important;box-shadow:0 20px 40px -18px rgba(168,85,247,.9)!important}
.ps-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.ps-badges span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-size:12.5px;font-weight:700}
.ps-badges svg{width:15px;height:15px;color:#5eead4}
.ps-badges span:nth-child(2) svg{color:#f472b6}.ps-badges span:nth-child(3) svg{color:#fbbf24}.ps-badges span:nth-child(4) svg{color:#c084fc}
/* till */
.ps-till{position:relative;padding:10px 40px 30px 0}
.ps-dev{position:relative;z-index:1;padding:18px;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 10px rgba(255,255,255,.06)}
.ps-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);padding-bottom:12px;border-bottom:1px dashed var(--line)}
.ps-top b{color:var(--ink)}
.ps-net{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-weight:800;font-size:11px;background:#fff1e6;color:#c2410c}
.ps-net i{width:7px;height:7px;border-radius:50%;background:#f97316}
.ps-net em{font-style:normal}.ps-net .on{display:none}
.ps-net.on{background:#e7f8f1;color:#15803d}.ps-net.on i{background:#22c55e}.ps-net.on .on{display:inline}.ps-net.on .off{display:none}
.ps-lines{display:grid;gap:6px;min-height:200px;align-content:start;padding:12px 0}
.ps-l{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:12px;background:#f6f3ff;animation:psIn .4s var(--ease)}
.ps-l b{display:block;font-size:13.5px}.ps-l small{font-size:11px;color:var(--muted)}.ps-l em{font-style:normal;font-weight:800;font-size:14px}
.ps-sum{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;padding-top:12px;border-top:1px dashed var(--line)}
.ps-sum small{display:block;font-size:10.5px;color:var(--muted)}.ps-sum b{font-size:15px}
.ps-promo b{color:#db2777}
.ps-tot{text-align:right}.ps-tot b{font-size:24px;letter-spacing:-.03em;color:#6d28d9}
.ps-pay{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ps-tn{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:12px;font-weight:800;font-size:13px;background:#f1f5f9;color:var(--muted);transition:all .4s}
.ps-tn svg{width:16px;height:16px}
.ps-dev.tender .ps-tn.tcard{background:linear-gradient(135deg,#a855f7,#6d28d9);color:#fff}
.ps-dev.tender .ps-tn.tcash{background:linear-gradient(135deg,#2dd4bf,#0d9488);color:#fff}
.ps-ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;background:#22c55e;color:#fff;font-weight:800;opacity:0;transform:scale(.9);transition:all .35s var(--ease)}
.ps-ok svg{width:18px;height:18px}
.ps-dev.paid .ps-ok{opacity:1;transform:none}
.ps-rcpt{position:absolute;right:0;bottom:0;z-index:2;width:150px;padding:14px 14px 18px;background:#fff;color:var(--ink);border-radius:6px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);transform:translateY(30px) rotate(6deg);opacity:0;transition:all .6s var(--ease);
  -webkit-mask:linear-gradient(#000 calc(100% - 8px),transparent 0),conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x}
.ps-rcpt.on{opacity:1;transform:rotate(6deg)}
.ps-rcpt b{display:block;font-size:12px}.ps-rcpt small{font-size:10px;color:var(--muted)}
.ps-rcpt i{display:block;height:5px;margin-top:8px;border-radius:3px;background:#e9e3fb}.ps-rcpt i:nth-of-type(2){width:70%}.ps-rcpt i:nth-of-type(3){width:85%}
.ps-rcpt u{display:block;height:22px;margin-top:10px;background:repeating-linear-gradient(90deg,#1e1b4b 0 2px,transparent 2px 4px,#1e1b4b 4px 5px,transparent 5px 8px)}
/* strip */
.ps-strip{padding:16px 0;background:#fff;border-bottom:1px solid var(--line)}
.ps-strip .ix-marq{margin:0}
.ps-strip .ix-cl svg{width:15px;height:15px}
/* offline demo */
.ps-off{background:linear-gradient(180deg,#faf7ff,#fff)}
.ps-off-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
.ps-off h2{margin-top:10px;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;color:var(--ink)}
.ps-off-g>div>p{margin:14px 0 22px;font-size:15.5px;line-height:1.7;color:var(--body)}
.ps-sw{display:inline-flex;padding:5px;border-radius:99px;background:#efe9ff;margin-right:12px;vertical-align:middle}
.ps-sw-b{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:0;border-radius:99px;background:none;font:inherit;font-size:13.5px;font-weight:800;color:#6b5aa6;cursor:pointer;transition:all .25s}
.ps-sw-b svg{width:15px;height:15px}
.ps-sw-b.on[data-net="on"]{background:#22c55e;color:#fff;box-shadow:0 8px 18px -8px #22c55e}
.ps-sw-b.on[data-net="off"]{background:#f97316;color:#fff;box-shadow:0 8px 18px -8px #f97316}
.ps-sell{vertical-align:middle;font:inherit;font-weight:800;cursor:pointer;border:0;background:linear-gradient(135deg,#a855f7,#6d28d9)!important}
.ps-flow{display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:center;padding:clamp(20px,3vw,32px);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -44px rgba(76,29,149,.6)}
.ps-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 8px;border-radius:18px;background:#f6f3ff}
.ps-node>svg,.ps-node>[data-ms]{display:grid;place-items:center;width:48px;height:48px;padding:12px;box-sizing:border-box;border-radius:14px;background:#fff;color:#7c3aed;box-shadow:0 10px 20px -14px rgba(76,29,149,.7)}
.ps-node>[data-ms]{padding:9px}.ps-node>[data-ms] .ms-img{width:30px;height:30px}.ps-node>[data-ms].has-logo>b{display:none}
.ps-node b{font-size:14px;color:var(--ink)}.ps-node small{font-size:12px;color:var(--muted)}
.ps-qn,.ps-sn{font-weight:800;color:#7c3aed}
.ps-qs{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;min-height:12px;max-width:110px}
.ps-qs i{width:10px;height:10px;border-radius:3px;background:#f97316;animation:psIn .3s var(--ease)}
.ps-wire{position:relative;height:3px;margin:0 6px;background:repeating-linear-gradient(90deg,#22c55e 0 6px,transparent 6px 11px);background-size:22px 3px;animation:eiFlow .9s linear infinite}
.ps-cut{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:#f97316;color:#fff;place-items:center}
.ps-cut svg{width:14px;height:14px}
.ps-flow[data-net="off"] .ps-wire{background:repeating-linear-gradient(90deg,#fdba74 0 6px,transparent 6px 11px);background-size:22px 3px}
.ps-flow[data-net="off"] .ps-wire.w2{animation:none;background:repeating-linear-gradient(90deg,#cbd5e1 0 6px,transparent 6px 11px);background-size:22px 3px}
.ps-flow[data-net="off"] .ps-wire.w2 .ps-cut{display:grid}
.ps-flow[data-net="off"] .ps-q{background:#fff4ea;box-shadow:0 0 0 2px #fdba74}
.ps-flow.pulse .ps-cloud{animation:psPulse .5s var(--ease)}
/* why */
.ps-wg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ps-w{position:relative;overflow:hidden;padding:26px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.ps-w::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--c)}
.ps-w::after{content:"";position:absolute;right:-60px;bottom:-60px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%);transition:transform .5s}
.ps-w:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 50%,transparent);box-shadow:0 30px 50px -34px var(--c)}
.ps-w:hover::after{transform:scale(1.5)}
.ps-wi{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}
.ps-wi svg{width:23px;height:23px}
.ps-w h3{margin-top:18px;font-size:17.5px;letter-spacing:-.02em;color:var(--ink)}
.ps-w p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--body)}
/* modules */
.ps-msec{background:#140c2e;color:#fff}
.ps-msec .sec-head h2{color:#fff}.ps-msec .sec-head p{color:#b8acdf}.ps-msec .kicker{color:#d8b4fe}
.ps-mg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.ps-m{border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);overflow:hidden;transition:border-color .3s,background .3s}
.ps-m[open]{background:color-mix(in srgb,var(--c) 14%,rgba(255,255,255,.04));border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.ps-m summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer}
.ps-m summary::-webkit-details-marker{display:none}
.ps-mi{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--c);color:#fff;flex:none;box-shadow:0 10px 22px -10px var(--c)}
.ps-mi svg{width:20px;height:20px}
.ps-mt{flex:1;min-width:0}.ps-mt small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 60%,#fff)}
.ps-mt b{display:block;margin-top:3px;font-size:14.5px;line-height:1.3;color:#fff}
.ps-mx svg{width:16px;height:16px;color:rgba(255,255,255,.5);transform:rotate(90deg);transition:transform .3s}
.ps-m[open] .ps-mx svg{transform:rotate(-90deg);color:#fff}
.ps-m ul{list-style:none;margin:0;padding:0 16px 16px;display:grid;gap:6px}
.ps-m[open] ul li{animation:psIn .35s var(--ease) both}
.ps-m li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;color:#d6ccf3}
.ps-m li svg{flex:none;width:16px;height:16px;padding:3px;margin-top:1px;border-radius:50%;background:var(--c);color:#fff}
.ps-m li:nth-child(2){animation-delay:.04s}.ps-m li:nth-child(3){animation-delay:.08s}.ps-m li:nth-child(4){animation-delay:.12s}.ps-m li:nth-child(5){animation-delay:.16s}.ps-m li:nth-child(6){animation-delay:.2s}
@keyframes psIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes psPulse{50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(34,197,94,.25)}}
@media (max-width:1080px){.ps-wg,.ps-mg{grid-template-columns:1fr 1fr}}
@media (max-width:980px){.ps-hero-in,.ps-off-g{grid-template-columns:1fr}.ps-till{padding-right:20px}}
@media (max-width:640px){.ps-wg,.ps-mg{grid-template-columns:1fr}.ps-flow{grid-template-columns:1fr;gap:6px}.ps-wire{height:26px;width:3px;margin:0 auto;background:repeating-linear-gradient(180deg,#22c55e 0 6px,transparent 6px 11px)}
  .ps-flow[data-net="off"] .ps-wire{background:repeating-linear-gradient(180deg,#fdba74 0 6px,transparent 6px 11px)}.ps-rcpt{width:120px}.ps-sw{margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){.ps-orb,.ps-wire,.ps-l,.ps-m ul li{animation:none!important}}

/* ---------- shared uplift: Sales + HRMS ---------- */
.sx-pg{--ac:#f97316;--ac2:#fb923c;--acs:rgba(249,115,22,.12);--t1:#f97316;--t2:#c2410c;--tl:#fff4ea;--tbg1:#1c1208;--tbg2:#3a1d0b;--to1:rgba(249,115,22,.4);--to2:rgba(236,72,153,.28)}
.hr-pg{--ac:#e8407f;--ac2:#f472b6;--acs:rgba(232,64,127,.12);--t1:#ec4899;--t2:#9d174d;--tl:#fdf0f6;--tbg1:#1b0b1e;--tbg2:#3b0f33;--to1:rgba(236,72,153,.38);--to2:rgba(139,92,246,.3)}
.up-hero{position:relative;overflow:hidden;padding:clamp(120px,11vw,150px) 0 clamp(60px,6vw,90px);color:#fff;background:linear-gradient(155deg,var(--tbg1),var(--tbg2) 55%,#0e1730)}
.up-hero .ps-orb.a{background:var(--to1)}.up-hero .ps-orb.b{background:var(--to2)}
.up-hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.up-copy .crumb{color:#b9a9a0}.up-copy .crumb a{color:#e0d2ca}
.up-copy h1{margin-top:22px;font-size:clamp(34px,4.8vw,60px);line-height:1.04;letter-spacing:-.045em;color:#fff}
.up-copy h1 em{font-style:normal;background:linear-gradient(90deg,#fbbf24,var(--t1),#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hr-pg .up-copy h1 em{background:linear-gradient(90deg,#f472b6,#c084fc,#38bdf8);-webkit-background-clip:text;background-clip:text}
.up-copy>p{margin-top:20px;max-width:56ch;font-size:clamp(15px,1.5vw,17px);line-height:1.75;color:#d8ccc6}
.hr-pg .up-copy>p{color:#e0cde0}
.up-btn{background:linear-gradient(135deg,var(--t1),var(--t2))!important;box-shadow:0 20px 40px -18px var(--t1)!important}
.up-copy .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;font:inherit;font-weight:750;cursor:pointer}
.up-copy .btn.ghost:hover{background:rgba(255,255,255,.08)}
.up-copy .wm-kpis div small{color:#bfa9a0}.hr-pg .up-copy .wm-kpis div small{color:#c6a9c6}
.up-t{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;color:var(--ink);
  box-shadow:0 26px 50px -24px rgba(0,0,0,.55);opacity:0;transform:translateY(12px) scale(.96);transition:opacity .45s,transform .45s var(--ease)}
.up-t.on{opacity:1;transform:none}
.up-t>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--tl);color:var(--t2);flex:none}
.up-t>span svg{width:18px;height:18px}
.up-t b{display:block;font-size:13.5px}.up-t small{font-size:11.5px;color:var(--muted)}
.up-strip{padding:16px 0;background:#fff;border-bottom:1px solid var(--line)}
.up-strip .ix-marq{margin:0}
.up-strip .ix-cl svg{width:15px;height:15px}
.up-xl{background:none!important;border:0}
.up-jsec{background:linear-gradient(180deg,var(--tl),#fff)}
/* outcomes band */
.up-outs{padding:clamp(64px,7vw,96px) 0;background:linear-gradient(140deg,var(--t2),var(--t1) 55%,#fbbf24);color:#fff}
.hr-pg .up-outs{background:linear-gradient(140deg,#6d28d9,#db2777 55%,#fb7185)}
.up-outs .sec-head h2{color:#fff}.up-outs .kicker{color:rgba(255,255,255,.85)}
.up-outs .sec-head::before{background:linear-gradient(90deg,#fff,transparent)}
.up-og{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.up-o{position:relative;overflow:hidden;padding:24px;border-radius:20px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.up-oi{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:#fff;color:var(--t2);animation:wmBob 3s ease-in-out infinite;animation-delay:calc(var(--i)*.4s)}
.hr-pg .up-oi{color:#9d174d}
.up-oi svg{width:23px;height:23px}
.up-o strong{display:block;margin-top:18px;font-size:19px;letter-spacing:-.02em}
.up-o p{margin-top:8px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.9)}
.up-o u{position:absolute;left:0;bottom:0;height:3px;width:0;background:#fff}
.rv.in .up-o u{animation:hcxW 1.2s var(--ease) forwards;animation-delay:calc(var(--i)*.2s)}
/* hub recolour */
.up-hub::before{border-color:color-mix(in srgb,var(--t1) 40%,transparent)}
.up-hub .wm-hub-c{box-shadow:0 0 0 10px color-mix(in srgb,var(--t1) 14%,transparent),0 30px 60px -24px rgba(11,32,54,.8)}
.up-hub .wm-line{background:linear-gradient(90deg,color-mix(in srgb,var(--t1) 15%,transparent),color-mix(in srgb,var(--t1) 55%,transparent))}
.up-hub .wm-line i{background:var(--t1)}
.up-hub .wm-nb>svg{color:var(--t2)}
.up-ul svg{background:var(--t1)!important}
.up-ba .wm-a{background:linear-gradient(160deg,var(--tl),#fff);border-color:color-mix(in srgb,var(--t1) 35%,transparent);box-shadow:0 30px 60px -44px var(--t1)}
.up-ba .wm-a .wm-bl{color:var(--t2)}
.up-ba .wm-a p i,.up-ba .wm-vs{background:var(--t1)}
.up-ba .wm-vs{box-shadow:0 0 0 8px var(--tl)}
/* Sales hero: phone + map */
.sx-stage{position:relative;display:flex;justify-content:center;padding:10px 0 20px}
.sx-phone{position:relative;width:300px;padding:14px 12px 12px;border-radius:40px;background:#fff;color:var(--ink);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 9px rgba(255,255,255,.07),inset 0 0 0 1px var(--line)}
.sx-notch{width:90px;height:20px;margin:0 auto 8px;border-radius:12px;background:#0f172a}
.sx-ph-top{display:flex;justify-content:space-between;align-items:baseline;padding:0 8px 8px}
.sx-ph-top b{font-size:17px}.sx-ph-top span{font-size:11.5px;color:var(--muted)}
.sx-phone svg.sx-map{display:block;width:100%!important;height:auto!important;border-radius:22px;background:#fffaf5}
.sx-rbg{fill:none;stroke:#fed7aa;stroke-width:6;stroke-linecap:round}
.sx-rfg{fill:none;stroke:#f97316;stroke-width:4;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520;animation:sxDraw 7s linear infinite}
.sx-stop circle{fill:#fff;stroke:#f97316;stroke-width:3}
.sx-stop text{font-size:11px;font-weight:800;text-anchor:middle;fill:#c2410c}
.sx-stop{animation:sxStop 7s infinite;animation-delay:calc(var(--i)*1.7s)}
.sx-van{fill:#0f172a;stroke:#fff;stroke-width:3}
.sx-sheet{position:relative;height:64px;margin-top:10px}
.sx-float{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);color:#fff;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);animation:wmBob 4s ease-in-out infinite}
.sx-float small{display:block;font-size:11px;color:#f3d7c4}.sx-float b{font-size:18px}
.sx-float.a{left:0;top:40px;flex-direction:column;align-items:flex-start;gap:4px;width:120px}
.sx-float.a i{display:block;width:100%;height:6px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden}
.sx-float.a i u{display:block;height:100%;width:86%;background:linear-gradient(90deg,#fbbf24,#22c55e)}
.sx-float.b{right:0;bottom:90px;animation-delay:1.2s}
.sx-float.b>svg{width:28px;height:28px;padding:5px;border-radius:9px;background:#3b82f6;color:#fff}
@keyframes sxDraw{0%{stroke-dashoffset:520}85%,100%{stroke-dashoffset:0}}
@keyframes sxStop{0%,8%{transform:none}4%{transform:translateY(-4px)}}
/* Sales apps */
.sx-apps{background:#140f0c;color:#fff}
.sx-apps .sec-head h2{color:#fff}.sx-apps .sec-head p{color:#cbb8ab}.sx-apps .kicker{color:#fdba74}
.sx-ag{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(18px,3vw,36px);align-items:start}
.sx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px;border-radius:30px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.sx-app{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px;border:0;border-radius:18px;background:none;font:inherit;color:#e9dcd3;cursor:pointer;transition:background .25s,transform .25s}
.sx-app:hover{transform:translateY(-3px)}
.sx-app.on{background:rgba(255,255,255,.08)}
.sx-ai{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(140deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));color:#fff;
  box-shadow:0 14px 26px -12px var(--c);transition:transform .3s var(--ease)}
.sx-app.on .sx-ai{transform:scale(1.08);box-shadow:0 0 0 4px rgba(255,255,255,.12),0 14px 26px -10px var(--c)}
.sx-ai svg{width:26px;height:26px}
.sx-app b{font-size:11.5px;font-weight:700;text-align:center;line-height:1.25}
.sx-pane{display:none;grid-template-columns:1fr 1fr;gap:18px;padding:24px;border-radius:24px;background:#fff;color:var(--ink);border-top:4px solid var(--c)}
.sx-pane.on{display:grid;animation:hcxIn .45s var(--ease)}
.sx-pane .kicker{color:var(--c)}
.sx-pane h3{margin-top:8px;font-size:20px;line-height:1.25;letter-spacing:-.02em}
.sx-pane ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.sx-pane li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--body)}
.sx-pane li svg{flex:none;width:17px;height:17px;padding:3px;margin-top:1px;border-radius:50%;background:var(--c);color:#fff}
.sx-pane .jxv{--ac:var(--c);--ac2:var(--c)}
/* HRMS hero: lifecycle ring around an employee record */
.hr-stage{position:relative;display:flex;justify-content:center}
.hr-ring{position:relative;width:min(100%,460px);aspect-ratio:1;container-type:inline-size}
.hr-ring::before{content:"";position:absolute;inset:6%;border-radius:50%;border:1px dashed rgba(255,255,255,.22)}
.hr-sweep{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 0deg,rgba(236,72,153,.0),rgba(236,72,153,.35) 40deg,transparent 60deg);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);animation:cpoSpin 9s linear infinite}
.hr-mod{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translateY(-44cqw) rotate(calc(-1 * var(--a)));display:flex;flex-direction:column;align-items:center;gap:6px;margin:-34px 0 0 -34px;width:68px}
.hr-mi{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:none;animation:hrGlow 9s infinite;animation-delay:calc(var(--i)*1.5s)}
.hr-mod small{font-size:11.5px;font-weight:800;color:#f5d0e6}
.hr-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56cqw;padding:18px;border-radius:22px;background:#fff;color:var(--ink);text-align:center;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75)}
.hr-av{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 10px;border-radius:50%;background:linear-gradient(135deg,#f472b6,#8b5cf6);color:#fff;font-weight:800;font-size:18px;box-shadow:0 0 0 5px #fdf0f6}
.hr-card>b{display:block;font-size:16px}.hr-card>small{font-size:11.5px;color:var(--muted)}
.hr-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:10px}
.hr-tags i{font-style:normal;padding:3px 8px;border-radius:99px;background:#f6f0fb;font-size:10.5px;font-weight:700;color:#7e22ce}
.hr-tags i:nth-child(2){background:#eff6ff;color:#1d4ed8}.hr-tags i:nth-child(3){background:#ecfdf5;color:#047857}
.hr-bars{display:grid;gap:6px;margin-top:12px;text-align:left}
.hr-bars p{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;margin:0;font-size:11px;color:var(--muted)}
.hr-bars em{display:block;height:7px;border-radius:7px;background:#f1f5f9;overflow:hidden}
.hr-bars u{display:block;height:100%;width:0;background:var(--c);animation:hcxW 1.4s var(--ease) .6s forwards}
.hr-bars em u{--v:inherit}
.hr-bars em{--vv:var(--v)}.hr-bars em u{animation-name:hrW}
@keyframes hrW{to{width:var(--v)}}
.hr-toast{position:absolute;right:-10px;bottom:-14px;width:min(260px,62%);height:64px}
@keyframes hrGlow{0%,12%{transform:none;filter:none}5%{transform:scale(1.15);filter:drop-shadow(0 0 12px rgba(244,114,182,.9))}}
.hr-pg .cop-sec{scroll-margin-top:70px}
@media (max-width:1080px){.up-og{grid-template-columns:1fr 1fr}.sx-ag{grid-template-columns:1fr}}
@media (max-width:980px){.up-hero-in{grid-template-columns:1fr}.hr-toast{right:0}}
@media (max-width:640px){.up-og{grid-template-columns:1fr}.sx-grid{grid-template-columns:repeat(4,1fr);padding:12px;gap:6px}.sx-ai{width:46px;height:46px;border-radius:14px}
  .sx-app b{font-size:10px}.sx-pane{grid-template-columns:1fr}.sx-phone{width:260px}.sx-float.a{display:none}.sx-float.b{bottom:70px}
  .hr-mi{width:44px;height:44px;border-radius:14px}.hr-mod small{font-size:10px}.hr-card{width:62cqw;padding:12px}.hr-bars{display:none}}
@media (prefers-reduced-motion:reduce){.sx-rfg{animation:none;stroke-dashoffset:0}.sx-stop,.sx-float,.hr-sweep,.hr-mi,.up-oi{animation:none!important}.up-t{transition:none}}

/* XEE marks: no tile behind them; on dark backgrounds use the light drawing */
.wm-eye .amark.lg::after,.wm-hub-c .amark.lg::after,.ei-core .amark.lg::after,.wm-hero .amark.lg::after,.ps-hero .amark.lg::after,.up-hero .amark.lg::after{background-image:var(--lgl,var(--lg))}
.amark.lg{box-shadow:none}
.hr-mi .amark{--s:44px!important}
/* ---------- brochures & downloads ---------- */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.dl{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.2vw,28px);border-radius:20px;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 24px 50px -40px rgba(14,36,56,.45);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.dl:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--orange) 40%,var(--line));
  box-shadow:0 34px 60px -40px rgba(14,36,56,.55)}
.dl-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.dl-top .amark{--s:34px}
.dl-x{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;color:#fff;
  background:linear-gradient(135deg,var(--orange2),var(--orange))}
.dl-x svg{width:20px;height:20px}
.dl-type{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.12em;color:var(--orange);background:color-mix(in srgb,var(--orange) 10%,transparent)}
.dl-type svg{width:13px;height:13px}
.dl h3{margin:0;font-size:18px;letter-spacing:-.025em;color:var(--ink)}
.dl p{margin:8px 0 0;font-size:14.2px;line-height:1.65;color:var(--body);flex:1}
.dl-tags{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 18px}
.dl-tags b{padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--mist)}
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px;border-radius:12px;
  font-weight:700;font-size:14px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--orange2),var(--orange));
  box-shadow:0 14px 30px -18px var(--orange)}
.dl-btn svg{width:16px;height:16px}
.dl-btn:hover{filter:brightness(1.06)}
@media (max-width:980px){.dl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.dl-grid{grid-template-columns:1fr}}

/* ---------- newsletter subscription, in the footer ---------- */
.nl-band{display:grid;grid-template-columns:1.1fr 1fr;gap:24px 40px;align-items:center;margin-bottom:44px;
  padding:clamp(22px,2.6vw,32px);border-radius:22px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--orange) 10%,transparent),rgba(255,255,255,.04));
  border:1px solid color-mix(in srgb,var(--orange) 26%,transparent)}
.nl-copy{display:flex;gap:16px;align-items:flex-start}
.nl-i{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--orange2),var(--orange))}
.nl-i svg{width:21px;height:21px}
.nl-copy h4{margin:2px 0 0;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.nl-copy p{margin:6px 0 0;font-size:13.8px;line-height:1.6;opacity:.8}
.nl-form{display:flex;flex-wrap:wrap;gap:10px}
.nl-form input{flex:1 1 220px;min-width:0;padding:13px 16px;border-radius:12px;font:inherit;font-size:14.5px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.nl-form input:focus{outline:2px solid color-mix(in srgb,var(--orange) 55%,transparent);outline-offset:1px}
.nl-form .btn{flex:none}
.nl-msg{flex-basis:100%;margin:2px 0 0;font-size:13px;min-height:1em}
.nl-msg.ok{color:#1e9d62}.nl-msg.err{color:#d2452b}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:860px){.nl-band{grid-template-columns:1fr}}

/* ---------- slimmer footer ---------- */
.foot-top{grid-template-columns:1.6fr repeat(3,1fr) 1.2fr}
.foot-more{display:flex;flex-wrap:wrap;gap:6px 18px;padding:20px 0 0;font-size:12.5px}
.foot-more a{color:var(--muted)}
@media (max-width:1080px){.foot-top{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:760px){.foot-top{grid-template-columns:1fr 1fr}}


/* accent-aware leftovers */
.pg .card .more{color:var(--ac)}
.pg .sec.dark{background:linear-gradient(180deg,#fbfdfe,var(--acs))}
.pg .band{background:linear-gradient(150deg,#f8fbfc,var(--acs))}
.pg .band::before{background:var(--acs)}
.pg .glance-h{color:var(--ac)}

/* ---------- industry toolkit ---------- */
.kit{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kititem{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;
  border-radius:17px;background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 42px -38px rgba(14,36,56,.65);text-decoration:none;color:inherit;
  transition:transform .32s var(--ease),border-color .32s,box-shadow .32s}
.kititem:hover{transform:translateY(-4px);border-color:var(--kc,var(--ac));
  box-shadow:0 26px 50px -34px var(--kc,var(--ac))}
.kititem .amark{--s:40px}
.kitlogo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--mist2);border:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--muted)}
.kitlogo.has-logo{background:none;border-color:transparent}
.kitlogo.has-logo b{display:none}
.kitlogo .ms-img{width:100%;height:100%}
.kititem small{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kititem strong{display:block;margin-top:4px;font-size:14px;letter-spacing:-.025em;color:var(--ink);line-height:1.3}
@media (max-width:1080px){.kit{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.kit{grid-template-columns:repeat(2,1fr)}}


/* ==========================================================================
   Round 2 — product slider, Copilot family, Teams agents, dark proof
   ========================================================================== */

/* ---------- product slider ---------- */
.slider{position:relative}
.sl-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
#suite .sl-nav{grid-template-columns:repeat(5,1fr)}
@media (max-width:1080px){#suite .sl-nav{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){#suite .sl-nav{grid-template-columns:1fr}}
.eif{display:flex;flex-direction:column;gap:0;height:100%;justify-content:center}
.eif-s{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);opacity:0;transform:translateX(-8px);animation:eifIn 6s var(--ease) infinite;animation-delay:calc(var(--i)*.9s)}
.eif-s div{flex:1;display:flex;flex-direction:column}
.eif-s b{font-size:12.5px;color:var(--ink)}
.eif-s small{font-size:10.5px;color:var(--muted)}
.eif-n{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#0d2440;color:#fff;font-size:11px;font-weight:800;flex:none}
.eif-ok{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#23995a;color:#fff;flex:none}
.eif-ok svg{width:12px;height:12px}
.eif-ar{align-self:center;width:2px;height:12px;margin:3px 0;background:repeating-linear-gradient(180deg,#e35d26 0 4px,transparent 4px 7px)}
@keyframes eifIn{0%{opacity:0;transform:translateX(-8px)}12%,85%{opacity:1;transform:none}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.eif-s{animation:none;opacity:1;transform:none}}
.sl-tab{appearance:none;cursor:pointer;font-family:inherit;text-align:left;
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:15px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 16px 36px -34px rgba(14,36,56,.7);
  transition:transform .32s var(--ease),border-color .32s,box-shadow .32s}
.sl-tab b{font-size:14px;font-weight:750;letter-spacing:-.028em;color:var(--ink);white-space:nowrap}
.sl-tab .amark{--s:34px;opacity:.82;transition:opacity .5s,transform .5s var(--ease)}
.sl-tab:hover{border-color:var(--c1)}
.sl-tab.on{border-color:var(--c1);transform:translateY(-2px);box-shadow:0 20px 40px -28px var(--c1)}
.sl-tab.on .amark{opacity:1;transform:scale(1.04)}

.sl-stage{position:relative;border-radius:24px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:0 36px 78px -56px rgba(14,36,56,.85)}
.sl-slide{display:none}
.sl-slide.on{display:grid;grid-template-columns:1.02fr .98fr;
  animation:slfade .72s var(--ease)}
@keyframes slfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.sl-copy{padding:clamp(28px,3.2vw,44px)}
.sl-copy h3{font-size:clamp(22px,2.7vw,32px);letter-spacing:-.038em;margin:14px 0 0;color:var(--ink);max-width:20ch}
.sl-copy>p{margin-top:14px;font-size:15px;line-height:1.68;color:var(--body);max-width:46ch}
.sl-caps{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:22px}
.sl-caps li{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:640;
  line-height:1.45;color:var(--ink)}
.sl-caps svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--c1)}
.sl-mods{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.sl-mods>small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.sl-mods>div:not(.mod-strip){display:flex;flex-wrap:wrap;gap:8px}
.mod-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:520px){.mod-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mchip{position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;min-width:0;
  padding:7px 12px 7px 7px;border-radius:12px;text-decoration:none;
  background:var(--mist);border:1px solid var(--line);
  transition:transform .34s var(--ease),border-color .34s,background .34s,box-shadow .34s}
.mchip b{font-size:12.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;
  transition:color .3s}
.mchip .amark{--s:26px;transition:transform .38s var(--ease)}
.mchip:hover{border-color:var(--c1);background:#fff}
.mchip.on{background:#fff;border-color:var(--c1);
  box-shadow:0 10px 22px -20px var(--c1)}
.mchip.on b{color:var(--c1)}
/* the dwell bar that shows the auto-advance — a hairline, not a headline */
.mbar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:color-mix(in srgb,var(--c1) 42%,transparent);border-radius:2px}
.mchip.on .mbar{animation:mFill var(--dwell,2600ms) linear forwards}
@keyframes mFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* the HRMS copy column swaps wholesale as the modules take turns */
.sl-swap{transition:opacity .3s ease}
.sl-swap.fade{opacity:.72}
.sl-swap .kicker i{font-style:normal;opacity:.45;margin:0 2px}
.sl-swap h3{min-height:2.3em}
.sl-swap>p{min-height:5.4em}
.sl-swap .sl-caps{min-height:8.4em;align-content:start}
@media (max-width:640px){.sl-swap h3,.sl-swap>p,.sl-swap .sl-caps{min-height:0}}
@media (prefers-reduced-motion:reduce){
  .mchip.on .mbar{animation:none;transform:scaleX(1)}
  .sl-swap{transition:none}
}
.sl-copy .btn{margin-top:26px}
.sl-visual{position:relative;display:grid;place-items:center;padding:clamp(24px,3vw,40px);
  background:radial-gradient(circle at 70% 20%,var(--c1),transparent 62%),var(--mist)}
.sl-visual::before{content:"";position:absolute;inset:0;background:var(--mist);opacity:.9}
.sl-visual .mini{margin:0;width:100%;max-width:400px;position:relative;z-index:1}
.sl-visual .mini-body{padding:16px;gap:9px}
.sl-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.sl-dot{appearance:none;border:0;cursor:pointer;width:8px;height:8px;border-radius:50%;padding:0;
  background:var(--line);transition:background .3s,width .3s var(--ease)}
.sl-dot.on{background:var(--orange);width:26px;border-radius:99px}
@media (max-width:1080px){
  .sl-nav{grid-template-columns:repeat(2,1fr)}
  .sl-slide.on{grid-template-columns:1fr}
  .sl-caps{grid-template-columns:1fr}
  .sl-visual{padding:0 clamp(24px,3vw,40px) clamp(28px,3.2vw,40px)}
}
@media (max-width:560px){.sl-nav{grid-template-columns:1fr}}

/* ---------- Copilot family slider ---------- */
.cslider .sl-nav{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:18px}
.cgrp-l{display:flex;align-items:center;gap:12px;margin-top:4px}
.cgrp-l:first-child{margin-top:0}
.cgrp-l span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.cgrp-l i{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.cgrp-row{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:9px}
.cslider .sl-tab{gap:10px;padding:12px 13px;align-items:center}
.cslider .sl-tab b{font-size:12.5px;letter-spacing:-.026em;white-space:normal;line-height:1.25}
.tab-logo{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--mist2);border:1px solid var(--line);
  font-family:var(--mono);font-size:9px;color:var(--muted);
  opacity:.6;transition:opacity .32s,transform .32s var(--ease)}
.tab-logo.has-logo{background:none;border-color:transparent}
.tab-logo.has-logo b{display:none}
.tab-logo .ms-img{width:100%;height:100%}
.sl-tab.on .tab-logo{opacity:1;transform:scale(1.07)}

/* the right-hand tile wall */
.tgrid{position:relative;z-index:1;width:100%;max-width:430px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ctile{padding:14px 15px 15px;border-radius:14px;background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 36px -32px rgba(14,36,56,.8);
  opacity:0;transform:translateY(10px);animation:tileIn .55s var(--ease) forwards;animation-delay:var(--d);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
@keyframes tileIn{to{opacity:1;transform:none}}
.ctile:hover{transform:translateY(-4px);border-color:var(--c1);box-shadow:0 24px 44px -28px var(--c1)}
.ctile-l{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--mist2);border:1px solid var(--line);font-family:var(--mono);font-size:9px;color:var(--muted)}
.ctile-l.has-logo{background:none;border-color:transparent}
.ctile-l.has-logo b{display:none}
.ctile-l .ms-img{width:100%;height:100%}
.ctile-i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--c1),var(--c2));color:#fff;
  box-shadow:0 10px 20px -12px var(--c1)}
.ctile-i svg{width:15px;height:15px}
.ctile b{display:block;margin-top:10px;font-size:12.5px;font-weight:750;letter-spacing:-.024em;color:var(--ink)}
.ctile small{display:block;margin-top:3px;font-size:11px;line-height:1.42;color:var(--muted)}
@media (max-width:1080px){.cgrp-row{grid-template-columns:repeat(3,1fr)}.tgrid{max-width:none}}
@media (max-width:640px){.cgrp-row{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.ctile{opacity:1;transform:none;animation:none}}

/* ---------- dark proof band ---------- */
.proofdk{position:relative;overflow:hidden;padding:clamp(70px,8vw,110px) 0;
  background:linear-gradient(160deg,#0b2437 0%,#061625 70%);color:#fff}
.proofdk::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  background:rgba(227,93,38,.16);filter:blur(100px);top:-24%;right:-6%}
.proofdk::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:rgba(47,157,232,.12);filter:blur(100px);bottom:-28%;left:-8%}
.proofdk .shell{position:relative;z-index:1}
.proofdk .sec-head h2{color:#fff}
/* ---------- testimonials: a deck of cards over a moving client wall ---------- */
.deck{position:relative;max-width:880px;margin:0 auto}
/* ---------- reference wall: one quote in focus, the roll beside it ---------- */
.wall{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:clamp(16px,2vw,26px);
  align-items:start;margin-top:clamp(8px,1.4vw,18px)}
.wall-main{position:relative;display:grid;isolation:isolate}
.wall-main::before{content:"";position:absolute;inset:-8% -6%;z-index:-1;pointer-events:none;
  border-radius:44px;opacity:.55;transition:background .8s var(--ease);
  background:radial-gradient(52% 58% at 22% 18%, var(--wa,#ff6b4a), transparent 68%);filter:blur(56px)}
.wq{grid-area:1 / 1;position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(28px,3.4vw,44px);border-radius:26px;
  background:linear-gradient(158deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);
  box-shadow:0 50px 96px -54px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.992);
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .5s}
.wq.on{opacity:1;visibility:visible;transform:none}
.wq::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--qa,var(--orange)),var(--qa2,var(--orange2)),transparent)}
.wq::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--qa,#ff6b4a) 14%, transparent), transparent 62%)}
.wq-glyph{position:absolute;right:clamp(18px,2.4vw,30px);top:-26px;font-size:170px;line-height:1;
  font-weight:800;pointer-events:none;user-select:none;
  background:linear-gradient(160deg,var(--qa,#ff6b4a),transparent 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.34}
.wq-top{display:flex;align-items:center;gap:16px;position:relative}
.wq-logo{width:220px;min-width:220px;height:80px;padding:0 12px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.94);flex:0 0 auto}
.wq-logo b{font-size:14px;font-weight:800;letter-spacing:-.03em;color:#0b2437;white-space:nowrap}
.wq-logo.has-img{background:#fff}
.wq-logo.has-img b{display:none}
.wq-logo i{display:block;width:100%;height:100%;padding:10px 14px;box-sizing:border-box;
  background:var(--img) center/contain no-repeat;background-origin:content-box;background-clip:content-box}
.wq-idx{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;color:#7d94a6}
.wq-idx em{font-style:normal;color:var(--qa2,var(--orange2));font-size:15px;font-weight:600}
.wq-idx i{width:16px;height:1px;background:rgba(255,255,255,.22);display:block}
.wq blockquote{margin:clamp(20px,2.4vw,28px) 0 0;position:relative;padding-left:clamp(14px,1.4vw,20px);
  font-size:clamp(18px,1.95vw,24px);line-height:1.46;letter-spacing:-.032em;font-weight:700;color:#fff}
.wq blockquote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--qa,var(--orange)),transparent)}
.wq-body{margin:14px 0 0;font-size:clamp(13.5px,1.3vw,15px);line-height:1.68;color:#b6c9d6;font-weight:500}
.wq-thanks{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;padding:11px 14px;border-radius:12px;
  background:color-mix(in srgb, var(--qa,#ff6b4a) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--qa,#ff6b4a) 30%, transparent)}
.wq-thanks svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--qa2,var(--orange2))}
.wq-thanks span{font-size:12.5px;line-height:1.55;color:var(--qa2,var(--orange3));font-weight:660;font-style:italic}
.wq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2.2vw,24px)}
.wq-f{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid rgba(255,255,255,.1)}
.wq-av{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--qa2,var(--orange2)),var(--qa,var(--orange)));color:#fff;
  font-size:13.5px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 14px 28px -16px var(--qa,var(--orange))}
.wq-who strong{display:block;font-size:15px;letter-spacing:-.028em;color:#fff}
.wq-who small{display:block;margin-top:2px;font-size:12.5px;color:#93a9b9;font-weight:600}

.wall-side{display:grid;gap:9px;align-content:start}
.wall-sh{display:flex;align-items:center;gap:10px;padding:0 4px 4px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7d94a6}
.wall-sh em{margin-left:auto;font-style:normal;color:var(--orange2)}
.wsel{position:relative;overflow:hidden;appearance:none;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:17px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:background .3s,border-color .3s,transform .35s var(--ease)}
.wsel:hover{background:rgba(255,255,255,.08);transform:translateX(3px)}
.wsel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--qa,var(--orange)),transparent);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease)}
.wsel.on::before{transform:scaleY(1)}
.wsel.on{background:rgba(255,255,255,.10);
  border-color:color-mix(in srgb, var(--qa,#ff6b4a) 55%, transparent);
  box-shadow:0 18px 38px -26px var(--qa,#ff6b4a)}
.wsel-logo{width:138px;height:60px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.92);overflow:hidden}
.wsel-logo b{font-size:9px;font-weight:800;color:#0b2437;text-align:center;line-height:1.15;padding:0 4px}
.wsel-logo.has-img{background:#fff}
.wsel-logo.has-img b{display:none}
.wsel-logo i{display:block;width:100%;height:100%;padding:7px 8px;box-sizing:border-box;
  background:var(--img) center/contain no-repeat;background-origin:content-box;background-clip:content-box}
/* reference cards: no quote, so the engagement itself carries the card */
.wq-mono{display:grid;place-items:center;width:64px;height:64px;border-radius:17px;flex:0 0 auto;
  font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:.03em;color:#fff;
  background:linear-gradient(150deg,var(--qa,var(--orange)),var(--qa2,var(--orange2)));
  box-shadow:0 18px 34px -18px var(--qa,var(--orange))}
.wq-name{min-width:0}
.wq-name{font-size:clamp(19px,2vw,25px);font-weight:800;letter-spacing:-.035em;color:#fff;line-height:1.15}
.wq-name small{display:block;margin-top:5px;font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#94aaba}
.wq-desc{margin:clamp(20px,2.4vw,28px) 0 0;font-size:clamp(14px,1.35vw,15.5px);line-height:1.72;
  color:#c6d7e2;font-weight:500}
.wq-ref .wq-f{gap:18px;flex-wrap:wrap}
.wq-meta{display:inline-flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;
  color:#b7c9d6;font-weight:600;max-width:60%}
.wq-meta svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--qa2,var(--orange2))}
.wq-since{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8398a8;white-space:nowrap}
.wsel-mono{display:grid;place-items:center;width:84px;height:46px;border-radius:10px;flex:0 0 auto;
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em;color:#fff;
  background:linear-gradient(150deg,var(--qa,var(--orange)),var(--qa2,var(--orange2)));opacity:.92}
.wsel.on .wsel-mono{opacity:1}
@media (max-width:640px){
  .wq-mono{width:52px;height:52px;border-radius:14px;font-size:16px}
  .wq-meta{max-width:100%}
  .wq-since{margin-left:0}
}
.wsel-t{min-width:0}
.wsel-t strong{display:block;font-size:13.5px;letter-spacing:-.026em;color:#e7eff5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsel-t small{display:block;margin-top:2px;font-size:11px;color:#8ba1b2;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsel-go{margin-left:auto;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;
  color:var(--qa2,var(--orange2));opacity:0;transform:translateX(-5px);flex:0 0 auto;
  transition:opacity .3s,transform .35s var(--ease)}
.wsel-go svg{width:13px;height:13px}
.wsel:hover .wsel-go,.wsel.on .wsel-go{opacity:1;transform:none}
.wsel-bar{position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--qa,var(--orange)),var(--qa2,var(--orange2)))}
.wsel.on .wsel-bar{animation:wbar 9s linear forwards}
@keyframes wbar{from{width:0}to{width:100%}}
@media (max-width:1080px){
  .wall{grid-template-columns:1fr}
  .wall-side{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wall-sh{grid-column:1/-1}
}
@media (max-width:620px){
  .wall-side{grid-template-columns:1fr}
  .wq-logo{min-width:150px;height:58px}
  .wq-glyph{font-size:110px}
}
@media (prefers-reduced-motion:reduce){.wsel.on .wsel-bar{animation:none;width:100%}}

.deck-cards{position:relative;display:grid;padding-bottom:52px}
.qc{grid-area:1 / 1;display:flex;flex-direction:column;
  padding:clamp(28px,3.2vw,40px);border-radius:26px;
  background:linear-gradient(158deg,#14344c 0%,#0c2233 78%);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 44px 90px -46px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);
  transform-origin:50% 100%;
  transition:transform .7s var(--ease),opacity .55s ease,filter .55s ease;
  will-change:transform}
/* stacking: 0 = front, 1 = the card peeking behind, 2+ = buried */
.qc[data-p="0"]{z-index:3;transform:none;opacity:1;filter:none}
.qc[data-p="1"]{z-index:2;transform:translateY(24px) scale(.945) rotate(-1.4deg);opacity:.55;filter:saturate(.6)}
.qc[data-p="2"]{z-index:1;transform:translateY(44px) scale(.9) rotate(1.6deg);opacity:.3;filter:saturate(.4)}
.qc[data-p="3"]{z-index:0;transform:translateY(58px) scale(.87);opacity:0}
.qc.leaving{z-index:4;transform:translateY(-26px) scale(1.02) rotate(2.5deg);opacity:0}
.qc-top{display:flex;align-items:flex-start;gap:16px}
.qc-logo{min-width:184px;height:66px;padding:0 10px;border-radius:13px;display:grid;place-items:center;
  background:#fff;box-shadow:0 16px 32px -18px rgba(0,0,0,.8)}
.qc-logo b{font-size:13.5px;font-weight:800;letter-spacing:-.03em;color:#0b2437;white-space:nowrap}
.qc-logo.has-img{background:#fff}
.qc-logo.has-img b{display:none}
.qc-logo i{display:block;width:100%;height:100%;padding:8px 2px;box-sizing:border-box;
  background:var(--img) center/contain no-repeat;background-origin:content-box}
.qc-mark{margin-left:auto;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--orange2),var(--orange));color:#fff;flex:0 0 auto;
  box-shadow:0 16px 32px -16px rgba(227,93,38,1)}
.qc-mark svg{width:19px;height:19px}
.qc blockquote{margin:clamp(18px,2.2vw,26px) 0 0}
.qc-lead{margin:0;font-size:clamp(16px,1.72vw,20px);line-height:1.5;letter-spacing:-.026em;
  font-weight:740;color:#fff;text-wrap:pretty}
.qc-body{margin:12px 0 0;font-size:clamp(13px,1.28vw,14.5px);line-height:1.66;color:#b6c9d6;font-weight:500}
.qc-thanks{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--orange3);font-weight:660;font-style:italic}
.qc-scope{padding:5px 11px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:-.01em;
  color:#cfdde6;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.wq .qc-scope{color:var(--qa2,#cfdde6);
  background:color-mix(in srgb, var(--qa,#ff6b4a) 12%, transparent);
  border-color:color-mix(in srgb, var(--qa,#ff6b4a) 30%, transparent)}
.qc footer{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  margin-top:auto;padding-top:clamp(20px,2.4vw,26px);border-top:1px solid rgba(255,255,255,.13)}
.qc-av{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--orange2),var(--orange));color:#fff;font-size:14px;font-weight:800;
  box-shadow:0 0 0 2px rgba(255,138,89,.3),0 0 0 6px rgba(255,138,89,.09)}
.qc-who strong{display:block;font-size:15px;letter-spacing:-.028em;color:#fff}
.qc-who small{display:block;margin-top:2px;font-size:12px;color:#9db1c0}
.qc-tags{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.qc-tags .slogo{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#dbe6ee;font-weight:680}
.qc-tags .slogo b{background:rgba(255,255,255,.12);color:#cfdde6}

.deck-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(38px,4vw,52px)}
.dnav{appearance:none;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#cfdde6;
  transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease)}
.dnav svg{width:16px;height:16px}
.dnav[data-d="-1"] svg{transform:rotate(180deg)}
.dnav:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.08)}
.deck-count{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:#7f97a9}
.deck-count b{color:#fff;font-weight:600}
.deck-count i{display:block;width:22px;height:1px;background:rgba(255,255,255,.25)}

/* the client wall, moving */
.marq{position:relative;margin-top:clamp(34px,4vw,50px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq-t{display:flex;gap:12px;width:max-content;animation:marq 34s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mlogo{flex:0 0 auto;min-width:208px;height:86px;padding:0 14px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:background .32s,border-color .32s}
.mlogo:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22)}
.mlogo b{font-size:13px;font-weight:750;letter-spacing:-.025em;color:#c3d3de;white-space:nowrap}
.mlogo.has-img{background:#fff;border-color:transparent}
.mlogo.has-img b{display:none}
.mlogo i{display:block;width:100%;height:100%;padding:9px 10px;box-sizing:border-box;
  background:var(--img) center/contain no-repeat;background-origin:content-box}

@media (max-width:700px){
  .deck-cards{padding-bottom:46px}
  .qc-tags{margin-left:0;width:100%}
  .mlogo{min-width:164px;height:70px}
}
@media (prefers-reduced-motion:reduce){
  .qc{transition:none}
  .marq-t{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* [port erratum E1] The original has a stray "}" here (source line 3610). Browsers discard it
   together with the next rule (.pq-mark {...}), so both are left out. */
.pq-mark svg{width:20px;height:20px}
.pq blockquote{margin:0;font-size:clamp(19px,2.4vw,28px);line-height:1.48;letter-spacing:-.032em;
  font-weight:700;color:#fff;text-wrap:balance}
.pq figcaption{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,32px);padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.pq-av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--orange2),var(--orange));color:#fff;font-size:15px;font-weight:800}
.pq-who strong{display:block;font-size:15.5px;letter-spacing:-.025em;color:#fff}
.pq-who small{display:block;margin-top:2px;font-size:12.5px;color:#9db1c0}
.pq-tags{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.pq-tags .slogo{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#dbe6ee;font-weight:680}
.pq-tags .slogo b{background:rgba(255,255,255,.12);color:#cfdde6}

.pnums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(30px,3.6vw,44px);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden}
.pnums>div{background:rgba(6,22,37,.72);padding:26px 20px;text-align:center}
.pnums strong{display:block;font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.045em;
  color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.pnums span{display:block;margin-top:9px;font-size:12.5px;line-height:1.45;color:#9db1c0;font-weight:650}
.proofdk .served a{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13);color:#dbe6ee}
.proofdk .served a:hover{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:860px){.pnums{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pnums{grid-template-columns:1fr}}


/* ---------- resource listings ---------- */
.res-note{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:14px;
  background:var(--acs);border:1px solid var(--ac);margin-bottom:22px;
  font-size:13.5px;line-height:1.6;color:var(--ink);font-weight:600}
.res-note svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--ac)}
/* ---- Microsoft designation badges (hero, Recognition) ---- */
.msbadges{display:grid;gap:16px;align-content:center}
.msbadge{display:flex;gap:18px;align-items:center;padding:26px 28px;border-radius:20px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 54px -34px rgba(16,42,67,.45);transition:transform .3s,box-shadow .3s}
.msbadge:hover{transform:translateY(-3px);box-shadow:0 30px 60px -32px rgba(16,42,67,.5)}
.msq{width:42px;height:42px;flex:none}
.msb-t{display:flex;flex-direction:column;min-width:0}
.msb-t small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7d94a6}
.msb-t strong{font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;line-height:1.2;margin-top:4px;color:var(--navy)}
.msb-t em{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--body);margin-top:7px}
@media(max-width:900px){.msbadge{padding:20px 22px;gap:14px}.msq{width:34px;height:34px}}

/* ---- About Us: story, figures, services, recognition, products, partners ---- */
/* figure panel */
.ab-figs{background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--orange) 4%,var(--card)));
  border:1px solid var(--line)!important;border-radius:22px;padding:clamp(26px,3.2vw,40px) clamp(18px,2.4vw,30px)!important;
  box-shadow:0 26px 60px -44px rgba(14,36,56,.5);position:relative;overflow:hidden}
.ab-figs::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.ab-figs>.ab-fig+.ab-fig{border-left:1px solid var(--line)}
/* service journey */
.ab-flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1080px){.ab-flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ab-flow{grid-template-columns:1fr}}
.ab-rail{position:absolute;top:46px;left:7%;right:7%;height:2px;z-index:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--orange) 42%,transparent),color-mix(in srgb,var(--orange) 14%,transparent))}
.ab-flow .ab-svc{position:relative;z-index:1;animation:abRise .6s var(--ease) backwards;animation-delay:var(--d)}
.ab-arrow{position:absolute;top:34px;right:-21px;z-index:2;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;background:var(--card);
  border:1px solid color-mix(in srgb,var(--orange) 32%,var(--line));color:var(--orange)}
.ab-arrow>svg{width:12px;height:12px}
@keyframes abRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* capability score arc *//* [port erratum E2] The original has a stray "}" here (source line 3677). Browsers discard it
   together with the next rule (.ab-const {...}), so both are left out. */
.ab-const-line{position:absolute;top:60px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--orange) 36%,transparent),transparent)}
.ab-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;
  width:140px;animation:abRise .6s var(--ease) backwards;animation-delay:var(--d)}
.ab-node.up{transform:translateY(-26px)}
.ab-dia{display:grid;place-items:center;width:78px;height:78px;transform:rotate(45deg);
  border-radius:18px;background:var(--card);border:1.5px solid color-mix(in srgb,var(--orange) 34%,var(--line));
  box-shadow:0 16px 34px -22px rgba(16,42,67,.55);transition:.3s}
.ab-node:hover .ab-dia{border-color:var(--orange);box-shadow:0 20px 42px -20px rgba(227,93,38,.5)}
.ab-dia-in{transform:rotate(-45deg);display:grid;place-items:center}
.ab-dia-in>b{font-family:var(--mono);font-size:12px;color:#7d94a6}
.ab-dia-in.has-logo>b{display:none}
.ab-dia-in .ms-img{width:30px;height:30px}
.ab-node>strong{font-size:14px;text-align:center;letter-spacing:-.01em;line-height:1.3}
/* partner marquee */
.ab-marq{display:grid;gap:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.ab-mrow{overflow:hidden}
.ab-mtrack{display:flex;gap:10px;width:max-content;animation:abMarq 46s linear infinite}
.ab-mtrack.rev{animation-direction:reverse;animation-duration:56s}
.ab-marq:hover .ab-mtrack{animation-play-state:paused}
.ab-mtrack span{flex:none;padding:11px 20px;border-radius:99px;background:var(--card);
  border:1px solid var(--line);font-size:13.5px;font-weight:600;color:#48657d;white-space:nowrap;transition:.2s}
.ab-mtrack span:hover{border-color:color-mix(in srgb,var(--orange) 45%,var(--line));color:var(--orange)}
@keyframes abMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ab-mtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .ab-flow .ab-svc,.ab-node{animation:none}}
@media(max-width:1080px){.ab-rail,.ab-arrow{display:none}}
@media(max-width:900px){.ab-node.up{transform:none}.ab-const-line{display:none}}

.phero.ab-hero{padding:clamp(136px,13vw,172px) 0 0;overflow:hidden;position:relative}
.phero.ab-hero .shell{display:block;text-align:center;max-width:1180px}
.ab-stage{position:relative}
.ab-stage::before{content:"";position:absolute;left:50%;top:-16%;width:min(118vw,1180px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--ac) 11%,transparent) 0%,transparent 58%)}
.ab-mast{position:relative;z-index:2}
.ab-mast .crumb{justify-content:center}
.ab-eyebrow{display:inline-flex;align-items:center;gap:14px;margin:6px 0 22px;
  font-size:11.5px;font-weight:760;letter-spacing:.24em;text-transform:uppercase;color:var(--ac)}
.ab-eyebrow i{display:block;width:clamp(26px,5vw,54px);height:1px;
  background:linear-gradient(90deg,transparent,currentColor)}
.ab-eyebrow i:last-child{background:linear-gradient(270deg,transparent,currentColor)}
.ab-h1{font-size:clamp(37px,6.4vw,76px);line-height:1;letter-spacing:-.045em;font-weight:800;
  color:var(--ink);margin:0 auto;max-width:15ch}
.ab-h1 em{font-style:normal;display:inline-block;position:relative;
  padding:.06em .02em .14em;margin:-.06em -.02em -.14em;
  background:linear-gradient(104deg,var(--ac),#e4538c 54%,var(--ac));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.ab-sub{margin:clamp(20px,2.4vw,28px) auto 0;max-width:66ch;font-size:clamp(15.5px,1.26vw,17.5px);
  line-height:1.72;color:var(--muted)}
.ab-mast .hero-actions{justify-content:center;margin-top:clamp(26px,3vw,34px)}

/* the Microsoft estate we work in, drawn as an arc under the call to action */
.ab-arc{position:relative;height:clamp(104px,11.4vw,128px);margin-top:clamp(26px,3.4vw,42px)}
.ab-pos{position:absolute;top:var(--t);left:var(--l);
  transform:translate(-50%,0) rotate(var(--a));
  /* the mark arcs into place, then joins the wave that runs along the row */
  animation:abIn .7s var(--ease) var(--d) both,
            abWave 7s ease-in-out calc(var(--wd) + 1.1s) infinite}
.ab-chip{position:relative;overflow:hidden;display:grid;place-items:center;
  width:clamp(38px,4.1vw,52px);aspect-ratio:1;border-radius:15px;
  background:#fff;border:1px solid color-mix(in srgb,var(--ac) 13%,var(--line));
  box-shadow:0 12px 26px -16px rgba(14,36,56,.42),0 2px 5px -2px rgba(14,36,56,.14);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.ab-chip:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(14,36,56,.7)}
.ab-chip .ms-img{width:56%;height:56%}
.ab-chip b{font-size:10px;font-weight:800;color:var(--muted)}
.ab-chip.has-logo b{display:none}
/* a light crosses each tile as the wave reaches it */
.ab-chip::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.92) 50%,transparent 64%);
  transform:translateX(-130%);
  animation:abSheen 7s ease-in-out calc(var(--wd) + 1.1s) infinite}
@keyframes abSheen{0%{transform:translateX(-130%)}9%,100%{transform:translateX(130%)}}
@keyframes abIn{
  from{opacity:0;transform:translate(-50%,22px) rotate(var(--a)) scale(.82)}
  to  {opacity:1;transform:translate(-50%,0)    rotate(var(--a)) scale(1)}
}
@keyframes abWave{
  0%,100%{transform:translate(-50%,0) rotate(var(--a)) scale(1);filter:none}
  6%  {transform:translate(-50%,-13px) rotate(var(--a)) scale(1.09);
       filter:drop-shadow(0 18px 22px rgba(14,36,56,.26))}
  15% {transform:translate(-50%,0) rotate(var(--a)) scale(1);filter:none}
  38% {transform:translate(-50%,-3px) rotate(var(--a)) scale(1)}
  62% {transform:translate(-50%,0) rotate(var(--a)) scale(1)}
}
/* a hovered mark holds still so it can be looked at */
.ab-arc:hover .ab-pos{animation-play-state:running,paused}

/* credential rail closing the hero */
.ab-cred{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-top:clamp(12px,1.6vw,22px)}
.ab-cred>div{padding:clamp(18px,2vw,24px) 16px;text-align:center;position:relative;
  opacity:0;transform:translateY(10px)}
.ab-cred>div:nth-child(1){--cd:.05s}.ab-cred>div:nth-child(2){--cd:.14s}
.ab-cred>div:nth-child(3){--cd:.23s}.ab-cred>div:nth-child(4){--cd:.32s}
.rv.in.ab-cred>div{animation:abCred .6s var(--ease) var(--cd) forwards}
@keyframes abCred{to{opacity:1;transform:none}}
.ab-cred>div+div::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.ab-cred strong{display:block;font-size:14px;font-weight:760;letter-spacing:-.02em;color:var(--ink)}
.ab-cred span{display:block;margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .ab-pos{animation:none;opacity:1}
  .ab-chip::after{animation:none;opacity:0}
  .ab-cred>div{opacity:1;transform:none}
  .rv.in.ab-cred>div{animation:none}
}
@media (max-width:760px){
  /* half the marks, so the arc still reads as an arc on a phone */
  .ab-arc{height:96px}
  .ab-arc .ab-pos:nth-child(even){display:none}
  .ab-chip{width:34px}
}
@media (max-width:860px){
  .ab-cred{grid-template-columns:repeat(2,1fr)}
  .ab-cred>div:nth-child(2n+1)::before{display:none}
  .ab-cred>div:nth-child(n+3){border-top:1px solid var(--line)}
  .ab-chip{border-radius:12px}
}
@media (prefers-reduced-motion:reduce){
  .ab-pos{opacity:1;animation:none}
  .ab-chip:hover{transform:none}
}
/* ---------- About: manifesto ---------- */
.pg .sec.a2-man{background:linear-gradient(162deg,var(--navy) 0%,var(--deep) 58%,#0b2338 100%);color:#fff;
  position:relative;overflow:hidden}
.pg .sec.a2-man::before{content:"";position:absolute;top:-22%;right:-12%;width:58%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(192,42,99,.26),transparent 64%);pointer-events:none}
.a2-man .kicker{color:#ff7fae}
.a2-man-top{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(26px,4.4vw,64px);align-items:end;
  position:relative;z-index:1}
.a2-claim{margin:12px 0 0;font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-.045em;color:#fff}
.a2-claim em{font-style:normal;background:linear-gradient(100deg,#ff7fae,#ffb08a);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.a2-man-lead{margin:0;font-size:clamp(15.5px,1.3vw,18px);line-height:1.76;color:#c3d4e0}
.a2-chaps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);
  margin-top:clamp(40px,5vw,66px);position:relative;z-index:1}
.a2-chap{padding-top:22px;border-top:1px solid rgba(255,255,255,.17);opacity:0;transform:translateY(16px)}
.rv.in .a2-chap{animation:a2Rise .62s var(--ease) forwards var(--d)}
.a2-chap-n{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;color:#ff7fae}
.a2-chap h3{margin:9px 0 10px;font-size:17px;letter-spacing:-.025em;color:#fff}
.a2-chap p{margin:0;font-size:14.4px;line-height:1.74;color:#a9bdcc}
.a2-badges{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:10px}
.a2-badge{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.a2-badge:hover{border-color:rgba(255,138,89,.55);transform:translateX(3px)}
.a2-badge div{flex:1;min-width:0}
.a2-badge strong{display:block;font-size:14.6px;letter-spacing:-.015em;color:#fff;line-height:1.3}
.a2-badge div span{display:block;margin-top:2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#8ea3b4}
.a2-badge>svg{width:18px;height:18px;flex:none;padding:5px;box-sizing:content-box;border-radius:50%;
  color:#fff;background:linear-gradient(135deg,var(--orange2),var(--orange))}
.a2-ms{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2.5px;width:26px;height:26px;flex:none;
  padding:7px;box-sizing:content-box;border-radius:11px;background:#fff}
.a2-ms i{display:block;border-radius:1.5px}
.a2-ms i:nth-child(1){background:#f25022}.a2-ms i:nth-child(2){background:#7fba00}
.a2-ms i:nth-child(3){background:#00a4ef}.a2-ms i:nth-child(4){background:#ffb900}
.a2-ticks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.a2-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:#a9bdcc}
.a2-ticks li b{color:#fff;font-weight:700}
.a2-ticks li>svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--orange2)}
.a2-focus{position:relative;z-index:1;margin:clamp(34px,4vw,46px) auto 0;max-width:72ch;text-align:center;
  font-size:clamp(16px,1.42vw,19.5px);line-height:1.66;letter-spacing:-.02em;color:#fff;font-weight:620}
.a2-figs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(36px,4.4vw,56px);background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);border-radius:20px;overflow:hidden}
.a2-fig{background:rgba(5,20,34,.72);padding:clamp(22px,2.6vw,30px) 18px;text-align:center}
.a2-fig strong{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.04em;color:#fff}
.a2-fig span{display:block;margin-top:7px;font-size:12.4px;line-height:1.5;color:#9db1c0}
@keyframes a2Rise{to{opacity:1;transform:none}}
/* a missing --d would invalidate the animation shorthand and leave the card hidden */
.a2-chap,.a2-row,.a2-why-l li,.a2-prod,.a2-prac,.a2-off{--d:0s}

/* ---------- About: service ledger ---------- */
.a2-led{margin-top:clamp(26px,3.2vw,38px);border-top:1px solid var(--line)}
.a2-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,42px);align-items:start;
  padding:clamp(24px,3vw,34px) clamp(10px,1.6vw,22px);border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(14px);transition:background .3s var(--ease)}
.rv.in .a2-row{animation:a2Rise .6s var(--ease) forwards var(--d)}
.a2-row:hover{background:color-mix(in srgb,var(--ac) 3.5%,transparent)}
.a2-row em{font-style:normal;font-family:var(--mono);font-size:clamp(22px,2.6vw,32px);font-weight:600;
  letter-spacing:-.03em;color:color-mix(in srgb,var(--ac) 42%,transparent);line-height:1}
.a2-row-b h3{margin:0 0 9px;font-size:clamp(19px,1.9vw,24px);letter-spacing:-.03em;color:var(--ink)}
.a2-row-b p{margin:0;max-width:74ch;font-size:15px;line-height:1.75;color:var(--body)}
.a2-row-i{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;flex:0 0 auto;
  background:color-mix(in srgb,var(--ac) 8%,var(--mist));color:var(--ac)}
.a2-row-i svg{width:22px;height:22px}

/* ---------- About: the seven reasons ---------- */
.a2-why{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(26px,4.6vw,66px);align-items:start}
.a2-why-h{position:sticky;top:112px}
.a2-why-h h2{margin:10px 0 14px}
.a2-why-h p{margin:0;font-size:15px;line-height:1.75;color:var(--body)}
.a2-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:720;
  color:var(--ac);text-decoration:none}
.a2-link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.a2-link:hover svg{transform:translateX(4px)}
.a2-why-l{list-style:none;margin:0;padding:0;counter-reset:a2w}
.a2-why-l li{display:flex;gap:16px;padding:19px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(12px)}
.rv.in .a2-why-l li{animation:a2Rise .55s var(--ease) forwards var(--d)}
.a2-why-l li:first-child{padding-top:0}
.a2-why-l li:last-child{border-bottom:0;padding-bottom:0}
.a2-tick{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:0 0 auto;margin-top:2px;
  background:color-mix(in srgb,var(--ac) 11%,transparent);color:var(--ac)}
.a2-tick svg{width:14px;height:14px}
.a2-why-l strong{display:block;font-size:16.5px;letter-spacing:-.025em;color:var(--ink)}
.a2-why-l p{margin:6px 0 0;font-size:14.6px;line-height:1.72;color:var(--body)}

/* ---------- About: products ---------- */
.a2-prods{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(26px,3.2vw,38px)}
.a2-prod{position:relative;display:block;padding:clamp(22px,2.4vw,28px);border-radius:20px;
  background:var(--card);border:1px solid var(--line);text-decoration:none;overflow:hidden;
  opacity:0;transform:translateY(14px);transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.rv.in .a2-prod{animation:a2Rise .6s var(--ease) forwards var(--d)}
.a2-prod::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--pc),var(--pc2));transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.a2-prod:hover{transform:translateY(-5px);border-color:transparent;
  box-shadow:0 30px 56px -40px rgba(14,36,56,.6)}
.a2-prod:hover::before{transform:scaleX(1)}
.a2-prod-m{display:block;margin-bottom:16px}
.a2-prod strong{display:block;font-size:17px;letter-spacing:-.03em;color:var(--ink)}
.a2-prod p{margin:8px 0 0;font-size:14.2px;line-height:1.7;color:var(--body)}
.a2-prod-go{position:absolute;right:20px;bottom:20px;color:var(--pc);opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.a2-prod-go svg{width:16px;height:16px}
.a2-prod:hover .a2-prod-go{opacity:1;transform:none}

/* ---------- About: practices ---------- */
.a2-pracs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(26px,3.2vw,38px)}
.a2-prac{padding:clamp(20px,2.2vw,26px) clamp(16px,1.8vw,22px);border-radius:18px;background:var(--mist);
  border:1px solid var(--line);opacity:0;transform:translateY(14px);
  transition:transform .32s var(--ease),background .32s var(--ease)}
.rv.in .a2-prac{animation:a2Rise .6s var(--ease) forwards var(--d)}
.a2-prac:hover{transform:translateY(-4px);background:var(--card)}
.a2-prac-l{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--card);
  border:1px solid var(--line);margin-bottom:14px}
.a2-prac-l .ms-img{width:24px;height:24px}
.a2-prac-l.has-logo{background:none;border-color:transparent}
.a2-prac-l.has-logo>b{display:none}
.a2-prac-l b{font-size:12px;font-weight:800;color:var(--muted)}
.a2-prac strong{display:block;font-size:15.5px;letter-spacing:-.025em;color:var(--ink)}
.a2-prac p{margin:8px 0 0;font-size:13.4px;line-height:1.68;color:var(--body)}

/* ---------- About: offices ---------- */
.a2-offs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(26px,3.2vw,38px)}
.a2-off{position:relative;padding:clamp(24px,2.6vw,32px);border-radius:20px;background:var(--card);
  border:1px solid var(--line);opacity:0;transform:translateY(14px)}
.rv.in .a2-off{animation:a2Rise .6s var(--ease) forwards var(--d)}
.a2-off-c{display:inline-block;font-size:11px;font-weight:760;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ac)}
.a2-off h3{margin:10px 0 16px;font-size:clamp(20px,2vw,25px);letter-spacing:-.03em;color:var(--ink)}
.a2-off-a{display:flex;gap:11px;margin:0 0 14px;font-size:14.4px;line-height:1.68;color:var(--body)}
.a2-off-a svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--ac)}
.a2-off-t{display:inline-flex;align-items:center;gap:10px;font-size:14.6px;font-weight:700;
  color:var(--ink);text-decoration:none}
.a2-off-t svg{width:16px;height:16px;color:var(--ac);transition:transform .3s var(--ease)}
.a2-off-t:hover{color:var(--ac)}
.a2-off-t:hover svg{transform:translateX(3px)}
.a2-off-m{background:linear-gradient(158deg,color-mix(in srgb,var(--ac) 7%,var(--card)),var(--card));
  border-color:color-mix(in srgb,var(--ac) 20%,var(--line))}

@media (max-width:1040px){
  .a2-pracs{grid-template-columns:repeat(3,1fr)}
  .a2-prods{grid-template-columns:repeat(3,1fr)}
  .cl-figs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .a2-man-top,.a2-why{grid-template-columns:1fr}
  .a2-why-h{position:static}
  .a2-chaps{grid-template-columns:1fr}
  .a2-figs{grid-template-columns:repeat(2,1fr)}
  .a2-offs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .a2-prods,.a2-pracs{grid-template-columns:1fr}
  .a2-row{grid-template-columns:auto 1fr;gap:16px}
  .a2-row-i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv.in .a2-chap,.rv.in .a2-row,.rv.in .a2-why-l li,.rv.in .a2-prod,.rv.in .a2-prac,.rv.in .a2-off{animation:none}
  .a2-chap,.a2-row,.a2-why-l li,.a2-prod,.a2-prac,.a2-off{opacity:1;transform:none}
}
/* ---------- Why XEETEK: one drawing per reason ---------- */
.wx-figart{margin:clamp(26px,3vw,36px) 0 0;padding:clamp(18px,2.2vw,24px);
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 60px -48px rgba(14,36,56,.55)}
.wx-sec.mist .wx-figart{box-shadow:0 30px 60px -48px rgba(14,36,56,.4)}
.wxa{position:relative}
.wxa svg{display:block;width:100%;max-width:470px;height:auto;margin-inline:auto;overflow:visible}
.wxa-wall,.wxa-week,.wxa-rows,.wxa-base{max-width:470px;margin-inline:auto}
.wxa-foot{display:flex;flex-direction:column;gap:3px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.wxa-foot b{font-size:12.6px;font-weight:760;letter-spacing:.04em;color:var(--rc)}
.wxa-foot span{font-size:12.2px;line-height:1.5;color:var(--muted)}

/* 01 the certification wall */
.wxa-wall{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.wxa-wall i{aspect-ratio:1;border-radius:4px;background:var(--rc);opacity:0;transform:scale(.4)}
.rv.in .wxa-wall i{animation:wxaTile .42s var(--ease) var(--wd) forwards}
@keyframes wxaTile{to{opacity:var(--o);transform:none}}

/* 02 two offices, one week */
.wxa-geo .wxa-arc{fill:none;stroke:var(--rc);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:7 7;opacity:.55}
.rv.in .wxa-geo .wxa-arc{animation:wxaDash 14s linear infinite}
@keyframes wxaDash{to{stroke-dashoffset:-112}}
.wxa-city circle{fill:var(--rc)}
.wxa-city text{fill:var(--muted);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-anchor:middle}
.wxa-ping{fill:none;stroke:var(--rc);opacity:0}
.rv.in .wxa-ping{animation:wxaPing 2.6s var(--ease) infinite}
@keyframes wxaPing{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.7)}}
.wxa-geo .wxa-ping{transform-box:fill-box;transform-origin:center}
.wxa-week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:4px}
.wxa-week span{display:grid;place-items:center;height:26px;border-radius:7px;
  background:color-mix(in srgb,var(--rc) 14%,transparent);color:var(--rc);
  font-family:var(--mono);font-size:10.5px;font-weight:600}
.wxa-week span.off{background:var(--mist2);color:var(--muted-d)}

/* 03 the retention ring */
.wxa-ret{display:grid;grid-template-columns:132px 1fr;gap:clamp(14px,2vw,22px);align-items:center}
.wxa-ring{width:132px}
.wxa-trk{fill:none;stroke:var(--mist2);stroke-width:9}
.wxa-val{fill:none;stroke:var(--rc);stroke-width:9;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:66px 66px;
  stroke-dasharray:339.3;stroke-dashoffset:339.3}
.rv.in .wxa-val{animation:wxaRing 1.5s var(--ease) .25s forwards}
@keyframes wxaRing{to{stroke-dashoffset:0}}
.wxa-ring text{text-anchor:middle;fill:var(--ink);font-size:23px;font-weight:800;letter-spacing:-.04em}
.wxa-ring .wxa-ringsub{fill:var(--muted);font-family:var(--mono);font-size:8.5px;
  font-weight:500;letter-spacing:.17em}
.wxa-dots{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.wxa-dots i{aspect-ratio:1;border-radius:50%;background:var(--rc);opacity:0;transform:scale(.3)}
.rv.in .wxa-dots i{animation:wxaDot .4s var(--ease) var(--wd) forwards}
@keyframes wxaDot{to{opacity:.82;transform:none}}
.wxa-ret .wxa-foot{grid-column:1 / -1}

/* 04 the release waves */
.wxa-wave .wxa-frozen{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:4 5}
.wxa-wave .wxa-crest{fill:none;stroke:var(--rc);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:900;stroke-dashoffset:900}
.rv.in .wxa-wave .wxa-crest{animation:wxaDraw 2.1s var(--ease) .2s forwards}
@keyframes wxaDraw{to{stroke-dashoffset:0}}
.wxa-mark circle{fill:var(--rc)}
.wxa-wave .wxa-ping{fill:none;stroke:var(--rc);transform-box:fill-box;transform-origin:center}
.wxa-ticks text{fill:var(--muted-d);font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-anchor:middle}

/* 05 the 24-hour dial */
.wxa-clock{display:grid;grid-template-columns:132px 1fr;gap:clamp(16px,2.2vw,26px);align-items:center}
.wxa-clock svg{width:132px}
.wxa-clock line{stroke:var(--rc);stroke-width:4;stroke-linecap:round;opacity:0}
.rv.in .wxa-clock line{animation:wxaSeg .4s var(--ease) var(--wd) forwards}
@keyframes wxaSeg{to{opacity:.85}}
.wxa-clock text{text-anchor:middle;fill:var(--ink);font-size:21px;font-weight:800;letter-spacing:-.04em}
.wxa-sla{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.wxa-sla li{display:flex;flex-direction:column;gap:2px;padding-left:12px;
  border-left:2px solid color-mix(in srgb,var(--rc) 45%,transparent)}
.wxa-sla b{font-size:12.6px;font-weight:760;color:var(--ink)}
.wxa-sla span{font-size:12px;color:var(--muted)}

/* 06 seven practices around one engagement */
.wxa-hub svg{max-width:340px;margin-inline:auto}
.wxa-spokes line{stroke:color-mix(in srgb,var(--rc) 38%,transparent);stroke-width:1.6;
  stroke-dasharray:60;stroke-dashoffset:60}
.rv.in .wxa-spokes line{animation:wxaSpoke .6s var(--ease) var(--wd) forwards}
@keyframes wxaSpoke{to{stroke-dashoffset:0}}
.wxa-core{fill:var(--rc)}
.wxa-corea,.wxa-coreb{text-anchor:middle;fill:#fff;font-family:var(--mono);font-weight:600}
.wxa-corea{font-size:11px;letter-spacing:.2em}
.wxa-coreb{font-size:7.4px;letter-spacing:.15em;opacity:.85}
.wxa-node circle{fill:var(--paper);stroke:color-mix(in srgb,var(--rc) 55%,transparent);stroke-width:1.6}
.wx-sec.mist .wxa-node circle{fill:var(--paper)}
.wxa-node text{text-anchor:middle;fill:var(--rc);font-family:var(--mono);font-size:9.5px;
  font-weight:700;letter-spacing:.06em}
.wxa-node{opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center}
.rv.in .wxa-node{animation:wxaNode .5s var(--ease) var(--wd) forwards}
@keyframes wxaNode{to{opacity:1;transform:none}}

/* 07 one platform, not six systems */
.wxa-rows{display:flex;flex-direction:column;gap:7px}
.wxa-row{display:flex;align-items:baseline;gap:9px;padding:10px 14px;border-radius:11px;
  background:color-mix(in srgb,var(--rc) 8%,transparent);
  border-left:3px solid var(--rc);opacity:0;transform:translateX(-10px)}
.rv.in .wxa-row{animation:wxaSlide .55s var(--ease) var(--wd) forwards}
@keyframes wxaSlide{to{opacity:1;transform:none}}
.wxa-row b{font-size:13px;font-weight:720;color:var(--ink)}
.wxa-row span{font-size:11.8px;color:var(--muted)}
.wxa-base{position:relative;margin-top:11px;padding:13px 14px;border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--deep));overflow:hidden}
.wxa-base b{position:relative;font-size:12.6px;font-weight:740;letter-spacing:.03em;color:#fff}
.wxa-base span{position:absolute;inset:0;background:radial-gradient(circle at 18% 120%,
  color-mix(in srgb,var(--rc) 55%,transparent),transparent 62%)}

/* the sections zig-zag, so no two read the same way */
.wx-sec.mist .wx-l{order:2}
.wx-sec.mist .wx-r{order:1}
.wx-sec.mist .wx-in{grid-template-columns:1.16fr .84fr}
.wx-sec.mist .wx-r{padding-left:0;padding-right:clamp(18px,2vw,26px)}
.wx-sec.mist .wx-r::before{left:auto;right:0}
.wx-sec.mist .wx-wash{right:auto;left:-7%}

@media (prefers-reduced-motion:reduce){
  .wxa-wall i{opacity:var(--o);transform:none}
  .wxa-dots i{opacity:.82;transform:none}
  .wxa-clock line{opacity:.85}
  .wxa-row{transform:none;opacity:1}
  .wxa-node{opacity:1;transform:none}
  .wxa-spokes line{stroke-dashoffset:0}
  .wxa-val,.wxa-wave .wxa-crest{stroke-dashoffset:0}
  .rv.in .wxa-wall i,.rv.in .wxa-dots i,.rv.in .wxa-clock line,
  .rv.in .wxa-node,.rv.in .wxa-spokes line,
  .rv.in .wxa-row,.rv.in .wxa-val,.rv.in .wxa-wave .wxa-crest,
  .rv.in .wxa-ping,.rv.in .wxa-geo .wxa-arc{animation:none}
  .wxa-ping{opacity:0}
}
@media (max-width:900px){
  .wx-sec.mist .wx-l,.wx-sec.mist .wx-r{order:0}
  .wx-sec.mist .wx-in{grid-template-columns:1fr}
  .wx-sec.mist .wx-r{padding-right:0;padding-left:15px}
  .wx-sec.mist .wx-r::before{right:auto;left:0}
}
@media (max-width:460px){
  .wxa-ret,.wxa-clock{grid-template-columns:1fr}
  .wxa-ring,.wxa-clock svg{width:116px;margin-inline:auto}
  .wxa-wall{grid-template-columns:repeat(8,1fr)}
  .wxa-hub svg{max-width:100%}
}

/* ---------- Why XEETEK: the banner board ---------- */
.wx-board{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 34px 70px -52px rgba(14,36,56,.6)}
.wx-board-h{display:flex;align-items:center;gap:9px;padding:15px 20px;border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:760;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.wx-board-h b{margin-left:auto;font-size:11px;letter-spacing:.2em;color:var(--ac)}
.wx-board-g{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.wx-tile{--wd:0s;position:relative;min-width:0;display:flex;align-items:center;gap:12px;padding:15px 16px;border:0;
  background:var(--paper);font:inherit;font-family:inherit;text-align:left;cursor:pointer;overflow:hidden;
  opacity:0;transform:translateY(9px);transition:background .26s var(--ease)}
.rv.in.wx-board .wx-tile{animation:wxPop .55s var(--ease) var(--wd) forwards}
.wx-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc);
  transform:scaleY(0);transition:transform .3s var(--ease)}
.wx-tile:hover{background:color-mix(in srgb,var(--rc) 7%,var(--paper))}
.wx-tile:hover::before{transform:scaleY(1)}
.wx-tile i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--rc);flex:0 0 auto}
.wx-tile span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13.8px;font-weight:650;letter-spacing:-.02em;color:var(--ink);line-height:1.34}
.wx-board-g .wx-tile:last-child:nth-child(odd){grid-column:1 / -1}
@keyframes wxPop{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .wx-tile{opacity:1;transform:none}
  .rv.in.wx-board .wx-tile{animation:none}
}
@media (max-width:620px){.wx-board-g{grid-template-columns:1fr}}

/* ---------- Why XEETEK: the progress rail ---------- */
.wx-rail{position:fixed;left:clamp(12px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:7px;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease)}
.wx-rail.live{opacity:1;pointer-events:auto}
.wx-dot{display:flex;align-items:center;height:34px;padding:0;border:0;border-radius:99px;
  background:transparent;cursor:pointer;font:inherit;font-family:inherit;overflow:hidden;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),padding .3s var(--ease)}
.wx-dot i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border-radius:50%;font-family:var(--mono);font-size:10.5px;font-weight:600;
  color:var(--muted-d);background:var(--paper);border:1px solid var(--line);
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.wx-dot em{font-style:normal;max-width:0;white-space:nowrap;overflow:hidden;font-size:12.8px;font-weight:650;
  letter-spacing:-.02em;color:var(--ink);transition:max-width .36s var(--ease),padding .36s var(--ease)}
.wx-dot:hover{background:var(--paper);padding-right:4px;
  box-shadow:0 16px 32px -22px rgba(14,36,56,.6)}
.wx-dot:hover em{max-width:220px;padding:0 13px 0 9px}
.wx-dot.on i{color:#fff;background:var(--rc);border-color:transparent;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--rc) 16%,transparent)}
.wx-dot:hover i{color:var(--rc);border-color:color-mix(in srgb,var(--rc) 46%,transparent)}
@media (max-width:1280px){.wx-rail{display:none}}

/* ---------- Why XEETEK: hero index ---------- */
.wx-index{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 34px 70px -52px rgba(14,36,56,.6)}
.wx-index-h{display:flex;align-items:center;gap:9px;padding:15px 20px;border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:760;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.wx-index-h b{margin-left:auto;font-size:11px;letter-spacing:.2em;color:var(--ac)}
.wx-index ol{list-style:none;margin:0;padding:6px}
.wx-jump{display:flex;align-items:center;gap:13px;width:100%;padding:11px 14px;border:0;border-radius:13px;
  background:transparent;font:inherit;text-align:left;cursor:pointer;
  transition:background .25s var(--ease)}
.wx-jump:hover{background:color-mix(in srgb,var(--ac) 7%,transparent)}
.wx-jump i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ac);flex:0 0 auto}
.wx-jump span{flex:1;font-size:14.6px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.wx-jump svg{width:14px;height:14px;color:var(--muted);opacity:0;transform:translateX(-5px);
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.wx-jump:hover svg{opacity:1;transform:none;color:var(--ac)}

/* ---------- Why XEETEK: numbers ---------- */
.pg .sec.wx-nums{background:linear-gradient(162deg,var(--navy),var(--deep));color:#fff;
  position:relative;overflow:hidden}
.pg .sec.wx-nums::before{content:"";position:absolute;left:-10%;bottom:-40%;width:52%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(192,42,99,.24),transparent 64%)}
.wx-nums .shell{position:relative;z-index:1}
.wx-nums .kicker{color:#ff7fae}
.wx-nums h2{color:#fff}
.wx-nums .sec-head p{color:#9db1c0;font-size:13.6px;letter-spacing:.01em}
.wx-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(28px,3.4vw,42px);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:20px;overflow:hidden}
.wx-fig{background:rgba(5,20,34,.74);padding:clamp(24px,2.8vw,34px) 18px;text-align:center}
.wx-fig strong{display:block;font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.04em;color:#fff}
.wx-fig span{display:block;margin-top:8px;font-size:12.6px;line-height:1.5;color:#9db1c0}

/* ---------- Why XEETEK: the seven reasons ---------- */
.wx-sec{scroll-margin-top:96px;position:relative;overflow:hidden}
.wx-wash{position:absolute;top:-34%;right:-7%;width:44%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--rc) 14%,transparent),transparent 66%)}
.wx-sec .shell{position:relative;z-index:1}
.wx-in{display:grid;grid-template-columns:.84fr 1.16fr;gap:clamp(26px,5vw,70px);align-items:center}
.wx-l{position:relative}
.wx-num{position:absolute;top:-.3em;left:-.04em;font-family:var(--mono);font-size:clamp(86px,10vw,136px);
  font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--rc) 36%,transparent);
  pointer-events:none;user-select:none}
.wx-l h2{position:relative;margin:clamp(46px,6.2vw,88px) 0 12px;font-size:clamp(24px,2.6vw,34px);
  letter-spacing:-.035em;color:var(--ink)}
.wx-claim{position:relative;margin:0;font-size:clamp(15.5px,1.4vw,18px);line-height:1.6;
  letter-spacing:-.02em;font-weight:640;color:var(--rc)}
.wx-r{position:relative;padding-left:clamp(18px,2vw,26px)}
.wx-r::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--rc),color-mix(in srgb,var(--rc) 8%,transparent))}
.wx-r>p{margin:0;font-size:15.6px;line-height:1.82;color:var(--body)}
.wx-chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:clamp(20px,2.4vw,26px) 0 0;padding:0}
.wx-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;
  background:var(--card);border:1px solid var(--line);font-size:13.2px;font-weight:650;color:var(--ink)}
.wx-chips svg{width:13px;height:13px;color:var(--rc);flex:0 0 auto}
.wx-sec.mist .wx-chips li{background:var(--paper)}
.wx-marks{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:clamp(20px,2.4vw,26px) 0 0;padding:0}
.wx-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--paper);
  border:1px solid var(--line);transition:transform .3s var(--ease)}
.wx-mark:hover{transform:translateY(-4px)}
.wx-mark .ms-img{width:26px;height:26px}
.wx-mark.has-logo>b{display:none}
.wx-mark b{font-size:10px;font-weight:800;color:var(--muted)}

@media (max-width:900px){
  .wx-in{grid-template-columns:1fr;gap:20px;align-items:start}
  .wx-r{padding-left:15px}
  .wx-figs{grid-template-columns:repeat(2,1fr)}
  .wx-l h2{margin-top:clamp(42px,12vw,64px)}
}
@media (max-width:560px){
  .wx-num{font-size:74px}
}
.ab-story{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4.4vw,70px);align-items:start}
.ab-story-l h2{font-size:clamp(25px,3vw,36px);letter-spacing:-.025em;margin:14px 0 18px;line-height:1.16}
.ab-lead{color:var(--navy);font-size:16.5px;line-height:1.72;font-weight:600;margin:0}
.ab-story-r p{color:var(--body);font-size:15px;line-height:1.78;margin:0 0 16px}
.ab-focus{margin-top:20px!important;padding-top:18px;border-top:1px solid var(--line);
  color:var(--orange)!important;font-weight:700}
.ab-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(36px,4.6vw,62px);
  padding:clamp(26px,3.2vw,38px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.ab-fig strong{display:block;font-size:clamp(32px,4.4vw,52px);line-height:1;letter-spacing:-.04em;
  background:linear-gradient(140deg,var(--orange),#b8410f);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-fig span{display:block;margin-top:12px;color:var(--body);font-size:13.5px;line-height:1.45;max-width:18ch;margin-inline:auto}
.ab-svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ab-svc{position:relative;padding:28px;border-radius:18px;background:var(--card);border:1px solid var(--line);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.ab-svc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--orange) 34%,var(--line));
  box-shadow:0 18px 40px -26px rgba(16,42,67,.5)}
.ab-svc-i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;margin-bottom:16px;
  background:color-mix(in srgb,var(--orange) 11%,transparent);color:var(--orange);
  border:1px solid color-mix(in srgb,var(--orange) 24%,transparent)}
.ab-svc-i>svg{width:19px;height:19px}
.ab-svc>em{position:absolute;top:24px;right:26px;font-style:normal;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;color:#b9c7d2}
.ab-svc h3{font-size:16.5px;margin:0 0 10px;letter-spacing:-.02em;line-height:1.3}
.ab-svc p{color:var(--body);font-size:14px;line-height:1.65;margin:0}
.pg .sec.ab-rec{background:linear-gradient(160deg,var(--navy),var(--deep));color:#fff}
.ab-rec .sec-head h2{color:#fff}
.ab-rec .sec-head p{color:#a3b7c5}
.ab-rec .kicker{color:var(--orange2)}
.ab-rec .sec-head::before{background:linear-gradient(90deg,transparent,var(--orange2),transparent)}
.ab-recs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ab-recc{padding:clamp(26px,3vw,36px);border-radius:20px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13)}
.ab-recc-i{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:18px;
  background:rgba(255,138,89,.14);border:1px solid rgba(255,138,89,.28);color:var(--orange2)}
.ab-recc-i>svg{width:21px;height:21px}
.ab-recc h3{font-size:19px;margin:0 0 18px;letter-spacing:-.02em;color:#fff}
.ab-recc ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ab-recc li{display:flex;gap:11px;align-items:flex-start;color:#b3c6d6;font-size:14px;line-height:1.6}
.ab-recc li>svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--orange2)}
.ab-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ab-prod{display:block;padding:26px;border-radius:18px;background:var(--card);border:1px solid var(--line);
  text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.ab-prod:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pc) 45%,var(--line));
  box-shadow:0 18px 42px -26px color-mix(in srgb,var(--pc) 65%,transparent)}
.ab-prod strong{display:block;margin:15px 0 9px;font-size:16.5px;letter-spacing:-.02em;color:var(--navy)}
.ab-prod p{color:var(--body);font-size:14px;line-height:1.62;margin:0}
.ab-depts{display:flex;flex-wrap:wrap;gap:12px}
.ab-dept{display:flex;align-items:center;gap:13px;padding:15px 22px;border-radius:14px;
  background:var(--card);border:1px solid var(--line)}
.ab-dept strong{font-size:14.5px;letter-spacing:-.01em}
.ab-dept-l{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;
  background:var(--mist);border:1px solid var(--line)}
.ab-dept-l>b{font-family:var(--mono);font-size:11px;color:#7d94a6}
.ab-dept-l.has-logo>b{display:none}
.ab-dept-l .ms-img{width:20px;height:20px}
.ab-parts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ab-parts span{padding:11px 18px;border-radius:99px;background:var(--card);border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:#48657d;transition:.2s}
.ab-parts span:hover{border-color:color-mix(in srgb,var(--orange) 40%,var(--line));color:var(--orange)}
@media(max-width:1080px){.ab-svcs{grid-template-columns:repeat(2,1fr)}.ab-prods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.ab-story{grid-template-columns:1fr}.ab-figs{grid-template-columns:repeat(2,1fr)}
  .ab-figs>.ab-fig+.ab-fig{border-left:0}
  .ab-recs{grid-template-columns:1fr}}
@media(max-width:620px){.ab-svcs,.ab-prods{grid-template-columns:1fr}}
.phero.bh-hero{padding:clamp(136px,13vw,178px) 0 clamp(50px,6vw,78px);overflow:hidden}
.phero.bh-hero .shell{display:block;text-align:center;max-width:1080px}
.bh{position:relative}
.bh::before{content:"";position:absolute;left:50%;top:-22%;width:min(112vw,1000px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--ac) 10%,transparent) 0%,transparent 60%)}
.bh .crumb{justify-content:center}
.bh-eyebrow{display:inline-flex;align-items:center;gap:14px;margin:6px 0 22px;
  font-size:11.5px;font-weight:760;letter-spacing:.24em;text-transform:uppercase;color:var(--ac)}
.bh-eyebrow i{display:block;width:clamp(26px,5vw,56px);height:1px;
  background:linear-gradient(90deg,transparent,currentColor)}
.bh-eyebrow i:last-child{background:linear-gradient(270deg,transparent,currentColor)}
.bh-h1{margin:0 auto;max-width:18ch;font-size:clamp(36px,5.8vw,68px);line-height:1.04;
  letter-spacing:-.045em;font-weight:800;color:var(--ink)}
.bh-h1 em{font-style:normal;position:relative;display:inline-block;
  /* the clip box must reach below the baseline or descenders lose their paint */
  padding:.06em .02em .14em;margin:-.06em -.02em -.14em;
  background:linear-gradient(102deg,var(--ac),color-mix(in srgb,var(--ac) 55%,#ff9a5c) 55%,var(--ac));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bh-sub{margin:clamp(20px,2.4vw,28px) auto 0;max-width:62ch;
  font-size:clamp(15.5px,1.26vw,17.5px);line-height:1.74;color:var(--muted)}
.phero.bh-hero .hero-actions{justify-content:center;margin-top:clamp(26px,3vw,34px)}
.bh-art{margin:clamp(34px,4.4vw,56px) auto 0;max-width:min(100%,900px)}
.bh-art.wx-art{max-width:min(100%,780px)}
.bh-art,.bh-art .msbadge,.bh-art .wx-board{text-align:left}
.bh-art .msbadges{max-width:760px;margin-inline:auto}
.bh-art .pscene{margin:0 auto}
.bh-meta{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
  margin-top:clamp(26px,3.2vw,36px);padding:11px 22px;border-radius:99px;background:var(--card);
  border:1px solid var(--line);box-shadow:0 16px 34px -26px rgba(14,36,56,.5);
  font-size:13.2px;color:var(--muted);
  opacity:0;transform:translateY(10px);animation:bhPop .55s var(--ease) forwards .35s}
.bh-meta b{font-weight:800;color:var(--ac)}
.bh-meta i{display:block;width:4px;height:4px;border-radius:50%;background:var(--line)}
@keyframes bhPop{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bh-meta{opacity:1;transform:none;animation:none}
}

/* ---- compact capability grid: a title and one line, not a paragraph ---- */
.cx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  margin-top:clamp(26px,3.2vw,38px);background:var(--card);
  border:1px solid var(--line);border-radius:20px;overflow:hidden}
.cx{--d:0s;position:relative;background:var(--card);padding:clamp(20px,2.2vw,26px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(12px);transition:background .3s var(--ease)}
.rv.in .cx{animation:cxRise .55s var(--ease) forwards var(--d)}
.cx::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;background:var(--ac);
  transform:scaleY(0);transform-origin:center;transition:transform .32s var(--ease)}
.cx:hover{background:color-mix(in srgb,var(--ac) 3.5%,var(--card))}
.cx:hover::before{transform:scaleY(1)}
.cx em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.15em;color:color-mix(in srgb,var(--ac) 62%,transparent)}
.cx strong{display:block;margin:10px 0 7px;font-size:16.5px;letter-spacing:-.03em;color:var(--ink)}
.cx p{margin:0;font-size:13.8px;line-height:1.68;color:var(--body)}
@keyframes cxRise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rv.in .cx{animation:none}
  .cx{opacity:1;transform:none}
}

/* ---- Dynamics 365: the platform map ---- */
.d3-plat{margin-top:clamp(28px,3.4vw,40px)}
.d3-row-h{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.d3-row-h strong{font-size:12px;font-weight:780;letter-spacing:.17em;text-transform:uppercase;color:var(--ac)}
.d3-row-h small{font-size:13px;color:var(--muted)}
.d3-chips{display:flex;flex-wrap:wrap;gap:10px}
.d3-chip{--c:#2f9de8;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 11px;
  border-radius:14px;background:var(--card);border:1px solid var(--line);cursor:pointer;
  font:inherit;font-size:14px;font-weight:650;letter-spacing:-.015em;color:var(--ink);
  position:relative;overflow:hidden;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
.d3-chip::after{content:"";position:absolute;inset:auto 0 0;height:2.5px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.d3-chip:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(14,36,56,.6)}
.d3-chip:hover::after{transform:scaleX(1)}
.d3-chip.on{border-color:color-mix(in srgb,var(--c) 46%,transparent);
  background:color-mix(in srgb,var(--c) 7%,var(--card));box-shadow:0 20px 38px -26px color-mix(in srgb,var(--c) 70%,transparent)}
.d3-chip.on::after{transform:scaleX(1)}
.d3-chip-l{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto}
.d3-chip-l .ms-img{width:22px;height:22px}
.d3-chip-l.has-logo>b{display:none}
.d3-chip-l b{font-size:9px;font-weight:800;color:var(--muted)}

.d3-core{position:relative;margin:clamp(22px,2.6vw,32px) 0;padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,28px);
  border-radius:18px;color:#fff;overflow:hidden;
  background:linear-gradient(118deg,var(--navy),var(--deep) 62%,#10243a)}
.d3-core-in{position:relative;z-index:1;display:flex;align-items:center;gap:16px}
.d3-core-i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:0 0 auto;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#ff9ec1}
.d3-core-i svg{width:22px;height:22px}
.d3-core-dots{margin-left:auto;display:flex;align-items:center;gap:7px;flex:0 0 auto}
.d3-core-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.d3-core-dots i.on{background:var(--c);transform:scale(1.7);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 26%,transparent)}
.d3-core-dots b{margin-left:9px;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#8ca6bd}
@media (max-width:820px){.d3-core-dots{display:none}}
.d3-core strong{display:block;font-size:17px;letter-spacing:-.03em;color:#fff}
.d3-core small{display:block;margin-top:4px;font-size:13.4px;line-height:1.6;color:#a9bdcc}
.d3-wire{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,22,37,.9) 0%,transparent 42%),
    repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.07) 46px 47px),
    radial-gradient(60% 140% at 18% 50%,rgba(192,42,99,.3),transparent 70%)}
.d3-core::after{content:"";position:absolute;left:-30%;top:0;bottom:0;width:30%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  animation:d3Sweep 5.2s linear infinite}
@keyframes d3Sweep{to{left:120%}}

.d3-detail{margin-top:clamp(24px,3vw,34px)}
.d3-card{display:none;gap:clamp(16px,2vw,24px);padding:clamp(24px,2.8vw,32px);border-radius:20px;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c);
  box-shadow:0 28px 56px -44px rgba(14,36,56,.55);animation:d3In .4s var(--ease)}
.d3-card.on{display:flex}
@keyframes d3In{from{opacity:0;transform:translateY(8px)}}
.d3-card-l{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;flex:0 0 auto;
  background:color-mix(in srgb,var(--c) 10%,var(--mist));border:1px solid color-mix(in srgb,var(--c) 20%,var(--line))}
.d3-card-l .ms-img{width:28px;height:28px}
.d3-card-l.has-logo>b{display:none}
.d3-card-l b{font-size:11px;font-weight:800;color:var(--muted)}
.d3-tag{display:inline-block;padding:4px 11px;border-radius:99px;font-size:10.5px;font-weight:760;
  letter-spacing:.13em;text-transform:uppercase;color:var(--c);
  background:color-mix(in srgb,var(--c) 11%,transparent)}
.d3-card h3{margin:11px 0 9px;font-size:clamp(19px,2vw,24px);letter-spacing:-.03em;color:var(--ink)}
.d3-card p{margin:0 0 16px;max-width:78ch;font-size:15px;line-height:1.76;color:var(--body)}
.d3-go{display:inline-flex;align-items:center;gap:8px;font-size:13.8px;font-weight:720;
  color:var(--c);text-decoration:none}
.d3-go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.d3-go:hover svg{transform:translateX(4px)}
.d3-hint{margin:16px 0 0;font-size:12.6px;color:var(--muted-d);text-align:center}

/* ---- Dynamics 365: the release waves ---- */
.pg .sec.d3-wave{background:linear-gradient(168deg,var(--navy),var(--deep));color:#fff;
  position:relative;overflow:hidden}
.d3-wave .kicker{color:#ff7fae}
.d3-wave h2{color:#fff}
.d3-wave .sec-head p{color:#a9bdcc}
.d3-waves{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(42px,5vw,62px)}
.d3-wline{position:absolute;top:5px;left:9%;right:9%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),rgba(255,255,255,.3),transparent)}
.d3-w{--d:0s;position:relative;padding-top:30px;opacity:0;transform:translateY(16px)}
.rv.in .d3-w{animation:d3Rise .6s var(--ease) forwards var(--d)}
.d3-w-dot{position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--orange2);box-shadow:0 0 0 5px rgba(255,138,89,.18)}
.d3-w em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange2)}
.d3-w strong{display:block;margin:9px 0 9px;font-size:17px;letter-spacing:-.03em;color:#fff}
.d3-w p{margin:0;font-size:14px;line-height:1.72;color:#a9bdcc}
@keyframes d3Rise{to{opacity:1;transform:none}}

@media (max-width:900px){
  .d3-waves{grid-template-columns:1fr 1fr}
  .d3-wline{display:none}
  .d3-card{flex-direction:column}
}
@media (max-width:560px){
  .d3-waves{grid-template-columns:1fr}
  .d3-chip{font-size:13px;padding:9px 13px 9px 9px}
}
@media (prefers-reduced-motion:reduce){
  .d3-core::after{animation:none}
  .rv.in .d3-w{animation:none}
  .d3-w{opacity:1;transform:none}
  .d3-card{animation:none}
  .d3-chip:hover{transform:none}
}

/* ---- Solutions: the products a solution resolves to ---- */
.sl-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(26px,3.2vw,38px)}
.sl-link{--d:0s;position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,28px);
  border-radius:20px;background:var(--card);border:1px solid var(--line);text-decoration:none;
  opacity:0;transform:translateY(14px);overflow:hidden;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.rv.in .sl-link{animation:slRise .6s var(--ease) forwards var(--d)}
.sl-link::before{content:"";position:absolute;inset:0 0 auto;height:3px;transform:scaleX(0);
  transform-origin:left;transition:transform .4s var(--ease);
  background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 45%,#ff9a5c))}
.sl-link:hover{transform:translateY(-5px);border-color:transparent;
  box-shadow:0 32px 60px -42px rgba(14,36,56,.6)}
.sl-link:hover::before{transform:scaleX(1)}
.sl-link.on{border-color:color-mix(in srgb,var(--ac) 26%,var(--line));
  background:linear-gradient(162deg,color-mix(in srgb,var(--ac) 5%,var(--card)),var(--card))}
.sl-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sl-logo{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;flex:0 0 auto;
  background:var(--mist);border:1px solid var(--line)}
.sl-ms{display:grid;place-items:center;width:28px;height:28px}
.sl-ms .ms-img{width:28px;height:28px}
.sl-ms.has-logo>b{display:none}
.sl-ms b{font-size:10px;font-weight:800;color:var(--muted)}
.sl-top em{margin-left:auto;font-style:normal;padding:5px 11px;border-radius:99px;
  font-size:10.5px;font-weight:760;letter-spacing:.13em;text-transform:uppercase;
  background:color-mix(in srgb,var(--ac) 11%,transparent);color:var(--ac)}
.sl-top em.alt{background:var(--mist);color:var(--muted)}
.sl-link strong{display:block;font-size:17.5px;letter-spacing:-.03em;color:var(--ink)}
.sl-link p{margin:9px 0 18px;font-size:14.2px;line-height:1.7;color:var(--body)}
.sl-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.4px;font-weight:720;
  color:var(--ac)}
.sl-go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.sl-link:hover .sl-go svg{transform:translateX(4px)}
@keyframes slRise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rv.in .sl-link{animation:none}
  .sl-link{opacity:1;transform:none}
  .sl-link:hover{transform:none}
}

/* ---- About: each XEE product shows what it does ---- */
.xp-scene{display:block;height:56px;margin-bottom:16px;border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--pc) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--pc) 16%,transparent)}
.xp-scene svg{display:block;width:100%;height:100%}

/* HRMS — the whole headcount, on one record */
.xp-hr{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;align-content:center;padding:0 12px}
.xp-hr i{height:9px;border-radius:3px;background:var(--pc);opacity:.22}
.rv.in .xp-hr i{animation:xpHr 3.4s var(--ease) var(--wd) infinite}
@keyframes xpHr{0%,70%,100%{opacity:.22}20%,45%{opacity:.9}}

/* Sales — the route, the stops and the rep running it */
.xp-sales .xp-route{fill:none;stroke:var(--pc);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:4 5;opacity:.5}
.xp-sales .xp-stop{fill:var(--pc);opacity:.35}
.rv.in .xp-sales .xp-stop{animation:xpStop 4.2s var(--ease) var(--wd,0s) infinite}
@keyframes xpStop{0%,100%{opacity:.3;r:4}18%{opacity:1;r:5.4}}
.xp-sales .xp-van{fill:var(--pc)}

/* WMS — bins filling on the floor */
.xp-wms{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;align-items:end;padding:9px 12px}
.xp-wms i{display:block;height:var(--h);border-radius:3px 3px 2px 2px;background:var(--pc);
  opacity:.75;transform-origin:bottom;transform:scaleY(.25)}
.rv.in .xp-wms i{animation:xpBin 3.6s var(--ease) var(--wd) infinite}
@keyframes xpBin{0%,100%{transform:scaleY(.25)}35%,65%{transform:scaleY(1)}}

/* POS — the receipt printing, line by line */
.xp-ei{display:flex;align-items:center;gap:6px;padding:0 12px}
.xp-ei b{display:grid;place-items:center;min-width:34px;height:24px;padding:0 6px;border-radius:7px;background:#fff;border:1px solid color-mix(in srgb,var(--pc) 30%,transparent);font-size:9.5px;font-weight:800;color:var(--pc)}
.xp-ei b.ok{min-width:24px;padding:0;background:var(--pc);color:#fff;border:0;border-radius:50%}
.xp-ei b.ok svg{width:12px;height:12px}
.xp-ei i{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--pc) 0 5px,transparent 5px 9px);background-size:18px 2px;animation:eiFlow 1.1s linear infinite;animation-delay:var(--wd,0s)}
.xp-pos{display:grid;gap:5px;align-content:center;padding:0 14px}
.xp-pos u{display:block;height:6px;border-radius:3px;background:var(--pc);opacity:.28;
  width:0;text-decoration:none}
.xp-pos u.tot{height:8px;opacity:.75}
.rv.in .xp-pos u{animation:xpLine 3.8s var(--ease) var(--wd) infinite}
@keyframes xpLine{0%{width:0}22%,74%{width:88%}100%{width:0}}
.rv.in .xp-pos u.tot{animation-name:xpTot}
@keyframes xpTot{0%{width:0}30%,74%{width:46%}100%{width:0}}

@media (prefers-reduced-motion:reduce){
  .rv.in .xp-hr i,.rv.in .xp-sales .xp-stop,.rv.in .xp-wms i,.rv.in .xp-pos u{animation:none}
  .xp-hr i{opacity:.55}
  .xp-wms i{transform:scaleY(.7)}
  .xp-pos u{width:80%}
  .xp-pos u.tot{width:44%}
  .xp-sales .xp-van{display:none}
}

/* ---- About: who we work with ---- */
.pg .sec.cl-band{background:linear-gradient(168deg,var(--navy),var(--deep));color:#fff;
  position:relative;overflow:hidden}
.pg .sec.cl-band::before{content:"";position:absolute;right:-12%;top:-45%;width:52%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(227,93,38,.26),transparent 64%)}
.cl-band .shell{position:relative;z-index:1}
.cl-band .kicker{color:var(--orange2)}
.cl-band h2{color:#fff}
.cl-band .sec-head p{color:#9db1c0}
.cl-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:clamp(28px,3.4vw,40px) 0 clamp(26px,3vw,36px);
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);border-radius:18px;overflow:hidden}
.cl-fig{background:rgba(5,20,34,.66);padding:clamp(18px,2.2vw,26px) 14px;text-align:center}
.cl-fig strong{display:block;font-size:clamp(25px,3vw,36px);font-weight:800;letter-spacing:-.04em;color:#fff}
.cl-fig span{display:block;margin-top:7px;font-size:12.2px;line-height:1.45;color:#9db1c0}
.cl-band .ab-marq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.cl-band .ab-mtrack{animation-duration:var(--sp,52s)}
.cl-band .ab-mtrack span{display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);color:#d6e3ec}
.cl-band .ab-mtrack span i{width:5px;height:5px;border-radius:50%;flex:0 0 auto;
  background:var(--orange2);opacity:.8}
.cl-band .ab-mtrack span:hover{background:rgba(255,255,255,.1);
  border-color:color-mix(in srgb,var(--orange2) 55%,transparent);color:#fff}
.cl-note{display:flex;align-items:flex-start;gap:10px;justify-content:center;
  margin:clamp(26px,3vw,34px) auto 0;max-width:72ch;text-align:left;
  font-size:13px;line-height:1.65;color:#9db1c0}
.cl-note svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--mint)}
@media (max-width:760px){.cl-figs{grid-template-columns:repeat(2,1fr)}}

/* ---- Careers: find the post ---- */
/* the browser's own clear cross would sit beside ours */
.cvq-box input::-webkit-search-cancel-button,
.rs-box input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.cvq{margin-top:clamp(24px,3vw,32px)}
.cvq-box{display:flex;align-items:center;gap:11px;padding:4px 6px 4px 16px;border-radius:99px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 18px 38px -34px rgba(14,36,56,.6);transition:border-color .28s var(--ease)}
.cvq-box:focus-within{border-color:color-mix(in srgb,var(--ac) 55%,var(--line))}
.cvq-box>svg{width:17px;height:17px;flex:0 0 auto;color:var(--muted)}
.cvq-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
  font-size:15px;color:var(--ink);padding:13px 0}
.cvq-box input::placeholder{color:var(--muted-d)}
.cvq-clear{display:grid;place-items:center;width:32px;height:32px;flex:none;border:0;cursor:pointer;
  border-radius:50%;background:var(--mist);color:var(--muted)}
.cvq-clear>svg{width:14px;height:14px}
.cvq-clear:hover{background:color-mix(in srgb,var(--ac) 13%,var(--mist));color:var(--ac)}
.cvq-clear[hidden]{display:none}
.cvq-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cvq-tag{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;
  cursor:pointer;font:inherit;font-family:inherit;font-size:12.8px;font-weight:650;
  background:var(--paper);border:1px solid var(--line);color:var(--body);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.cvq-tag svg{width:13px;height:13px;color:var(--muted)}
.cvq-tag:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--line));color:var(--ac)}
.cvq-tag:hover svg{color:var(--ac)}
.cvq-tag.on{background:var(--ac);border-color:var(--ac);color:#fff}
.cvq-tag.on svg{color:#fff}
.cvq-count{margin-top:13px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--muted);min-height:1em}
.cvq-none{display:none;margin:0;padding:clamp(28px,3.4vw,40px) 0;text-align:center;
  font-size:15px;line-height:1.7;color:var(--muted)}
.cvq-none .cvq-reset{border:0;padding:0;background:none;cursor:pointer;font:inherit;
  font-weight:700;color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.cv-sec.cvq-empty .cv-list{display:none}
.cv-sec.cvq-empty .cvq-none{display:block}
.cv[hidden]{display:none}

/* ---- Careers: open vacancies ---- */
.cv-list{margin-top:clamp(26px,3.2vw,38px);border-top:1px solid var(--line)}
.cv{--d:0s;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.6vw,34px);
  padding:clamp(22px,2.6vw,30px) clamp(10px,1.6vw,20px);border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(14px);transition:background .3s var(--ease)}
.rv.in .cv{animation:cvRise .6s var(--ease) forwards var(--d)}
.cv:hover{background:color-mix(in srgb,var(--ac) 3.5%,transparent)}
.cv-main{flex:1 1 320px;min-width:0}
.cv-prac{display:inline-block;padding:4px 11px;border-radius:99px;font-size:10.5px;font-weight:760;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ac);
  background:color-mix(in srgb,var(--ac) 11%,transparent)}
.cv h3{margin:11px 0 8px;font-size:clamp(18px,1.9vw,22px);letter-spacing:-.03em;color:var(--ink)}
.cv p{margin:0 0 12px;max-width:76ch;font-size:14.4px;line-height:1.72;color:var(--body)}
.cv-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted)}
.cv-meta span{display:inline-flex;align-items:center;gap:7px}
.cv-meta svg{width:14px;height:14px;color:var(--ac)}
.cv-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:99px;
  background:var(--ac);color:#fff;font-size:14px;font-weight:720;text-decoration:none;
  box-shadow:0 18px 34px -22px color-mix(in srgb,var(--ac) 80%,transparent);
  transition:transform .28s var(--ease)}
.cv-go svg{width:15px;height:15px;transition:transform .28s var(--ease)}
.cv-go:hover{transform:translateY(-2px)}
.cv-go:hover svg{transform:translateX(4px)}
@keyframes cvRise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rv.in .cv{animation:none}
  .cv{opacity:1;transform:none}
  .cv-go:hover{transform:none}
}

/* ---- Team: masthead and the three pillars ---- */
.phero.tn-hero{padding:clamp(132px,12.6vw,170px) 0 clamp(26px,3vw,38px)}
.phero.tn-hero .shell{display:block;text-align:left;max-width:1180px}
.tn-mast{max-width:980px}
.tn-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:4px 0 20px;padding:7px 14px 7px 11px;
  border-radius:99px;background:color-mix(in srgb,var(--ac) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--ac) 22%,transparent);
  font-size:11.5px;font-weight:760;letter-spacing:.2em;text-transform:uppercase;color:var(--ac)}
.tn-eyebrow svg{width:14px;height:14px}
.tn-h1{margin:0;font-size:clamp(36px,6vw,70px);line-height:1;letter-spacing:-.045em;font-weight:800;color:var(--ink)}
.tn-h1 em{font-style:normal;background:linear-gradient(100deg,var(--ac),#e4538c 56%,var(--ac));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tn-sub{margin:clamp(20px,2.3vw,26px) 0 0;max-width:70ch;font-size:clamp(15.5px,1.26vw,17.5px);
  line-height:1.74;color:var(--muted)}
.tn-hero .hero-actions{justify-content:flex-start;margin-top:clamp(24px,2.8vw,32px)}

.tn-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,18px);
  margin-top:clamp(40px,5vw,64px)}
.tn-pill{--d:0s;position:relative;display:flex;flex-direction:column;align-items:flex-start;
  width:100%;padding:clamp(22px,2.4vw,28px);
  border-radius:20px;background:var(--card);border:1px solid var(--line);font:inherit;text-align:left;
  cursor:pointer;overflow:hidden;opacity:0;transform:translateY(16px);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.rv.in .tn-pill{animation:tnRise .62s var(--ease) forwards var(--d)}
.tn-pill::before{content:"";position:absolute;inset:0 0 auto;height:3px;transform:scaleX(0);
  transform-origin:left;transition:transform .42s var(--ease);
  background:linear-gradient(90deg,var(--ac),#e4538c)}
.rv.in .tn-pill::before{transform:scaleX(1);transition-delay:calc(var(--d) + .25s)}
.tn-pill-i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:color-mix(in srgb,var(--ac) 9%,var(--mist));color:var(--ac)}
.tn-pill-i svg{width:20px;height:20px}
.tn-pill em{display:block;margin:16px 0 7px;font-style:normal;font-family:var(--mono);font-size:11px;
  font-weight:600;letter-spacing:.14em;color:var(--ac)}
.tn-pill strong{display:block;font-size:17.5px;letter-spacing:-.03em;color:var(--ink)}
.tn-pill p{margin:9px 0 0;font-size:14.2px;line-height:1.7;color:var(--body)}
.tn-badge{position:absolute;right:18px;top:22px;padding:5px 11px;border-radius:99px;
  font-size:10.5px;font-weight:760;letter-spacing:.13em;text-transform:uppercase;
  background:color-mix(in srgb,var(--ac) 11%,transparent);color:var(--ac)}
.tn-sec{scroll-margin-top:92px}
@keyframes tnRise{to{opacity:1;transform:none}}
@media (max-width:900px){.tn-rail{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .rv.in .tn-pill{animation:none}
  .tn-pill{opacity:1;transform:none}
}

/* ---- Team: the room, the disciplines, evolving, life ---- */
.tmx-roomsec{padding-top:clamp(30px,3.4vw,46px)}
.tmx-room{margin:0 auto;position:relative;max-width:min(100%,780px);border-radius:22px;overflow:hidden;
  box-shadow:0 40px 86px -56px rgba(14,36,56,.66)}
.tmx-shot{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  position:relative;overflow:hidden;border-radius:inherit}
.tmx-room img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform .55s var(--ease)}
.tmx-shot:hover img,.tmx-shot:focus-visible img{transform:scale(1.045)}
.tmx-exp{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:99px;background:rgba(10,24,38,.52);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(10px);color:#fff;font-size:12px;font-weight:700;letter-spacing:.01em;
  opacity:0;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tmx-exp svg{width:14px;height:14px}
.tmx-shot:hover .tmx-exp,.tmx-shot:focus-visible .tmx-exp{opacity:1;transform:none}

/* full-size overlay */
.tmx-lb{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:clamp(16px,4vw,48px);
  background:rgba(3,12,22,.9);backdrop-filter:blur(8px);opacity:0;transition:opacity .28s var(--ease);
  cursor:zoom-out}
.tmx-lb.on{opacity:1}
.tmx-lb figure{margin:0;max-width:min(1180px,94vw);cursor:default;transform:scale(.97);
  transition:transform .32s var(--ease)}
.tmx-lb.on figure{transform:none}
.tmx-lb img{display:block;width:100%;max-height:84vh;object-fit:contain;border-radius:16px;
  box-shadow:0 50px 110px -50px rgba(0,0,0,.8)}
.tmx-lb figcaption{margin-top:14px;text-align:center;color:#c3d4e0;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.tmx-lb-x{position:absolute;top:clamp(14px,2.4vw,26px);right:clamp(14px,2.4vw,26px);
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff;
  transition:background .25s var(--ease)}
.tmx-lb-x:hover{background:rgba(255,255,255,.22)}
.tmx-lb-x svg{width:17px;height:17px}
@media (prefers-reduced-motion:reduce){
  .tmx-room img,.tmx-lb,.tmx-lb figure{transition:none}
  .tmx-shot:hover img{transform:none}
  .tmx-exp{opacity:1;transform:none}
}
.tmx-feat{position:relative;border-color:color-mix(in srgb,var(--orange) 40%,var(--line))!important;
  background:linear-gradient(165deg,color-mix(in srgb,var(--orange) 6%,var(--card)),var(--card))!important}
.tmx-tag{display:inline-block;margin-top:14px;padding:5px 12px;border-radius:99px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:color-mix(in srgb,var(--orange) 13%,transparent);color:var(--orange);
  border:1px solid color-mix(in srgb,var(--orange) 28%,transparent)}
/* ---- Team: the year, photographed ---- */
.tmx-gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.1vw,15px);
  grid-auto-rows:clamp(165px,16.5vw,235px);
  grid-template-areas:
    "o o o o o o a a a d d d"
    "o o o o o o a a a d d d"
    "b b b b c c c c e e e e"}
.tmx-g{position:relative;display:block;padding:0;border:0;overflow:hidden;cursor:pointer;
  border-radius:clamp(14px,1.4vw,20px);background:var(--mist2);
  box-shadow:0 22px 46px -34px rgba(14,36,56,.55);
  opacity:0;transform:translateY(16px) scale(.97)}
.rv.in .tmx-g{animation:tgIn .72s var(--ease) var(--gd) forwards}
@keyframes tgIn{to{opacity:1;transform:none}}
.tmx-g img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease),filter .5s var(--ease)}
.tmx-g::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,16,28,.82));
  opacity:.72;transition:opacity .45s var(--ease)}
.tmx-g:hover img,.tmx-g:focus-visible img{transform:scale(1.055)}
.tmx-g:hover::after,.tmx-g:focus-visible::after{opacity:.9}
.tmx-gl{position:absolute;left:clamp(14px,1.4vw,20px);bottom:clamp(13px,1.3vw,18px);z-index:2;
  display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 76px);
  font-size:clamp(12.5px,1.05vw,14.5px);font-weight:720;letter-spacing:-.01em;
  color:#fff;text-align:left;line-height:1.3;text-shadow:0 1px 10px rgba(4,16,28,.5)}
.tmx-gl i{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--orange2);
  box-shadow:0 0 0 4px rgba(227,93,38,.26)}
.tmx-gz{position:absolute;right:clamp(12px,1.2vw,16px);top:clamp(12px,1.2vw,16px);z-index:2;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);color:#fff;
  opacity:0;transform:scale(.8);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tmx-gz svg{width:15px;height:15px}
.tmx-g:hover .tmx-gz,.tmx-g:focus-visible .tmx-gz{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .tmx-g{opacity:1;transform:none}
  .rv.in .tmx-g{animation:none}
  .tmx-g img{transition:none}
  .tmx-g:hover img{transform:none}
  .tmx-gz{opacity:1;transform:none}
}
@media (max-width:1080px){
  .tmx-gal{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(150px,20vw,210px);
    grid-template-areas:"o o o o o o" "o o o o o o" "a a a d d d" "a a a d d d" "b b b c c c" "e e e e e e"}
}
@media (max-width:620px){
  .tmx-gal{grid-template-columns:1fr;grid-auto-rows:clamp(215px,58vw,270px);
    grid-template-areas:"o" "a" "b" "c" "d" "e"}
}

/* ---- Team: the page opens on the photographs ---- */
.tnp{position:relative;padding:clamp(86px,7.4vw,98px) 0 clamp(20px,2.4vw,30px);
  background:radial-gradient(1200px 520px at 85% -10%,color-mix(in srgb,var(--orange) 9%,transparent),transparent 70%),
             radial-gradient(900px 480px at -5% 10%,rgba(240,70,138,.07),transparent 70%),var(--paper)}
.tnp-shell{width:min(1360px,100% - 32px);margin:0 auto;position:relative}
.tnp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,.9vw,12px);
  height:clamp(540px,calc(100vh - 150px),840px);grid-template-rows:repeat(3,1fr);
  grid-template-areas:
    "o o o o o o o a a a a a"
    "o o o o o o o b b b c c"
    "o o o o o o o d d e e e"}
.tnp-lead,.tnp-t{position:relative;overflow:hidden;border-radius:clamp(16px,1.6vw,24px);background:var(--mist2);
  box-shadow:0 26px 60px -40px rgba(14,36,56,.6)}
.tnp-t{padding:0;border:0;cursor:zoom-in;opacity:0;transform:translateY(18px) scale(.97);
  animation:tgIn .8s var(--ease) var(--gd) forwards}
.tnp-t img,.tnp-big img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.tnp-t::after{content:"";position:absolute;inset:auto 0 0;height:60%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,16,28,.8));opacity:.75;transition:opacity .45s var(--ease)}
.tnp-t:hover img,.tnp-t:focus-visible img{transform:scale(1.06)}
.tnp-t:hover::after{opacity:.92}
.tnp-t:hover .tmx-gz,.tnp-t:focus-visible .tmx-gz{opacity:1;transform:none}
.tnp-lead{opacity:0;animation:tgIn .9s var(--ease) .05s forwards;transform:translateY(14px)}
.tnp-big{position:absolute;inset:0;padding:0;border:0;cursor:zoom-in;border-radius:0}
.tnp-big img{animation:tnpKen 22s ease-in-out infinite alternate}
@keyframes tnpKen{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.tnp-lead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(185deg,rgba(4,16,28,.08) 18%,rgba(4,16,28,.42) 48%,rgba(4,16,28,.9) 100%)}
.tnp-copy{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(22px,2.8vw,40px);pointer-events:none;color:#fff}
.tnp-copy a{pointer-events:auto}
.tnp-crumb .crumb{margin:0 0 14px;color:rgba(255,255,255,.7)}
.tnp-crumb .crumb a,.tnp-crumb .crumb span{color:rgba(255,255,255,.82)}
.tnp-crumb .crumb svg{color:rgba(255,255,255,.55)}
.tnp-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:99px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);
  font-size:11px;font-weight:760;letter-spacing:.2em;text-transform:uppercase}
.tnp-eyebrow svg{width:14px;height:14px}
.tnp-h1{margin:16px 0 0;font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.045em;font-weight:800;
  color:#fff;text-shadow:0 2px 30px rgba(4,16,28,.35)}
.tnp-h1 em{font-style:normal;background:linear-gradient(100deg,#ffb08a,#ff8a59 40%,#f58ab4);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tnp-sub{margin:14px 0 0;max-width:52ch;font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.65;color:rgba(255,255,255,.86)}
.tnp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tnp-chips span{padding:7px 13px;border-radius:99px;font-size:12.5px;color:#e6eef4;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px)}
.tnp-chips b{color:#fff;font-weight:800;margin-right:3px}
.tnp-more{background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;margin:clamp(16px,1.8vw,22px) auto 0;
  width:max-content;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none}
.tnp-more svg{width:15px;height:15px;transform:rotate(90deg);color:var(--orange);animation:tnpBob 1.8s ease-in-out infinite}
@keyframes tnpBob{50%{transform:rotate(90deg) translateX(4px)}}
.tnp-intro{padding-top:clamp(46px,5vw,72px)}
.tnp-intro-h{max-width:820px;margin-bottom:clamp(22px,2.6vw,32px)}
.tnp-intro-h p{margin:14px 0 0;font-size:clamp(16px,1.35vw,19px);line-height:1.7;color:var(--body)}
.tnp-intro .tn-rail{margin-top:0}
@media (max-width:980px){
  .tnp-grid{height:auto;grid-template-columns:repeat(6,1fr);grid-template-rows:none;
    grid-auto-rows:clamp(150px,26vw,220px);
    grid-template-areas:"o o o o o o" "o o o o o o" "o o o o o o" "a a a b b b" "c c c d d d" "e e e e e e"}
}
@media (max-width:620px){
  .tnp-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;
    grid-template-areas:"o o" "o o" "o o" "o o" "a a" "b c" "d e"}
  .tnp-chips span{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .tnp-t,.tnp-lead{opacity:1;transform:none;animation:none}
  .tnp-big img,.tnp-more svg{animation:none}
}
.tmx-evo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,38px) clamp(30px,4vw,62px)}
.tmx-ev{display:flex;gap:18px;align-items:flex-start}
.tmx-ev>i{flex:none;font-style:normal;font-family:var(--mono);font-size:13px;font-weight:600;
  color:var(--orange);padding-top:4px;letter-spacing:.06em}
.tmx-ev h3{font-size:17.5px;margin:0 0 9px;letter-spacing:-.02em;line-height:1.3}
.tmx-ev p{color:var(--body);font-size:14.5px;line-height:1.7;margin:0}
.tmx-art{margin:-4px 0 18px;border-radius:14px;overflow:hidden;box-shadow:0 18px 38px -28px rgba(14,36,56,.6)}
.tmx-art svg{display:block;width:100%;height:auto}
.tmx-l.has-art .tmx-li{display:none}
.tmx-life{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tmx-l{padding:26px;border-radius:18px;background:var(--card);border:1px solid var(--line);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.tmx-l:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--orange) 34%,var(--line));
  box-shadow:0 18px 40px -26px rgba(16,42,67,.5)}
.tmx-li{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;margin-bottom:16px;
  background:color-mix(in srgb,var(--orange) 11%,transparent);color:var(--orange);
  border:1px solid color-mix(in srgb,var(--orange) 24%,transparent)}
.tmx-li>svg{width:19px;height:19px}
.tmx-l h3{font-size:16.5px;margin:0 0 9px;letter-spacing:-.02em}
.tmx-l p{color:var(--body);font-size:14px;line-height:1.65;margin:0}
@media(max-width:1080px){.tmx-life{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.tmx-evo{grid-template-columns:1fr}}
@media(max-width:560px){.tmx-life{grid-template-columns:1fr}}
/* ---- Why XEETEK: story, figures, values ---- */
.storysec{background:linear-gradient(180deg,var(--mist),transparent 55%)}
.story{display:grid;grid-template-columns:1.08fr .92fr;gap:0;border-radius:24px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);box-shadow:0 40px 90px -56px rgba(14,36,56,.55)}
.story-copy{padding:clamp(30px,4vw,54px)}
.story-copy h2{font-size:clamp(25px,3vw,36px);letter-spacing:-.025em;margin:14px 0 22px;line-height:1.16}
.story-copy p{color:var(--body);font-size:15px;line-height:1.78;margin:0 0 16px}
.story-copy p b{color:var(--navy);font-weight:750}
.story-close{margin-top:22px!important;padding-top:20px;border-top:1px solid var(--line);
  color:var(--orange)!important;font-weight:700;font-size:15.5px!important}
.story-panel{padding:clamp(28px,3.4vw,42px);display:flex;flex-direction:column;
  background:linear-gradient(165deg,#0d2440,#17355a 55%,#102a46)}
.sp-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7f9bb4;display:block;margin-bottom:22px}
.sp-stack{list-style:none;margin:0 0 auto;padding:0;display:grid;gap:11px}
.sp-stack li{display:flex;align-items:center;gap:13px;color:#dce8f2;font-size:14.5px;font-weight:600}
.sp-l{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)}
.sp-l>b{font-family:var(--mono);font-size:11px;color:#9db6cc}
.sp-l.has-logo>b{display:none}
.sp-l .ms-img{width:21px;height:21px}
.sp-badges{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:11px}
.sp-badges span{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#b3c6d6}
.sp-badges svg{width:15px;height:15px;color:var(--orange2);flex:none}

.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.fig strong{display:block;font-size:clamp(40px,5.6vw,66px);line-height:1;letter-spacing:-.04em;
  background:linear-gradient(140deg,var(--orange),#b8410f);-webkit-background-clip:text;background-clip:text;color:transparent}
.fig span{display:block;margin-top:14px;color:var(--body);font-size:14px;line-height:1.45;max-width:20ch;margin-inline:auto}

/* inner pages convert .sec.dark to a light tint, so this band carries its own */
.pg .sec.valsec{background:linear-gradient(160deg,var(--navy),var(--deep));color:#fff}
.valsec .sec-head h2{color:#fff}
.valsec .sec-head p{color:#a3b7c5}
.valsec .sec-head::before{background:linear-gradient(90deg,transparent,var(--orange2),transparent)}
.valsec .kicker{color:var(--orange2)}
.wvals{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.2vw,44px) clamp(32px,4.4vw,70px)}
.wval{display:flex;gap:18px;align-items:flex-start;background:none;border:0;padding:0}
.wval>i{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  font-style:normal;font-family:var(--mono);font-size:14px;font-weight:600;
  color:var(--orange2);border:1.5px solid color-mix(in srgb,var(--orange2) 55%,transparent);
  transition:.28s}
.wval:hover>i{background:var(--orange);border-color:var(--orange);color:#fff}
.wval h3{font-size:17.5px;margin:7px 0 9px;letter-spacing:-.02em;color:#fff}
.wval p{color:#a3b7c5;font-size:14px;line-height:1.7;margin:0}
@media(max-width:980px){.story{grid-template-columns:1fr}.figs{grid-template-columns:repeat(2,1fr)}
  .wvals{grid-template-columns:1fr}}
@media(max-width:560px){.figs{grid-template-columns:1fr}}
/* ---- Careers: cinematic dark hero + numbered reasons ---- */
.hero.cdark .shell{display:block;text-align:center;max-width:1180px}
.hero.cdark{background:linear-gradient(160deg,#0b1f33,#13304d 52%,#0d2339);
  padding:clamp(130px,14vw,180px) 0 clamp(70px,8vw,100px)}
.hero.cdark .hero-grid{opacity:.22}
.hero.cdark .hero-glow{background:rgba(227,93,38,.26);filter:blur(110px)}
.hero.cdark .hero-glow.b{background:rgba(18,181,165,.17)}
.hero.cdark #net{opacity:.55}
.chero-dk{position:relative;z-index:2;max-width:860px;margin-inline:auto;text-align:center}
.chero-dk .crumb{justify-content:center;color:#7f9bb4}
.chero-dk .crumb a{color:#9db6cc}
.chero-dk .crumb a:hover{color:var(--orange2)}
.chero-dk .headline{color:#fff;font-size:clamp(38px,6vw,68px);max-width:16ch;margin-inline:auto}
.chero-dk .hero-lede{color:#b3c6d6;margin-inline:auto;max-width:62ch;font-size:clamp(15.5px,1.6vw,18px)}
.chero-dk .hero-actions{justify-content:center}
.hero.cdark .btn:not(.lite){background:linear-gradient(135deg,var(--orange),#b8410f);
  box-shadow:0 20px 42px -20px rgba(227,93,38,.85)}
.hdr.on-dark:not(.scrolled) .brand{color:#fff}
.hdr.on-dark:not(.scrolled) .nav-btn,
.hdr.on-dark:not(.scrolled) .burger{color:#dbe7f0}
.hdr.on-dark:not(.scrolled) .nav-btn:hover{color:#fff}
.btn.lite{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.26);box-shadow:none}
.btn.lite:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
.chero-dk .cstats{justify-content:center;border-top-color:rgba(255,255,255,.14);
  margin-top:46px;padding-top:30px;gap:28px clamp(30px,5vw,64px)}
.chero-dk .cstats>div{align-items:center}
.chero-dk .cstats strong{background:linear-gradient(135deg,#ff9a5c,var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.chero-dk .cstats span{color:#8ca6bd}

.reasons{position:relative;overflow:hidden}
.rsn-bleed{position:absolute;left:0;bottom:8%;width:min(16vw,170px);height:min(16vw,170px);
  background:linear-gradient(135deg,var(--orange),#b8410f);border-radius:0 26px 26px 0;opacity:.14}
.rsn-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,46px) clamp(34px,4.5vw,72px);
  position:relative;z-index:1}
.rsn{display:flex;gap:clamp(16px,2vw,26px);align-items:flex-start}
.rsn>i{flex:none;font-style:normal;font-weight:800;line-height:.86;letter-spacing:-.04em;
  font-size:clamp(50px,6vw,78px);color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--orange) 52%,transparent);
  transition:.3s}
.rsn:hover>i{-webkit-text-stroke-color:transparent;
  background:linear-gradient(145deg,var(--orange),#b8410f);-webkit-background-clip:text;background-clip:text}
.rsn h3{font-size:clamp(17px,1.9vw,21px);margin:6px 0 9px;letter-spacing:-.02em;line-height:1.25}
.rsn p{color:var(--body);font-size:14.5px;line-height:1.7;margin:0}
@media(max-width:860px){.rsn-grid{grid-template-columns:1fr}.rsn-bleed{display:none}}
/* ---- Careers: hero stats, fit matcher, progression ladder ---- */
.cstats{display:flex;flex-wrap:wrap;gap:28px 40px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.cstats>div{display:flex;flex-direction:column}
.cstats strong{font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;line-height:1;
  background:linear-gradient(135deg,var(--orange),#b8410f);-webkit-background-clip:text;background-clip:text;color:transparent}
.cstats span{margin-top:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#7d94a6}
.fit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fit{display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;font:inherit;
  padding:18px 20px;border-radius:16px;background:var(--card);border:1px solid var(--line);
  color:var(--navy);transition:.2s}
.fit:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--orange) 45%,var(--line));
  box-shadow:0 14px 30px -20px rgba(16,42,67,.45)}
.fit.on{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 7%,var(--card))}
.fit-i{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;
  background:color-mix(in srgb,var(--orange) 11%,transparent);color:var(--orange)}
.fit-i>svg{width:18px;height:18px}
.fit-l{flex:1;font-size:14px;font-weight:650;line-height:1.35}
.fit-go{flex:none;color:#aab9c6;transition:.2s}
.fit-go>svg{width:15px;height:15px}
.fit:hover .fit-go{color:var(--orange);transform:translateX(3px)}
.ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:end}
.rung{display:flex;flex-direction:column;gap:0}
.rung-bar{height:112px;display:flex;align-items:flex-end}
.rung-bar>span{display:block;width:100%;height:var(--h);border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--orange) 72%,transparent),color-mix(in srgb,var(--orange) 18%,transparent))}
.rung-b{padding:20px;border-radius:0 0 16px 16px;background:var(--card);
  border:1px solid var(--line);border-top:2px solid var(--orange);flex:1;display:flex;flex-direction:column}
.rung-b>i{font-family:var(--mono);font-size:11px;font-style:normal;color:var(--orange);letter-spacing:.1em}
.rung-b>small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#94a7b6;margin:8px 0 4px}
.rung-b>strong{font-size:16px;letter-spacing:-.02em;line-height:1.25}
.rung-b>p{color:var(--body);font-size:13.5px;line-height:1.6;margin:9px 0 14px}
.rung-m{margin-top:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#5b7288}
.rung-m>svg{width:13px;height:13px;color:var(--orange);flex:none}
.prac.flash{border-color:var(--orange);box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 16%,transparent)}
@media(max-width:1080px){.fit-grid{grid-template-columns:repeat(2,1fr)}
  .ladder{grid-template-columns:repeat(2,1fr)}.rung-bar{display:none}
  .rung-b{border-radius:16px;border-top:2px solid var(--orange)}}
@media(max-width:640px){.fit-grid,.ladder{grid-template-columns:1fr}
  .cstats{gap:20px 28px}}
/* ---- Careers: practice cards ---- */
.prac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prac{display:flex;flex-direction:column;padding:28px;border-radius:20px;background:var(--card);
  border:1px solid var(--line);transition:transform .25s,box-shadow .25s,border-color .25s}
.prac:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pc) 42%,var(--line));
  box-shadow:0 18px 40px -24px color-mix(in srgb,var(--pc) 60%,transparent)}
.prac-logo{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:18px;
  background:color-mix(in srgb,var(--pc) 11%,transparent);border:1px solid color-mix(in srgb,var(--pc) 24%,transparent)}
.prac-logo>b{font-family:var(--mono);font-size:12px;color:var(--pc)}
.prac-logo.has-logo>b{display:none}
.prac-logo .ms-img{width:26px;height:26px}
.prac h3{font-size:19px;margin:0 0 10px;letter-spacing:-.02em}
.prac>p{color:var(--body);font-size:14.5px;line-height:1.68;margin:0 0 18px}
.prac-tech{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.prac-tech b{padding:5px 11px;border-radius:99px;background:var(--mist);border:1px solid var(--line);
  font-size:11.5px;font-weight:600;color:#5b7288}
.prac-cert{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:9px;font-size:13px;color:#5b7288}
.prac-cert>svg{width:15px;height:15px;flex:none;color:var(--pc)}
.prac-cert strong{color:var(--navy);font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.stage-w{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);margin-bottom:6px}
.hp-n{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;
  font-family:var(--mono);font-size:12px;font-weight:600;
  background:color-mix(in srgb,var(--orange) 11%,transparent);color:var(--orange);
  border:1px solid color-mix(in srgb,var(--orange) 26%,transparent)}
.btn.ghost{background:none;color:var(--navy);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--orange);color:var(--orange);background:none}
@media(max-width:1080px){.prac-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.prac-grid{grid-template-columns:1fr}}
.ev-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ev-chip{padding:8px 15px;border-radius:99px;cursor:pointer;font:inherit;font-size:13px;
  background:var(--card);border:1px solid var(--line);color:#48657d;transition:.18s}
.ev-chip:hover{border-color:color-mix(in srgb,var(--orange) 45%,var(--line));color:var(--orange)}
.ev-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ev-count{margin:0 0 18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:#6b8296;min-height:1em}
.ev-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ev{display:flex;flex-direction:column;padding:24px;border-radius:18px;
  background:var(--card);border:1px solid var(--line);transition:transform .25s,box-shadow .25s,border-color .25s}
.ev[hidden]{display:none}
.ev:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--orange) 34%,var(--line));
  box-shadow:0 16px 36px -22px rgba(16,42,67,.4)}
.ev-top{margin-bottom:14px}
.ev-type{display:inline-block;padding:5px 11px;border-radius:99px;font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:color-mix(in srgb,var(--orange) 11%,transparent);color:var(--orange);
  border:1px solid color-mix(in srgb,var(--orange) 26%,transparent)}
.ev h3{font-size:18px;line-height:1.3;margin:0 0 10px}
.ev>p{color:var(--body);font-size:14.5px;line-height:1.65;margin:0 0 16px}
.ev-when{margin:0 0 18px;display:grid;gap:7px}
.ev-when>div{display:flex;align-items:center;gap:9px}
.ev-when dt{margin:0;display:flex;color:#8aa0b2}
.ev-when dt>svg{width:14px;height:14px}
.ev-when dd{margin:0;font-size:13px;color:#3d586f;font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ev-f{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.ev-tags{display:flex;flex-wrap:wrap;gap:6px}
.ev-tags b{padding:4px 10px;border-radius:99px;background:var(--mist);border:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#5b7288;font-weight:500}
.ev-cta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;
  color:var(--orange);text-decoration:none;white-space:nowrap}
.ev-cta>svg{width:14px;height:14px;transition:transform .2s}
.ev:hover .ev-cta>svg{transform:translateX(3px)}
@media(max-width:1080px){.ev-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ev-list{grid-template-columns:1fr}}
.res-search{margin-bottom:22px}
.rs-box{position:relative;display:flex;align-items:center;gap:12px;max-width:560px;padding:0 16px;
  background:var(--card);border:1px solid var(--line);border-radius:99px;
  box-shadow:0 1px 2px rgba(16,42,67,.04);transition:border-color .2s,box-shadow .2s}
.rs-box:focus-within{border-color:color-mix(in srgb,var(--orange) 55%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 12%,transparent)}
.rs-box>svg{width:17px;height:17px;flex:none;color:#7d94a6}
.rs-box input{flex:1;min-width:0;border:0;background:none;outline:none;padding:15px 0;
  font:inherit;font-size:15px;color:var(--navy)}
.rs-box input::placeholder{color:#90a4b4}
.rs-box input::-webkit-search-cancel-button{display:none}
.rs-clear{display:grid;place-items:center;width:26px;height:26px;flex:none;border:0;cursor:pointer;
  border-radius:50%;background:var(--mist);color:#5b7288}
.rs-clear>svg{width:13px;height:13px}
.rs-clear:hover{background:color-mix(in srgb,var(--orange) 14%,var(--mist));color:var(--orange)}
.rs-clear[hidden]{display:none}
.rs-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.rs-tag{padding:6px 13px;border-radius:99px;cursor:pointer;font:inherit;font-size:12.5px;
  background:var(--card);border:1px solid var(--line);color:#48657d;transition:.18s}
.rs-tag:hover{border-color:color-mix(in srgb,var(--orange) 45%,var(--line));color:var(--orange)}
.rs-tag.on{background:var(--orange);border-color:var(--orange);color:#fff}
.rs-count{margin-top:13px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:#6b8296;min-height:1em}
.res[hidden]{display:none}
.res-list.rs-empty{display:none}
@media(max-width:640px){.rs-box{max-width:none}}
.res-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.res{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:24px;border-radius:18px;
  background:#fff;border:1px solid var(--line);box-shadow:0 20px 44px -40px rgba(14,36,56,.7);
  transition:transform .32s var(--ease),border-color .32s,box-shadow .32s}
.res:hover{transform:translateY(-4px);border-color:var(--ac);box-shadow:0 28px 52px -34px var(--acs)}
.res::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--ac),var(--ac2));transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)}
.res:hover::before{transform:scaleX(1)}
.res-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.res-type{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ac);font-weight:500;padding:5px 10px;border-radius:99px;background:var(--acs)}
.res-meta{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--muted-dd)}
.res h3{font-size:16.5px;letter-spacing:-.03em;line-height:1.32;color:var(--ink)}
.res p{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--body)}
.res-f{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.res-f b{padding:5px 11px;border-radius:99px;background:var(--mist);border:1px solid var(--line);
  font-size:11px;font-weight:650;color:var(--muted)}
@media (max-width:1080px){.res-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.res-list{grid-template-columns:1fr}}

/* ---------- Resources: drawn covers ---------- */
.rcov{position:relative;display:block;aspect-ratio:2/1;overflow:hidden;
  background:linear-gradient(142deg,var(--p1),var(--p2))}
.rcov svg{position:absolute;inset:0;width:100%;height:100%;
  transform:scale(1.04);transition:transform .9s var(--ease)}
.rcov::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,22,38,.05),rgba(6,22,38,.3))}
.rcov-g{transform-origin:center;animation:rcDrift 22s ease-in-out infinite alternate}
@keyframes rcDrift{from{transform:translate3d(-7px,-4px,0) scale(1.03)}
                   to{transform:translate3d(7px,4px,0) scale(1.09)}}
.rcov-k{position:absolute;left:14px;top:13px;z-index:2;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(7px);
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#fff}
.rcov-m{position:absolute;right:13px;top:12px;z-index:2;display:grid;place-items:center;
  width:34px;height:34px;border-radius:10px;background:#fff;
  box-shadow:0 8px 18px -10px rgba(6,22,38,.7)}
.rcov-m .ms-img{width:21px;height:21px}
.rcov-m.has-logo>b{display:none}
.rcov-m b{font-size:9.5px;font-weight:800;color:var(--muted)}
.res:hover .rcov svg,.ev:hover .rcov svg{transform:scale(1.13)}
@media (prefers-reduced-motion:reduce){
  .rcov-g{animation:none}
  .rcov svg,.res:hover .rcov svg,.ev:hover .rcov svg{transform:none;transition:none}
}

/* the card is now a cover plus a body */
.res{padding:0}
.res-b{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.res-h{margin-bottom:12px}
/* the blog leads on one wide card */
.res-list.res-lead .res-feat{grid-column:1 / -1;flex-direction:row;align-items:stretch}
.res-list.res-lead .res-feat .rcov{flex:0 0 46%;aspect-ratio:auto;min-height:260px}
.res-list.res-lead .res-feat .res-b{justify-content:center;padding:clamp(26px,3vw,40px)}
.res-list.res-lead .res-feat h3{font-size:clamp(20px,2vw,27px);line-height:1.22}
.res-list.res-lead .res-feat p{font-size:15px;max-width:58ch}
@media (max-width:860px){
  .res-list.res-lead .res-feat{flex-direction:column}
  .res-list.res-lead .res-feat .rcov{flex:none;aspect-ratio:2/1;min-height:0}
}
/* a case study, set out as it was written */
.res-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.res-steps li{position:relative;display:grid;grid-template-columns:76px 1fr;gap:10px;
  padding-left:13px;font-size:13.2px;line-height:1.58}
.res-steps li::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:2px;border-radius:2px;
  background:color-mix(in srgb,var(--ac) 42%,transparent)}
.res-steps li:last-child::before{background:var(--ac)}
.res-steps b{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac);padding-top:3px}
.res-steps span{color:var(--body)}
@media (max-width:420px){.res-steps li{grid-template-columns:1fr;gap:2px}}

/* ---------- Resources: events ---------- */
.ev{position:relative;padding:0;overflow:hidden}
.ev-b{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.ev-cov{aspect-ratio:3/1}
.ev-date{position:absolute;left:16px;top:14px;z-index:3;display:grid;justify-items:center;
  padding:9px 13px 8px;border-radius:14px;background:#fff;
  box-shadow:0 16px 32px -18px rgba(6,22,38,.6);line-height:1}
.ev-date b{font-size:21px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.ev-date i{font-style:normal;margin-top:3px;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.14em;color:var(--ac)}
.ev-date u{text-decoration:none;margin-top:2px;font-family:var(--mono);font-size:8px;
  letter-spacing:.1em;color:var(--muted-d)}
.ev-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ev-status{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:4px 10px;border-radius:99px;
  background:color-mix(in srgb,var(--mint) 15%,transparent);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#0b7f5e}
.ev-status i{width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 26%,transparent);
  animation:evPulse 2.4s var(--ease) infinite}
@keyframes evPulse{0%,100%{opacity:1}50%{opacity:.35}}
.ev-status.past{background:var(--mist2);color:var(--muted-dd)}
.ev-status.past i{background:var(--muted-d);box-shadow:none;animation:none}

/* ---------- Resources: the FAQ search ---------- */
.fq-bar{margin-bottom:clamp(30px,3.6vw,44px)}
.fq-box{display:flex;align-items:center;gap:11px;padding:4px 6px 4px 16px;border-radius:99px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 18px 38px -34px rgba(14,36,56,.6);transition:border-color .28s var(--ease)}
.fq-box:focus-within{border-color:color-mix(in srgb,var(--ac) 55%,var(--line))}
.fq-box>svg{width:17px;height:17px;flex:0 0 auto;color:var(--muted)}
.fq-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
  font-size:15px;color:var(--ink);padding:13px 0}
.fq-box input::placeholder{color:var(--muted-d)}
.fq-box input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.fq-clear{display:grid;place-items:center;width:32px;height:32px;flex:none;border:0;cursor:pointer;
  border-radius:50%;background:var(--mist);color:var(--muted)}
.fq-clear>svg{width:14px;height:14px}
.fq-clear:hover{background:color-mix(in srgb,var(--ac) 13%,var(--mist));color:var(--ac)}
.fq-clear[hidden]{display:none}
.fq-all{margin-top:14px;padding:8px 16px;border-radius:99px;cursor:pointer;font:inherit;font-family:inherit;
  font-size:12.8px;font-weight:650;background:var(--paper);border:1px solid var(--line);color:var(--body);
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.fq-all:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--line));color:var(--ac)}
.fq-count{margin:13px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--muted);min-height:1em}
.fq-none{display:none;margin:0;padding:clamp(28px,3.4vw,40px) 0;text-align:center;
  font-size:15px;line-height:1.7;color:var(--muted)}
.fq-none .fq-reset{border:0;padding:0;background:none;cursor:pointer;font:inherit;
  font-weight:700;color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.sec.fq-empty .fq-none{display:block}
.faqgrp[hidden]{display:none}
.faq details[hidden]{display:none}

/* ---------- inline client reference ---------- */
.refq{position:relative;padding:clamp(28px,3.2vw,40px);border-radius:22px;background:#fff;
  border:1px solid var(--line);box-shadow:0 30px 66px -50px rgba(14,36,56,.8);max-width:900px;margin:0 auto}
.refq-m{position:absolute;top:-19px;left:clamp(24px,3vw,40px);width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;background:var(--ac);color:#fff;box-shadow:0 14px 30px -14px var(--ac)}
.refq-m svg{width:18px;height:18px}
.refq blockquote{margin:0;font-size:clamp(17px,2.1vw,23px);line-height:1.5;letter-spacing:-.03em;
  font-weight:700;color:var(--ink);text-wrap:balance}
.refq figcaption{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:24px;padding-top:22px;
  border-top:1px solid var(--line)}
.refq-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--ac2),var(--ac));color:#fff;font-size:14px;font-weight:800}
.refq-w strong{display:block;font-size:15px;letter-spacing:-.025em;color:var(--ink)}
.refq-w small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.refq-t{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.refq-t b{padding:5px 11px;border-radius:99px;background:var(--mist2);border:1px solid var(--line);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--body);font-weight:500}


.mega-sep{display:block;padding:12px 12px 5px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dd);font-weight:500}
.mega-sep:first-child{padding-top:4px}


/* ==========================================================================
   Hero partner badges + animated product scenes
   ========================================================================== */
.hero-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;max-width:880px;margin:0 auto}
.hbadge{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:17px;
  flex:1 1 380px;max-width:424px;
  text-decoration:none;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 18px 40px -32px rgba(14,36,56,.8);
  opacity:0;transform:translateY(12px);
  animation:hbIn .75s var(--ease) forwards;animation-delay:var(--d);
  transition:transform .36s var(--ease),border-color .36s,box-shadow .36s}
@keyframes hbIn{to{opacity:1;transform:none}}
.hbadge:hover{transform:translateY(-4px);border-color:#c3d6e4;box-shadow:0 30px 56px -28px rgba(14,36,56,.55)}
.hbadge:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* Microsoft four-colour hairline that draws across on hover */
.hbadge::before{content:"";position:absolute;left:0;right:0;top:0;height:2.5px;z-index:2;
  background:linear-gradient(90deg,#f25022 0 25%,#7fba00 25% 50%,#00a4ef 50% 75%,#ffb900 75% 100%);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.hbadge:hover::before,.hbadge:focus-visible::before{transform:scaleX(1)}
/* warm sheen sweep */
.hbadge::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(227,93,38,.14) 50%,transparent 66%);
  transform:translateX(-130%);transition:transform .85s var(--ease)}
.hbadge:hover::after{transform:translateX(130%)}

.hb-logo{position:relative;z-index:2;width:40px;height:40px;border-radius:13px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--mist);border:1px solid var(--line);
  transition:background .34s,border-color .34s,box-shadow .34s,transform .4s var(--ease)}
.hbadge:hover .hb-logo{background:#fff;border-color:#cfe0ec;transform:scale(1.05);
  box-shadow:0 10px 22px -12px rgba(0,164,239,.55)}
.hb-ms{display:grid;grid-template-columns:1fr 1fr;gap:2.5px;
  width:21px;height:21px;flex:0 0 auto;transition:transform .4s var(--ease)}
.hb-ms i{display:block;border-radius:2px;opacity:0;transform:scale(.25);
  animation:msPop .5s var(--ease) forwards;animation-delay:calc(var(--d) + var(--n) * .09s + .25s)}
@keyframes msPop{to{opacity:1;transform:none}}
.hb-ms i:nth-child(1){background:#f25022}.hb-ms i:nth-child(2){background:#7fba00}
.hb-ms i:nth-child(3){background:#00a4ef}.hb-ms i:nth-child(4){background:#ffb900}
.hbadge:hover .hb-ms{transform:rotate(-9deg) scale(1.1)}

.hb-txt{position:relative;z-index:2;text-align:left}
.hb-txt b{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:770;
  letter-spacing:-.026em;color:var(--ink);white-space:nowrap}
.hb-tick{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(15,157,107,.12);color:var(--mint);transition:transform .4s var(--ease),background .3s}
.hb-tick svg{width:9px;height:9px}
.hbadge:hover .hb-tick{transform:scale(1.18) rotate(8deg);background:rgba(15,157,107,.2)}
.hb-txt small{display:block;margin-top:3px;font-size:11.5px;line-height:1.42;color:var(--muted);max-width:36ch}

.hb-go{position:relative;z-index:2;width:27px;height:27px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;margin-left:4px;
  background:var(--mist);border:1px solid var(--line);color:var(--muted-d);
  transition:background .32s,color .32s,border-color .32s,transform .32s var(--ease)}
.hb-go svg{width:12px;height:12px}
.hbadge:hover .hb-go{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateX(3px)}
@media (max-width:760px){.hb-txt small{display:none}.hbadge{padding:11px 12px}}
@media (prefers-reduced-motion:reduce){
  .hbadge{opacity:1;transform:none;animation:none}
  .hb-ms i{opacity:1;transform:none;animation:none}
  .hb-logo{transform:none}
  .hbadge::after{display:none}
  .hbadge::before{transform:scaleX(1)}
}

/* ---------- shared scene frame ---------- */
.scene{position:relative;z-index:1;width:100%;max-width:430px;border-radius:17px;overflow:hidden;
  border:1px solid var(--line);background:#fff;box-shadow:0 26px 58px -40px rgba(14,36,56,.9)}
.scene-bar{display:flex;align-items:center;gap:5px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--mist)}
.scene-bar i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.scene-bar b{margin-left:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.scene-body{position:relative;padding:18px;height:216px}
.scene-foot{display:flex;align-items:center;gap:9px;padding:11px 15px;border-top:1px solid var(--line);
  background:var(--mist);font-size:11.5px;font-weight:660;color:var(--body)}
.scene-foot u{width:7px;height:7px;border-radius:50%;background:var(--c1);flex:0 0 auto;
  animation:sPulse 2.2s ease-in-out infinite}
@keyframes sPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
.scene-foot em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c1)}

/* ---------- HRMS: a nine-box grid filling, then a plan ---------- */
.nine{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:100%}
.nine span{position:relative;border-radius:10px;background:var(--mist2);border:1px solid var(--line);overflow:hidden}
.nine span i{position:absolute;inset:0;border-radius:9px;
  background:linear-gradient(148deg,var(--c1),var(--c2));opacity:0;transform:scale(.6);
  animation:nineFill 6s cubic-bezier(.16,1,.3,1) infinite;animation-delay:calc(var(--i) * .22s)}
@keyframes nineFill{0%,3%{opacity:0;transform:scale(.6)}11%,80%{opacity:var(--o,.9);transform:scale(1)}
  92%,100%{opacity:0;transform:scale(1)}}
.nine span.key i{animation-name:nineKey}
@keyframes nineKey{0%,3%{opacity:0;transform:scale(.6)}11%,80%{opacity:1;transform:scale(1)}
  92%,100%{opacity:.22;transform:scale(1)}}
.nine span.key{box-shadow:0 0 0 2px var(--c1) inset}
.nine span.key::after{content:"";position:absolute;inset:auto 8px 8px auto;width:10px;height:10px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--c1),0 2px 8px rgba(0,0,0,.18);opacity:0;
  animation:keyDot 6s ease-in-out infinite}
@keyframes keyDot{0%,44%{opacity:0;transform:scale(.4)}54%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* ---------- Sales: a route being driven ---------- */
.scene .route{width:100%;height:100%;display:block;overflow:visible}
.route .rpath{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round}
.route .rdraw{fill:none;stroke:var(--c1);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420;animation:rDraw 6s ease-in-out infinite}
@keyframes rDraw{0%{stroke-dashoffset:420}55%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.route .rpin{fill:var(--c1);opacity:0;transform-box:fill-box;transform-origin:center bottom;
  animation:rPin 6s ease-in-out infinite}
@keyframes rPin{0%,10%{opacity:0;transform:translateY(-7px) scale(.5)}
  20%,88%{opacity:1;transform:none}100%{opacity:0}}
.route .rcar{fill:#fff;stroke:var(--c1);stroke-width:3;
  offset-path:path("M22 148 C74 148 62 62 124 62 S208 138 276 44");
  offset-rotate:0deg;animation:rRide 6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes rRide{0%{offset-distance:0%}55%,100%{offset-distance:100%}}

/* ---------- WMS: a scan sweeping the rack ---------- */
.rack{display:grid;gap:9px;height:100%;align-content:center;position:relative}
.rrow{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:11px;
  background:var(--mist);border:1px solid var(--line);position:relative;overflow:hidden}
.rrow u{width:20px;height:20px;border-radius:7px;flex:0 0 auto;background:var(--mist2);
  border:1px solid var(--line)}
.rrow s{flex:1;height:6px;border-radius:3px;background:var(--mist2);text-decoration:none;display:block}
.rrow em{font-style:normal;width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  background:var(--mist2);position:relative}
.rrow em::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(148deg,var(--c1),var(--c2));opacity:0;
  animation:rowTick 5.4s ease-in-out infinite;animation-delay:calc(var(--i) * .5s + .3s)}
@keyframes rowTick{0%,4%{opacity:0;transform:scale(.5)}12%,80%{opacity:1;transform:scale(1)}92%,100%{opacity:0}}
.rrow::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--c1),transparent);opacity:0;
  animation:rowSweep 5.4s ease-in-out infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes rowSweep{0%{opacity:0;transform:translateX(-100%)}6%{opacity:.16}
  14%{opacity:0;transform:translateX(100%)}100%{opacity:0;transform:translateX(100%)}}
.scanbar{position:absolute;left:-4px;right:-4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--c1),transparent);
  box-shadow:0 0 12px 2px var(--c1);animation:scanRun 5.4s ease-in-out infinite}
@keyframes scanRun{0%{top:2%;opacity:0}6%{opacity:1}72%{top:96%;opacity:1}80%,100%{opacity:0}}

/* ---------- POS: basket filling, then reconciling ---------- */
.till{display:flex;flex-direction:column;gap:8px;height:100%}
.tline{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  background:var(--mist);border:1px solid var(--line);opacity:0;transform:translateY(8px);
  animation:tDrop 6s cubic-bezier(.16,1,.3,1) infinite;animation-delay:calc(var(--i) * .45s)}
@keyframes tDrop{0%,4%{opacity:0;transform:translateY(8px)}10%,78%{opacity:1;transform:none}
  88%,100%{opacity:0;transform:translateY(-6px)}}
.tline u{width:18px;height:18px;border-radius:6px;flex:0 0 auto;
  background:linear-gradient(148deg,var(--c1),var(--c2));opacity:.85}
.tline s{flex:1;height:5px;border-radius:3px;background:var(--mist2);text-decoration:none;display:block}
.tline b{font-family:var(--mono);font-size:9.5px;color:var(--muted);font-weight:500}
.ttotal{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:11px;
  background:linear-gradient(148deg,var(--c1),var(--c2));color:#fff;
  opacity:0;animation:tTotal 6s ease-in-out infinite}
@keyframes tTotal{0%,58%{opacity:0;transform:translateY(6px)}66%,86%{opacity:1;transform:none}
  94%,100%{opacity:0}}
.ttotal small{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ttotal strong{margin-left:auto;font-size:15px;letter-spacing:-.03em}
.scene-bar{position:relative}
.tstate{position:absolute;top:50%;right:11px;transform:translateY(-50%);display:inline-flex;align-items:center;
  gap:6px;padding:4px 10px;border-radius:99px;font-family:var(--mono);font-size:7.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;border:1px solid var(--line);background:#fff}
.tstate.off{color:var(--muted);animation:stOff 6s ease-in-out infinite}
.tstate.on{color:var(--mint);border-color:rgba(15,157,107,.35);background:rgba(15,157,107,.08);
  animation:stOn 6s ease-in-out infinite}
@keyframes stOff{0%,60%{opacity:1}70%,100%{opacity:0}}
@keyframes stOn{0%,62%{opacity:0}72%,100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .nine span i,.nine span.key::after,.route .rdraw,.route .rpin,.route .rcar,
  .rrow em::after,.rrow::after,.scanbar,.tline,.ttotal,.tstate.off,.tstate.on,.scene-foot u{
    animation:none!important}
  .nine span i,.rrow em::after,.tline,.ttotal,.tstate.on{opacity:1;transform:none}
  .route .rdraw{stroke-dashoffset:0}
  .route .rpin{opacity:1}
  .tstate.off{opacity:0}
  .scanbar{display:none}
}


/* ==========================================================================
   Microsoft Teams window — app rail, chat list, conversation, compose
   ========================================================================== */
.tms{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.11);
  background:#0f2334;color:#e8eef3;box-shadow:0 70px 130px -60px rgba(0,0,0,.9)}

/* ---------- title bar ---------- */
.tms-top{display:flex;align-items:center;gap:9px;padding:9px 14px;background:#08141d;
  border-bottom:1px solid rgba(255,255,255,.07)}
.tms-dots{display:flex;gap:6px;flex:0 0 auto}
.tms-dots i{width:9px;height:9px;border-radius:50%;display:block;background:rgba(255,255,255,.18)}
.tms-dots i:nth-child(1){background:#ff5f57}.tms-dots i:nth-child(2){background:#febc2e}
.tms-dots i:nth-child(3){background:#28c840}
.tms-brand{display:flex;align-items:center;gap:8px;margin-left:9px;flex:0 0 auto}
.tms-brand .ms-img{width:16px;height:16px;flex:0 0 auto}
.tms-brand b{width:16px;height:16px;border-radius:4px;display:grid;place-items:center;
  background:rgba(127,133,245,.3);font-family:var(--mono);font-size:7px;color:#cfd2ff}
.tms-brand.has-logo b{display:none}
.tms-brand strong{font-size:12px;font-weight:700;letter-spacing:-.02em;color:#dbe6ee;white-space:nowrap}
.tms-search{flex:1;max-width:360px;margin:0 auto;height:26px;border-radius:7px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:8px;padding:0 11px;font-size:11px;color:#7f97a9;min-width:0}
.tms-search svg{width:12px;height:12px;flex:0 0 auto}
.tms-me{width:25px;height:25px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,#7f85f5,#5b5fc7);color:#fff;font-size:9.5px;font-weight:800;
  box-shadow:0 0 0 2px rgba(127,133,245,.25)}

.tms-body{display:grid;grid-template-columns:70px 250px 1fr;min-height:452px}

/* ---------- app rail ---------- */
.tms-rail{background:#08141d;border-right:1px solid rgba(255,255,255,.06);
  padding:11px 0;display:grid;gap:2px;align-content:start}
.tr-app{position:relative;display:grid;justify-items:center;gap:4px;padding:9px 2px;
  color:#7f97a9;transition:color .28s,background .28s}
.tr-app svg{width:17px;height:17px}
.tr-app span{font-size:8.5px;font-weight:640;letter-spacing:-.005em}
.tr-app:hover{color:#cfdde6;background:rgba(255,255,255,.04)}
.tr-app.on{color:#fff}
.tr-app.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:#7f85f5}

/* ---------- chat list ---------- */
.tms-list{background:#0c1c28;border-right:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;min-width:0}
.tl-h{display:flex;align-items:center;gap:8px;padding:13px 14px 8px}
.tl-h b{font-size:14px;font-weight:750;letter-spacing:-.028em;color:#fff}
.tl-h em{margin-left:auto;font-style:normal;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:var(--mint)}
.tl-sec{padding:5px 15px 6px;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#6d8698}
.tl-body{display:flex;flex-direction:column;min-width:0}
.tl-item{appearance:none;border:0;background:transparent;font-family:inherit;cursor:pointer;
  position:relative;display:flex;gap:10px;align-items:flex-start;text-align:left;
  padding:9px 11px;margin:0 7px 2px;border-radius:8px;transition:background .25s}
.tl-item:hover{background:rgba(255,255,255,.05)}
.tl-item.on{background:rgba(127,133,245,.17)}
.tl-item.on::before{content:"";position:absolute;left:-7px;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:#7f85f5}
.tl-av{position:relative;width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;
  background:linear-gradient(150deg,var(--ac1,#7f85f5),var(--ac2,#5b5fc7))}
.tl-av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
  background:#3ac47d;border:2px solid #0c1c28}
.tl-t{min-width:0;flex:1}
.tl-t b{display:flex;align-items:baseline;gap:6px;font-size:12.5px;font-weight:720;
  letter-spacing:-.022em;color:#eef4f8;min-width:0}
.tl-t b>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-t b em{margin-left:auto;flex:0 0 auto;font-style:normal;font-size:9.5px;font-weight:500;color:#7f97a9}
.tl-t small{display:block;margin-top:2px;font-size:11px;line-height:1.35;color:#8ba2b4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-item.on .tl-t small{color:#bcccd8}

/* ---------- conversation ---------- */
.tms-main{display:flex;flex-direction:column;min-width:0;background:#0f2334}
.tms-hd{display:flex;align-items:center;gap:11px;padding:11px 18px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.th-av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;
  background:linear-gradient(150deg,var(--ac1,#ff8a59),var(--ac2,#e35d26))}
.th-t{min-width:0}
.th-t b{display:block;font-size:14px;font-weight:750;letter-spacing:-.028em;color:#fff}
.th-t small{display:block;margin-top:1px;font-size:11px;color:#8ba2b4}
.th-ico{margin-left:auto;display:flex;gap:7px;align-items:center;flex:0 0 auto}
.th-ico i{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);color:#8ba2b4}
.th-ico svg{width:13px;height:13px}
.tms-tabs{display:flex;gap:19px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.tms-tabs span{position:relative;padding:9px 0 10px;font-size:12px;font-weight:660;color:#8ba2b4}
.tms-tabs span.on{color:#fff}
.tms-tabs span.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  border-radius:2px;background:#7f85f5}
.tms-thread{flex:1;display:grid;gap:15px;align-content:start;padding:18px clamp(15px,2vw,24px)}
.msg{display:flex;gap:11px;align-items:flex-start}
/* the exchange plays out: question, a beat of typing, then the answer */
.tms.anim .msg-you,.tms.anim .msg-bot{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tms.anim .msg-you.in,.tms.anim .msg-bot.in{opacity:1;transform:none}
.m-wait{opacity:0;transition:opacity .3s ease}
.m-wait.in{opacity:1}
.m-wait.gone{display:none}
.m-typing{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:9px 13px;
  border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10)}
.m-typing i{width:6px;height:6px;border-radius:50%;background:#9db1c0;opacity:.45;
  animation:mType 1.25s var(--ease) infinite}
.m-typing i:nth-child(2){animation-delay:.16s}
.m-typing i:nth-child(3){animation-delay:.32s}
@keyframes mType{0%,70%,100%{opacity:.35;transform:none}35%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .tms.anim .msg-you,.tms.anim .msg-bot{opacity:1;transform:none;transition:none}
  .m-typing i{animation:none}
}
.m-av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:#cfdde6;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13)}
.m-av.bot{border-color:transparent;color:#fff;
  background:linear-gradient(150deg,var(--ac1,#ff8a59),var(--ac2,#e35d26))}
.m-av.bot svg{width:15px;height:15px}
.m-b{flex:1;min-width:0}
.m-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m-h b{font-size:12.5px;font-weight:740;letter-spacing:-.022em;color:#fff}
.m-h em{font-style:normal;font-size:10.5px;color:#7f97a9}
.m-tag{font-style:normal;font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:2.5px 6px;border-radius:5px;background:rgba(127,133,245,.22);color:#b6baff}
.m-q{margin:6px 0 0;display:inline-block;padding:11px 15px;border-radius:4px 13px 13px 13px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06);
  font-size:14.5px;line-height:1.5;letter-spacing:-.012em;color:#eef4f8}

/* ---------- the agent's adaptive card ---------- */
.mcard{margin-top:7px;border-radius:4px 13px 13px 13px;overflow:hidden;
  border:1px solid rgba(255,138,89,.24);
  background:linear-gradient(158deg,rgba(227,93,38,.13),rgba(227,93,38,.03))}
.mcard-h{display:flex;align-items:center;gap:8px;padding:9px 15px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--orange3)}
.mcard-h .ms-img{width:14px;height:14px;flex:0 0 auto}
.mcard-h>b{width:14px;height:14px;border-radius:4px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.12);font-size:6.5px;color:#cfdde6;font-weight:500}
.mcard-h.has-logo>b{display:none}
.mcard-h strong{font-weight:700;color:var(--orange2);letter-spacing:.06em}
.mcard>p{margin:0;padding:14px 16px 0;font-size:14px;line-height:1.6;color:#dfe9f0}
.mact{margin:13px 16px;padding:13px 15px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.2)}
.mact>small{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#8ba2b4}
.mact strong{display:block;margin-top:7px;font-size:13.5px;letter-spacing:-.022em;color:#fff;line-height:1.45}
.mact .guard{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:11.5px;
  line-height:1.45;color:#8ba2b4;font-weight:640}
.mact .guard svg{width:13px;height:13px;margin-top:2px;color:var(--mint);flex:0 0 auto}
.mbtns{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.mbtn{padding:7px 15px;border-radius:7px;font-size:11.5px;font-weight:700;letter-spacing:-.015em}
.mbtn.p{background:#7f85f5;color:#fff;box-shadow:0 10px 22px -14px #7f85f5}
.mbtn.s{background:rgba(255,255,255,.08);color:#cfdde6;border:1px solid rgba(255,255,255,.14)}
.msrc{padding:0 16px 15px}
.msrc>small{display:block;margin-bottom:8px;font-family:var(--mono);font-size:8px;
  letter-spacing:.13em;text-transform:uppercase;color:#7f97a9}
.mcard .flow{display:grid;grid-auto-flow:row;grid-template-columns:repeat(4,1fr);gap:7px;
  padding:0;border-top:0;background:transparent}
.mcard .fstep{padding:9px 10px;border-radius:9px}
.mcard .fstep-t strong{font-size:11px}
.mcard .fstep small{margin-top:5px;font-size:7.5px}
.mcard .fstep em{font-size:10.5px}

/* ---------- compose ---------- */
.tms-comp{display:flex;align-items:center;gap:8px;margin:0 clamp(15px,2vw,24px) 18px;
  padding:8px 9px 8px 14px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11)}
.tms-comp>span{flex:1;min-width:0;font-size:12.5px;color:#7f97a9;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tms-comp i{width:27px;height:27px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;color:#8ba2b4}
.tms-comp i svg{width:13px;height:13px}
.tms-comp i.send{background:#7f85f5;color:#fff}

@media (max-width:1080px){
  .tms-body{grid-template-columns:62px minmax(0,1fr)}
  .tms-rail{grid-column:1;grid-row:1 / span 2}
  .tms-list{grid-column:2;grid-row:1;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .tms-main{grid-column:2;grid-row:2}
  .tl-h,.tl-sec{display:none}
  .tl-body{flex-direction:row;overflow-x:auto;padding:9px 7px;gap:6px}
  .tl-item{min-width:216px;margin:0}
  .tl-item.on::before{display:none}
  .tr-app span{display:none}
  .tr-app{padding:11px 2px}
}
@media (max-width:760px){
  .tms-search,.th-ico{display:none}
  .mcard .flow{grid-template-columns:1fr 1fr}
  .tms-body{grid-template-columns:minmax(0,1fr)}
  .tms-rail{grid-column:1;grid-row:1;display:flex;overflow-x:auto;padding:7px 10px;gap:4px;
    border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .tms-list{grid-column:1;grid-row:2}
  .tms-main{grid-column:1;grid-row:3}
  .tr-app{padding:8px 13px}
  .tr-app.on::before{left:6px;right:6px;top:auto;bottom:0;width:auto;height:2px;border-radius:2px 2px 0 0}
}
@media (max-width:480px){.mcard .flow{grid-template-columns:1fr}}


/* ==========================================================================
   Company profile blocks: competencies, approach stages, delivery cycle
   ========================================================================== */
.comp-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--mist2);border:1px solid var(--line);
  font-family:var(--mono);font-size:10px;color:var(--muted);margin-bottom:16px}
.comp-logo.has-logo{background:none;border-color:transparent}
.comp-logo.has-logo b{display:none}
.comp-logo .ms-img{width:100%;height:100%}
.comp-list{margin-top:16px;padding-top:15px;border-top:1px solid var(--line);display:grid;gap:8px}
.comp-list li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;font-weight:640;
  line-height:1.45;color:var(--ink)}
.comp-list svg{width:13px;height:13px;flex:0 0 auto;margin-top:2px;color:var(--ac,var(--orange))}

/* four stages */
.stagestrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stage{position:relative;padding:24px 20px 22px;border-radius:18px;background:#fff;
  border:1px solid var(--line);box-shadow:0 20px 42px -36px rgba(14,36,56,.8);
  transition:transform .32s var(--ease),border-color .32s,box-shadow .32s}
.stage:hover{transform:translateY(-4px);border-color:var(--orange);
  box-shadow:0 28px 50px -30px rgba(227,93,38,.5)}
.stage i{display:block;font-family:var(--mono);font-size:11px;font-style:normal;letter-spacing:.12em;
  color:var(--orange);font-weight:500}
.stage strong{display:block;margin-top:12px;font-size:15.5px;letter-spacing:-.03em;color:var(--ink)}
.stage p{margin-top:10px;font-size:13.4px;line-height:1.64;color:var(--body)}
.stage::after{content:"";position:absolute;top:31px;right:-8px;width:12px;height:1px;background:var(--line)}
.stage:last-child::after{display:none}

/* the delivery cycle */
.cyc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  counter-reset:none}
.cyc-step{position:relative;overflow:hidden;padding:22px 20px;border-radius:18px;
  background:var(--mist);border:1px solid var(--line);
  transition:transform .32s var(--ease),background .32s,border-color .32s}
.cyc-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--orange),var(--orange2));
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.cyc-step:hover{transform:translateY(-4px);background:#fff;border-color:#cfdde8}
.cyc-step:hover::before{transform:scaleY(1)}
.cyc-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(150deg,var(--orange2),var(--orange));color:#fff;
  font-size:12.5px;font-weight:800;box-shadow:0 10px 20px -12px var(--orange)}
.cyc-step strong{display:block;margin-top:13px;font-size:14.5px;letter-spacing:-.028em;color:var(--ink);line-height:1.35}
.cyc-step small{display:block;margin-top:7px;font-size:12.5px;line-height:1.6;color:var(--body)}
@media (max-width:1080px){.stagestrip{grid-template-columns:1fr 1fr}.stage::after{display:none}
  .cyc{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.stagestrip,.cyc{grid-template-columns:1fr}}

/* ==========================================================================
   HRMS brochure blocks: challenge, audiences, modules + AI panel, copilot
   ========================================================================== */
.chal{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.chal-i{padding:22px 20px;border-radius:18px;background:var(--mist);border:1px solid var(--line);
  transition:transform .3s var(--ease),background .3s,border-color .3s}
.chal-i:hover{transform:translateY(-4px);background:#fff;border-color:var(--ac);box-shadow:0 22px 44px -32px var(--acs)}
.chal-i>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:linear-gradient(150deg,var(--ac2),var(--ac));color:#fff;
  box-shadow:0 12px 22px -14px var(--ac)}
.chal-i svg{width:17px;height:17px}
.chal-i strong{display:block;margin-top:14px;font-size:15px;letter-spacing:-.028em;color:var(--ink)}
.chal-i p{margin-top:8px;font-size:13.2px;line-height:1.62;color:var(--body)}

.aud-sec{position:relative;overflow:hidden}
.auds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(28px,3.4vw,42px)}
.aud{padding:28px 26px;border-radius:20px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);transition:transform .32s var(--ease),background .32s,border-color .32s}
.aud:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);border-color:rgba(255,138,89,.4)}
.aud-i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:linear-gradient(150deg,var(--orange2),var(--orange));color:#fff;
  box-shadow:0 16px 30px -16px rgba(227,93,38,.9)}
.aud-i svg{width:20px;height:20px}
.aud strong{display:block;margin-top:16px;font-size:17px;letter-spacing:-.032em;color:#fff}
.aud p{margin-top:9px;font-size:13.5px;line-height:1.62;color:#a9c0d0}
.aud-ai{display:flex;align-items:center;gap:11px;justify-content:center;flex-wrap:wrap;
  margin:clamp(24px,3vw,34px) auto 0;max-width:760px;padding:14px 22px;border-radius:99px;
  background:rgba(227,93,38,.14);border:1px solid rgba(255,138,89,.3);
  font-size:13.5px;font-weight:660;color:#ffd9c6;text-align:center}
.aud-ai svg{width:16px;height:16px;color:var(--orange2);flex:0 0 auto}

/* module switcher with the AI panel pinned to the right */
.aim-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:16px}
.aim-tab{appearance:none;cursor:pointer;font-family:inherit;display:grid;justify-items:center;gap:9px;
  padding:15px 10px;border-radius:15px;background:#fff;border:1px solid var(--line);
  box-shadow:0 16px 34px -32px rgba(14,36,56,.8);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.aim-tico{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--mist2);color:var(--muted);transition:background .32s,color .32s,transform .32s var(--ease)}
.aim-tico svg{width:16px;height:16px}
.aim-tab b{font-size:11.5px;font-weight:720;letter-spacing:-.022em;color:var(--ink);line-height:1.3;text-align:center}
.aim-tab:hover{border-color:var(--mc)}
.aim-tab.on{border-color:var(--mc);transform:translateY(-3px);box-shadow:0 24px 42px -26px var(--mc)}
.aim-tab.on .aim-tico{background:linear-gradient(150deg,var(--mc),var(--mc2));color:#fff;
  transform:scale(1.06);box-shadow:0 12px 22px -12px var(--mc)}
.aim-tab.on b{color:var(--mc2)}

.aim-stage{border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:0 36px 78px -56px rgba(14,36,56,.85)}
.aim-pane{display:none}
.aim-pane.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* the left side is tinted by the module that is showing */
.aim-l{position:relative;padding:clamp(28px,3.2vw,42px);
  background:linear-gradient(168deg,color-mix(in srgb,var(--mc) 9%,#fff) 0%,#fff 62%);
  animation:aimL .55s var(--ease)}
@keyframes aimL{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.aim-l::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--mc),var(--mc2))}
.aim-head{display:flex;align-items:flex-start;gap:15px}
.aim-badge{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--mc),var(--mc2));color:#fff;
  box-shadow:0 16px 30px -14px var(--mc)}
.aim-badge svg{width:22px;height:22px}
.aim-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mc2)}
.aim-l h3{margin:7px 0 0;font-size:clamp(21px,2.5vw,29px);letter-spacing:-.038em;color:var(--ink);line-height:1.12}
.aim-n{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--muted);flex:0 0 auto}
.aim-n i{font-style:normal;margin:0 3px;opacity:.45}
.aim-l>p{margin-top:18px;font-size:14.5px;line-height:1.68;color:var(--body);max-width:52ch}
.aim-sub{display:flex;align-items:center;gap:12px;margin-top:24px}
.aim-sub small{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mc2);white-space:nowrap}
.aim-sub span{flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--mc) 45%,transparent),transparent)}
.aim-feats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}
.aim-feats li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;font-weight:640;
  line-height:1.45;color:var(--ink)}
.aim-feats svg{width:13px;height:13px;flex:0 0 auto;margin-top:2px;color:var(--mc2)}
.aim-impact{margin-top:24px;padding:16px 18px;border-radius:14px;
  background:color-mix(in srgb,var(--mc) 8%,#fff);border:1px solid color-mix(in srgb,var(--mc) 26%,transparent)}
.aim-impact small{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--mc2)}
.aim-impact p{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--body)}
/* the right-hand AI panel takes the module's colour too */
.aim-r{padding:clamp(24px,3vw,34px);background:linear-gradient(165deg,#0b2437,#061625);
  display:flex;flex-direction:column;gap:18px;animation:aimR .55s var(--ease)}
@keyframes aimR{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.aicap{position:relative;overflow:hidden;padding:clamp(24px,2.7vw,34px);border-radius:22px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--mc) 15%,rgba(255,255,255,.05)),rgba(255,255,255,.028));
  border:1px solid color-mix(in srgb,var(--mc) 55%,transparent);
  box-shadow:0 30px 64px -38px color-mix(in srgb,var(--mc) 90%,transparent)}
.aicap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 100% 0%,color-mix(in srgb,var(--mc) 26%,transparent),transparent 62%)}
.aicap>*{position:relative}
.aicap-h{display:flex;align-items:center;gap:13px;padding-bottom:16px;
  border-bottom:1px solid color-mix(in srgb,var(--mc) 42%,transparent)}
.aicap-h span{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;
  background:linear-gradient(150deg,var(--mc),var(--mc2));color:#fff;flex:0 0 auto;
  box-shadow:0 16px 30px -12px var(--mc)}
.aicap-h svg{width:19px;height:19px}
.aicap-h strong{font-size:clamp(17px,1.65vw,21px);letter-spacing:.02em;color:#fff;
  text-transform:uppercase;font-weight:800}
.aicap ul{margin-top:20px;display:grid;gap:14px}
.aicap li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(13.5px,1.28vw,15.5px);
  line-height:1.5;color:#eaf3f9;font-weight:650;letter-spacing:-.012em}
.aicap li i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-top:7px;
  background:var(--mc);box-shadow:0 0 0 4px color-mix(in srgb,var(--mc) 24%,transparent),
  0 0 14px color-mix(in srgb,var(--mc) 70%,transparent)}
.aim-value{margin-top:auto;padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18)}
.aim-value small{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:color-mix(in srgb,var(--mc) 70%,#fff)}
.aim-value p{margin-top:7px;font-size:13.5px;line-height:1.58;color:#b9cede}

/* the product copilot band */
.cop-sec .sec-head p,.aud-sec .sec-head p{color:#a9c0d0}
.copx{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(28px,3.4vw,42px)}
.copx-l{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:clamp(28px,3.2vw,40px);border-radius:22px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}
.copx-orb{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  background:linear-gradient(150deg,var(--orange2),var(--orange));color:#fff;
  box-shadow:0 0 0 10px rgba(227,93,38,.12),0 24px 46px -20px rgba(227,93,38,1);
  animation:orb 3.4s ease-in-out infinite}
@keyframes orb{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.copx-orb svg{width:30px;height:30px}
.copx-l>strong{font-size:19px;letter-spacing:-.034em;color:#fff}
.copx-prompts{display:grid;gap:9px;width:100%}
.copx-prompts span{display:block;padding:11px 16px;border-radius:11px;background:#fff;color:#0b2437;
  font-size:12.5px;font-weight:700;letter-spacing:-.02em;text-align:center;
  opacity:0;transform:translateY(8px);animation:pIn .5s var(--ease) forwards;animation-delay:var(--d)}
@keyframes pIn{to{opacity:1;transform:none}}
.copx-r{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.copx-c{padding:22px 22px 24px;border-radius:18px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);
  transition:transform .3s var(--ease),background .3s,border-color .3s}
.copx-c:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);border-color:rgba(255,138,89,.42)}
.copx-c strong{display:block;font-size:14.5px;letter-spacing:-.03em;color:var(--orange2)}
.copx-c p{margin-top:9px;font-size:13px;line-height:1.6;color:#a9c0d0}
.copx-foot{margin-top:clamp(26px,3vw,36px);text-align:center;font-size:clamp(17px,2.1vw,23px);
  font-weight:800;letter-spacing:-.034em;color:var(--orange2)}

@media (max-width:1080px){
  .chal{grid-template-columns:repeat(3,1fr)}
  .aim-nav{grid-template-columns:repeat(3,1fr)}
  .aim-pane.on{grid-template-columns:1fr}
  .copx{grid-template-columns:1fr}
}
@media (max-width:760px){
  .chal,.auds{grid-template-columns:1fr}
  .aim-nav{grid-template-columns:1fr 1fr}
  .aim-feats{grid-template-columns:1fr}
  .copx-r{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .aim-l,.aim-r{animation:none}
  .copx-orb{animation:none}
  .copx-prompts span{opacity:1;transform:none;animation:none}
}

/* ==========================================================================
   The numbers band — floats under the hero, counts up, draws its dials
   ========================================================================== */
.numsec{position:relative;z-index:5;padding:0}
/* a quiet graphic divider between the credentials band and the product suite */
.xdiv{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.1vw,26px);
  margin:clamp(42px,4.8vw,66px) auto 0;max-width:600px;width:100%}
/* the rule fades in from the centre out, tinted toward the mark */
.xdiv-l{flex:1;height:1px;transform:scaleX(0);transform-origin:var(--o,right);
  transition:transform 1.2s var(--ease) .12s;
  background:linear-gradient(var(--g,90deg),transparent,
    color-mix(in srgb,var(--steel) 14%,transparent) 52%,
    color-mix(in srgb,var(--orange) 38%,transparent))}
.xdiv-l.r{--o:left;--g:270deg}
.rv.in .xdiv-l,.xdiv.in .xdiv-l{transform:scaleX(1)}
.xdiv-m{position:relative;flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;
  opacity:0;transform:scale(.88);
  transition:opacity .8s ease .45s,transform .8s var(--ease) .45s}
.rv.in .xdiv-m,.xdiv.in .xdiv-m{opacity:1;transform:none}
/* a slowly turning outline, echoing the XEETEK cube */
.xdiv-m::before{content:"";position:absolute;inset:4px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--orange) 26%,transparent);
  animation:xdivSpin 22s linear infinite}
/* a soft halo that breathes behind it */
.xdiv-m::after{content:"";position:absolute;inset:8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--orange) 26%,transparent),transparent 70%);
  filter:blur(6px);animation:xdivHalo 4.6s ease-in-out infinite}
.xdiv-m i{position:relative;z-index:1;width:12px;height:12px;border-radius:3.5px;
  transform:rotate(45deg);
  background:linear-gradient(145deg,var(--orange3),var(--orange2) 42%,var(--orange));
  box-shadow:0 0 0 6px color-mix(in srgb,var(--orange) 9%,transparent),
             0 10px 22px -9px var(--orange)}
@keyframes xdivSpin{from{transform:rotate(45deg)}to{transform:rotate(405deg)}}
@keyframes xdivHalo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){
  .xdiv-l{transform:scaleX(1);transition:none}
  .xdiv-m{opacity:1;transform:none;transition:none}
  .xdiv-m::before{animation:none;transform:rotate(45deg)}
  .xdiv-m::after{animation:none;opacity:.7}
}
.numband{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(5,1fr);
  margin-top:clamp(-64px,-4.4vw,-36px);padding:clamp(26px,3vw,38px) clamp(14px,1.6vw,22px);
  border-radius:24px;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 46px 92px -50px rgba(14,36,56,.95)}
/* the four Microsoft colours as a hairline that draws across on reveal */
.numband::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--orange) 0%,#2f9de8 28%,#12b5a5 55%,#8b5cf6 78%,#0f9d6b 100%);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .1s}
.numband.in::before{transform:scaleX(1)}
/* a slow shine that crosses the panel once it appears */
.nb-sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  transform:translateX(-120%)}
.numband.in .nb-sheen{animation:nbShine 1.5s var(--ease) .45s 1}
@keyframes nbShine{to{transform:translateX(120%)}}

.nb{position:relative;display:grid;justify-items:center;text-align:center;gap:2px;
  padding:6px clamp(8px,1.2vw,16px);
  opacity:0;transform:translateY(14px)}
.numband.in .nb{animation:nbIn .7s var(--ease) forwards;animation-delay:var(--d)}
@keyframes nbIn{to{opacity:1;transform:none}}
.nb + .nb::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 22%,var(--line) 78%,transparent)}

/* the dial: a ring that draws to the stat's own level, with the icon inside */
.nb-dial{position:relative;width:54px;height:54px;display:grid;place-items:center;margin-bottom:12px}
.nb-dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.nb-dial circle{fill:none;stroke-width:3;stroke-linecap:round}
.nb-trk{stroke:var(--mist2)}
.nb-arc{stroke:var(--nc);stroke-dasharray:126;stroke-dashoffset:126;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--nc) 45%,transparent))}
.numband.in .nb-arc{animation:nbArc 1.5s var(--ease) forwards;animation-delay:calc(var(--d) + .2s)}
@keyframes nbArc{to{stroke-dashoffset:calc(126 - 1.26 * var(--pct))}}
.nb-dial i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(150deg,var(--nc),var(--nc2));color:#fff;
  box-shadow:0 10px 20px -10px var(--nc);transition:transform .35s var(--ease)}
.nb-dial svg{z-index:1}
.nb-dial i svg{position:static;width:15px;height:15px;transform:none;inset:auto}
.nb:hover .nb-dial i{transform:scale(1.12) rotate(-6deg)}

.nb strong{font-size:clamp(30px,3.7vw,44px);font-weight:800;letter-spacing:-.05em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.nb-l{display:block;margin-top:10px;font-size:12px;line-height:1.45;font-weight:660;color:var(--muted)}
.nb:hover strong{color:var(--nc)}
.nb strong{transition:color .3s}

@media (max-width:1080px){
  .numband{grid-template-columns:repeat(3,1fr);gap:22px 0;margin-top:clamp(-40px,-3vw,-24px)}
  .nb + .nb::before{display:none}
  .nb:nth-child(n+3)::after{content:"";position:absolute;left:12%;right:12%;top:-11px;height:1px;background:var(--line)}
}
@media (max-width:680px){
  .numband{grid-template-columns:1fr 1fr;margin-top:0;gap:26px 0}
  .nb:nth-child(n+3)::after{display:none}
  .nb:last-child{grid-column:1 / -1}
  .nb strong{font-size:clamp(28px,9vw,38px)}
}
@media (prefers-reduced-motion:reduce){
  .nb{opacity:1;transform:none;animation:none}
  .numband::before{transform:scaleX(1);transition:none}
  .nb-sheen{display:none}
  .nb-arc{animation:none;stroke-dashoffset:calc(126 - 1.26 * var(--pct))}
}

/* ==========================================================================
   HRMS module scenes — one animation per module, with its AI strip
   ========================================================================== */
/* ---------- the AI capabilities pane on the XEE HRMS slide ---------- */
.aipane{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(24px,2.8vw,32px);border-radius:24px;
  background:linear-gradient(158deg,#0c2740,#061625 72%);
  border:1px solid color-mix(in srgb,var(--c1) 46%,transparent);
  box-shadow:0 40px 84px -44px color-mix(in srgb,var(--c1) 85%,rgba(0,0,0,.9))}
.aipane::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(76% 56% at 100% 0%,color-mix(in srgb,var(--c1) 30%,transparent),transparent 64%)}
.aipane>*{position:relative}
.aipane-h{display:flex;align-items:center;gap:12px;padding-bottom:16px;
  border-bottom:1px solid color-mix(in srgb,var(--c1) 38%,transparent)}
.aipane-i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--c1),var(--c2));color:#fff;
  box-shadow:0 14px 28px -12px var(--c1)}
.aipane-i svg{width:18px;height:18px}
.aipane-h b{font-size:16px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;
  white-space:nowrap}
.aipane-h em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:color-mix(in srgb,var(--c1) 55%,#cfe0ec)}
.aipane-l{display:grid;gap:13px;margin-top:20px;align-content:start}
.aipane-l li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.48;
  font-weight:660;letter-spacing:-.012em;color:#eaf3f9;opacity:0}
.aipane.on .aipane-l li{animation:aiLine .42s var(--ease) forwards;animation-delay:calc(.1s + var(--i) * .085s)}
@keyframes aiLine{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.aipane-l i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:7px;
  background:var(--c1);box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 22%,transparent),
  0 0 16px color-mix(in srgb,var(--c1) 75%,transparent)}
.aipane-f{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.1);opacity:0}
.aipane.on .aipane-f{animation:aiLine .42s var(--ease) forwards;animation-delay:.62s}
.aipane-f svg{width:14px;height:14px;flex:0 0 auto;color:var(--mint)}
.aipane-f span{font-size:12px;font-weight:700;letter-spacing:.02em;color:#9fb8c8}
@media (prefers-reduced-motion:reduce){
  .aipane-l li,.aipane-f{opacity:1}
  .aipane.on .aipane-l li,.aipane.on .aipane-f{animation:none}
}
/* the HRMS pane runs continuously — a live panel rather than a still card */
.aipane-sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden}
.aipane-sheen::before{content:"";position:absolute;top:-60%;left:-40%;width:45%;height:220%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  animation:aiSheen 7s ease-in-out infinite}
@keyframes aiSheen{0%{left:-45%}55%,100%{left:125%}}
.aipane-i{position:relative;overflow:visible}
.aipane-i u{position:absolute;inset:-5px;border-radius:15px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--c1) 55%,transparent);
  animation:aiOrb 2.8s ease-out infinite}
@keyframes aiOrb{0%{transform:scale(.86);opacity:.9}70%,100%{transform:scale(1.28);opacity:0}}
/* a small live readout: activity bars and a sweeping completion ring */
.aipane-viz{position:relative;display:flex;align-items:center;gap:14px;margin-top:18px;
  height:100px;padding:12px 14px;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}

/* ESS — the request queue clears itself */
.vz-q{flex:1;display:grid;gap:5px}
.vz-row{display:flex;align-items:center;gap:9px;padding:4px 9px;border-radius:8px;
  background:rgba(255,255,255,.05);opacity:0;transform:translateX(-14px);
  animation:vzRow .7s var(--ease) forwards;animation-delay:calc(var(--i) * .16s)}
.vz-row u{width:6px;height:6px;border-radius:50%;background:var(--c1);flex:0 0 auto}
.vz-row b{flex:1;font-size:10.5px;font-weight:700;color:#cfe0ec;letter-spacing:-.01em}
.vz-row em{display:grid;place-items:center;width:15px;height:15px;border-radius:5px;
  background:color-mix(in srgb,var(--mint) 20%,transparent);opacity:0;transform:scale(.5);
  animation:vzTick 4.4s var(--ease) infinite;animation-delay:calc(.9s + var(--i) * .45s)}
.vz-row em svg{width:9px;height:9px;color:var(--mint)}
@keyframes vzRow{to{opacity:1;transform:none}}
/* the rows stay put; the approvals are what cycle */
@keyframes vzTick{0%,6%{opacity:0;transform:scale(.5)}16%,60%{opacity:1;transform:scale(1)}
  74%,100%{opacity:0;transform:scale(.8)}}

/* Time — a punch lands inside the geofence, the week fills in */
.vz-geo{position:relative;flex:0 0 auto;width:62px;height:62px;display:grid;place-items:center}
.vz-geo u{position:absolute;inset:8px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--c1) 55%,transparent);
  animation:vzPing 2.8s ease-out infinite}
.vz-geo u.d{animation-delay:1.4s}
@keyframes vzPing{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.15);opacity:0}}
.vz-pin{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;
  background:linear-gradient(150deg,var(--c1),var(--c2));
  animation:vzDrop 2.8s var(--ease) infinite}
.vz-pin svg{width:13px;height:13px;color:#fff}
@keyframes vzDrop{0%{transform:translateY(-12px);opacity:0}18%,86%{transform:none;opacity:1}
  100%{transform:translateY(-12px);opacity:0}}
.vz-week{flex:1;display:flex;align-items:flex-end;gap:6px;height:46px}
.vz-week .vz-day{flex:1;height:100%;border-radius:4px;transform-origin:bottom;transform:scaleY(.18);
  background:linear-gradient(180deg,var(--c1),color-mix(in srgb,var(--c1) 30%,transparent));
  animation:vzDay 4.2s var(--ease) infinite;animation-delay:calc(var(--i) * .26s)}
.vz-week .vz-day.flag{background:linear-gradient(180deg,#f59e0b,rgba(245,158,11,.3))}
@keyframes vzDay{0%,6%{transform:scaleY(.18)}24%,78%{transform:scaleY(1)}96%,100%{transform:scaleY(.18)}}

/* Payroll — the slip builds, then posts */
.vz-slip{flex:1;display:grid;gap:8px}
.vz-line,.vz-total{display:flex;align-items:center;gap:10px}
.vz-line u,.vz-total u{height:5px;border-radius:3px;background:rgba(255,255,255,.14);width:0;
  animation:vzFill 4.6s var(--ease) infinite;animation-delay:calc(var(--i) * .34s)}
.vz-line b,.vz-total b{width:34px;height:5px;border-radius:3px;flex:0 0 auto;
  background:color-mix(in srgb,var(--c1) 55%,transparent);opacity:0;
  animation:vzAmt 4.6s var(--ease) infinite;animation-delay:calc(.25s + var(--i) * .34s)}
.vz-total{margin-top:2px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
.vz-total u{animation-delay:1.1s;background:rgba(255,255,255,.22)}
.vz-total b{width:46px;height:7px;background:var(--c1);animation-delay:1.35s}
@keyframes vzFill{0%,4%{width:0}22%,82%{width:100%}97%,100%{width:0}}
@keyframes vzAmt{0%,10%{opacity:0;transform:translateX(6px)}26%,82%{opacity:1;transform:none}
  97%,100%{opacity:0}}
.vz-stamp{position:absolute;right:14px;bottom:12px;display:flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:7px;opacity:0;transform:scale(.8) rotate(-6deg);
  background:color-mix(in srgb,var(--mint) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--mint) 45%,transparent);
  animation:vzStamp 4.6s var(--ease) infinite;animation-delay:1.9s}
.vz-stamp svg{width:10px;height:10px;color:var(--mint)}
.vz-stamp i{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--mint)}
@keyframes vzStamp{0%,4%{opacity:0;transform:scale(.8) rotate(-6deg)}
  12%{opacity:1;transform:scale(1.06) rotate(0)}18%,58%{opacity:1;transform:scale(1) rotate(0)}
  72%,100%{opacity:0;transform:scale(.94)}}

/* Learning — the certification ring fills and badges land */
.vz-ring{position:relative;flex:0 0 auto;width:60px;height:60px;display:grid;place-items:center}
.vz-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.vz-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.vz-rt{stroke:rgba(255,255,255,.1)}
.vz-ra{stroke:var(--c1);stroke-dasharray:132;stroke-dashoffset:132;
  animation:vzCert 5s var(--ease) infinite}
@keyframes vzCert{0%,5%{stroke-dashoffset:132}60%,88%{stroke-dashoffset:8}100%{stroke-dashoffset:132}}
.vz-ring b{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;
  background:color-mix(in srgb,var(--c1) 22%,transparent)}
.vz-ring b svg{position:static;width:12px;height:12px;transform:none;color:var(--c1)}
.vz-badges{flex:1;display:flex;gap:8px;justify-content:flex-end}
.vz-badges span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:color-mix(in srgb,var(--mint) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--mint) 40%,transparent);
  opacity:0;transform:translateY(10px) scale(.8);
  animation:vzBadge 5s var(--ease) infinite;animation-delay:calc(1.4s + var(--i) * .5s)}
.vz-badges svg{width:12px;height:12px;color:var(--mint)}
@keyframes vzBadge{0%,6%{opacity:0;transform:translateY(10px) scale(.8)}
  18%,72%{opacity:1;transform:none}88%,100%{opacity:0;transform:scale(.9)}}

/* Performance — ratings settle into a calibrated band */
.vz-cal{position:relative;flex:1;display:flex;align-items:flex-end;gap:10px;height:62px;padding-bottom:2px}
.vz-col{flex:1;height:100%;display:flex;align-items:flex-end}
.vz-col u{width:100%;border-radius:5px 5px 2px 2px;height:100%;transform-origin:bottom;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 70%,transparent),
    color-mix(in srgb,var(--c1) 22%,transparent));
  animation:vzCal 5.2s var(--ease) infinite;animation-delay:calc(var(--i) * .16s)}
.vz-col.peak u{background:linear-gradient(180deg,var(--c1),color-mix(in srgb,var(--c1) 40%,transparent));
  animation-name:vzCalPeak}
@keyframes vzCal{0%{transform:scaleY(.2)}30%{transform:scaleY(.75)}
  58%,84%{transform:scaleY(.5)}100%{transform:scaleY(.2)}}
@keyframes vzCalPeak{0%{transform:scaleY(.2)}30%{transform:scaleY(.45)}
  58%,84%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
.vz-band{position:absolute;left:0;right:0;height:1px;bottom:50%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--mint) 70%,transparent),transparent);
  opacity:0;animation:vzBand 5.2s var(--ease) infinite;animation-delay:2.4s}
@keyframes vzBand{0%,6%{opacity:0}20%,66%{opacity:1}82%,100%{opacity:0}}

/* Recruitment — CVs are scanned and the shortlist rises */
.vz-cv{position:relative;flex:1;display:flex;align-items:flex-end;gap:9px;height:64px}
.vz-card{flex:1;height:44px;border-radius:9px;padding:9px 8px 0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  animation:vzCard 5.4s var(--ease) infinite;animation-delay:calc(var(--i) * .18s)}
.vz-card u{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.2);margin-bottom:5px}
.vz-card u.s{width:60%;background:rgba(255,255,255,.12)}
.vz-card.top{animation-name:vzCardTop;border-color:color-mix(in srgb,var(--c1) 55%,transparent)}
.vz-card.top u{background:var(--c1)}
@keyframes vzCard{0%,20%{transform:none;opacity:.85}52%,80%{transform:translateY(6px);opacity:.45}
  100%{transform:none;opacity:.85}}
@keyframes vzCardTop{0%,20%{transform:none}52%,80%{transform:translateY(-12px)}100%{transform:none}}
.vz-scan{position:absolute;left:-10%;top:0;bottom:0;width:22%;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c1) 30%,transparent),transparent);
  animation:vzScan 5.4s ease-in-out infinite}
@keyframes vzScan{0%,4%{left:-22%}44%{left:100%}100%{left:100%}}

@media (prefers-reduced-motion:reduce){
  .aipane-viz *{animation:none !important}
  .vz-row,.vz-row em,.vz-badges span{opacity:1;transform:none}
  .vz-line u,.vz-total u{width:100%}
  .vz-line b,.vz-total b{opacity:1}
  .vz-week .vz-day{transform:scaleY(.8)}
  .vz-ra{stroke-dashoffset:8}
  .vz-scan,.vz-stamp{display:none}
}
/* each capability's dot keeps its own slow pulse, offset down the list */
.aipane.on .aipane-l li i{animation:aiDot 4.8s ease-in-out infinite;
  animation-delay:calc(.8s + var(--i) * .8s)}
@keyframes aiDot{0%,82%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 22%,transparent),
    0 0 16px color-mix(in srgb,var(--c1) 75%,transparent);transform:scale(1)}
  88%{box-shadow:0 0 0 7px color-mix(in srgb,var(--c1) 12%,transparent),
    0 0 22px color-mix(in srgb,var(--c1) 90%,transparent);transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){
  .aipane-sheen::before,.aipane-i u,.viz-bars u,.vr-a,.viz-ring b,
  .aipane.on .aipane-l li i{animation:none}
  .vr-a{stroke-dashoffset:22}
}
.mvwrap{position:relative;width:100%;min-height:500px}
.mvs{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .42s ease}
.mvs.on{opacity:1;pointer-events:auto}
.mvwrap.solo{min-height:0}
@media (max-width:1080px){.mvwrap{min-height:544px}}
@media (max-width:700px){.mvwrap{min-height:596px}
  .aipane-h b{font-size:15px}
  .aipane-l{gap:12px;margin-top:17px}
  .aipane-l li{font-size:14.5px}}
@media (max-width:420px){.mvwrap{min-height:624px}}
.mvwrap.solo .mvs{position:relative;inset:auto}
.mvs .scene-body{height:186px;padding:16px}
.mv-ai{display:flex;align-items:flex-start;gap:10px;padding:12px 15px;
  border-top:1px solid var(--line);background:linear-gradient(165deg,#0b2437,#061625)}
.mv-ai>span{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--c1),var(--c2));color:#fff;
  font-family:var(--mono);font-size:8px;letter-spacing:.12em;font-weight:600}
.mv-ai>span svg{width:9px;height:9px}
.mv-ai>div{display:flex;flex-wrap:wrap;gap:4px 10px}
.mv-ai em{font-style:normal;font-size:10.5px;line-height:1.35;color:#c3d7e4;font-weight:620;
  position:relative;padding-left:9px}
.mv-ai em::before{content:"";position:absolute;left:0;top:6px;width:4px;height:4px;border-radius:50%;background:var(--c1)}

/* ESS — requests approved from the phone */
.mv-ess{position:relative;display:grid;gap:8px;align-content:start}
.mv-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  background:var(--mist);border:1px solid var(--line);
  opacity:0;transform:translateX(-10px);animation:mvRow 6s var(--ease) infinite;animation-delay:calc(var(--i)*.5s)}
@keyframes mvRow{0%,4%{opacity:0;transform:translateX(-10px)}12%,80%{opacity:1;transform:none}90%,100%{opacity:0}}
.mv-row u{width:18px;height:18px;border-radius:6px;flex:0 0 auto;background:linear-gradient(150deg,var(--c1),var(--c2))}
.mv-row b{flex:1;font-size:12px;font-weight:680;color:var(--ink)}
.mv-row em{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  background:rgba(15,157,107,.14);color:var(--mint);opacity:0;
  animation:mvTick 6s ease infinite;animation-delay:calc(var(--i)*.5s + .55s)}
.mv-row em svg{width:10px;height:10px}
@keyframes mvTick{0%,10%{opacity:0;transform:scale(.4)}18%,80%{opacity:1;transform:none}90%,100%{opacity:0}}
.mv-toast{position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:99px;background:#0b2437;color:#fff;font-size:10.5px;font-weight:680;
  box-shadow:0 14px 26px -14px rgba(0,0,0,.9);opacity:0;
  animation:mvToast 6s var(--ease) infinite}
.mv-toast svg{width:11px;height:11px;color:var(--mint)}
@keyframes mvToast{0%,58%{opacity:0;transform:translateY(10px)}66%,86%{opacity:1;transform:none}94%,100%{opacity:0}}

/* Time — the day runs, one exception flags */
.mv-time{display:grid;gap:14px;align-content:center;height:100%}
.mv-clock{position:relative;width:46px;height:46px;display:grid;place-items:center;margin:0 auto}
.mv-clock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mv-clock circle{fill:none;stroke-width:3;stroke-linecap:round}
.mv-trk{stroke:var(--mist2)}
.mv-arc{stroke:var(--c1);stroke-dasharray:113;stroke-dashoffset:113;
  animation:mvArc 5.4s var(--ease) infinite}
@keyframes mvArc{0%{stroke-dashoffset:113}60%,88%{stroke-dashoffset:20}100%{stroke-dashoffset:113}}
.mv-clock i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(150deg,var(--c1),var(--c2));color:#fff}
.mv-clock i svg{position:static;width:13px;height:13px;transform:none}
.mv-tl{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;height:26px}
.mv-tl span{border-radius:5px;background:var(--mist2);transform:scaleY(.42);transform-origin:bottom;
  animation:mvSeg 5.4s var(--ease) infinite;animation-delay:calc(var(--i)*.12s)}
@keyframes mvSeg{0%,6%{transform:scaleY(.42);background:var(--mist2)}
  16%,84%{transform:scaleY(1);background:var(--c1)}94%,100%{transform:scaleY(.42);background:var(--mist2)}}
.mv-tl span.flag{animation-name:mvFlag}
@keyframes mvFlag{0%,6%{transform:scaleY(.42);background:var(--mist2)}
  16%,84%{transform:scaleY(1);background:#f5a524;box-shadow:0 0 0 2px rgba(245,165,36,.25)}
  94%,100%{transform:scaleY(.42);background:var(--mist2)}}
.mv-play{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:2px;background:var(--ink);
  opacity:.5;animation:mvPlay 5.4s linear infinite}
@keyframes mvPlay{0%{left:0;opacity:0}6%{opacity:.5}88%{left:100%;opacity:.5}100%{left:100%;opacity:0}}
.mv-legend{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:660;color:var(--body)}
.mv-legend s{flex:1;height:1px;background:var(--line);text-decoration:none}
.mv-legend em{font-style:normal;color:#b06d05}

/* Payroll — the run totals, then the check clears */
.mv-pay{position:relative;display:grid;gap:7px;align-content:start;height:100%}
.mv-line{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:9px;
  background:var(--mist);border:1px solid var(--line);opacity:0;transform:translateY(8px);
  animation:mvRow 6s var(--ease) infinite;animation-delay:calc(var(--i)*.42s)}
.mv-line b{font-size:11.5px;font-weight:680;color:var(--ink)}
.mv-line em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}
.mv-total{display:flex;align-items:center;justify-content:space-between;margin-top:3px;padding:11px 13px;
  border-radius:11px;background:linear-gradient(150deg,var(--c1),var(--c2));color:#fff;opacity:0;
  animation:mvTotal 6s var(--ease) infinite}
.mv-total b{font-size:11.5px;font-weight:700;opacity:.9}
.mv-total em{font-style:normal;font-family:var(--mono);font-size:14px;font-weight:600}
@keyframes mvTotal{0%,52%{opacity:0;transform:translateY(8px)}60%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
.mv-chk{position:absolute;right:0;bottom:-2px;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:99px;background:rgba(15,157,107,.12);color:#0a7a52;
  border:1px solid rgba(15,157,107,.3);font-size:9.5px;font-weight:700;opacity:0;
  animation:mvToast 6s var(--ease) infinite}
.mv-chk svg{width:10px;height:10px}

/* Learning — three rings fill */
.mv-learn{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:center;height:100%}
.mv-ring{display:grid;justify-items:center;position:relative}
.mv-ring svg{width:62px;height:62px;transform:rotate(-90deg)}
.mv-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.mv-ring .mv-arc{stroke:var(--c1);stroke-dasharray:113;stroke-dashoffset:113;
  animation:mvRing 5.6s var(--ease) infinite;animation-delay:calc(var(--i)*.3s)}
@keyframes mvRing{0%,6%{stroke-dashoffset:113}26%,82%{stroke-dashoffset:calc(113 - 1.13 * var(--v))}
  94%,100%{stroke-dashoffset:113}}
.mv-ring b{position:absolute;top:22px;font-size:13px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.mv-ring small{margin-top:7px;font-size:10px;font-weight:660;color:var(--muted)}

/* Performance — goals, reviews, development */
.mv-perf{display:grid;gap:11px;align-content:center;height:100%}
.mv-bar{display:grid;grid-template-columns:78px 1fr 26px;align-items:center;gap:10px}
.mv-bar b{font-size:11px;font-weight:680;color:var(--ink)}
.mv-bar s{height:8px;border-radius:5px;background:var(--mist2);overflow:hidden;text-decoration:none;display:block}
.mv-bar u{display:block;height:100%;width:var(--v);border-radius:5px;
  background:linear-gradient(90deg,var(--c1),var(--c2));transform-origin:left;transform:scaleX(0);
  animation:mvFill 5.6s var(--ease) infinite;animation-delay:calc(var(--i)*.28s)}
@keyframes mvFill{0%,6%{transform:scaleX(0)}28%,84%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
.mv-bar em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:right}
.mv-stars{display:flex;align-items:center;gap:5px;margin-top:4px}
.mv-stars i{display:grid;place-items:center;width:17px;height:17px;border-radius:5px;
  background:var(--mist2);color:var(--muted-d);opacity:0;
  animation:mvStar 5.6s var(--ease) infinite;animation-delay:calc(var(--i)*.16s + .5s)}
.mv-stars i svg{width:9px;height:9px}
@keyframes mvStar{0%,8%{opacity:0;transform:scale(.5)}
  22%,84%{opacity:1;transform:none;background:var(--c1);color:#fff}94%,100%{opacity:0}}
.mv-stars b{margin-left:6px;font-size:10.5px;font-weight:700;color:var(--c1)}

@media (max-width:1080px){.mvwrap{max-width:none}}
@media (prefers-reduced-motion:reduce){
  .mvs{transition:none}
  .mv-row,.mv-row em,.mv-toast,.mv-line,.mv-total,.mv-chk,.mv-tl span,.mv-play,.mv-stars i{
    animation:none!important;opacity:1;transform:none}
  .mv-play{display:none}
  .mv-tl span{transform:scaleY(1);background:var(--c1)}
  .mv-tl span.flag{background:#f5a524}
  .mv-arc{animation:none;stroke-dashoffset:calc(113 - 1.13 * var(--v,70))}
  .mv-bar u{animation:none;transform:scaleX(1)}
}

/* ==========================================================================
   Phones & tablets — responsive pass
   Long card grids become swipeable rows on phones, sections are tighter,
   tap targets bigger, form fields never trigger iOS zoom.
   ========================================================================== */
@media (max-width:980px){
  .ctop .shell.split{grid-template-columns:1fr}
}
/* menu open on a dark-hero page: keep the wordmark and close button readable on the light drawer */
body:has(#drawer.open) .hdr .brand,body:has(#drawer.open) .hdr .burger{color:#0b2a4a!important}
@media (max-width:640px){
  .sec{padding-top:46px;padding-bottom:46px}
  .xm-swipe{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:84%!important;grid-template-columns:none!important;grid-template-rows:none!important;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:12px!important;margin-left:-16px!important;margin-right:-16px!important;
    padding:4px 16px 14px!important;scroll-padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;align-items:stretch!important}
  .xm-swipe::-webkit-scrollbar{display:none}
  .xm-swipe>*{scroll-snap-align:start;grid-column:auto!important;grid-row:auto!important;min-width:0;width:auto!important;max-width:none!important;margin:0!important}
  .xm-swipe.mom-grid{grid-auto-columns:78%!important}
  .xm-bar{height:3px;border-radius:3px;background:rgba(11,42,74,.12);margin:4px auto 0;width:110px;position:relative;overflow:hidden}
  .xm-bar i{position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--orange);border-radius:3px;transition:left .12s linear}
  .on-dark .xm-bar,.cdark .xm-bar{background:rgba(255,255,255,.18)}
  .sl-nav:not(:has(> :not(.sl-tab))){display:flex!important;gap:8px;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:2px 16px 6px;scroll-snap-type:x proximity}
  .sl-nav::-webkit-scrollbar{display:none}
  .sl-nav:not(:has(> :not(.sl-tab))) .sl-tab{flex:0 0 auto;width:auto!important;scroll-snap-align:start;padding-right:16px}
  .sect-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .sect-grid .sect{min-width:0}
  .abx-logos{grid-template-columns:repeat(3,1fr);gap:8px}
  .abx-logo{min-height:0}
  .crumb a{padding:8px 0}
  input,select,textarea{font-size:16px!important}
  .agent-fab{right:calc(14px + env(safe-area-inset-right,0px))!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
  h1{overflow-wrap:break-word}
  .foot a{display:inline-block;padding-block:3px}
}
@media (max-width:380px){
  .xm-swipe{grid-auto-columns:88%!important}
  .abx-logos{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .marq{overflow-x:auto;scrollbar-width:none}
  .marq-t{flex-wrap:nowrap!important;width:max-content!important;justify-content:flex-start!important}
  .marq-t .mlogo.dup{display:none}
}
/* Language switcher (V12, an addition): mark the current language in the header menu and the drawer.
   Own class only (.xl-*: not used by the design), doubled to outrank `.mega a` / `.drawer a` without
   touching the original's rules. */
.xl-cur.xl-cur,.xl-cur.xl-cur:hover{color:var(--orange)}
/* Cookie banner. Only positioning and spacing live here: the look comes from the design's own
   .ag-h/.ag-av/.ag-t (panel header) and .btn (buttons). Tokens (--paper, --line, --body, --ink,
   --orange) are the design's. Not part of the ported design CSS (src/styles/source stays verbatim). */
.cb{position:fixed;left:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:80;
  display:flex;flex-direction:column;width:min(404px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;
  border-radius:22px;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 40px 90px -36px rgba(14,36,56,.6);
  opacity:0;transform:translateY(14px) scale(.98);transform-origin:0 100%;
  transition:opacity .26s ease,transform .3s var(--ease)}
.cb.on{opacity:1;transform:none}
.cb[hidden]{display:none}
.cb .ag-h{border-radius:0}
.cb-body{padding:14px 16px 16px}
.cb-body[hidden]{display:none}
.cb-text{font-size:13.4px;line-height:1.62;color:var(--body);font-weight:520}
.cb-text a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.cb-text a:hover{color:var(--orange)}
.cb-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.cb-body[data-cb-view="settings"] .cb-actions{grid-template-columns:1fr 1fr}
/* three identical buttons: no choice is visually favoured */
.cb .btn{justify-content:center;padding:11px 10px;font-size:12.5px;line-height:1.25;text-align:center}
.cb .btn:focus-visible,.cb input:focus-visible,.cb a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.cb-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.cb-row:first-child{padding-top:0}
.cb-row b{font-size:13.5px;color:var(--ink);letter-spacing:-.01em}
.cb-row p{margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--body)}
.cb-row input{flex:0 0 auto;width:20px;height:20px;margin-top:2px;accent-color:var(--orange);cursor:pointer}
.cb-row input:disabled{cursor:not-allowed}
@media (max-width:560px){
  .cb{left:8px;right:8px;bottom:8px;width:auto}
  .cb-actions{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.cb{transition:none}}