/* Each family needs BOTH subsets: the latin-ext file carries only the
 * extended glyphs (Hungarian o-double-acute / u-double-acute among them),
 * while basic latin and the acute/umlaut vowels live in the latin file.
 * Declaring only one of them silently drops the other half to a system
 * fallback, so the unicode-range split below is load-bearing. */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Funnel Display";
  src: url("fonts/funnel-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Funnel Display";
  src: url("fonts/funnel-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Rubik";
  src: url("fonts/rubik-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Rubik";
  src: url("fonts/rubik-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-italic-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --ink: #151216;
  --ink-soft: #262129;
  --paper: #f7f4f5;
  --white: #ffffff;
  --lavender: #f2e8fa;
  --lavender-strong: #e7d4f4;
  --muted: #706c70;
  --purple: #a941dc;
  --purple-bright: #d36cff;
  --purple-deep: #5d087f;
  --line-dark: rgba(255, 255, 255, 0.12);
  --line-light: rgba(21, 18, 22, 0.14);
  --shell: min(1440px, calc(100vw - 64px));
  --radius-sm: 16px;
  --radius-md: 28px;
  --radius-lg: 42px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  --anchor-gap: 26px;
  scroll-behavior: smooth;
  /* Keeps every anchor target clear of the fixed header. main.js keeps
     --header-h in step with the header's tallest state; the fallback matches
     the un-scrolled height so the offset is right even before the script runs. */
  scroll-padding-top: calc(var(--header-h, 78px) + var(--anchor-gap));
  background: var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--white);
  transform: translateY(-140%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  padding: 18px 0;
  transition: padding 250ms ease, background 250ms ease, backdrop-filter 250ms ease;
}

.site-header.is-scrolled {
  padding: 10px 0;
  background: rgba(12, 9, 15, 0.76);
  box-shadow: 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}

.nav-shell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 54px;
}

.brand {
  --brand-size: 23px;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 9px;
  color: rgb(242, 238, 243);
}

/* Supplied brand wordmark, 544.96 x 88.2 (ratio 6.18:1). Sized by height so it
   keeps its proportions at every breakpoint. */
.brand-logo {
  width: auto;
  height: var(--brand-size);
}

.brand:focus-visible { outline-offset: 6px; }

/* The colour mark and the wordmark scale together off --brand-size, so the
   lockup keeps its proportions wherever the header shrinks. */
.brand-mark {
  position: relative;
  display: inline-block;
  width: calc(var(--brand-size) * 1.16);
  height: var(--brand-size);
  filter: drop-shadow(0 0 8px rgba(211,108,255,.36));
}

.brand-mark i {
  position: absolute;
  display: block;
  width: calc(var(--brand-size) * .68);
  height: calc(var(--brand-size) * .28);
  border-radius: 99px;
  background: linear-gradient(90deg, #fc92ff, #9f35e0 64%, #6331e3);
  transform: rotate(-43deg);
}

.brand-mark i:first-child {
  top: 12%;
  left: 8%;
}

.brand-mark i:last-child {
  right: 4%;
  bottom: 12%;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.1vw, 38px);
  color: #bcb7be;
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.primary-nav > a,
.primary-nav > .nav-group > .nav-group-toggle {
  font-family: "Funnel Display", sans-serif;
}

.primary-nav a,
.site-footer a {
  transition: color 180ms ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--white);
}

/* ------------------------------------------------------- navigation panel -- */

.nav-group {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  transition: color 180ms ease;
}

.nav-group-toggle:hover,
.nav-group-toggle:focus-visible,
.nav-group-toggle[aria-expanded="true"] { color: var(--white); }

.nav-group-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 200ms ease;
}

.nav-group-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 18px);
  left: 50%;
  width: 340px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(16, 11, 19, .97);
  box-shadow: 0 28px 64px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  visibility: hidden;
}

.nav-group-toggle[aria-expanded="true"] + .nav-panel {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.nav-panel ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-panel a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  color: #c3bcc8;
  font-size: 15px;
  line-height: 1.35;
  transition: color 160ms ease, background 160ms ease;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  color: var(--white);
  background: rgba(169, 65, 220, .18);
}

