/* Website control system. React Bits source references and adaptation scope live
 * in ui-controls.js. Load after each page's inline brand CSS. */
body.company {
  --control-radius: 6px;
  --header-surface: #171b22;
  --control-ink: #e6e8eb;
  --control-muted: #bcc3cd;
  --control-border: #ccd3de52;
  --action-bg: #e6e8eb;
  --action-fg: #171b22;
  --action-hover: #d8dadd;
  --nav-track: #ffffff08;
  --nav-border: #e6e8eb24;
  --nav-pill: #e6e8eb16;
  --nav-ink: #c4cbd5;
  --nav-active-ink: #f4f5f7;
  --specular-light: #ffffff;
  --control-focus: #c6d8ea;
}
body.goup {
  --control-radius: 999px;
  --header-surface: #ffffff;
  --control-ink: #252832;
  --control-muted: #606b79;
  --control-border: #cbd1d9;
  --action-bg: #b64f63;
  --action-fg: #ffffff;
  --action-hover: #ab4a5d;
  --nav-track: #f2f4f7;
  --nav-border: #e4e8ee;
  --nav-pill: #ffffff;
  --nav-ink: #626b77;
  --nav-active-ink: #252832;
  --specular-light: #f9dce3;
  --control-focus: #3e73b3;
}
body.cloudme {
  --control-radius: 12px;
  --header-surface: #faf9f6;
  --control-ink: #314d65;
  --control-muted: #5c768a;
  --control-border: #aec8d8;
  --action-bg: #314d65;
  --action-fg: #ffffff;
  --action-hover: #2e485f;
  --nav-track: #ffffffeb;
  --nav-border: #bfd7e5;
  --nav-pill: #e8f2f8;
  --nav-ink: #5b778d;
  --nav-active-ink: #314d65;
  --specular-light: #d2edff;
  --control-focus: #4d7e9f;
}

body button { min-height: 44px; }
body[class] .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 10px;
  height: 48px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--control-border, currentColor);
  border-radius: var(--control-radius, 12px);
  background: transparent;
  color: var(--control-ink, currentColor);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  isolation: isolate;
  transform: translate3d(var(--control-mx, 0px), calc(var(--control-my, 0px) + var(--control-lift, 0px)), 0) scale(var(--control-scale, 1));
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
body.company .btn.solid, body.company .btn.nav-contact,
body.goup .btn.solid, body.goup .btn.nav-contact,
body.cloudme .btn.solid, body.cloudme .btn.nav-contact {
  background: var(--action-bg);
  color: var(--action-fg);
  border-color: var(--action-bg);
  box-shadow: none;
}
body.company .btn::after, body.goup .btn::after, body.cloudme .btn::after,
body.company .text-link::after, body.goup .text-link::after, body.cloudme .text-link::after {
  content: none;
  display: none;
}
body a .arrow { display: none; }
body[class] .btn:active { --control-scale: .98; --control-lift: 0px; }
body[class] .btn:focus-visible, body .text-link:focus-visible,
body .site-header a:focus-visible, body .site-header button:focus-visible,
body[class] .scene-tabs button:focus-visible, body[class] .role-tabs button:focus-visible,
body[class] .wheel-node:focus-visible {
  outline: 2px solid var(--control-focus, currentColor);
  outline-offset: 3px;
}
body[class] .btn:disabled, body[class] .btn[aria-disabled="true"] { opacity: .46; cursor: default; }
body .text-link {
  min-height: 44px;
  gap: 0;
  padding-block: 8px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
  transition: text-decoration-color 160ms ease, color 160ms ease;
}
body .text-link:hover { text-decoration-color: currentColor; }

/* The thin, masked radial light expresses SpecularButton's pointer-lit edge.
 * It is a CSS transliteration of that idea, not the upstream WebGL shader. */
