:root {
  --bg: #000;
  --glow: #4af1f2;
  --glow-soft: rgba(74, 241, 242, .55);
  --ink: #c9fbfb;
  --dim: rgba(74, 241, 242, .62);
  --red: #ff2a6d;
  --blue: #2a6dff;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  display: grid;
  place-items: center;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px dashed var(--glow); outline-offset: 6px; }

.stage {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  padding: 48px 16px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The caret */
.mark {
  position: relative;
  width: clamp(96px, 22vw, 176px);
  aspect-ratio: 17 / 16;
  color: var(--glow);
  animation: flicker 7s infinite steps(1);
}
.mark .layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mark .base {
  filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 14px var(--glow-soft)) drop-shadow(0 0 42px rgba(74, 241, 242, .3));
}
.mark .r, .mark .b {
  mix-blend-mode: screen;
  opacity: 0;
}
.mark .r { color: var(--red); }
.mark .b { color: var(--blue); }
.mark.glitching .r, .mark.glitching .b { opacity: .85; }
.mark.glitching .r { transform: translate(var(--rx, 0), var(--ry, 0)); clip-path: var(--rclip, none); }
.mark.glitching .b { transform: translate(var(--bx, 0), var(--by, 0)); clip-path: var(--bclip, none); }
.mark.glitching .base { transform: translateX(var(--sx, 0)); clip-path: var(--sclip, none); }

@keyframes flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: .82; }
  41.6% { opacity: 1; }
  77% { opacity: .9; }
  77.4% { opacity: .55; }
  77.8% { opacity: 1; }
}

/* The wordmark */
.word {
  margin: 34px 0 0;
  font-size: clamp(.8rem, 2.6vw, 1rem);
  font-weight: 500;
  letter-spacing: .62em;
  padding-left: .62em;
  color: var(--ink);
  text-shadow: 0 0 8px var(--glow-soft);
  white-space: nowrap;
}
.cursor {
  display: inline-block;
  width: .62em;
  height: 1.05em;
  margin-left: -.3em;
  vertical-align: -.18em;
  background: var(--glow);
  box-shadow: 0 0 10px var(--glow);
  animation: blink 1.06s infinite steps(1);
}
@keyframes blink { 50% { opacity: 0; } }

/* Mission line under the wordmark */
.mission {
  margin: 22px 0 0;
  max-width: 36em;
  font-size: clamp(.66rem, 1.9vw, .78rem);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .2em;
  padding-left: .2em;
  text-align: center;
  text-wrap: balance;
  color: var(--dim);
}

/* The hierarchy */
.tree {
  position: relative;
  width: 100%;
  margin-top: clamp(64px, 12vh, 112px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.leaves {
  width: 100%;
  margin-top: clamp(88px, 14vh, 128px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  text-align: center;
}
.label {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  font-size: clamp(.82rem, 2.4vw, 1.02rem);
  letter-spacing: .32em;
  padding-right: calc(14px - .32em);
  color: var(--ink);
  border: 1px solid rgba(74, 241, 242, .28);
  background: rgba(0, 0, 0, .78);
  text-shadow: 0 0 6px var(--glow-soft);
  transition: color .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
}
.label::before, .label::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-color: var(--glow);
  border-style: solid;
}
.label::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.label::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.label:hover, .label:focus-visible {
  color: #fff;
  border-color: var(--glow);
  box-shadow: 0 0 18px rgba(74, 241, 242, .35), inset 0 0 14px rgba(74, 241, 242, .12);
}
.links {
  display: flex;
  gap: 16px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: lowercase;
}
.links a {
  color: var(--dim);
  transition: color .15s, text-shadow .15s;
}
.links a::before { content: "["; opacity: .6; }
.links a::after { content: "]"; opacity: .6; }
.links a:hover, .links a:focus-visible { color: var(--glow); text-shadow: 0 0 8px var(--glow); }

/* Discreet link under the tree */
.aside { margin-top: clamp(64px, 11vh, 104px); font-size: .66rem; }
.aside a { color: rgba(74, 241, 242, .4); }

/* Full-screen layers */
.crt {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, .72) 100%);
}
.crt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22vh;
  top: -22vh;
  background: linear-gradient(to bottom, transparent, rgba(74, 241, 242, .035), transparent);
  animation: roll 9s linear infinite;
}
@keyframes roll { to { transform: translateY(144vh); } }

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .035;
  image-rendering: pixelated;
}

.tear {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 4;
  height: 0;
  pointer-events: none;
  background: rgba(74, 241, 242, .14);
  box-shadow: 0 -1px 0 rgba(255, 42, 109, .5), 0 1px 0 rgba(42, 109, 255, .5);
  opacity: 0;
}
.tear.on { opacity: 1; }
.stage.shake { transform: translateX(var(--shake, 0)) skewX(var(--skew, 0)); filter: hue-rotate(var(--hue, 0)); }

