/* QNSET redesign: shared foundation for every redesigned page.
   Tokens, type, buttons, section scaffolding, the principles list, the
   closing CTA and reveal-on-scroll. Page-specific styles live in their own
   files (home.css, about.css). Everything is scoped to .qx so pages that are
   not redesigned yet are untouched. Hidden-until-revealed states only apply
   under html.qx-js, so content stays readable if qx.js never runs. */

body:has(.qx) {
  background: #050507;
  background-image: none;
}

.qx {
  --qx-bg: #050507;
  --qx-surface: #0b0b10;
  --qx-ink: #f4f4f7;
  --qx-muted: rgba(244, 244, 247, 0.66);
  --qx-faint: rgba(244, 244, 247, 0.42);
  --qx-line: rgba(244, 244, 247, 0.1);
  --qx-red: #ff2d4a;
  --qx-purple: #9d4dff;
  --qx-blue: #2f6bff;
  --qx-spectrum: linear-gradient(90deg, var(--qx-red), var(--qx-purple) 50%, var(--qx-blue));
  --qx-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --qx-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --qx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --qx-gutter: clamp(16px, 4vw, 56px);

  font-family: var(--qx-display);
  color: var(--qx-ink);
  overflow-x: clip;
  /* cancel <main>'s bottom padding so the CTA meets the footer */
  margin-bottom: -3rem;
}

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

.qx-wrap {
  width: min(1320px, 100% - 2 * var(--qx-gutter));
  margin-inline: auto;
}

.qx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-family: var(--qx-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qx-faint);
}

.qx-kicker-sep {
  opacity: 0.4;
}

/* The padding gives the gradient room to cover the last glyph: with tight
   letter-spacing a glyph overhangs its box, and the overhang would otherwise
   get no background (an invisible "?" or "."). The margin cancels the space. */
.qx-spectrum {
  padding-right: 0.08em;
  margin-right: -0.08em;
  background: var(--qx-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent;
}

.qx-c-red { color: var(--qx-red); }
.qx-c-purple { color: var(--qx-purple); }
.qx-c-blue { color: #5b8bff; }

.qx-h2 {
  margin: 0;
  font-size: clamp(2.25rem, 5.2vw, 4.75rem);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ---------- Buttons ---------- */

.qx-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, translate 0.5s var(--qx-ease);
}

.qx-btn svg {
  transition: transform 0.4s var(--qx-ease);
}

.qx-btn:hover svg {
  transform: translateX(4px);
}

.qx-btn--primary {
  background: var(--qx-ink);
  color: #050507;
}

.qx-btn--primary::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: var(--qx-spectrum);
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.qx-btn--primary:hover::before,
.qx-btn--primary:focus-visible::before {
  opacity: 0.85;
}

.qx-btn--ghost {
  border: 1px solid rgba(244, 244, 247, 0.2);
  color: var(--qx-ink);
}

.qx-btn--ghost:hover {
  background: rgba(244, 244, 247, 0.06);
  border-color: rgba(244, 244, 247, 0.4);
}

.qx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- Sections ---------- */

.qx-section {
  padding-block: clamp(6rem, 14vh, 10rem);
}

.qx-section-head {
  max-width: 58rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.qx-section-lead {
  margin: 1.5rem 0 0;
  max-width: 52ch;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--qx-muted);
}

/* ---------- Page hero (inner pages): lines rise, then the lead ---------- */

.qx-page-hero {
  padding-block: clamp(4rem, 12vh, 8rem) clamp(3rem, 8vh, 5rem);
}

.qx-page-hero > .qx-kicker {
  opacity: 0;
  animation: qx-fade 0.8s ease 0.1s forwards;
}

.qx-ph-title {
  margin: 0;
  font-size: clamp(2.8rem, 7.6vw, 7.25rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.qx-ph-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.qx-ph-line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: qx-rise 1.1s var(--qx-ease) forwards;
}

.qx-ph-line:nth-child(1) > span { animation-delay: 0.15s; }
.qx-ph-line:nth-child(2) > span { animation-delay: 0.27s; }
.qx-ph-line:nth-child(3) > span { animation-delay: 0.39s; }

.qx-ph-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 2rem 4rem;
  margin-top: clamp(2rem, 5vh, 3rem);
  opacity: 0;
  animation: qx-fade-up 0.9s var(--qx-ease) 0.75s forwards;
}

.qx-ph-lead {
  max-width: 52ch;
  margin: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--qx-muted);
}

.qx-notice {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(157, 77, 255, 0.45);
  border-radius: 1rem;
  background: rgba(157, 77, 255, 0.1);
  line-height: 1.5;
}

.qx-bordered {
  border-top: 1px solid var(--qx-line);
}

/* ---------- Service rows (home "What we do", enterprise "Included services") ---------- */

.qx-services {
  border-top: 1px solid var(--qx-line);
}

.qx-svc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--qx-line);
}

