/* VYROX detail modal - one shell for every "More details" on the site.
   Rules (site owner, 2026-08-28): fixed header with the X at the far right,
   fixed footer with Close at the far left, only the body scrolls.
   Motion: macOS-style zoom from the card that opened it, translucent chrome,
   critically damped so nothing bounces. Reduced motion = cross-fade only. */

.vx-modal { --m-ink:#0f2740; --m-body:#33506e; --m-mut:#587290; --m-line:rgba(15,39,64,.10);
  --m-acc:#0071e3; --m-acc-deep:#0a58b0; --m-r:18px; --m-ease:cubic-bezier(.16,1,.3,1);
  border:0; padding:0; margin:auto; background:transparent; max-width:none; max-height:none;
  width:min(760px, calc(100vw - 32px)); color:var(--m-ink); overflow:visible }
.vx-modal.is-wide { width:min(1040px, calc(100vw - 32px)) }
.vx-modal[open] { display:grid; place-items:center }
.vx-modal::backdrop { background:rgba(10,24,40,.42); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  opacity:0; transition:opacity .32s var(--m-ease) }
.vx-modal.is-open::backdrop { opacity:1 }

.vx-modal-card { display:flex; flex-direction:column; overflow:hidden; width:100%;
  min-height:min(62vh, 640px); max-height:min(88vh, 860px); border-radius:var(--m-r); background:#fff;
  border:1px solid rgba(255,255,255,.6); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 40px 100px rgba(10,24,40,.38), 0 8px 24px rgba(10,24,40,.18);
  transform-origin:center; will-change:transform, opacity; opacity:0; transform:scale(.94) }
.vx-modal.is-open .vx-modal-card { opacity:1; transform:none; transition:transform .38s var(--m-ease), opacity .26s ease-out }
.vx-modal.is-closing .vx-modal-card { transition:transform .26s cubic-bezier(.4,0,.6,1), opacity .2s ease-in }

.vx-modal-head { flex:0 0 auto; position:relative; display:flex; align-items:center; gap:14px; padding:18px 18px 18px 26px;
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--m-line) }
.vx-modal-head::before { content:"" !important; display:block !important; width:4px !important; height:auto !important; order:0; position:absolute; left:0; top:14px; bottom:14px; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, var(--m-acc), color-mix(in srgb, var(--m-acc) 55%, #fff)) }
.vx-modal-head .vx-modal-mark { flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:19px; line-height:1;
  color:#fff; background:linear-gradient(135deg, var(--m-acc), color-mix(in srgb, var(--m-acc) 70%, #000)); box-shadow:0 8px 18px color-mix(in srgb, var(--m-acc) 30%, transparent) }
.vx-modal-head .vx-modal-mark[hidden] { display:none }
.vx-modal-head .vx-modal-kicker { display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--m-acc); margin-bottom:2px }
.vx-modal-head h2 { margin:0; font-size:clamp(1.15rem, 1rem + .8vw, 1.5rem); font-weight:800; letter-spacing:-.025em; color:var(--m-ink); line-height:1.15; min-width:0 }
.vx-modal-title { flex:1 1 auto; min-width:0 }
.vx-modal-x { flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--m-line); background:#fff; color:var(--m-ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:0; line-height:0;
  transition:transform .3s var(--m-ease), background .2s, border-color .2s }
.vx-modal-x::before, .vx-modal-x::after { content:""; position:absolute; width:16px; height:2px; border-radius:2px; background:currentColor; transform:rotate(45deg) }
.vx-modal-x::after { transform:rotate(-45deg) }
.vx-modal-x { position:relative }
.vx-modal-x:hover { background:#f4f8fd; border-color:rgba(0,113,227,.25); transform:rotate(90deg) }
.vx-modal-x:active { transform:rotate(90deg) scale(.94); transition-duration:.1s }
.vx-modal-x:focus-visible { outline:2px solid var(--m-acc); outline-offset:2px }

.vx-modal-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:26px clamp(20px, 3.4vw, 36px) 34px; background:#fff; text-align:left; line-height:1.6 }
.vx-modal-body p, .vx-modal-body li { font-size:.98rem }
.vx-modal-body > .vx-detail { display:block !important }

.vx-modal-foot { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px 12px 16px;
  border-top:1px solid var(--m-line); background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px) }
.vx-modal-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 20px; border-radius:999px;
  font-weight:700; font-size:.92rem; text-decoration:none; cursor:pointer; border:1px solid var(--m-line); background:#fff; color:var(--m-ink); white-space:nowrap;
  transition:transform .3s var(--m-ease), background .2s, border-color .2s, box-shadow .3s var(--m-ease) }