/* Boot sequence (only when the script runs) */
.js .mark { transform: scaleY(.01); opacity: 0; }
.js .word, .js .mission, .js .tree .node, .js .aside { opacity: 0; }
.js.booted .mark { animation: power 1.1s cubic-bezier(.2, .9, .2, 1) forwards, flicker 7s 1.1s infinite steps(1); }
.js.booted .word { animation: fade .01s .9s forwards; }
.js.booted .mission { animation: fade .01s 1.2s forwards; }
.js.booted .node.root { animation: fade .01s 1.5s forwards; }
.js.booted .leaves .node { animation: fade .01s 2.3s forwards; }
.js.booted .aside { animation: fade .01s 3.2s forwards; }
@keyframes power {
  0% { transform: scaleY(.01) scaleX(1.6); opacity: 0; filter: brightness(4); }
  12% { opacity: 1; }
  30% { transform: scaleY(.01) scaleX(1); filter: brightness(3); }
  62% { transform: scaleY(1.06); filter: brightness(1.6); }
  70% { opacity: .4; }
  74% { opacity: 1; }
  100% { transform: none; opacity: 1; filter: none; }
}
@keyframes fade { to { opacity: 1; } }

@media (max-width: 480px) {
  .word { letter-spacing: .42em; padding-left: .42em; }
  .mission { letter-spacing: .12em; padding-left: .12em; }
  .label { letter-spacing: .22em; padding-right: calc(14px - .22em); }
  .links { gap: 10px; font-size: .68rem; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .mark, .js .word, .js .mission, .js .tree .node, .js .aside { transform: none; opacity: 1; }
  .grain { display: none; }
}

/* Plain text page (email preferences) */
.note {
  width: min(560px, 100%);
  margin-top: 40px;
  font-size: .85rem;
  line-height: 1.75;
  color: rgba(201, 251, 251, .78);
}
.note h2 {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .32em;
  color: var(--ink);
  margin: 0 0 18px;
}
.note a { color: var(--glow); border-bottom: 1px dotted var(--dim); }

/* Document pages (work history) */
body.doc-page { display: block; }
.doc-page .crt {
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .4) 100%);
}
.doc {
  position: relative;
  z-index: 1;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 56px 16px 88px;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(201, 251, 251, .8);
}
.doc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.doc-head .mark { width: 72px; display: block; }
.doc-head .word { margin-top: 26px; white-space: normal; }
.doc-head .tagline {
  margin: 18px 0 0;
  font-size: .76rem;
  letter-spacing: .2em;
  color: var(--dim);
}
.doc-head .links, .toc { margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.toc { display: flex; gap: 8px 18px; margin-top: 40px; font-size: .72rem; letter-spacing: .18em; }
.toc a { color: var(--dim); }
.toc a::before { content: "/"; opacity: .5; margin-right: 4px; }
.toc a:hover, .toc a:focus-visible { color: var(--glow); text-shadow: 0 0 8px var(--glow); }

.doc section { margin-top: 72px; scroll-margin-top: 24px; }
.doc h2 {
  position: relative;
  display: inline-block;
  margin: 0 0 26px;
  padding: 8px 12px;
  padding-right: calc(12px - .32em);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .32em;
  color: var(--ink);
  border: 1px solid rgba(74, 241, 242, .28);
  text-shadow: 0 0 6px var(--glow-soft);
}
.doc h2::before, .doc h2::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-color: var(--glow);
  border-style: solid;
}
.doc h2::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.doc h2::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.doc p { margin: 0; }
.doc p + p { margin-top: 12px; }
.doc :is(p, li) a:not(.links a) { color: var(--glow); border-bottom: 1px dotted var(--dim); }
.doc :is(p, li) a:not(.links a):hover { color: #fff; }

.entries { list-style: none; margin: 0; padding: 0; }
.entry {
  display: grid;
  grid-template-columns: 10ch 1fr;
  gap: 2px 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(74, 241, 242, .1);
}
.entry:first-child { border-top: 0; padding-top: 0; }
.when {
  padding-top: .1em;
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--dim);
  white-space: nowrap;
}
.entry h3 {
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}
.entry .at { font-size: .76rem; color: var(--dim); }
.entry p { margin-top: 6px; }
.entry .links { margin-top: 8px; flex-wrap: wrap; gap: 4px 14px; }
.entries.compact .entry { padding: 9px 0; }
.doc .note-line { margin: -8px 0 18px; font-size: .76rem; color: var(--dim); }
.entries.compact .entry h3 { font-size: .84rem; }

.doc-foot {
  margin-top: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--dim);
}
.doc-foot .mark { width: 28px; animation: none; }