.qx-svc {
  --c: var(--qx-red);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) 1rem;
  overflow: hidden;
  border-bottom: 1px solid var(--qx-line);
}

.qx-svc--purple { --c: var(--qx-purple); }
.qx-svc--blue { --c: var(--qx-blue); }
.qx-svc--white { --c: var(--qx-ink); }

.qx-svc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 24%, transparent), transparent 75%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--qx-ease);
}

.qx-svc:hover::before {
  transform: scaleX(1);
}

.qx-svc-num {
  font-family: var(--qx-mono);
  font-size: 0.8rem;
  color: var(--c);
}

.qx-svc-title {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.035em;
  transition: transform 0.7s var(--qx-ease);
}

.qx-svc:hover .qx-svc-title {
  transform: translateX(0.75rem);
}

.qx-svc-desc {
  margin: 0;
  max-width: 42ch;
  line-height: 1.55;
  color: var(--qx-muted);
}

/* ---------- Pillars: numbered columns with a colour line that draws in ---------- */

.qx-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qx-pillar {
  --c: var(--qx-red);
  position: relative;
  padding-top: 1.75rem;
  border-top: 1px solid var(--qx-line);
}

.qx-pillar--purple { --c: var(--qx-purple); }
.qx-pillar--blue { --c: var(--qx-blue); }

.qx-pillar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--qx-ease) calc(var(--d, 0ms) + 0.2s);
}

.qx-pillar.is-in::before,
html:not(.qx-js) .qx-pillar::before {
  transform: scaleX(1);
}

.qx-pillar-num {
  font-family: var(--qx-mono);
  font-size: 0.8rem;
  color: var(--c);
}

