:root {
  /* Color */
  --bg:          #000000;            /* main page background */
  --bg-alt:      #0D1117;            /* elevated panels / alternating sections */
  --text:        #FFFFFF;            /* primary text */
  --text-muted:  #A1A1AA;            /* secondary text, descriptions */
  --text-faint:  #6B7280;            /* captions, sources, footnotes */
  --accent:      #1DD3A0;            /* emerald — the ONLY accent color */
  --accent-dim:  #17B98B;            /* accent hover/pressed */
  --border:      rgba(255,255,255,0.55); /* thin card / divider strokes */

  /* Type */
  --font-mono: "JetBrains Mono", "Space Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Shape & rhythm */
  --radius:   12px;
  --border-w: 1px;
  --maxw:     1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .eyebrow, .wordmark {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; margin: 0 0 0.5em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1;  margin: 0 0 0.5em; }
h3 { font-size: 1.125rem; margin: 0 0 0.5em; }

.eyebrow {
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 0.4em;
}

.hl { color: var(--accent); font-weight: 600; }

p { color: var(--text-muted); margin: 0 0 1em; }
p strong, .text { color: var(--text); }

.stat {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 1;
  color: var(--text);
}

.source { color: var(--text-faint); font-size: 0.8125rem; }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.section   { padding: clamp(3rem, 8vw, 6rem) 0; }
.section--alt { background: var(--bg-alt); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
/* for splits whose two sides differ in height, so the shorter one doesn't float */
.split--top { align-items: start; }

/* ---------- Nav ---------- */
/* Sticky so the section links and the CTA survive the scroll. The bar is opaque
   rather than translucent because it passes over both --bg and --bg-alt sections,
   and a blur alone would let the alt panels tint the wordmark. */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: var(--border-w) solid rgba(255,255,255,0.12);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
}
/* The bar overlaps whatever it lands on, so anchor targets need to clear it. */
section[id], header[id] { scroll-margin-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.nav__links > a:not(.btn) {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.nav__links > a:not(.btn):hover { color: var(--text); }
/* The nav CTA sits in a 1.5rem-tall bar, so it runs tighter than the hero button. */
.btn--sm { font-size: 0.8125rem; padding: 0.5em 1em; }

/* Below this the three section links plus the CTA stop fitting on one line. The
   CTA is the load-bearing half, so the links drop and wordmark plus CTA remain. */
@media (max-width: 560px) { .nav__links > a:not(.btn) { display: none; } }

.wordmark {
  font-size: 1.125rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0;
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(2rem, 6vw, 4rem); }
/* the CTA button carries the next step from inside the hero, so it doesn't need
   a full section's worth of air under it */
.hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.hero p.lead { font-size: 1.1875rem; max-width: 38ch; }

/* Monospace runs about 15% wider per character than the sans, so a headline that
   would be three lines in sans becomes a five line wall here. Holding the hero
   h1 below the global scale keeps it a headline and lets the product loop, not
   the type, be the focal point of the first screen. */
.hero h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); }

/* Looping product capture. Frames are black-backed like the page, so it needs
   no frame of its own — the metric cards inside carry the only strokes. */
.hero__demo {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
}
/* Two compositions of the same loop. The wide one is scaled 1.4x for a half
   width column; below the split it would shrink the metric type to a few
   pixels, so the unscaled phone composition takes over. */
.hero__demo--narrow { display: none; }
@media (max-width: 760px) {
  .hero__demo--wide { display: none; }
  .hero__demo--narrow { display: block; max-width: 340px; margin: 0.5rem 0 0; }
}

/* ---------- Logo banderole ---------- */
.logo-band { padding: clamp(2.5rem, 6vw, 4rem) 0; }

/* Aligned to the container's left edge like every other section label, but faint
   mono instead of an emerald eyebrow — a row of logos shouldn't carry the same
   weight as a section heading. */
.logo-band__caption {
  margin: 0 0 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.marquee {
  --gap: clamp(2.5rem, 6vw, 5rem);
  --speed: 46s;
  overflow: hidden;
  /* fade both edges so marks drift in and out instead of being cut off mid-glyph */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* Two identical groups ride the track. Shifting it by exactly one group plus one
   gap puts the copy where the original started, so the loop has no visible seam. */
.marquee__track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: marquee var(--speed) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

@keyframes marquee {
  from { transform: translateX(0); }
  /* half the track is one group plus half a gap, so take the other half off too */
  to   { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

.marquee__logo {
  display: block;
  height: var(--h, 26px);
  width: auto;
  opacity: 0.62;
  /* flatten each mark to one white silhouette, per the white-on-dark rule */
  filter: brightness(0) invert(1);
  transition: opacity .2s ease;
}
.marquee__logo:hover { opacity: 1; }

/* The two-tone marks ship as prepared white variants; the flattening filter would
   collapse their plate and knockout into a single solid shape. */
.marquee__logo--asis { filter: none; }

/* Optical sizing: a square badge needs less height than a wide wordmark to read
   as the same visual weight. */
.logo--epfl       { --h: 27px; }
.logo--eth        { --h: 17px; }
/* dlab is a solid filled badge, so it carries more weight than a thin wordmark
   at the same height and needs to sit smaller. */
.logo--dlab       { --h: 34px; }
.logo--asl        { --h: 34px; }
.logo--founderful { --h: 19px; }
.logo--mikasa     { --h: 30px; }
.logo--liip       { --h: 24px; }

@media (prefers-reduced-motion: reduce) {
  /* no drift: show one static, centered, wrapping row */
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: auto; }
  .marquee__group { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 2rem; }
  .marquee__group--dup { display: none; }
}

/* ---------- Cards ---------- */
.card {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: transparent;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (max-width: 760px) { .card-grid { grid-template-columns: 1fr; } }

.icon-chip {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-w) solid var(--border);
  border-radius: 10px;
  margin-bottom: 1rem;
}
svg.icon { width: 22px; height: 22px; stroke: var(--text); stroke-width: 1.75; fill: none; }

/* ---------- Team ---------- */
/* At the container's full width two cards run about 540px each, which leaves a
   name and a one-word role floating in a lot of empty card. Capping the grid
   keeps them portrait-shaped and turns the leftover width into the same negative
   space the rest of the page runs on. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 680px;
  /* Auto side margins so the capped grid sits centered in the container instead of
     hugging the left edge, which leaves the leftover width split evenly. */
  margin: 2.5rem auto 0;
}
/* Side by side down to the point where a 120px portrait plus card padding stops
   fitting two across, rather than at the global 760px card breakpoint. */
@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr; max-width: 320px; }
}

.team-card { text-align: center; }

/* People photos are the one exception to the white-line-art-only rule, so they
   stay inside a card and get flattened to grayscale. In color, one warm brown
   studio backdrop and one cool gray office would be the loudest hues on the page
   and would pull rank on the emerald. */
.team-card__photo {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  object-fit: cover;
  border: var(--border-w) solid var(--border);
  filter: grayscale(1) brightness(0.95) contrast(1.05);
}

.team-card h3 { margin-bottom: 0.25rem; }

/* Set like an eyebrow rather than body copy, but faint instead of emerald — the
   accent above the heading is the only one this section gets. */
.team-card__role {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin: 0;
}

.team-card__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

/* Pills at the card's full --border weight would put three bright strokes under
   every portrait and outshout the card that holds them, so they take the faint
   gray the line illustrations already use for anything meant to recede. */
.badge {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--text-muted);
  border: var(--border-w) solid var(--text-faint);
  border-radius: 999px;
  padding: 0.25em 0.7em;
  white-space: nowrap;
}

