/* Shared action buttons. Navigation icons, scene targets and media cards keep
   their own geometry; all text actions use the approved outlined capsule. */
:root {
  /* Same stops and order as the continuous navbar contour. */
  --navi-button-spectrum: linear-gradient(105deg,#35e7ff 0%,#286bff 16%,#922eff 32%,#ff2bdc 48%,#ff5935 64%,#ffe52b 82%,#86ff24 100%);
  --navi-button-cool: linear-gradient(105deg,#35e7ff 0%,#286bff 33.333%,#922eff 66.667%,#ff2bdc 100%);
  --navi-button-warm: linear-gradient(105deg,#ff2bdc 0%,#ff5935 30.769%,#ffe52b 65.385%,#86ff24 100%);
}
:root body .navi-button.navi-button {
  --nb-colors: var(--navi-button-spectrum);
  --nb-accent: #86ff24;
  --nb-light: #35e7ff;
  --nb-glow: #922eff30;
  --nb-surface: #151515;
  --nb-size: clamp(15px,1.2vw,18px);
  --nb-padding: 15px 25px;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px,2vw,28px);
  max-width: 100%;
  min-height: 56px;
  height: auto;
  padding: var(--nb-padding);
  /* These four declarations replace legacy page-specific fills and ID rules. */
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: linear-gradient(var(--nb-surface),var(--nb-surface)) padding-box,var(--nb-colors) border-box !important;
  color: #f6f4f8 !important;
  box-shadow: none;
  font-family: Sora,Arial,sans-serif;
  font-size: var(--nb-size);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.025em;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: normal;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: translate .32s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .2s;
}
/* Color follows position within an action pair, not its label or destination.
   DOM order also stays top-to-bottom when these rows stack on small screens. */
:root body :is(.hero-actions,.services-navigation,.projects-footer,.studio-end,.contact-back,.finale-actions,.solution-footer,.game-hud .tools,.touch-actions,.explore-tools) > .navi-button:first-child:not(:last-child) {
  --nb-colors: var(--navi-button-cool);
  --nb-accent: #ff2bdc;
  --nb-light: #35e7ff;
  --nb-glow: #922eff30;
}
:root body :is(.hero-actions,.services-navigation,.projects-footer,.studio-end,.contact-back,.finale-actions,.solution-footer,.game-hud .tools,.touch-actions,.explore-tools) > .navi-button:last-child:not(:first-child) {
  --nb-colors: var(--navi-button-warm);
  --nb-accent: #86ff24;
  --nb-light: #ff5935;
  --nb-glow: #ff593533;
}
/* These states show only one of the usual two actions. */
:root body .studio[data-theme]:not([data-theme="2"]) .studio-end > .navi-button:first-child,
:root body:not(.is-enhanced) .solution-footer > .navi-button:first-child {
  --nb-colors: var(--navi-button-spectrum);
  --nb-accent: #86ff24;
  --nb-light: #35e7ff;
  --nb-glow: #922eff30;
}
/* Three cookie actions continue the same spectrum across three segments. */
:root body .navi-consent__actions > .navi-button:first-child {
  --nb-colors: linear-gradient(105deg,#35e7ff,#286bff 50%,#922eff);
  --nb-accent: #922eff;
  --nb-light: #35e7ff;
  --nb-glow: #922eff30;
}
:root body .navi-consent__actions > .navi-button:nth-child(2) {
  --nb-colors: linear-gradient(105deg,#922eff,#ff2bdc 50%,#ff5935);
  --nb-accent: #ff5935;
  --nb-light: #ff2bdc;
  --nb-glow: #ff2bdc30;
}
:root body .navi-consent__actions > .navi-button:last-child {
  --nb-colors: linear-gradient(105deg,#ff5935,#ffe52b 50%,#86ff24);
  --nb-accent: #86ff24;
  --nb-light: #ffe52b;
  --nb-glow: #ffe52b30;
}
:root body .navi-button.navi-button--compact {
  --nb-size: 12px;
  --nb-padding: 10px 16px;
  min-height: 44px;
  gap: 12px;
}
/* Package selectors and Home card actions use their parent artwork's neon. */
:root body .service-card .service-action.navi-button {
  --nb-colors: linear-gradient(105deg,color-mix(in srgb,var(--service-color) 80%,#fff),var(--service-color) 55%,color-mix(in srgb,var(--service-color) 92%,#fff));
  --nb-accent: var(--service-color);
  --nb-light: var(--service-color);
  --nb-glow: color-mix(in srgb,var(--service-color) 22%,transparent);
}
:root body .planet-direct.navi-button,
:root body .package-detail .solution-contact.navi-button {
  --nb-colors: linear-gradient(105deg,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 92%,#fff));
  --nb-accent: var(--accent);
  --nb-light: var(--accent);
  --nb-glow: color-mix(in srgb,var(--accent) 22%,transparent);
}
/* Each project carries the same neon from its preview into its dialog. */
:root body :is(.project-caption,.project-dialog) .navi-button {
  --nb-colors: linear-gradient(105deg,color-mix(in srgb,var(--project-color) 80%,#fff),var(--project-color) 55%,color-mix(in srgb,var(--project-color) 92%,#fff));
  --nb-accent: var(--project-color);
  --nb-light: var(--project-color);
  --nb-glow: color-mix(in srgb,var(--project-color) 22%,transparent);
}
:root body .navi-button > .navi-button__arrow {
  flex: none;
  margin: 0;
  color: var(--nb-accent);
  font-size: 1.5em;
  line-height: 1;
  text-decoration: none;
  --nb-flight-x: 14px;
  --nb-flight-y: -14px;
  transition: filter .3s;
}
:root body .navi-button > svg.navi-button__arrow {
  width: 1.4em;
  height: 1.4em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
:root body .navi-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 20px 16px at var(--nb-pointer-x,50%) var(--nb-pointer-y,50%),#ffffff1a,transparent 100%),radial-gradient(ellipse 150px 90px at var(--nb-pointer-x,50%) var(--nb-pointer-y,50%),color-mix(in srgb,var(--nb-light) 28%,transparent),transparent 78%),linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--nb-accent) 14%,transparent));
  opacity: 0;
  transition: opacity .35s;
}
:root body .navi-button::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,#ffffff03 46%,#ffffff26 50%,#ffffff03 54%,transparent 65%);
  background-size:300% 100%;
  background-position:100% 0;
  opacity:0;
}
:root body .navi-button > .navi-button__orbit {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  fill: none;
  stroke: none;
  pointer-events: none;
  border: 0;
  color: var(--nb-accent);
}
.navi-button:is(:disabled,[aria-disabled='true']) .navi-button__orbit {visibility:hidden}
@media (hover:hover) and (pointer:fine) {
  :root body .navi-button.navi-button:hover,
  :root body .service-card:hover .navi-button {
    --nb-surface: #1b1820;
    translate: 0 -2px;
    box-shadow: -4px 0 18px color-mix(in srgb,var(--nb-light) 14%,transparent),4px 3px 22px var(--nb-glow),inset 0 0 18px #ffffff03;
  }
  :root body .navi-button:hover::before,
  :root body .service-card:hover .navi-button::before { opacity: 1; }
  :root body .navi-button:hover::after,
  :root body .service-card:hover .navi-button::after {animation:navi-button-ignite .85s cubic-bezier(.2,.7,.2,1) both}
  :root body .navi-button:hover > .navi-button__arrow,
  :root body .service-card:hover .navi-button__arrow { animation:navi-button-launch .72s cubic-bezier(.2,.7,.2,1) both; filter: drop-shadow(0 0 5px var(--nb-accent)); }
}
@keyframes navi-button-ignite {
  0% {background-position:100% 0;opacity:0}
  20% {opacity:.9}
  100% {background-position:0 0;opacity:0}
}
@keyframes navi-button-launch {
  0% {transform:translate(0,0);opacity:1}
  35% {transform:translate(calc(var(--nb-flight-x)*.35),calc(var(--nb-flight-y)*.35)) scale(1.12);opacity:1}
  50% {transform:translate(var(--nb-flight-x),var(--nb-flight-y)) scale(.9);opacity:0}
  51% {transform:translate(calc(var(--nb-flight-x)*-.75),calc(var(--nb-flight-y)*-.75));opacity:0}
  100% {transform:translate(2px,-1px);opacity:1}
}
:root body .navi-button.navi-button:focus-visible,
:root body .service-card:focus-visible .navi-button { outline: 2px solid #fff; outline-offset: 5px; box-shadow: 0 0 24px var(--nb-glow); }
:root body .navi-button.navi-button:active { translate: 0 0; }
:root body .navi-button.navi-button:is(:disabled,[aria-disabled='true']) { opacity: .45; cursor: default; translate: none; box-shadow: none; }
:root body .navi-button[hidden] { display: none; }

/* Compact actions fit their existing panels instead of enlarging scene HUDs. */
:root body .service-action.navi-button { width: 100%; justify-content: space-between; text-align: left; white-space: normal; }
:root body .navi-button .navi-button__orbit { text-decoration: none; }
:root body .send.navi-button [data-send-label] { font: inherit; color: inherit; }
:root body .navi-consent__button.navi-button { --nb-size: 12px; --nb-padding: 10px 14px; flex: 1 1 0; min-width: 0; }
:root body .nf-return.navi-button { max-width: none; flex-shrink: 0; }
:root body .privacy-settings-link.navi-button { width: fit-content; }
:root body #solution :is(#back,#next-solution).navi-button { padding: 10px 16px; min-height: 44px; font-size: 12px; gap: 10px; }
:root body :is(#help,#reset,#next-stop,#interact).navi-button { padding: 10px 16px; min-height: 44px; font-size: 12px; }
:root body #all-projects.navi-button { padding: 15px 25px; min-height: 56px; font-size: 15px; }
:root body .internal-contact-direct.navi-button { position: fixed; }
/* No empty column reserved for the retired animation switch. */
:root body .explore-tools:has(>.navi-footer-open) {grid-template-columns:max-content;row-gap:8px;justify-content:end;justify-items:stretch}
:root body .explore-tools > :is(.navi-footer-open,#help).navi-button {grid-column:1;grid-row:auto;justify-self:stretch;width:100%;min-height:44px}
:root body .navi-button.navi-button--icon {
  position: absolute;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  font: 400 25px/1 Sora,Arial,sans-serif;
}
:root body .navi-consent__close.navi-button--icon {position:relative;flex:0 0 44px}

@media (max-width:700px) {
  :root body .navi-button.navi-button { --nb-size: 14px; --nb-padding: 13px 20px; min-height: 50px; gap: 16px; }
  :root body .navi-button.navi-button--compact { --nb-size: 12px; --nb-padding: 10px 14px; min-height: 44px; gap: 10px; }
  :root body .navi-button.navi-button--icon { min-height: 44px; }
  :root body .navi-button.navi-button--warm { --nb-surface: #151515; }
  :root body .planet-direct.navi-button { margin-top: 9px; }
  :root body .hero-actions { gap: 14px; }
  :root body .hero-actions .navi-button { width: min(340px,100%); }
  :root body .nf-return.navi-button { max-width: 145px; white-space: normal; }
  :root body .contact-back { flex-wrap: wrap; gap: 10px; }
  :root body .projects-footer { flex-wrap: wrap; gap: 10px; }
  :root body .projects-footer > span { display: none; }
  :root body .navi-consent__button.navi-button { --nb-size: 12px; --nb-padding: 10px 12px; }
  :root body #solution :is(#back,#next-solution).navi-button { padding: 8px 12px; font-size: 11px; gap: 7px; }
  :root body .services-navigation { flex-wrap: wrap; gap: 10px; }
}
@media (max-width:480px) {
  /* The cookie banner has a pair on top and one full-width action below. */
  :root body .navi-consent__banner .navi-consent__actions > .navi-button:first-child {
    --nb-colors: var(--navi-button-cool);
    --nb-accent: #ff2bdc;
    --nb-light: #35e7ff;
  }
  :root body .navi-consent__banner .navi-consent__actions > .navi-button:nth-child(2) {
    --nb-colors: var(--navi-button-warm);
    --nb-accent: #86ff24;
    --nb-light: #ff5935;
    --nb-glow: #ff593533;
  }
  :root body .navi-consent__banner .navi-consent__actions > .navi-button:last-child {
    --nb-colors: var(--navi-button-spectrum);
    --nb-accent: #86ff24;
    --nb-light: #35e7ff;
    --nb-glow: #922eff30;
  }
}
@media (max-width:360px) {
  :root body .service-action.navi-button { --nb-size: 11px; --nb-padding: 9px 12px; }
  :root body .planet-direct.navi-button { --nb-size: 12px; --nb-padding: 10px 12px; }
}
@media (max-height:520px) and (orientation:landscape) {
  :root body .navi-button.navi-button { --nb-size: 12px; --nb-padding: 10px 18px; min-height: 44px; }
  :root body .navi-button.navi-button--compact { --nb-size: 11px; --nb-padding: 9px 12px; }
}
@media (prefers-reduced-motion:reduce) {
  :root body .navi-button.navi-button,
  :root body .navi-button::before,
  :root body .navi-button::after,
  :root body .navi-button > .navi-button__arrow { transition: none; translate: none; }
  :root body .navi-button::after,
  :root body .navi-button .navi-button__arrow {animation:none!important}
  .navi-button__orbit { display: none; }
}