/* Neon Glider — site styles
   Two families (Archivo for text, Orbitron for the title and wordmark), two lights (neon + argon), one moving thing (the trail). */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-variable-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/orbitron-variable-latin.woff2") format("woff2");
}

:root {
  --night: #070b16;
  --night-2: #0c1222;
  --text: #e6eaf2;
  --text-2: #98a2b8;
  --hairline: rgba(150, 170, 220, 0.14);
  --hairline-strong: rgba(150, 170, 220, 0.3);

  /* neon gas: warm red-orange */
  --neon: #ff6a48;
  --neon-hot: #ffb6a2;
  --neon-deep: #ff3b1a;

  /* argon + mercury: cool blue-lavender */
  --argon: #8fb4ff;
  --argon-hot: #dbe7ff;
  --argon-deep: #4d7cff;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Orbitron", "Archivo", system-ui, sans-serif;
  --max: 1120px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-pad: clamp(72px, 10vw, 128px);

  /* motion: easing by job, duration by perception band */
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 120ms;
  --dur-large: 360ms;
  --dur-reveal: 500ms;
}

/* ---------- base ---------- */

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  color: var(--text);
}

p {
  margin: 0 0 1em;
  max-width: 62ch;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--argon);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in oklab, var(--argon) 45%, transparent);
  transition: color var(--dur-micro) var(--ease-decelerate), text-decoration-color var(--dur-micro) var(--ease-decelerate), text-shadow var(--dur-micro) var(--ease-decelerate);
}

a:hover {
  color: var(--argon-hot);
  text-decoration-color: var(--argon);
  text-shadow: 0 0 8px color-mix(in oklab, var(--argon) 55%, transparent);
}

:focus-visible {
  outline: 2px solid var(--argon);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--argon) 22%, transparent);
}

::selection {
  background: color-mix(in oklab, var(--neon) 45%, transparent);
  color: #fff;
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -3rem;
  padding: 0.5rem 0.75rem;
  background: var(--night-2);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  z-index: 10;
}

.skip:focus {
  top: 0.75rem;
}

/* ---------- header ---------- */

.site-header {
  padding: 1.4rem 0;
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}

.wordmark:hover {
  color: var(--text);
  text-shadow: none;
}

.wordmark .mark {
  width: 22px;
  height: 22px;
  display: block;
}

.site-nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
}

.site-nav a,
.site-footer nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-nav a:hover,
.site-footer nav a:hover {
  color: var(--text);
  text-shadow: none;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vw, 96px) 0 clamp(96px, 14vw, 180px);
}

.hero__copy {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.6vw, 4.8rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.02em;
  max-width: 12em;
  text-wrap: balance;
}

.lead {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 34rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sky svg {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateZ(0); /* translateZ: Safari only promotes SVG to the GPU with a 3D hint */
  width: 100%;
  max-width: 1600px;
  height: auto;
  overflow: visible;
  backface-visibility: hidden;
  will-change: transform; /* its own layer, so the curtain sliding over it never repaints it */
}

/* The line is drawn once, with its glow, and never repainted. A curtain the colour of the page
   slides off it on a transform, so the reveal runs on the compositor on every browser. */
.sky__curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -96px;
  right: -1px;
  background: linear-gradient(to right, transparent 0, var(--night) 96px);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  animation: reveal var(--dur-reveal) var(--ease-decelerate) 120ms both;
}

@keyframes reveal {
  to {
    transform: translateX(calc(100% + 96px)) translateZ(0);
  }
}

.trailbox {
  position: relative;
}

/* The glider sits at the head of the trail. The box shares the trail's geometry (same width and
   aspect as the SVG viewBox) so percentage offsets land on the same spot at every screen size. */
.glider-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-inline: auto; /* no transform here: the canvas's screen blend needs the page as its backdrop */
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 1440 / 640;
  pointer-events: none;
}

.glider {
  position: absolute;
  left: 76.4%;
  top: 24.8%;
  width: 20.8%;
  height: auto;
  display: block;
}

.glider--still[hidden] {
  display: none;
}

/* The live plane. Black background blended with screen reads as transparent on the page. */
.glider-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
}

/* Once the live scene is up, the SVG trail, its curtain and the poster step aside. */
.hero.is-live .sky svg,
.hero.is-live .sky__curtain,
.hero.is-live .trail--mobile,
.hero.is-live .glider--still {
  display: none;
}

.glider-box--mobile .glider-canvas {
  left: 0;
  width: 100%;
  top: -40%;
  height: 150%; /* room above the band for the glow; little below so the wake stays clear of the headline */
}

.glider-box--mobile {
  inset: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
}

.glider-box--mobile .glider {
  left: 60.75%;
  top: 9.3%;
  width: 32.5%;
}


.trailbox,
.trail--mobile {
  display: none;
}