/* ---------- Line illustrations ---------- */
/* Single weight white outline, no fill, per the brand's illustration language. */
.line-art {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* a threshold rather than a drawn object, so it recedes */
.line-art__rule { stroke: var(--text-faint); stroke-dasharray: 5 7; stroke-width: 1.25; }
.line-art__label {
  stroke: none;
  fill: var(--text-muted);
  font: 700 11px var(--font-mono);
  letter-spacing: 0.02em;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.7em 1.4em;
  border-radius: var(--radius);
  border: var(--border-w) solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--accent); color: #000; }
.btn--primary:hover { background: var(--accent-dim); }

/* Outline rather than a second filled color: the emerald fill is what marks the
   one real next step on a screen, so a nav CTA that repeats it would compete with
   the hero button sitting right below it. */
.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); }
/* the hero CTA is a link, not a submit control */
a.btn { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- Waitlist form ---------- */
.waitlist {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  max-width: 480px;
  flex-wrap: wrap;
}
/* One field look, shared by the inline waitlist row and the contact page's
   stacked form. Layout differences stay with each component. */
.waitlist input[type="email"],
.field input,
.field textarea {
  background: var(--bg-alt);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.7em 1em;
}
.waitlist input[type="email"]::placeholder,
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.waitlist input[type="email"]:focus,
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.waitlist input[type="email"] { flex: 1 1 220px; }
.waitlist .btn { flex: 0 0 auto; }
.form-note { color: var(--text-faint); font-size: 0.8125rem; margin-top: 0.75rem; }
.form-success {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-top: 1.25rem;
}
[hidden] { display: none !important; }

/* ---------- Contact page ---------- */
.contact-form { display: grid; gap: 1.25rem; max-width: 560px; }
.field { display: grid; gap: 0.4rem; }
.field > label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.field .optional { color: var(--text-faint); font-weight: 500; }
.field input, .field textarea { width: 100%; }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.contact-form .btn { justify-self: start; }

/* The newsletter closes the contact page as the lighter-weight alternative to
   writing in, so it reads as a footnote rather than a second pitch. */
.newsletter-foot h2 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); }

.back-link {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-faint);
  text-decoration: none;
}
.back-link:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.footer { border-top: var(--border-w) solid var(--border); }
.footer .wordmark { display: inline-block; margin-bottom: 0.5rem; }

/* Identity left, ways to reach us right — baseline-aligned to the copyright line
   rather than centered, so the two halves read as one row. */
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.footer__links a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-faint);
  text-decoration: none;
  transition: color .15s ease;
}
.footer__links a:hover { color: var(--accent); }