.nav-panel-index {
  color: #8a8290;
  font-family: "Figtree", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

.nav-panel-all {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.nav-panel-all a { color: #d7a2f4; font-weight: 500; }

:focus-visible {
  outline: 2px solid #d36cff;
  outline-offset: 3px;
  border-radius: 4px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 14px;
  min-height: 48px;
  padding: 8px 11px 8px 22px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(180deg, rgba(135, 32, 178, .65), rgba(76, 9, 102, .8));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 10px 35px rgba(110, 17, 146, .26);
  font-family: "Funnel Display", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.nav-cta svg {
  width: 31px;
  height: 31px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
  transition: transform 200ms ease;
}

.nav-cta:hover svg {
  transform: rotate(45deg);
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  isolation: isolate;
  /* The hero always reaches the bottom edge of the window. svh - not dvh - so a
     collapsing mobile toolbar does not resize the orbit stage mid-scroll. The
     padding and the inner min-heights shrink with the viewport, otherwise a
     short window would push the hero past the fold instead of fitting it. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(104px, 13vh, 160px) 0 clamp(22px, 3.5vh, 34px);
  overflow: hidden;
  color: #dbd8dc;
  background:
    radial-gradient(circle at 65% 40%, rgba(94, 10, 120, .32), transparent 34%),
    linear-gradient(135deg, #0d0910 0%, #120a15 45%, #09080b 100%);
}

.hero-grid-pattern,
.cta-grid {
  position: absolute;
  z-index: -1;
  inset: 17% 8% 5%;
  opacity: .23;
  background-image:
    linear-gradient(rgba(190, 108, 224, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 108, 224, .16) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 72%);
}

.hero-light {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(16px);
}

.hero-light-one {
  top: -340px;
  right: 4%;
  width: 620px;
  height: 620px;
  opacity: .72;
  background: radial-gradient(circle, #fff 0 5%, #d999ef 12%, rgba(160,48,203,.55) 30%, transparent 65%);
}

.hero-light-two {
  right: 21%;
  bottom: -330px;
  width: 600px;
  height: 600px;
  opacity: .38;
  background: radial-gradient(circle, rgba(184,59,228,.8), transparent 66%);
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(460px, 1.02fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
  /* Absorbs whatever height the viewport gives beyond the content, so the foot
     row stays on the bottom edge and the copy and orbit stay centred. */
  flex: 1;
  min-height: min(598px, 52svh);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* A hairline capsule with a faint violet wash and a blur behind it. A status
   dot was added here earlier and has been removed, since a pulsing indicator
   reads as a live signal the page does not actually have. */
.eyebrow {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 32px;
  backdrop-filter: blur(7px);
  background-image: linear-gradient(270deg, rgba(145, 0, 255, .08) 5%, rgba(213, 0, 255, .09) 94%);
  color: #d6ced9;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
}

.hero h1 {
  max-width: 780px;
  margin: 0;
  color: #f2eef3;
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(58px, 5.6vw, 90px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .99;
}

.hero h1 em,
.services h2 em,
.cta h2 em {
  display: block;
  color: #eee3f2;
  font-family: "Playfair Display", serif;
  font-weight: 400;
  letter-spacing: -.035em;
}

/* The counterpart to the decoding word. The floor is the old animation's
   brightest frame, so it never drops below what used to be its peak; from there
   each letter breathes on its own clock (see main.js) and the word flares
   wherever several letters happen to peak together. */
.glow-word {
  /* An inline box hugs its glyphs horizontally but reaches the full line-height
     vertically, so a glow painted inside it fades away above and below while
     being cut off left and right. Inline-block plus side padding gives the glow
     the same room in both directions, and the matching negative margin keeps the
     word exactly where it was. */
  display: inline-block;
  padding-inline: 1.1em;
  margin-inline: -1.1em;
  color: #fdf7ff;
  text-shadow:
    0 0 15px rgba(242, 209, 255, .75),
    0 0 43px rgba(202, 100, 255, .75),
    0 0 107px rgba(168, 63, 221, .59),
    0 0 190px rgba(160, 56, 214, .26);
}


.glow-letter {
  --i: 0;
  --n: 8;
  --glow-dur: 2.6s;

  animation: letter-glow var(--glow-dur) linear infinite;
  /* Offsetting by (n - 1 - i) runs the spark left to right; using i alone would
     run it backwards. The 0.78 factor packs the whole sweep into the first three
     quarters of the cycle, leaving the tail free for the word-wide flare. */
  animation-delay: calc(var(--glow-dur) * (var(--n) - 1 - var(--i)) / var(--n) * -1);
}

/* Ambient bed plus a travelling spark.
   Two earlier attempts were measurable but invisible: a 200px purple halo on
   every letter merged into one wash, and a change of a few px inside that wash
   reads as nothing. The bed is therefore smaller and the flare much larger, and
   the flare is SHORT - roughly a sixth of the cycle - so it crosses the word as
   a spark rather than a slow breath. The rest state still carries the glow the
   word had before, so it never looks dimmer than it used to. */
@keyframes letter-glow {
  0%, 34% {
    color: #f0e4fa;
    text-shadow:
      0 0 15px rgba(242, 209, 255, .75),
      0 0 43px rgba(202, 100, 255, .75),
      0 0 107px rgba(168, 63, 221, .59),
      0 0 190px rgba(160, 56, 214, .26);
  }
  50% {
    /* White on purpose: the bed is violet, so a violet spark would disappear
       into it and the run would stop reading as movement. */
    color: #ffffff;
    text-shadow:
      0 0 4px rgba(255, 255, 255, 1),
      0 0 22px rgba(255, 255, 255, .95),
      0 0 62px rgba(246, 220, 255, .95),
      0 0 150px rgba(200, 122, 255, .78),
      0 0 230px rgba(166, 62, 220, .5);
  }
  66%, 100% {
    color: #f0e4fa;
    text-shadow:
      0 0 15px rgba(242, 209, 255, .75),
      0 0 43px rgba(202, 100, 255, .75),
      0 0 107px rgba(168, 63, 221, .59),
      0 0 190px rgba(160, 56, 214, .26);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow-letter { animation: none; }
}

/* Hero headline word that continuously re-resolves its typeface and tint.
   The ghost copy holds the slot in normal flow; the animated copy is absolutely
   positioned on top of it, so no face swap can move the surrounding text. */
.glyph-shift {
  display: inline;
  white-space: pre;
}

.glyph-shift-letter {
  position: relative;
  display: inline-block;
}

.glyph-ghost {
  transition: opacity 140ms ease;
}

.glyph-shift-letter.is-shifting .glyph-ghost {
  opacity: 0;
}

.glyph-live {
  position: absolute;
  /* The swapped face brings its own metrics, so a bare top:0 lands the glyph at
     a different height than the ghost it replaces - visible on a narrow screen
     as a letter that jumps and doubles. Inheriting the line box makes both
     copies the same height, which puts them on the same baseline. */
  top: 0;
  line-height: inherit;
  font-size: inherit;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  color: #eee3f2;
  text-shadow: 0 0 22px rgba(211, 108, 255, .55);
  white-space: pre;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .glyph-live { display: none; }
  .glyph-shift-letter.is-shifting .glyph-ghost { opacity: 1; }
}


.hero-lead {
  max-width: 655px;
  margin: 32px 0 0;
  color: #aaa3ad;
  font-family: "Figtree", sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 38px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  border-radius: 999px;
  font-family: "Figtree", sans-serif;
  font-size: 16px;
  font-weight: 600;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.hero-actions .button {
  font-family: "Funnel Display", sans-serif;
}

.button[disabled] {
  border: 0;
  cursor: default;
}

.button-primary {
  min-width: 245px;
  padding: 8px 9px 8px 25px;
  color: var(--white);
  background:
    radial-gradient(circle at 45% -30%, rgba(255,255,255,.45), transparent 38%),
    linear-gradient(180deg, #992cca, #621087);
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 12px 34px rgba(121, 28, 157, .4);
}

.button-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin-left: auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  transition: transform 220ms ease, background 220ms ease;
}

.button-primary:hover,
.button-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 17px 44px rgba(135, 37, 174, .5);
}

.button-primary:hover .button-icon,
.button-primary:focus-visible .button-icon {
  background: rgba(255,255,255,.19);
  transform: rotate(45deg);
}

.button-quiet {
  padding: 8px 2px;
  color: #d1cbd4;
  font-weight: 500;
}

.button-quiet:hover,
.button-quiet:focus-visible {
  color: var(--white);
}

.play-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #cc72f0;
  font-size: 9px;
}

/* ----------------------------------------------------------- pill button -- */

/* A capsule carrying the label plus a SEPARATE round arrow orb beside it, each
   painted with its own texture. The label and the arrow both exist twice,
   stacked; on hover the pair rolls upward so a fresh copy arrives from below.
   Two transforms and a shared transition, no animation library. */

.pill-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-family: "Figtree", sans-serif;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
}

.pill-body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  padding: 16px 32px;
  overflow: hidden;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 46%),
    url("media/button-capsule.webp") center / cover no-repeat,
    linear-gradient(180deg, #992cca, #621087);
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 12px 34px rgba(121,28,157,.4);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.pill-orb {
  position: relative;
  display: flex;
  flex: 0 0 54px;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 50%;
  background:
    url("media/button-arrow-bg.webp") center / cover no-repeat,
    linear-gradient(180deg, #a538d8, #621087);
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 10px 26px rgba(121,28,157,.34);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* The rolling stacks. `is-lift` waits one line-height below and takes over on
   hover, while `is-base` leaves through the top. */
.pill-roll,
.pill-orb-roll {
  position: relative;
  display: grid;
  overflow: hidden;
}

.pill-text,
.pill-arrow {
  grid-area: 1 / 1;
  transition: transform 380ms cubic-bezier(.3,.85,.35,1);
}

.pill-text.is-lift,
.pill-arrow.is-lift {
  transform: translateY(180%);
}

.pill-action:hover .pill-text.is-base,
.pill-action:focus-visible .pill-text.is-base { transform: translateY(-180%); }

.pill-action:hover .pill-text.is-lift,
.pill-action:focus-visible .pill-text.is-lift { transform: translateY(0); }

.pill-orb-roll {
  width: 22px;
  height: 22px;
}

.pill-arrow {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.pill-arrow.is-lift { transform: translate(-180%, 180%); }

.pill-action:hover .pill-arrow.is-base,
.pill-action:focus-visible .pill-arrow.is-base { transform: translate(180%, -180%); }

.pill-action:hover .pill-arrow.is-lift,
.pill-action:focus-visible .pill-arrow.is-lift { transform: translate(0, 0); }

.pill-action:hover .pill-body,
.pill-action:focus-visible .pill-body {
  box-shadow: inset 0 1px rgba(255,255,255,.34), 0 17px 44px rgba(135,37,174,.5);
}

.pill-action:hover .pill-orb,
.pill-action:focus-visible .pill-orb { transform: scale(1.06); }

.pill-action.is-compact {
  font-size: 14px;
  gap: 5px;
}

.pill-action.is-compact .pill-body {
  min-width: 0;
  padding: 11px 20px;
}

.pill-action.is-compact .pill-orb {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}

.pill-action.is-compact .pill-orb-roll,
.pill-action.is-compact .pill-arrow {
  width: 17px;
  height: 17px;
}

.pill-action[aria-disabled="true"] { cursor: default; }

.pill-action[type="button"] {
  border: 0;
  background: none;
  padding: 0;
}

/* ------------------------------------------------------- quiet secondary -- */

.quiet-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  color: #cdc6d2;
  font-family: "Figtree", sans-serif;
  font-size: 17px;
  font-weight: 500;
  transition: color 200ms ease;
}

.quiet-action:hover,
.quiet-action:focus-visible { color: #fff; }

.quiet-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.quiet-action:hover .pill-text.is-base,
.quiet-action:focus-visible .pill-text.is-base { transform: translateY(-180%); }

.quiet-action:hover .pill-text.is-lift,
.quiet-action:focus-visible .pill-text.is-lift { transform: translateY(0); }

/* ------------------------------------------------------- orbital system --- */

.orbit-mobile-system,
.orbit-mobile-tags { display: none; }

/* The planet and its orbits share ONE 3D stage, so the browser sorts them in
   space rather than in source order: the near half of every ring is drawn in
   front of the object and the far half behind it, and a marker is hidden by the
   object exactly while it passes behind. The hero artwork has an alpha channel,
   so an orbit stays visible through the transparent area around the shape and
   is occluded only by the shape itself - which is what makes it read as a body
   in space rather than a sticker.
 *
 * Two things would silently break this and must not come back: a `filter` or an
 * `opacity` below 1 on the planet or a lane flattens the 3D context, and so
 * does dropping `transform-style: preserve-3d` anywhere down the chain.
 *
 * The marker is carried by a runner that spins in the lane's own tilted plane.
 * The label then has to undo, in order, the runner's spin and the lane's two
 * tilts, or it would cartwheel with the orbit. The spin is animated, so its
 * counter-rotation is animated too: `orbit-run` and `orbit-face` share a
 * duration and a delay and therefore stay locked together. */

/* Occlusion is layered explicitly, not left to the browser's depth sorting.
   Measured on the page: with both the planet and the lane wrapper animated,
   Chrome composites them as flat layers in paint order, and ring pixels survived
   straight across the body. So each ring is drawn twice with the same transform
   and clipped to one half of its own local circle - local +Y is the near side
   (measured: phase 0.5 sits at z = +521) - and the halves are stacked either
   side of the planet. The clip falls exactly where the ring crosses z = 0. */

.orbit-rings {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  pointer-events: none;
  transform-style: preserve-3d;
}

.orbit-rings.is-far { z-index: 1; }
.orbit-rings.is-near { z-index: 3; }

/* Top half of the local circle is the arc that runs behind the body. */
.orbit-rings.is-far .orbit-ring { clip-path: inset(0 0 50% 0); }
.orbit-rings.is-near .orbit-ring { clip-path: inset(50% 0 0 0); }

.orbit-planet {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(96%, calc(var(--planet-size) * var(--orbit-scale)));
  height: auto;
  transform-style: preserve-3d;
  animation: planet-float 9s ease-in-out infinite;
}

@keyframes planet-float {
  0%, 100% { transform: translate3d(-50%, -50%, 0) rotate(-1.2deg); }
  50%      { transform: translate3d(-50%, calc(-50% - 12px), 0) rotate(1.2deg); }
}

/* The lanes sit in their own wrapper so the whole system can precess without
   dragging the planet with it. A fixed set of planes reads as a diagram; a
   slowly turning one reads as a system seen from a moving viewpoint. */
/* The marker layer mirrors the stage exactly - same perspective, same lane
   transforms - so a marker lands on the same screen point as its ring. It is
   painted above the planet, so instead of being occluded, a marker passing
   behind the body dims. Both layers run the same precession from page load and
   therefore stay together. */
.orbit-markers {
  position: absolute;
  z-index: 4;
  inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  pointer-events: none;
  transform-style: preserve-3d;
}

/* Measured, not assumed: a marker sits at z = -521 at phase 0 (BEHIND the body),
   crosses z = 0 at 25%, reaches z = +521 at 50% (nearest the viewer) and crosses
   back at 75%. The fade is therefore FINISHED by the moment it passes behind:
   invisible across the whole far half (75% - 25%), fading in over 25-40% and
   back out over 60-75%. */
@keyframes orbit-dim {
  0%   { opacity: 0; }
  25%  { opacity: 0; }
  40%  { opacity: 1; }
  60%  { opacity: 1; }
  75%  { opacity: 0; }
  100% { opacity: 0; }
}

.orbit-lanes {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: orbit-precess 54s ease-in-out infinite alternate;
}

@keyframes orbit-precess {
  from { transform: rotateY(-13deg) rotateX(5deg); }
  to   { transform: rotateY(13deg) rotateX(-5deg); }
}

/* tilt turns the ellipse in the screen plane, incline flattens it:
   tilt ~0 + high incline  -> a wide, flat, horizontal sweep
   tilt ~90 + high incline -> a narrow, tall one, so the label rises and falls
   low incline             -> near-circular, the label goes right round.
   Half the lanes run the other way (.is-reverse). */
.orbit-lane {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateZ(var(--tilt)) rotateX(var(--incline));
}

.orbit-lane.is-reverse .orbit-runner,
.orbit-lane.is-reverse .orbit-body {
  animation-direction: reverse;
}

/* Rings carry no marker any more, so the ring lane must not reserve space. */


/* The stroke can afford to be bright: the half of the ring that passes behind
   the object is hidden by the object itself, so raising the opacity only lifts
   the half that is genuinely in front. A soft glow separates it from the dark
   ground without thickening the line. */
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--radius) * var(--orbit-scale) * 2);
  height: calc(var(--radius) * var(--orbit-scale) * 2);
  margin: calc(var(--radius) * var(--orbit-scale) * -1) 0 0 calc(var(--radius) * var(--orbit-scale) * -1);
  border: 1px solid rgba(236, 200, 255, .62);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(196, 116, 255, .28), inset 0 0 14px rgba(196, 116, 255, .18);
  /* No mask here on purpose. The ring shares a 3D rendering context with the
     planet, so the browser already draws the near half in front of the body and
     the far half behind it. An earlier version masked the far half away as
     well, which only made the whole path hard to see. */
}

.orbit-runner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: orbit-run var(--dur) linear infinite;
  animation-delay: calc(var(--dur) / var(--count) * var(--slot) * -1);
}

/* The body's origin is the point on the ring. Both children are positioned
   against that origin, so the marker's CENTRE rides the line exactly and the
   label trails beside it instead of dragging it off the path. */
.orbit-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  white-space: nowrap;
  transform-style: preserve-3d;
  animation:
    orbit-face var(--dur) linear infinite,
    orbit-dim var(--dur) linear infinite;
  animation-delay: calc(var(--dur) / var(--count) * var(--slot) * -1);
}

.orbit-dot {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f4d6ff;
  box-shadow: 0 0 0 4px rgba(211, 108, 255, .18), 0 0 18px 3px rgba(211, 108, 255, .85);
}

/* Each label keeps ONE side for the whole orbit. An earlier version swapped
   sides at the halfway mark to stay clear of the frame edge, but a label that
   jumps across its own marker reads as a glitch, so the side is now fixed per
   lane and .is-label-left simply puts it on the other side of the dot. */
.orbit-name {
  position: absolute;
  top: 50%;
  left: 16px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  background: rgba(19, 12, 23, .66);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .07);
  color: #ddd6e3;
  font-family: "Figtree", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  transform: translateY(-50%);
}

.orbit-lane.is-label-left .orbit-name {
  left: auto;
  right: 16px;
}

@keyframes orbit-run {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

@keyframes orbit-face {
  from {
    transform:
      translateY(calc(var(--radius) * var(--orbit-scale) * -1)) rotateZ(0deg)
      rotateX(calc(var(--incline) * -1)) rotateZ(calc(var(--tilt) * -1));
  }
  to {
    transform:
      translateY(calc(var(--radius) * var(--orbit-scale) * -1)) rotateZ(-360deg)
      rotateX(calc(var(--incline) * -1)) rotateZ(calc(var(--tilt) * -1));
  }
}

@media (max-width: 1180px) {
  .hero-visual { --orbit-scale: .82; }
  .orbit-name { font-size: 12px; }
}

@media (max-width: 860px) {
  .hero-visual { --orbit-scale: .64; }
  .orbit-name { font-size: 11px; }
  .orbit-dot { width: 8px; height: 8px; top: -4px; left: -4px; }
}

/* On a phone the body stops shrinking and the orbits deliberately run past the
   edges: the section clips them, which reads as a system continuing off-screen
   rather than a diagram squeezed to fit. */
@media (max-width: 560px) {
  .hero-visual { --orbit-scale: .74; }
  .orbit-planet { width: 268px; }
  .orbit-name { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  /* No orbit: the same labels become a static, readable row under the object. */
  .orbit-rings { display: none; }

  .orbit-lane {
    position: static;
    display: inline-flex;
    transform: none;
  }

  .orbit-ring { display: none; }

  .orbit-runner {
    position: static;
    width: auto;
    height: auto;
    animation: none;
  }

  .orbit-body {
    position: static;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    background-image: linear-gradient(270deg, rgba(145, 0, 255, .08) 5%, rgba(213, 0, 255, .09) 94%);
    animation: none;
    transform: none;
  }

  .orbit-planet { animation: none; transform: translate(-50%, -50%); }
}

.hero-visual {
  --mx: 0px;
  --my: 0px;
  /* Orbit geometry knobs live here so the ring layers, the planet and the
     marker layer all inherit the same values and cannot drift apart. */
  --orbit-scale: 1;
  --planet-size: 590px;
  position: relative;
  min-height: min(610px, 54svh);
  transform: translate(var(--mx), var(--my));
  transition: transform 800ms cubic-bezier(.18,.8,.3,1);
}

/* The two decorative rings that used to sit here were removed: they were not
   part of the orbital system, and the dashed one span on its own clock, so it
   read as a ring belonging to nothing. Every ring on screen is now a real
   lane. */

/* The planet now lives inside .orbit-stage; see .orbit-planet. A filter here
   would flatten the shared 3D context and put every ring back in front. */

.visual-aura {
  position: absolute;
  z-index: 1;
  top: 48%;
  left: 52%;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,172,255,.26), rgba(153,49,200,.12) 32%, transparent 70%);
  transform: translate(-50%, -50%);
  filter: blur(12px);
}

.hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  color: #8d8790;
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  letter-spacing: .03em;
}

.hero-foot p {
  margin: 0;
}

.hero-foot a {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hero-foot a span {
  color: #d776fa;
}

.section-light {
  background: var(--lavender);
}

.statement {
  padding: 130px 0 0;
  overflow: hidden;
}

.statement-layout {
  display: grid;
  grid-template-columns: .75fr 2.25fr;
  gap: 70px;
  padding-bottom: 120px;
}

.section-kicker {
  color: #5f5763;
}

.statement-copy h2,
.section-heading h2,
.bridge h2,
.process h2,
.cta h2 {
  margin: 0;
  font-family: "Funnel Display", sans-serif;
  font-weight: 500;
  letter-spacing: -.048em;
  line-height: 1.05;
}

.statement-copy h2 {
  max-width: 1050px;
  font-size: clamp(48px, 5vw, 78px);
}

.statement-copy h2 span {
  color: #8c4ba6;
}

.statement-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 90px);
  max-width: 1000px;
  margin-top: 52px;
  color: #676068;
  font-size: 17px;
}