.vx-modal-btn:hover { background:#f4f8fd; border-color:rgba(0,113,227,.25); transform:translateY(-1px) }
.vx-modal-btn:active { transform:scale(.97); transition-duration:.1s }
.vx-modal-btn.pri { background:var(--m-acc); border-color:var(--m-acc); color:#fff; box-shadow:0 8px 20px rgba(0,113,227,.24) }
.vx-modal-btn.pri:hover { background:var(--m-acc-deep); border-color:var(--m-acc-deep) }
.vx-modal-btn[hidden] { display:none }
.vx-modal-btn:focus-visible { outline:2px solid var(--m-acc); outline-offset:2px }

/* theme.css adds a clearfix ::before/::after (display:table, order:1) to every div/ul/nav/section; in flex rows with space-between they become phantom items and push the real ones off the edges. */
.vxmap-in::before,.vxmap-in::after,.vxmap-pill::before,.vxmap-pill::after,.vxmap-pill ul::before,.vxmap-pill ul::after,.vxch-in::before,.vxch-in::after,.vxch-toc ul::before,.vxch-toc ul::after,.vxsh-in::before,.vxsh-in::after,.vxsv-in::before,.vxsv-in::after,.vxsv-cta::before,.vxsv-cta::after,.vxsv-grid::before,.vxsv-grid::after,.vxsv-pts::before,.vxsv-pts::after,.vxhw-in::before,.vxhw-in::after,.vxhw-act::before,.vxhw-act::after,.vxhw-srv::before,.vxhw-srv::after,.serva-act::before,.serva-act::after,.vxq-cta::before,.vxq-cta::after,.vxq-rail::before,.vxq-rail::after,.vxq-dev::before,.vxq-dev::after,.vxq-facts::before,.vxq-facts::after,.vxq-rail-head::before,.vxq-rail-head::after,.gulu-cta::before,.gulu-cta::after,.gulu-markets::before,.gulu-markets::after,.gulu-head::before,.gulu-head::after,.vxfde-cta::before,.vxfde-cta::after,.vx-modal-card::before,.vx-modal-card::after,.vx-modal-head::after,.vx-modal-foot::before,.vx-modal-foot::after,.vx-modal-body::before,.vx-modal-body::after,.vx-modal-title::before,.vx-modal-title::after{content:none!important;display:none!important}

/* Sections moved into the body lose their band backgrounds and decorations so
   the modal reads as one document, and legacy pieces get sane defaults. */
.vx-modal-body .llm-section, .vx-modal-body .ai-cta, .vx-modal-body .ent-ai-section, .vx-modal-body .robot-section, .vx-modal-body .smart-section { background:#fff !important }
.vx-modal-body .llm-section::before, .vx-modal-body .ent-ai-section::before { display:none !important }
.vx-modal-body .robot-section h2 { font-size:1.25rem !important; margin:0 0 14px !important; text-align:left !important }
.vx-modal-body .robot-label { opacity:1 !important; transform:none !important }
.vx-modal-body .robot-card img { width:100%; aspect-ratio:16/9; object-fit:cover }
.vx-modal-body .smart-section { padding-bottom:0 !important }
/* Content moved into the body keeps its own styles; only trim outer chrome so
   the sections read as one scrolling document rather than stacked bands. */
.vx-modal-body section, .vx-modal-body .vx-band { padding-left:0 !important; padding-right:0 !important; padding-top:24px !important; padding-bottom:24px !important; }
.vx-modal-body section:first-child, .vx-modal-body .vx-band:first-child { padding-top:0 !important }
.vx-modal-body .vx-modal-note { margin:18px 0 0; font-size:.86rem; color:var(--m-mut); line-height:1.55 }

/* The "More details" trigger: same pill language as the site's secondary buttons. */
.vx-more { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:999px; cursor:pointer;
  background:#fff; color:#0f2740; border:1px solid rgba(15,39,64,.14); font:inherit; font-weight:700; font-size:.92rem; line-height:1; text-decoration:none;
  box-shadow:0 1px 2px rgba(15,39,64,.05); transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .3s cubic-bezier(.16,1,.3,1), background .2s }
.vx-more::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); margin-left:2px; transition:transform .3s cubic-bezier(.16,1,.3,1) }
.vx-more:hover { transform:translateY(-2px); border-color:rgba(0,113,227,.3); box-shadow:0 10px 24px rgba(15,39,64,.10); background:#f4f8fd }
.vx-more:hover::after { transform:rotate(-45deg) translate(2px,2px) }
.vx-more:active { transform:scale(.97); transition-duration:.1s }
.vx-more:focus-visible { outline:2px solid #0071e3; outline-offset:2px }
.vx-more.on-dark { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22); box-shadow:none }
.vx-more.on-dark:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4) }