body[class] .btn.ui-primary::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(100px circle at var(--shine-x, 50%) var(--shine-y, 0%), var(--specular-light, #fff), transparent 72%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--shine-opacity, .08);
  transition: opacity 160ms ease;
}

body .site-header { height: 80px; }
body[class] .site-header.is-scrolled {
  background: color-mix(in srgb, var(--header-surface) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.cloudme .site-header, body.cloudme .site-header.is-scrolled {
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.cloudme .site-header .brand-lockup {
  padding: 8px 18px;
  border: 1px solid #a7c7db4d;
  border-radius: 999px;
  background: #ffffffd9;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body .site-header .nav-inner { min-height: 80px; gap: 24px; }
body .site-header .nav-actions { display: flex; align-items: center; gap: 16px; }
body .site-header nav[data-pill-nav] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  height: 48px;
  padding: 4px;
  border: 1px solid var(--nav-border, #dce4eb);
  border-radius: 999px;
  background: var(--nav-track, #f2f4f7);
  isolation: isolate;
}
body .site-header nav[data-pill-nav] > a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--nav-ink, #606b79);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 1;
  transition: color 160ms ease, background-color 160ms ease;
}
body .site-header nav[data-pill-nav] > a[aria-current="location"],
body .site-header nav[data-pill-nav] > a[data-pill-highlight] { color: var(--nav-active-ink, currentColor); }
body .site-header nav[data-pill-nav] .nav-indicator {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--nav-pill-width, 0px);
  border: 1px solid color-mix(in srgb, var(--nav-border) 65%, transparent);
  border-radius: 999px;
  background: var(--nav-pill, #ffffff);
  opacity: var(--nav-pill-opacity, 0);
  transform: translate3d(var(--nav-pill-x, 0px), 0, 0);
  pointer-events: none;
}
body .site-header .btn.nav-contact { padding-inline: 20px; font-size: 15px; }
body .site-header .menu-toggle { min-width: 44px; min-height: 44px; }
body .menu-lines { display: inline-flex; flex-direction: column; gap: 5px; width: 18px; }
body .menu-lines > :is(i, span) { display: block; height: 1.5px; width: 18px; background: currentColor; transition: transform 180ms ease; }
body .menu-open .menu-lines > :first-child { transform: translateY(3.25px) rotate(45deg); }
body .menu-open .menu-lines > :last-child { transform: translateY(-3.25px) rotate(-45deg); }

body[class] .scene-tabs, body[class] .role-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
body[class] .scene-tabs button, body[class] .role-tabs button, body[class] .wheel-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--control-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  box-shadow: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
body[class] .scene-tabs button[aria-selected="true"], body[class] .role-tabs button[aria-selected="true"],
body[class] .wheel-node[aria-pressed="true"], body[class] .wheel-node.active {
  border-color: var(--action-bg);
  background: var(--action-bg);
  color: var(--action-fg);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  body[class] .btn:not(:disabled):not([aria-disabled="true"]):hover { --control-lift: -1px; border-color: var(--control-ink); }
  body.company .btn.solid:hover, body.company .btn.nav-contact:hover,
  body.goup .btn.solid:hover, body.goup .btn.nav-contact:hover,
  body.cloudme .btn.solid:hover, body.cloudme .btn.nav-contact:hover {
    background: var(--action-hover);
    border-color: var(--action-hover);
  }
  body[class] .scene-tabs button:not([aria-selected="true"]):hover,
  body[class] .role-tabs button:not([aria-selected="true"]):hover,
  body[class] .wheel-node:not([aria-pressed="true"]):hover { background: var(--nav-pill); color: var(--control-ink); }
}
@media (max-width: 1100px) and (min-width: 901px) {
  body .site-header .nav-actions { gap: 10px; }
  body .site-header nav[data-pill-nav] > a { padding-inline: 12px; font-size: 14px; }
  body .site-header .btn.nav-contact { padding-inline: 16px; font-size: 14px; }
}
@media (max-width: 900px) {
  body .site-header { height: 64px; }
  body .site-header .nav-inner { min-height: 64px; gap: 12px; }
  body .site-header .nav-actions { gap: 10px; }
  body .site-header nav[data-pill-nav] { display: none; }
  body .site-header .btn.nav-contact { display: inline-flex; height: 44px; min-height: 44px; padding-inline: 12px; font-size: 12px; }
  body .site-header .brand-lockup img, body .site-header .brand-lockup img.company-logo { width: 100px; }
  body.cloudme .site-header .brand-lockup { padding: 8px 12px; }
  body .site-header .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 4px 0 12px; border: 0; background: transparent; color: var(--control-ink); font-size: 14px; }
  body .site-header.menu-open nav[data-pill-nav] {
    position: absolute;
    top: 72px;
    right: 6%;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(340px, 88vw);
    height: auto;
    padding: 8px;
    border-radius: 20px;
    background: var(--nav-popup, var(--nav-track));
    box-shadow: 0 14px 36px #13253716;
  }
  body .site-header nav[data-pill-nav] .nav-indicator { display: none; }
  body .site-header.menu-open nav[data-pill-nav] > a { justify-content: flex-start; height: 56px; min-height: 56px; padding: 0 20px; border-radius: 12px; font-size: 20px; }
  body .site-header.menu-open nav[data-pill-nav] > a[aria-current="location"] { background: var(--nav-pill); }
  body[class] .btn { padding-inline: 22px; font-size: 16px; }
  body[class] .scene-tabs button, body[class] .role-tabs button { padding-inline: 18px; }
  body[class] .wheel-node { padding-inline: 10px; font-size: 12px; }
}
@media (max-width: 400px) {
  body .site-header .nav-inner { gap: 8px; }
  body .site-header .nav-actions { gap: 8px; }
  body .site-header .menu-label { display: none; }
  body .site-header .menu-toggle { width: 44px; padding-inline: 0; }
  body .site-header .brand-lockup img, body .site-header .brand-lockup img.company-logo { width: 92px; }
  body.cloudme .site-header .brand-lockup { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  body[class] .btn { --control-mx: 0px !important; --control-my: 0px !important; --control-lift: 0px !important; }
  body[class] .btn.ui-primary::before { opacity: .08; }
}
@media (prefers-reduced-motion: reduce) {
  body[class] .btn, body .text-link, body .site-header nav[data-pill-nav] > a,
  body .menu-lines > :is(i, span), body[class] .scene-tabs button, body[class] .role-tabs button, body[class] .wheel-node { transition: none; }
}