.statement-columns p {
  margin: 0;
}

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  background: rgba(255,255,255,.22);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  padding: 23px 0;
  color: #3a303d;
  font-family: "Funnel Display", sans-serif;
  font-size: 20px;
  /* 5950px per loop at the 32.8px/s the seven-term band ran at. */
  animation: marquee 181s linear infinite;
}

.marquee-track i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a341c4;
}

.services {
  padding: 135px 0 150px;
  color: #f2eef3;
  background: var(--ink);
}

.section-heading {
  display: grid;
  grid-template-columns: .75fr 2.25fr;
  gap: 70px;
  margin-bottom: 74px;
}

.section-heading > div {
  display: grid;
  grid-template-columns: 1.6fr .4fr;
  align-items: end;
  gap: 40px;
}

/* "Különböző területek." has to stay on one line, so the ramp is set from the
   phrase's own width: it needs roughly 9.2x the font size, and the column is
   1.6/2 of the right-hand track. */
.section-heading h2 {
  font-size: clamp(34px, 4.6vw, 68px);
}

.section-heading h2 .no-break { white-space: nowrap; }

.section-heading h2 em {
  color: #d8a8eb;
}

.section-heading > div > p {
  max-width: 440px;
  margin: 0 0 8px;
  color: #9b959d;
}