/* Detail blocks live in the page (for crawlers and no-JS readers) and are hidden until opened. */
.vx-detail[hidden] { display:none !important }

html.vx-lock { overflow:hidden }
html.vx-lock body { padding-right:var(--vx-sbw, 0px) }

@media (max-width:640px) {
  .vx-modal, .vx-modal.is-wide { width:100vw; height:100dvh; margin:0; max-height:none; align-self:end }
  .vx-modal[open] { place-items:end center }
  .vx-modal-card { min-height:0; max-height:calc(100dvh - 12px); border-radius:var(--m-r) var(--m-r) 0 0; border-bottom:0; transform:translateY(24px) scale(.98) }
  .vx-modal-head { padding:12px 12px 12px 18px }
  .vx-modal-body { padding:18px 16px 24px }
  .vx-modal-foot { padding-bottom:calc(12px + env(safe-area-inset-bottom)) }
}
@media (prefers-reduced-transparency: reduce) {
  .vx-modal::backdrop { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(10,24,40,.7) }
  .vx-modal-head, .vx-modal-foot { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff }
}
@media (prefers-reduced-motion: reduce) {
  .vx-modal::backdrop, .vx-modal-card, .vx-modal.is-open .vx-modal-card, .vx-modal.is-closing .vx-modal-card { transition:opacity .18s ease !important; transform:none !important }
  .vx-more, .vx-modal-x, .vx-modal-btn { transition:none }
}

/* ---- effects (includes/js/vx-effects.js) -------------------------------- */
/* Spotlight: pointer-following highlight on the surface, plus a lit border.
   Painted by an absolutely positioned pseudo-element so the tile's own
   ::before/::after (icons, bolts) are untouched. */
.vx-spot { position:relative; isolation:isolate; --sx:50%; --sy:50% }
.vx-spot > .vx-spot-l { display:none }
.vx-spot::after { content:"" !important; display:block !important; width:auto !important; height:auto !important; order:0; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:0;
  background:radial-gradient(240px circle at var(--sx) var(--sy), rgba(0,113,227,.13), transparent 60%);
  transition:opacity .35s cubic-bezier(.16,1,.3,1) }
.vx-spot:hover::after { opacity:1 }
.vx-spot > * { position:relative; z-index:1 }
.serva-card.vx-spot::before { z-index:2 }   /* the card's coloured top rule stays on top */
.vxq-stage.vx-spot::after, .apple-product-card.vx-spot::after { background:radial-gradient(220px circle at var(--sx) var(--sy), rgba(0,113,227,.10), transparent 60%) }

/* Blur-in: titles arrive from a soft blur and a 10px lift, once. */
body#colibri .vx-blur-in:not(.is-in) { opacity:0; filter:blur(6px); transform:translateY(10px) }
body#colibri .vx-blur-in { transition:opacity .6s ease-out, filter .6s ease-out, transform .7s cubic-bezier(.16,1,.3,1) }
@media (prefers-reduced-motion: reduce) { body#colibri .vx-blur-in, body#colibri .vx-blur-in:not(.is-in) { opacity:1; filter:none; transform:none; transition:none } .vx-spot::after { display:none !important } }