@media (max-width: 560px) {
  .entry { grid-template-columns: 1fr; }
  .doc-head .word { letter-spacing: .42em; padding-left: .42em; }
}

@media print {
  html, body { background: #fff; color: #000; }
  .crt, .grain, .tear, .toc { display: none; }
  .doc { color: #000; padding-top: 0; }
  .doc h2, .entry h3, .doc-head .word { color: #000; text-shadow: none; }
  .doc :is(p, li) a, .links a, .when, .entry .at, .doc-head .tagline { color: #000; }
  .doc-head .mark { color: #000; }
  .doc-head .mark .base { filter: none; }
  .cursor { display: none; }
  .entry { break-inside: avoid; }
}

/* Contact forms (join, investors) */
.doc.narrow { width: min(640px, 100%); }
.doc.narrow section { margin-top: 72px; }
.contact { margin-top: 36px; display: grid; gap: 22px; }
.contact label { display: grid; gap: 8px; }
.contact label > span { font-size: .72rem; letter-spacing: .18em; text-transform: lowercase; color: var(--dim); }
.contact label em { font-style: normal; opacity: .6; }
.contact input, .contact textarea {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  background: rgba(0, 0, 0, .78);
  border: 1px solid rgba(74, 241, 242, .28);
  border-radius: 0;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.contact textarea { resize: vertical; min-height: 9em; line-height: 1.6; }
.contact input:focus, .contact textarea:focus {
  border-color: var(--glow);
  box-shadow: 0 0 18px rgba(74, 241, 242, .25), inset 0 0 12px rgba(74, 241, 242, .08);
}
.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact .actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.contact button {
  position: relative;
  padding: 10px 18px;
  padding-right: calc(18px - .32em);
  font: inherit;
  font-size: .82rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(0, 0, 0, .78);
  border: 1px solid rgba(74, 241, 242, .28);
  border-radius: 0;
  cursor: pointer;
  text-shadow: 0 0 6px var(--glow-soft);
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.contact button:hover, .contact button:focus-visible {
  color: #fff;
  border-color: var(--glow);
  box-shadow: 0 0 18px rgba(74, 241, 242, .35), inset 0 0 14px rgba(74, 241, 242, .12);
}
.contact button:disabled { opacity: .5; cursor: default; }
.contact .status { font-size: .76rem; letter-spacing: .08em; color: var(--dim); }
.contact .status.ok { color: var(--glow); text-shadow: 0 0 8px var(--glow-soft); }
.contact .status.err { color: var(--red); }
.contact.sent label, .contact.sent button { display: none; }

/* Cookie choice (Europe only) */
.consent {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 5;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 12px 16px;
  font-size: .72rem;
  line-height: 1.6;
  letter-spacing: .06em;
  color: rgba(201, 251, 251, .8);
  background: rgba(0, 0, 0, .92);
  border: 1px solid rgba(74, 241, 242, .28);
  box-shadow: 0 0 24px rgba(74, 241, 242, .12);
}
.consent p { margin: 0; }
.consent p a { color: var(--glow); border-bottom: 1px dotted var(--dim); }
.consent .links a { color: var(--glow); }
.doc-foot .links { font-size: .66rem; }
.doc-foot .links a { color: rgba(74, 241, 242, .4); }

/* OPH in 60 seconds */
.explained .scene { margin-top: 88px; }
.explained .doc-head + .scene { margin-top: 64px; }
.scene-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0 0 22px;
  background: #000;
  border: 1px solid rgba(74, 241, 242, .12);
}
.explained .scene p { font-size: .92rem; }
.explained .entry h3 a { color: var(--ink); border-bottom: 1px dotted var(--dim); }
.explained .entry h3 a:hover { color: #fff; }
.explained .scene p { position: relative; }
.why {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin: 0 .25em 0 .35em;
  padding: 0;
  font: inherit;
  font-size: .78em;
  line-height: 1;
  color: var(--glow);
  background: transparent;
  border: 1px solid var(--glow);
  border-radius: 50%;
  cursor: help;
  vertical-align: .1em;
  box-shadow: 0 0 10px rgba(74, 241, 242, .3);
}
.tip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 6;
  padding: 14px 16px;
  font-size: .78rem;
  line-height: 1.7;
  color: rgba(201, 251, 251, .9);
  background: rgba(0, 0, 0, .96);
  border: 1px solid rgba(74, 241, 242, .4);
  box-shadow: 0 0 28px rgba(74, 241, 242, .15);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s;
}
.tip strong { color: var(--ink); font-weight: 600; }
.tip .src { display: block; margin-top: 8px; font-size: .7rem; color: var(--dim); }
.why:hover + .tip, .why:focus-visible + .tip, .why:focus + .tip { opacity: 1; visibility: visible; }