.services .section-kicker {
  color: #aaa3ad;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-grid .service-card-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 34px;
  align-items: center;
  min-height: 0;
  padding: 34px 30px;
}

.service-grid .service-card-wide .card-top {
  grid-column: 1 / -1;
  margin-bottom: 18px;
}

.service-grid .service-card-wide .card-glyph {
  /* The glyphs are drawn with fixed insets for a 112px box; shrinking the box
     clips them, so only the margin changes here. */
  margin: 0;
}

.service-grid .service-card-wide h3 { margin: 0; }
.service-grid .service-card-wide p { margin: 0; }

.service-grid .service-card-wide .card-tags {
  grid-column: 2 / -1;
  margin-top: 20px;
}

@media (max-width: 860px) {
  .service-grid .service-card-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 30px;
  }
  .service-grid .service-card-wide .card-glyph { margin: 26px 0 24px; }
  .service-grid .service-card-wide h3 { margin-bottom: 14px; }
  .service-grid .service-card-wide .card-tags { grid-column: 1; margin-top: 24px; }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 510px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  color: #ebe7ed;
  background:
    radial-gradient(circle at 85% 0%, rgba(169,65,220,.09), transparent 36%),
    #1b171d;
  transition: transform 280ms ease, border-color 280ms ease, background 280ms ease;
}

.service-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,72,218,.14), transparent 68%);
  transition: transform 350ms ease;
}

.service-card:hover {
  z-index: 2;
  border-color: rgba(213,116,249,.34);
  background:
    radial-gradient(circle at 85% 0%, rgba(169,65,220,.16), transparent 40%),
    #201923;
  transform: translateY(-7px);
}

.service-card:hover::after {
  transform: scale(1.4);
}

.service-card-featured {
  color: #1a131d;
  background: var(--lavender);
}

.service-card-featured:hover {
  border-color: transparent;
  background: #f7effc;
}

.service-card-accent {
  background:
    radial-gradient(circle at 85% 0%, rgba(228,157,255,.23), transparent 35%),
    linear-gradient(145deg, #471057, #26122e);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Figtree", sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
}

.card-arrow {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .46;
  transition: transform 220ms ease, opacity 220ms ease;
}

.service-card:hover .card-arrow {
  opacity: 1;
  transform: rotate(45deg);
}

.card-glyph {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 40px 0 34px;
  color: #c86ee9;
}

.service-card-featured .card-glyph {
  color: #8f32b2;
}

.card-glyph i,
.card-glyph::before,
.card-glyph::after {
  content: "";
  position: absolute;
  display: block;
}

.glyph-code::before,
.glyph-code::after {
  top: 25px;
  width: 42px;
  height: 62px;
  border: 2px solid currentColor;
  opacity: .86;
}

.glyph-code::before {
  left: 7px;
  border-right: 0;
  transform: skewY(-30deg);
}

.glyph-code::after {
  right: 7px;
  border-left: 0;
  transform: skewY(30deg);
}

.glyph-code i:first-child {
  top: 17px;
  left: 53px;
  width: 2px;
  height: 78px;
  background: currentColor;
  transform: rotate(18deg);
}

.glyph-code i:nth-child(2),
.glyph-code i:nth-child(3) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
}

.glyph-code i:nth-child(2) { top: 20px; left: 18px; }
.glyph-code i:nth-child(3) { right: 17px; bottom: 17px; }

.glyph-cube::before {
  top: 21px;
  left: 27px;
  width: 59px;
  height: 59px;
  border: 2px solid currentColor;
  transform: rotate(30deg) skewY(-5deg);
}

.glyph-cube::after {
  top: 39px;
  left: 27px;
  width: 59px;
  height: 59px;
  border: 2px solid currentColor;
  transform: rotate(-30deg) skewY(5deg);
  opacity: .62;
}

.glyph-cube i:first-child {
  top: 16px;
  left: 53px;
  width: 2px;
  height: 80px;
  background: currentColor;
  opacity: .5;
}

/* 03 - device communication: two devices and the line that joins them. */
.glyph-link::before,
.glyph-link::after {
  width: 48px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 9px;
}

.glyph-link::before {
  top: 10px;
  left: 6px;
  opacity: .86;
  transform: rotate(-10deg);
}

.glyph-link::after {
  right: 6px;
  bottom: 10px;
  opacity: .55;
  transform: rotate(-10deg);
}

.glyph-link i:first-child {
  top: 42px;
  left: 28px;
  width: 56px;
  height: 26px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-bottom-right-radius: 12px;
  opacity: .6;
}