.qx-pillar-title {
  margin: 2.5rem 0 0.9rem;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.qx-pillar-text {
  max-width: 34ch;
  margin: 0;
  line-height: 1.55;
  color: var(--qx-muted);
}

/* ---------- Principles ---------- */

.qx-principles {
  border-top: 1px solid var(--qx-line);
}

.qx-principles-head {
  max-width: 62rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.qx-tenets {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--qx-line);
}

.qx-tenet {
  --c: var(--qx-red);
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.qx-tenet--purple { --c: var(--qx-purple); }
.qx-tenet--blue { --c: var(--qx-blue); }
.qx-tenet--white { --c: var(--qx-ink); }

/* divider: a faint base line with the tenet's colour drawing across it */
.qx-tenet::before,
.qx-tenet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
}

.qx-tenet::before {
  background: var(--qx-line);
}

.qx-tenet::after {
  background: linear-gradient(90deg, var(--c), transparent 60%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--qx-ease);
}

.qx-tenet-num {
  font-family: var(--qx-mono);
  font-size: 0.8rem;
  color: var(--c);
}

.qx-tenet-text {
  margin: 0;
  overflow: hidden;
  padding-bottom: 0.1em;
  font-size: clamp(1.6rem, 3.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.qx-tenet-inner {
  display: block;
}

.qx-tenet-dim {
  color: var(--qx-faint);
  transition: color 0.5s ease;
}

.qx-tenet:hover .qx-tenet-dim {
  color: var(--qx-ink);
}

.qx-tenet-tag {
  font-family: var(--qx-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qx-faint);
}

/* tenets rise out of their own line box instead of the generic fade-up */
.qx-js .qx .qx-tenet[data-reveal] {
  opacity: 1;
  transform: none;
}

.qx-js .qx-tenet .qx-tenet-inner {
  transform: translateY(105%);
  transition: transform 1.1s var(--qx-ease) 0.1s;
}

.qx-js .qx-tenet .qx-tenet-num,
.qx-js .qx-tenet .qx-tenet-tag {
  opacity: 0;
  transition: opacity 0.8s ease 0.35s;
}

.qx-js .qx-tenet.is-in .qx-tenet-inner { transform: none; }
.qx-js .qx-tenet.is-in .qx-tenet-num,
.qx-js .qx-tenet.is-in .qx-tenet-tag { opacity: 1; }
.qx-tenet.is-in::after,
html:not(.qx-js) .qx-tenet::after { transform: scaleX(1); }

/* ---------- CTA ---------- */

.qx-cta {
  position: relative;
  isolation: isolate;
  padding-block: clamp(6rem, 16vh, 10rem) clamp(7rem, 18vh, 12rem);
  overflow: hidden;
  text-align: center;
}

/* soft brand light rising from below the buttons */
.qx-cta::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -45%;
  z-index: -1;
  width: min(1100px, 140%);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(157, 77, 255, 0.2), rgba(47, 107, 255, 0.07) 55%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

/* the hero's spectrum hairline returns to close the page */
.qx-cta-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--qx-spectrum);
  opacity: 0.7;
  transform-origin: left;
}

.qx-cta-inner .qx-kicker {
  justify-content: center;
}

.qx-cta-title {
  margin: 0 auto;
  font-size: clamp(2.8rem, 8vw, 7.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.qx-cta-line {
  display: block;
  overflow: hidden;
  /* room for descenders, and for the streaks to the right of "fast." */
  padding: 0.04em 0.2em 0.1em;
  margin: -0.04em -0.2em -0.1em;
}

.qx-cta-line > span {
  display: inline-block;
}

.qx-fast {
  position: relative;
  display: inline-block;
}

/* three speed streaks trailing behind "fast." while it arrives */
.qx-fast::after {
  content: '';
  position: absolute;
  top: 22%;
  bottom: 28%;
  left: 100%;
  width: 70vw;
  background:
    linear-gradient(var(--qx-red), var(--qx-red)) left top / 100% 0.06em no-repeat,
    linear-gradient(var(--qx-purple), var(--qx-purple)) left center / 100% 0.06em no-repeat,
    linear-gradient(var(--qx-blue), var(--qx-blue)) left bottom / 100% 0.06em no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 85%);
  mask-image: linear-gradient(90deg, #000, transparent 85%);
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
}

.qx-cta-lead {
  max-width: 46ch;
  margin: 2rem auto 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--qx-muted);
}

.qx-cta-actions {
  justify-content: center;
  margin-top: 2.5rem;
}

/* choreography, once the section scrolls into view:
   rule draws -> "Let's build" rises -> "something" rises -> "fast." zips in from the right */
.qx-js .qx .qx-cta[data-reveal] {
  opacity: 1;
  transform: none;
}

.qx-js .qx-cta-rule { transform: scaleX(0); }
.qx-js .qx-cta-line > span { transform: translateY(110%); }
.qx-js .qx-fast { transform: translateX(80vw) skewX(-14deg); opacity: 0; }
.qx-js .qx-cta-inner .qx-kicker,
.qx-js .qx-cta-lead,
.qx-js .qx-cta-actions { opacity: 0; transform: translateY(16px); }

.qx-js .qx-cta.is-in .qx-cta-rule {
  transform: scaleX(1);
  transition: transform 1.4s var(--qx-ease);
}

.qx-js .qx-cta.is-in .qx-cta-line > span {
  transform: none;
  transition: transform 1.1s var(--qx-ease) 0.15s;
}

.qx-js .qx-cta.is-in .qx-cta-line:nth-child(2) > span {
  transition-delay: 0.27s;
}

.qx-js .qx-cta.is-in .qx-fast {
  transform: none;
  opacity: 1;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.1, 1) 0.85s, opacity 0.15s linear 0.85s;
}

.qx-js .qx-cta.is-in .qx-fast::after {
  animation: qx-streak 0.9s cubic-bezier(0.2, 0.9, 0.1, 1) 0.85s;
}

.qx-js .qx-cta.is-in .qx-cta-inner .qx-kicker,
.qx-js .qx-cta.is-in .qx-cta-lead,
.qx-js .qx-cta.is-in .qx-cta-actions {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 1s var(--qx-ease);
}

.qx-js .qx-cta.is-in .qx-cta-inner .qx-kicker { transition-delay: 0.05s; }
.qx-js .qx-cta.is-in .qx-cta-lead { transition-delay: 1.15s; }
.qx-js .qx-cta.is-in .qx-cta-actions { transition-delay: 1.3s; }

/* ---------- Reveal on scroll ---------- */

.qx-js .qx [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s ease, transform 1.2s var(--qx-ease);
  transition-delay: var(--d, 0ms);
}

.qx-js .qx [data-reveal].is-in {
  opacity: 1;
  transform: none;
}


/* ---------- Keyframes ---------- */

@keyframes qx-fade { to { opacity: 1; } }
@keyframes qx-rise { to { transform: none; } }
@keyframes qx-fade-out { to { opacity: 0; } }
@keyframes qx-grow-x { to { transform: scaleX(1); } }
@keyframes qx-streak {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes qx-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Mobile ---------- */

@media (max-width: 899px) {
  .qx-svc {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding-inline: 0.25rem;
  }

  .qx-svc-desc {
    grid-column: 2;
  }

  .qx-pillars {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .qx-actions .qx-btn {
    flex: 1 1 auto;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .qx *,
  .qx *::before,
  .qx *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

}