/* InStated accents from instated.nl, 31 October 2026.
   Preserve the template's dark surfaces, typography and layout. */
:root {
  --instated-cyan: #00d2ff;
  --instated-blue: #3a7bd5;
  --instated-gradient: linear-gradient(90deg, var(--instated-cyan), var(--instated-blue));
  --_color---primitive--brand--50: #eefbff;
  --_color---primitive--brand--100: #d8f5ff;
  --_color---primitive--brand--200: #adebff;
  --_color---primitive--brand--300: #78dfff;
  --_color---primitive--brand--400: #3dd8ff;
  --_color---primitive--brand--500: var(--instated-cyan);
  --_color---primitive--brand--600: var(--instated-blue);
  --_color---primitive--brand--700: #306bbd;
  --_color---primitive--brand--800: #245194;
  --_color---primitive--brand--900: #193d70;
}

.primary-button:not(.w-variant-ac55e2a0-18d0-67fe-9c32-3f104cee4ea1) {
  background: var(--instated-gradient);
  color: #101010;
}

.menu-button { background: var(--instated-gradient); }
.brand { flex-shrink: 0; }
.brand-logo { display: block; width: 12.1638rem; height: auto; }

/* Original Instated symbol; display SVG only trims the empty artboard margins. */
.about-brand-symbol {
  display: inline-block;
  width: 1.15em;
  height: 1.02em;
  margin-right: .35em;
  vertical-align: -.08em;
  background: url("/instated-v4/brand/instated-symbol-display.svg") center / contain no-repeat;
}

/* Quiet, section-local light inspired by rixt.it. Backgrounds paint behind
   content, follow the page naturally and need no moving/composited overlay. */
.section[data-glow] {
  --glow-x: 100%;
  --glow-y: 55%;
  --glow-width: 80%;
  --glow-height: 85%;
  --glow-blue: color-mix(in srgb, var(--instated-blue) 20%, transparent);
  --glow-cyan: color-mix(in srgb, var(--instated-cyan) 6%, transparent);
  background-image:
    radial-gradient(ellipse var(--glow-width) var(--glow-height) at var(--glow-x) var(--glow-y), var(--glow-cyan), transparent 65%),
    radial-gradient(ellipse var(--glow-width) var(--glow-height) at var(--glow-x) var(--glow-y), var(--glow-blue), transparent 85%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.section[data-glow="left"] { --glow-x: 0%; }
#why-us[data-glow], #cases[data-glow] { --glow-y: 25%; }
.footer-area [data-glow] { --glow-y: 80%; }
/* Keep the existing muted copy readable even at the brightest point. */
.section:where(.dark-gray-800)[data-glow] {
  --glow-blue: color-mix(in srgb, var(--instated-blue) 16%, transparent);
  --glow-cyan: color-mix(in srgb, var(--instated-cyan) 4%, transparent);
}

/* Fade logos into the actual backdrop rather than a flat dark rectangle. */
[data-glow] .logo-marque-main {
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
[data-glow] .logo-marque-main:focus-visible { mask-image: none; }
[data-glow] .marque-overlay { display: none; }

@media (max-width: 767px) {
  .section[data-glow] {
    --glow-width: 100%;
    --glow-height: 26rem;
    --glow-blue: color-mix(in srgb, var(--instated-blue) 14%, transparent);
    --glow-cyan: color-mix(in srgb, var(--instated-cyan) 4%, transparent);
  }
}

@media (max-width: 479px) {
  .brand-logo { width: 10rem; }
}