.glyph-link i:nth-child(2),
.glyph-link i:nth-child(3) {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
}

.glyph-link i:nth-child(2) { top: 21px; left: 22px; }
.glyph-link i:nth-child(3) { right: 22px; bottom: 21px; }

/* 04 - automation: two capsules on a shared diagonal, one behind the other. */
.glyph-flow::before,
.glyph-flow::after {
  width: 76px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.glyph-flow::before {
  top: 17px;
  left: 5px;
  opacity: .86;
  transform: rotate(-24deg);
}

.glyph-flow::after {
  right: 5px;
  bottom: 17px;
  opacity: .55;
  transform: rotate(-24deg);
}

.glyph-flow i:first-child {
  top: 10px;
  left: 55px;
  width: 2px;
  height: 92px;
  background: currentColor;
  opacity: .45;
  transform: rotate(24deg);
}

.glyph-flow i:nth-child(2),
.glyph-flow i:nth-child(3) {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
}

.glyph-flow i:nth-child(2) { top: 21px; left: 19px; }
.glyph-flow i:nth-child(3) { right: 19px; bottom: 21px; }

/* 05 - quality: two frames checked one against the other, and the tick. */
.glyph-check::before,
.glyph-check::after {
  width: 60px;
  height: 60px;
  border: 2px solid currentColor;
  border-radius: 6px;
}

.glyph-check::before {
  top: 14px;
  left: 14px;
  opacity: .86;
  transform: rotate(-16deg);
}

.glyph-check::after {
  right: 14px;
  bottom: 14px;
  opacity: .5;
  transform: rotate(13deg);
}

.glyph-check i:first-child {
  top: 46px;
  left: 36px;
  width: 42px;
  height: 21px;
  border-bottom: 3px solid currentColor;
  border-left: 3px solid currentColor;
  transform: rotate(-45deg);
}

.glyph-check i:nth-child(2),
.glyph-check i:nth-child(3) {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
}

.glyph-check i:nth-child(2) { top: 13px; right: 15px; }
.glyph-check i:nth-child(3) { bottom: 13px; left: 15px; }

/* 06 - data protection: a guarded core inside two turned enclosures. */
.glyph-shield::before,
.glyph-shield::after {
  border: 2px solid currentColor;
  border-radius: 12px;
  transform: rotate(45deg);
}

.glyph-shield::before {
  top: 21px;
  left: 21px;
  width: 70px;
  height: 70px;
  opacity: .86;
}

.glyph-shield::after {
  top: 35px;
  left: 35px;
  width: 42px;
  height: 42px;
  opacity: .48;
}

.glyph-shield i:first-child {
  top: 8px;
  left: 55px;
  width: 2px;
  height: 96px;
  background: currentColor;
  opacity: .3;
}

.glyph-shield i:nth-child(2) {
  top: 50px;
  left: 50px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
}

.glyph-shield i:nth-child(3) {
  top: 12px;
  right: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  opacity: .7;
}

/* 07 - product management: two stages growing along one axis. */
.glyph-roadmap::before,
.glyph-roadmap::after {
  border: 2px solid currentColor;
  border-radius: 7px;
  transform: rotate(-18deg);
}

.glyph-roadmap::before {
  top: 13px;
  left: 10px;
  width: 46px;
  height: 30px;
  opacity: .86;
}

.glyph-roadmap::after {
  right: 8px;
  bottom: 13px;
  width: 62px;
  height: 36px;
  opacity: .52;
}

.glyph-roadmap i:first-child {
  top: 6px;
  left: 46px;
  width: 2px;
  height: 100px;
  background: currentColor;
  opacity: .42;
  transform: rotate(-30deg);
}

.glyph-roadmap i:nth-child(2),
.glyph-roadmap i:nth-child(3) {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
}

.glyph-roadmap i:nth-child(2) { top: 24px; left: 22px; }
.glyph-roadmap i:nth-child(3) { right: 24px; bottom: 24px; }

.service-card h3 {
  max-width: 380px;
  margin: 0;
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.service-card > p {
  margin: 20px 0 30px;
  color: #9f99a2;
  line-height: 1.62;
}

.service-card-featured > p {
  color: #615965;
}

.card-link { display: inline; }

.card-link::after {
  position: absolute;
  z-index: 3;
  border-radius: inherit;
  content: "";
  inset: 0;
}

.service-card:focus-within {
  z-index: 2;
  border-color: rgba(213,116,249,.34);
}

.service-card:focus-within .card-arrow {
  color: var(--white);
  background: rgba(211,108,255,.24);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.card-tags span {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #aaa3ad;
  font-family: "Figtree", sans-serif;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.service-card-featured .card-tags span {
  border-color: rgba(21,18,22,.14);
  color: #665c6a;
}

.bridge {
  padding: 150px 0;
  background: #faf9f9;
}

.bridge-layout {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: clamp(60px, 9vw, 150px);
}

.bridge-copy h2 {
  max-width: 650px;
  font-size: clamp(50px, 5vw, 78px);
}

.bridge-copy > p:not(.section-kicker) {
  max-width: 600px;
  margin: 32px 0;
  color: #6b656c;
  font-size: 17px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  font-family: "Figtree", sans-serif;
  font-weight: 600;
}

.text-link span {
  transition: transform 200ms ease;
}

.text-link:hover span {
  transform: rotate(45deg);
}

.process {
  padding: 140px 0;
}

.process-heading {
  display: grid;
  grid-template-columns: .75fr 2.25fr;
  gap: 70px;
  align-items: start;
}

.process-heading h2 {
  font-size: clamp(52px, 5vw, 78px);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 85px;
  border-top: 1px solid var(--line-light);
}

.process-grid article {
  position: relative;
  min-height: 360px;
  padding: 34px 38px 20px 0;
  border-right: 1px solid var(--line-light);
}

.process-grid article + article {
  padding-left: 38px;
}

.process-grid article:last-child {
  border-right: 0;
}

.process-grid article > span {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 82px;
  place-items: center;
  border: 1px solid rgba(121,58,145,.28);
  border-radius: 50%;
  color: #853aa0;
  font-family: "Figtree", sans-serif;
  font-size: 12px;
}

.process-grid h3 {
  margin: 0 0 18px;
  font-family: "Funnel Display", sans-serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.process-grid p {
  max-width: 390px;
  margin: 0;
  color: #6d666f;
}

.cta {
  position: relative;
  isolation: isolate;
  padding: 150px 0 160px;
  overflow: hidden;
  color: #eee9f0;
  background:
    radial-gradient(circle at 50% 105%, rgba(164,55,206,.35), transparent 34%),
    #0e0a11;
}

.cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -340px;
  left: 50%;
  width: 760px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,209,255,.35), rgba(169,65,220,.18) 28%, transparent 67%);
  transform: translateX(-50%);
  filter: blur(10px);
}

.cta-grid {
  inset: 0 7%;
  opacity: .18;
}

.cta-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta .section-kicker {
  color: #b9b0bd;
}

.cta h2 {
  max-width: 1050px;
  font-size: clamp(56px, 6.7vw, 102px);
}

.cta h2 em {
  color: #d9a8eb;
}

.cta-layout > p:not(.section-kicker) {
  max-width: 650px;
  margin: 34px auto 38px;
  color: #aaa2ad;
  font-size: 18px;
}

.button-large {
  min-width: 210px;
}

.site-footer {
  padding: 65px 0 24px;
  color: #aaa3ad;
  background: #0e0a11;
  border-top: 1px solid var(--line-dark);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.1fr;
  align-items: start;
  gap: 40px;
  padding-bottom: 55px;
}

.footer-brand {
  display: grid;
  gap: 16px;
  align-content: start;
}

.footer-brand p {
  max-width: 30ch;
  margin: 0;
  color: #9c95a1;
  font-size: 15px;
  line-height: 1.6;
}

.footer-column h2 {
  margin: 0 0 16px;
  color: #efe9f1;
  font-family: "Figtree", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.footer-column ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-column a {
  color: #a49da9;
  font-size: 15px;
  line-height: 1.4;
}

.footer-contact {
  max-width: 34ch;
  margin: 0;
  color: #cfc8d4;
  font-size: 15px;
  line-height: 1.6;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.footer-bottom p {
  margin: 0;
}

/* WCAG 2.2 AA asks for a 24x24 minimum target. These links are visually small,
   so the hit area is grown with padding rather than by enlarging the text. */
.footer-column a:not(.footer-cta),
.crumbs a,
.crumbs li > span {
  display: inline-block;
  padding-block: 4px;
}

.footer-column li { line-height: 1; }

.brand {
  padding-block: 6px;
  padding-right: 6px;
}

.primary-nav > a,
.nav-group-toggle {
  padding-block: 4px;
}

.hero-foot a {
  padding-block: 5px;
}

.footer-bottom p { padding-block: 2px; }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.75,.25,1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.service-grid [data-reveal]:nth-child(2),
.process-grid [data-reveal]:nth-child(2) { transition-delay: 70ms; }
.service-grid [data-reveal]:nth-child(3),
.process-grid [data-reveal]:nth-child(3) { transition-delay: 140ms; }
.service-grid [data-reveal]:nth-child(4) { transition-delay: 70ms; }
.service-grid [data-reveal]:nth-child(5) { transition-delay: 140ms; }
.service-grid [data-reveal]:nth-child(6) { transition-delay: 210ms; }
.service-grid [data-reveal]:nth-child(7) { transition-delay: 70ms; }

@keyframes hero-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1.5deg); }
  50% { transform: translate(-50%, calc(-50% - 14px)) rotate(1.5deg); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@media (max-width: 1180px) {
  :root { --shell: min(100% - 42px, 1100px); }

  .nav-shell { grid-template-columns: 1fr auto; }
  .primary-nav { display: none; }
  .nav-cta { display: none; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    justify-self: end;
    width: 48px;
    height: 48px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.04);
  }
  .menu-toggle span:not(.sr-only) {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform 200ms ease;
  }
  .menu-open .menu-toggle span:nth-child(2) { transform: translateY(4px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
  .menu-open .primary-nav {
    position: fixed;
    top: 76px;
    right: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    background: rgba(15,10,18,.97);
    box-shadow: 0 25px 60px rgba(0,0,0,.46);
  }
  .menu-open .primary-nav > a {
    width: 100%;
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .menu-open .primary-nav > a:last-child { border-bottom: 0; }

  .primary-nav {
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  .nav-group { display: block; width: 100%; }
  .nav-group-toggle {
    justify-content: space-between;
    width: 100%;
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .nav-panel {
    position: static;
    display: none;
    width: 100%;
    padding: 6px 0 10px;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    visibility: visible;
  }
  .nav-group-toggle[aria-expanded="true"] + .nav-panel {
    display: block;
    transform: none;
  }
  .nav-panel a { padding: 11px 14px; }

  .hero { padding-top: clamp(96px, 12vh, 140px); }
  .hero-layout { grid-template-columns: 1fr .8fr; gap: 20px; }
  .hero-visual { min-height: min(540px, 50svh); }
  .hero-visual::before { width: 440px; height: 440px; }
      .statement-layout,
  .section-heading,
  .process-heading { grid-template-columns: 1fr; gap: 20px; }
  .section-heading > div { grid-template-columns: 1fr .55fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .bridge-layout { gap: 45px; }
}

@media (max-width: 860px) {
  :root { --shell: calc(100vw - 34px); }

  .site-header { padding-top: 12px; }
  .brand { --brand-size: 20px; }

  .hero { padding: 125px 0 28px; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-copy { max-width: 700px; }
  .hero-visual { min-height: min(540px, 50svh); margin-top: -28px; }
  .hero-visual img { width: min(84%, 520px); }
  .hero-foot { margin-top: -15px; }

  .statement { padding-top: 95px; }
  .statement-layout { padding-bottom: 90px; }
  .statement-columns { grid-template-columns: 1fr; gap: 22px; }
  .section-heading > div { grid-template-columns: 1fr; }
  .section-heading > div > p { margin-top: 15px; }
  .services { padding: 100px 0 110px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 460px; }

  .bridge { padding: 105px 0; }
  .bridge-layout { grid-template-columns: 1fr; }
    .process { padding: 105px 0; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid article,
  .process-grid article + article {
    min-height: auto;
    padding: 28px 0 45px;
    border-right: 0;
    border-bottom: 1px solid var(--line-light);
  }
  .process-grid article > span { margin-bottom: 44px; }

  .cta { padding: 110px 0 120px; }
  .footer-top { grid-template-columns: 1fr 1fr; justify-items: start; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: clamp(49px, 14vw, 66px); }
  .hero-lead { font-size: 16px; }
  .eyebrow {
    width: 100%;
    justify-content: space-evenly;
    gap: 0;
    padding: 11px 0;
    font-size: clamp(8.5px, 3.05vw, 12px);
    letter-spacing: -.01em;
  }
  .eyebrow > span { white-space: nowrap; }
  .eyebrow > i { font-style: normal; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button-primary { width: 100%; }
  .button-quiet { justify-content: flex-start; }
  .hero-visual { min-height: 420px; }
  .hero-visual::before { width: 340px; height: 340px; }
  .hero-visual::after { width: 270px; height: 270px; }
        .hero-foot { font-size: 11px; }
  .hero-foot p { max-width: 170px; }

  .statement-copy h2,
  .bridge h2,
  .process h2 { font-size: 44px; }
  .section-heading h2 { font-size: 34px; }
  .statement-columns { font-size: 16px; }
  .service-card { min-height: 480px; padding: 24px; }
  .card-glyph { margin-top: 30px; }
          .cta h2 { font-size: 51px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------- footer legal + contact -- */

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer-legal a {
  /* Padded to clear the 24px minimum target size (WCAG 2.2), which the bare
     13px line box does not reach on its own. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 0;
  color: #8d8790;
  font-size: 13px;
  transition: color 200ms ease;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: #e6dcec;
}

/* Leads to the message form rather than repeating the seat address, which
   already appears in full on the impresszum. */
.footer-column .footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 10px;
  margin-top: 18px;
  padding: 11px 20px;
  min-height: 44px;
  border: 1px solid rgba(230, 220, 236, .28);
  border-radius: 999px;
  color: #e6dcec;
  font-family: "Figtree", sans-serif;
  font-size: 14px;
  letter-spacing: .01em;
  transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}

.footer-column .footer-cta:hover,
.footer-column .footer-cta:focus-visible {
  border-color: rgba(215, 118, 250, .7);
  background: rgba(149, 80, 201, .16);
  color: #fff;
}

.footer-cta-icon {
  color: #d776fa;
}

@media (max-width: 560px) {
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 14px; }
}

/* ------------------------------------------------------------ contact form -- */

.contact-band {
  padding-top: 74px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(38px, 5vw, 76px);
  align-items: start;
}

.contact-form {
  width: 100%;
  text-align: left;
}

.contact-form .field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.contact-form label {
  color: #4c4552;
  font-family: "Figtree", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Form controls do not inherit the page font on their own; without this the
   bare checkbox and the honeypot input fall back to the browser default. */
.contact-form input,
.contact-form textarea,
.contact-form button {
  font: inherit;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(21, 18, 22, .18);
  border-radius: 14px;
  color: #151216;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #fff;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.contact-form textarea {
  min-height: 170px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #9550c9;
  outline: 2px solid rgba(149, 80, 201, .38);
  outline-offset: 2px;
}

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  border-color: #c1372f;
}

.contact-form .field-error {
  display: none;
  margin: 0;
  color: #b3302a;
  font-family: "Figtree", sans-serif;
  font-size: 13.5px;
}

.contact-form .field-error.is-shown {
  display: block;
}

/* The consent row reads as a sentence, so it drops the uppercase field label
   treatment the other rows use. */
.contact-form .consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: #4c4552;
  font-family: "Rubik", sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

.contact-form .consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: #9550c9;
}

.contact-form .consent a {
  color: #7b3fa8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-form .consent a:hover,
.contact-form .consent a:focus-visible {
  color: #151216;
}

/* Off-screen rather than display:none - a bot reading the DOM sees a normal
   field, while nobody using the page ever reaches it. */
.contact-form .field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form .form-foot {
  margin-top: 28px;
}

.contact-form .form-status {
  display: none;
  margin: 26px 0 0;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-family: "Rubik", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.contact-form .form-status.is-ok {
  display: block;
  border-color: rgba(40, 125, 89, .35);
  color: #1d5c41;
  background: rgba(47, 148, 105, .1);
}

.contact-form .form-status.is-error {
  display: block;
  border-color: rgba(179, 48, 42, .35);
  color: #97281f;
  background: rgba(193, 55, 47, .08);
}

.contact-form button[disabled] {
  cursor: progress;
  opacity: .6;
}

.contact-aside h2 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.3;
}

.contact-aside h2 + p {
  margin: 0 0 18px;
  color: #4c4552;
  font-size: 15px;
  line-height: 1.6;
}

.contact-aside > * + h2 {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid rgba(21, 18, 22, .12);
}

.contact-aside a {
  color: #7b3fa8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-reveals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #4c4552;
}

@media (max-width: 940px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-aside { padding-top: 8px; }
}

@media (max-width: 700px) {
  .contact-form .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* -------------------------------------------------- contact detail reveal -- */

.contact-reveal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px dashed currentColor;
  border-radius: 999px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  opacity: .82;
  cursor: pointer;
  transition: opacity 200ms ease, border-color 200ms ease;
}

.contact-reveal:hover,
.contact-reveal:focus-visible {
  border-style: solid;
  opacity: 1;
}

.contact-reveal svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.contact-revealed {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Inside a running sentence - the legal pages - the control must not look like
   a button dropped into the paragraph. */
.reading-body .contact-reveal,
.reading-body .contact-revealed {
  min-height: 0;
  padding: 1px 8px;
  font-size: inherit;
}

/* ------------------------------------------------------- topic multiselect -- */

.contact-form .field-topics {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.contact-form .field-topics legend {
  padding: 0 0 8px;
  color: #4c4552;
  font-family: "Figtree", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.topic-select {
  position: relative;
  border: 1px solid rgba(21, 18, 22, .18);
  border-radius: 14px;
  background: #fff;
}

.topic-select[open] {
  border-color: #9550c9;
}

.topic-select > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 13px;
  color: #151216;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}

/* The default marker is removed in both engines. */
.topic-select > summary::-webkit-details-marker { display: none; }
.topic-select > summary::marker { content: ""; }

.topic-select > summary:focus-visible {
  outline: 2px solid rgba(149, 80, 201, .38);
  outline-offset: 2px;
}

.topic-select[aria-invalid="true"] {
  border-color: #c1372f;
}

.topic-caret {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #6d6672;
  border-bottom: 2px solid #6d6672;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 200ms ease;
}

.topic-select[open] .topic-caret {
  transform: translateY(1px) rotate(-135deg);
}

.topic-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 18px;
  padding: 6px 16px 16px;
  border-top: 1px solid rgba(21, 18, 22, .1);
}

.contact-form .topic-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 9px 0;
  min-height: 40px;
  color: #3a343f;
  font-family: "Rubik", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  cursor: pointer;
}

.contact-form .topic-option input {
  width: 19px;
  height: 19px;
  accent-color: #9550c9;
}

.contact-form .topic-option:hover span {
  color: #151216;
}

.contact-form .topic-option input:focus-visible {
  outline: 2px solid rgba(149, 80, 201, .5);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .topic-options { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ service graph -- */

/* The nodes are real links laid over a canvas that draws the connections and
   the pulses travelling along them. Keeping the labels in the DOM rather than
   painting them keeps the section keyboard reachable and readable, and lets the
   canvas stay purely decorative. */
.bridge-graph {
  position: relative;
  aspect-ratio: 6 / 5;
  width: 100%;
  min-height: 380px;
  border: 1px solid rgba(21, 18, 22, .07);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 50%, rgba(169, 65, 220, .1), transparent 62%),
    linear-gradient(160deg, #fbf7fe 0%, #f6f1fa 100%);
  overflow: hidden;
}

.bridge-graph canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.graph-nodes {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.graph-nodes li {
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
}

.graph-core,
.graph-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
}

.graph-core {
  padding: 15px 30px;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(135deg, #a941dc, #7a1fa8);
  box-shadow: 0 12px 34px -12px rgba(122, 31, 168, .75);
  transition: transform 420ms cubic-bezier(.2, .8, .3, 1);
}

.bridge-graph.is-active .graph-core {
  transform: scale(.94);
}

.graph-node {
  padding: 11px 19px;
  min-height: 42px;
  border: 1px solid rgba(21, 18, 22, .1);
  border-radius: 999px;
  color: #3c3541;
  font-size: 13.5px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 18px -10px rgba(21, 18, 22, .4);
  transition: transform 260ms cubic-bezier(.2, .8, .3, 1),
              border-color 260ms ease, color 260ms ease, opacity 260ms ease,
              box-shadow 260ms ease;
}

.graph-node:hover,
.graph-node:focus-visible {
  transform: scale(1.08);
  border-color: #a941dc;
  color: #151216;
  box-shadow: 0 12px 26px -10px rgba(169, 65, 220, .6);
}

/* While one node has attention the others step back, so the highlighted path
   through the graph is the thing the eye follows. */
.bridge-graph.is-active .graph-node:not(:hover):not(:focus-visible):not([aria-expanded="true"]) {
  opacity: .42;
}

@media (prefers-reduced-motion: reduce) {
  .graph-core,
  .graph-node { transition: none; }
}

@media (max-width: 1180px) {
  .bridge-graph { aspect-ratio: 5 / 4; }
  .graph-node { padding: 9px 15px; font-size: 12.5px; }
  .graph-core { padding: 13px 24px; font-size: 14px; }
}

@media (max-width: 560px) {
  .bridge-graph { aspect-ratio: 1 / 1; min-height: 340px; }
  .graph-node { padding: 8px 12px; font-size: 11.5px; min-height: 36px; }
}

/* Below the tablet breakpoint the animated 3D construction is replaced by one
   static SVG. It keeps all twelve paths and labels while avoiding the layer
   compositing that made the stage fall apart on mobile GPUs during scrolling. */
@media (max-width: 720px) {
  /* Android only paints one static SVG for the complete orbital system. The
     desktop rings and labels keep their 3D motion above this breakpoint. */
  .hero-visual > .orbit-rings,
  .hero-visual > .orbit-markers { display: none; }

  /* Touch movement must never transform this wrapper. On mobile it is a fixed
     paint container; only the planet and the individual tags move inside it. */
  .hero .hero-visual {
    --mx: 0px;
    --my: 0px;
    transform: none;
    transition: none;
    contain: layout paint;
  }

  .hero-visual .orbit-mobile-system {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    pointer-events: none;
  }

  .orbit-mobile-tags {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .orbit-mobile-tag {
    position: absolute;
    top: var(--y);
    left: var(--x);
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #ddd6e3;
    background: rgba(19, 12, 23, .86);
    font-family: "Figtree", sans-serif;
    font-size: clamp(8px, 2.15vw, 10px);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transform: translate(8px, -50%);
    animation: mobile-tag-micro-orbit var(--micro-dur) linear var(--micro-delay) infinite;
  }

  /* Each tag follows a small, closed ellipse around its fixed lane marker.
     Even-numbered tags mirror the matching reverse lanes from desktop. */
  .orbit-mobile-tag:nth-child(1)  { --micro-dur: 7.2s; --micro-delay: -1.4s; --micro-x: 5px;   --micro-y: 3px;   --micro-dx: 3.54px; --micro-dy: 2.12px; }
  .orbit-mobile-tag:nth-child(2)  { --micro-dur: 8.4s; --micro-delay: -5.2s; --micro-x: 4px;   --micro-y: 3.5px; --micro-dx: 2.83px; --micro-dy: 2.47px; animation-direction: reverse; }
  .orbit-mobile-tag:nth-child(3)  { --micro-dur: 6.6s; --micro-delay: -3.7s; --micro-x: 5.5px; --micro-y: 3px;   --micro-dx: 3.89px; --micro-dy: 2.12px; }
  .orbit-mobile-tag:nth-child(4)  { --micro-dur: 7.8s; --micro-delay: -2.6s; --micro-x: 4.5px; --micro-y: 4px;   --micro-dx: 3.18px; --micro-dy: 2.83px; animation-direction: reverse; }
  .orbit-mobile-tag:nth-child(5)  { --micro-dur: 7.5s; --micro-delay: -6.1s; --micro-x: 5px;   --micro-y: 3.5px; --micro-dx: 3.54px; --micro-dy: 2.47px; }
  .orbit-mobile-tag:nth-child(6)  { --micro-dur: 6.3s; --micro-delay: -4.4s; --micro-x: 4px;   --micro-y: 3px;   --micro-dx: 2.83px; --micro-dy: 2.12px; animation-direction: reverse; }
  .orbit-mobile-tag:nth-child(7)  { --micro-dur: 8.6s; --micro-delay: -7.2s; --micro-x: 5.5px; --micro-y: 4px;   --micro-dx: 3.89px; --micro-dy: 2.83px; }
  .orbit-mobile-tag:nth-child(8)  { --micro-dur: 6.9s; --micro-delay: -1.9s; --micro-x: 4.5px; --micro-y: 2.5px; --micro-dx: 3.18px; --micro-dy: 1.77px; animation-direction: reverse; }
  .orbit-mobile-tag:nth-child(9)  { --micro-dur: 8.1s; --micro-delay: -5.3s; --micro-x: 5px;   --micro-y: 4px;   --micro-dx: 3.54px; --micro-dy: 2.83px; }
  .orbit-mobile-tag:nth-child(10) { --micro-dur: 7.4s; --micro-delay: -5.8s; --micro-x: 4px;   --micro-y: 3.5px; --micro-dx: 2.83px; --micro-dy: 2.47px; animation-direction: reverse; }
  .orbit-mobile-tag:nth-child(11) { --micro-dur: 6.5s; --micro-delay: -2.1s; --micro-x: 5.5px; --micro-y: 3.5px; --micro-dx: 3.89px; --micro-dy: 2.47px; }
  .orbit-mobile-tag:nth-child(12) { --micro-dur: 8.2s; --micro-delay: -6.7s; --micro-x: 4.5px; --micro-y: 4px;   --micro-dx: 3.18px; --micro-dy: 2.83px; animation-direction: reverse; }

  .orbit-mobile-tag::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    width: 6px;
    height: 6px;
    border: 3px solid rgba(211, 108, 255, .22);
    border-radius: 50%;
    background: #f4d6ff;
    transform: translateY(-50%);
  }

  .orbit-mobile-tag.is-left {
    transform: translate(calc(-100% - 8px), -50%);
  }

  .orbit-mobile-tag.is-left::before {
    right: -12px;
    left: auto;
  }

  /* The centre object keeps a 20px vertical float. Every label below follows
     a much smaller ellipse, so the planet remains the larger movement. */
  .hero-visual .orbit-planet {
    transform-style: flat;
    animation: planet-float-mobile 7.2s ease-in-out -3.6s infinite;
  }

  @keyframes planet-float-mobile {
    0%, 100% { transform: translate(-50%, calc(-50% + 10px)); }
    50%      { transform: translate(-50%, calc(-50% - 10px)); }
  }

  @keyframes mobile-tag-micro-orbit {
    0%, 100% { translate: var(--micro-x) 0; }
    12.5%    { translate: var(--micro-dx) var(--micro-dy); }
    25%      { translate: 0 var(--micro-y); }
    37.5%    { translate: calc(-1 * var(--micro-dx)) var(--micro-dy); }
    50%      { translate: calc(-1 * var(--micro-x)) 0; }
    62.5%    { translate: calc(-1 * var(--micro-dx)) calc(-1 * var(--micro-dy)); }
    75%      { translate: 0 calc(-1 * var(--micro-y)); }
    87.5%    { translate: var(--micro-dx) calc(-1 * var(--micro-dy)); }
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .hero-visual .orbit-planet,
  .orbit-mobile-tag {
    animation: none;
  }

  .hero-visual .orbit-planet {
    transform: translate(-50%, -50%);
  }
}

/* --------------------------------------------------- hero artwork guarding -- */

/* The two hero images do not offer a save menu. On a phone a long press is
   what a hover is on a desktop: nothing happens, and the page keeps scrolling.
   This is deterrence, not protection - the file still has a URL and anyone can
   fetch it directly. It only stops the casual save. */
.orbit-planet,
.orbit-mobile-system,
.bridge-graph {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* A section that carries its own background is a colour band: the edge where
   the colour changes is what reads as the start of the section, so that edge
   lands on the header rather than 26px below it. Inside a page, a heading still
   keeps the gap. */
main > section[id] {
  scroll-margin-top: calc(-1 * var(--anchor-gap));
}

/* ------------------------------------------------- service graph confirm -- */

/* Clicking a node asks before it leaves the page. The card drops out of the
   node it belongs to, so it reads as that node's own answer rather than a
   dialog that arrived from nowhere. */
.graph-confirm {
  position: absolute;
  z-index: 6;
  top: var(--top, 0);
  left: var(--left, 0);
  width: max-content;
  max-width: min(260px, 84%);
  padding: 16px 18px 14px;
  border: 1px solid rgba(21, 18, 22, .1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(21, 18, 22, .45), 0 2px 6px rgba(21, 18, 22, .06);
  opacity: 0;
  transform: translate(-50%, -6px) scale(.96);
  transform-origin: 50% 0;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.2, .8, .3, 1);
  pointer-events: none;
  visibility: hidden;
}

.graph-confirm.is-open {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

/* The notch ties the card to the node above it. */
.graph-confirm::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 1px solid rgba(21, 18, 22, .1);
  border-left: 1px solid rgba(21, 18, 22, .1);
  border-radius: 2px 0 0 0;
  background: #fff;
  transform: translateX(calc(-50% + var(--notch, 0px))) rotate(45deg);
}

/* Opened upward, the notch belongs on the card's underside. */
.graph-confirm.is-above {
  transform-origin: 50% 100%;
}

.graph-confirm.is-above::before {
  top: auto;
  bottom: -6px;
  border-top: 0;
  border-left: 0;
  border-right: 1px solid rgba(21, 18, 22, .1);
  border-bottom: 1px solid rgba(21, 18, 22, .1);
  border-radius: 0 0 2px 0;
}

.graph-confirm p {
  margin: 0 0 14px;
  color: #151216;
  font-family: "Funnel Display", sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.35;
  text-wrap: balance;
}

.graph-confirm-actions {
  display: flex;
  gap: 8px;
}

.graph-confirm button {
  flex: 1;
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: "Funnel Display", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.graph-confirm .is-yes {
  color: #fff;
  background: linear-gradient(135deg, #a941dc, #7a1fa8);
}

.graph-confirm .is-yes:hover,
.graph-confirm .is-yes:focus-visible {
  background: linear-gradient(135deg, #b455e6, #6a1795);
}

.graph-confirm .is-no {
  border-color: rgba(21, 18, 22, .16);
  color: #4c4552;
  background: #fff;
}

.graph-confirm .is-no:hover,
.graph-confirm .is-no:focus-visible {
  border-color: rgba(21, 18, 22, .34);
  color: #151216;
}

/* The press itself is feedback: holding a node animates it whether or not the
   card ends up opening. */
.graph-node:active {
  transform: scale(.97);
  transition-duration: 90ms;
}

/* While its card is asking the question, the node stays held down. The card
   belongs to that node, and the sustained press is what says so - otherwise
   the node springs back and the card looks unattached. Written after the hover
   rule, which it ties with on specificity, and scoped past the dimming rule so
   the open node is the one thing that does not step back. */
.graph-node[aria-expanded="true"],
.graph-node[aria-expanded="true"]:hover,
.graph-node[aria-expanded="true"]:focus-visible {
  transform: scale(.97);
  border-color: #a941dc;
  color: #151216;
  box-shadow: inset 0 2px 6px rgba(21, 18, 22, .12), 0 2px 8px -6px rgba(169, 65, 220, .5);
}


@media (prefers-reduced-motion: reduce) {
  .graph-confirm { transition: opacity 120ms ease; transform: translate(-50%, 0); }
  .graph-confirm.is-open { transform: translate(-50%, 0); }
  .graph-node:active { transform: none; }
}