/* The trail: three static strokes on one path (core, halo, bloom). */
.trail__stroke {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Glow without filters: stacked strokes, widest and faintest first. Rasterizes in one cheap pass. */
.trail__glow4 {
  stroke-width: 36;
  opacity: 0.05;
}

.trail__glow3 {
  stroke-width: 20;
  opacity: 0.08;
}

.trail__glow25 {
  stroke-width: 12;
  opacity: 0.14;
}

.trail__glow2 {
  stroke-width: 7;
  opacity: 0.24;
}

.trail__glow1 {
  stroke-width: 3.5;
  opacity: 0.55;
}

.trail__core {
  stroke-width: 1.4;
}

/* ---------- buttons & links ---------- */

.button {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--neon);
  color: var(--neon);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.005em;
  box-shadow:
    0 0 10px color-mix(in oklab, var(--neon) 30%, transparent),
    inset 0 0 10px color-mix(in oklab, var(--neon) 8%, transparent);
  text-shadow: 0 0 6px color-mix(in oklab, var(--neon) 45%, transparent);
  transition: color var(--dur-micro) var(--ease-decelerate), border-color var(--dur-micro) var(--ease-decelerate), box-shadow var(--dur-micro) var(--ease-decelerate), text-shadow var(--dur-micro) var(--ease-decelerate);
}

.button:hover {
  color: var(--neon-hot);
  border-color: var(--neon-hot);
  box-shadow:
    0 0 2px var(--neon-hot),
    0 0 14px color-mix(in oklab, var(--neon) 60%, transparent),
    0 0 36px color-mix(in oklab, var(--neon-deep) 40%, transparent),
    inset 0 0 14px color-mix(in oklab, var(--neon) 16%, transparent);
  text-shadow:
    0 0 2px #fff,
    0 0 10px var(--neon);
}

.button:focus-visible {
  outline-color: var(--neon);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--neon) 22%, transparent);
}

.link {
  color: var(--text);
  text-decoration-color: var(--hairline-strong);
}

.link:hover {
  color: var(--argon-hot);
}

/* ---------- sections ---------- */

.section {
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--hairline);
}

.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.section h2 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-stretch: 118%;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 1.1rem 0 1.25rem;
}

.section__intro p {
  color: var(--text-2);
}

.section__intro p + p {
  margin-top: 0.25rem;
}

/* A short lit tube above each section heading. Its colour says which half of the company you're in. */
.tube {
  display: block;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: var(--tube-hot);
  box-shadow:
    0 0 2px var(--tube-hot),
    0 0 8px var(--tube),
    0 0 22px color-mix(in oklab, var(--tube-deep) 70%, transparent);
}

.tube--neon {
  --tube: var(--neon);
  --tube-hot: var(--neon-hot);
  --tube-deep: var(--neon-deep);
}

.tube--argon {
  --tube: var(--argon);
  --tube-hot: var(--argon-hot);
  --tube-deep: var(--argon-deep);
}

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

.services li {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--hairline);
}

.services h3,
.status h3 {
  font-size: 1.05rem;
  font-stretch: 110%;
  line-height: 1.4;
}

.services p,
.status p {
  color: var(--text-2);
  max-width: 48ch;
}

.status {
  padding-top: 1.35rem;
  border-top: 1px solid var(--hairline);
}

.status h3 {
  margin-bottom: 0.6rem;
}

/* ---------- inner pages ---------- */

.page {
  padding: clamp(32px, 6vw, 72px) 0 var(--section-pad);
}

.page h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-stretch: 120%;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 1.1rem 0 1.5rem;
  max-width: 16ch;
}

.page h2 {
  font-size: 1.35rem;
  font-stretch: 112%;
  letter-spacing: -0.005em;
  margin: 2.5rem 0 0.6rem;
}

.page .meta {
  color: var(--text-2);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.page p {
  color: var(--text);
}

.page .prose {
  max-width: 62ch;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: clamp(40px, 6vw, 64px) 0 clamp(32px, 5vw, 48px);
  font-size: 0.95rem;
  color: var(--text-2);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}

.site-footer p {
  margin-top: 1rem;
  max-width: 30ch;
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.site-footer .copyright {
  margin-top: 0.75rem;
}

/* ---------- responsive ---------- */

@media (max-width: 800px) {
  .section__grid,
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .services li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .site-footer nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
  }
}

@media (max-width: 720px) {
  .hero {
    padding-bottom: clamp(64px, 12vw, 96px);
  }

  .sky {
    display: none;
  }

  .hero__copy {
    z-index: auto; /* no stacking context on phones, so the plane's screen blend sees the page */
  }

  .trailbox {
    display: block;
    width: calc(100% + 2 * var(--gutter));
    aspect-ratio: 400 / 140; /* keeps its height when the live scene hides the SVG */
    margin: 0 0 1.5rem calc(-1 * var(--gutter));
  }

  .trail--mobile {
    display: block;
    width: 100%;
    height: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }

  .site-nav a {
    font-size: 0.9rem;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .sky__curtain {
    animation: none;
    display: none;
  }

  .sky svg,
  .trail--mobile,
  .glider--still {
    animation: dissolve var(--dur-large) var(--ease-decelerate) both;
  }


  a,
  .button {
    transition: none;
  }
}

@keyframes dissolve {
  from {
    opacity: 0;
  }
}