/*
  OriginAI design system.
  Written for non-technical visitors: calm light pages, plain words, one obvious action per view.
  Every gap, padding and margin comes from the spacing scale below. Sections are separated by
  space and soft background changes, never by lines. Boxes (cards) are used only to group
  things a visitor compares or acts on, and are never nested inside other boxes.
*/

/* Two typefaces: Bricolage Grotesque for headings and buttons, Inter for reading. Both load from
   Google Fonts. Sora and Figtree are self-hosted and only take over when Google Fonts can't be reached
   (offline, for example). */
@font-face {
  font-family: "Sora";
  src: url("../assets/fonts/sora-latin-var.woff") format("woff");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree-latin-var.woff") format("woff");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Spacing scale */
  --s1: 0.25rem;  /* 4 */
  --s2: 0.5rem;   /* 8 */
  --s3: 0.75rem;  /* 12 */
  --s4: 1rem;     /* 16 */
  --s5: 1.5rem;   /* 24 */
  --s6: 2rem;     /* 32 */
  --s7: 3rem;     /* 48 */
  --s8: 4rem;     /* 64 */
  --s9: 6rem;     /* 96 */

  --gutter: clamp(var(--s4), 4vw, var(--s7));
  --section-y: clamp(var(--s8), 7vw, var(--s9));
  --gap: var(--s5);
  --container: 72rem;
  --header-h: 5rem;

  /* Type: modest sizes, caps condensed titles for page headings */
  --font: "Inter", "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
  --t-small: 0.875rem;
  --t-body: 1rem;
  --t-lead: 1.125rem;
  --t-h3: 1.125rem;
  --t-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  --t-h1: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);

  /* Shape */
  --r-lg: 1.25rem;
  --r-md: 0.875rem;
  --r-sm: 0.625rem;
  --r-pill: 999px;

  /* Light theme. One purple, used only for accents (buttons, icons, links, selected outlines);
     every surface behind them is a neutral grey, so the page never shows several shades of purple. */
  --paper: #fcfcfd;
  --tint: #f4f4f6;
  --sheet: #ffffff;
  --ink: #1c1720;
  --ink-2: #504d57;
  --ink-3: #6a6772;
  --rule: #e7e6eb;
  --rule-strong: #cdccd4;
  --plum: #74407f;
  --plum-strong: #5d3066;
  --plum-wash: #f4f4f6;
  --on-plum: #ffffff;
  --signal: #c4243b;
  --signal-wash: #fbe9ec;
  --clear: #17705f;
  --clear-wash: #e5f4f0;
  --focus: #74407f;
  --shadow: 0 1px 2px rgb(43 29 49 / 5%), 0 8px 24px rgb(43 29 49 / 6%);

  /* Video surfaces stay dark in both themes: they show footage */
  --screen: #141218;
  --screen-2: #1d1a22;
  --screen-rule: #302c37;
  --screen-ink: #efecf3;
  --screen-ink-2: #b2adbc;
  --screen-accent: #d7a6e5;
  --screen-signal: #ff5368;

  /* Read by the neuron canvas */
  --accent: #74407f;
  --accent-bright: #8d4e9b;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html[data-resolved-theme="dark"] {
  color-scheme: dark;
  --paper: #111013;
  --tint: #18171b;
  --sheet: #1c1b1f;
  --ink: #f7f3f8;
  --ink-2: #cbc3ce;
  --ink-3: #a39aa6;
  --rule: #2c2930;
  --rule-strong: #3d3942;
  --plum: #d7a6e5;
  --plum-strong: #e8c1f1;
  --plum-wash: #222125;
  --on-plum: #1a1020;
  --signal: #ff5c70;
  --signal-wash: #3a1a20;
  --clear: #4cc7ae;
  --clear-wash: #12302a;
  --focus: #d7a6e5;
  --shadow: none;
  --screen: #0a090c;
  --screen-2: #161419;
  --screen-rule: #2c2832;
  --accent: #d7a6e5;
  --accent-bright: #e8c1f1;
}

[data-surface="screen"] {
  color: var(--screen-ink);
  background: var(--screen);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s4));
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  letter-spacing: 0.003em;
  word-spacing: 0.05em;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

/* Page titles: caps so they stand out */
h1,
h2,
h3 {
  font-family: var(--font-display);
}

h1 {
  font-size: var(--t-h1);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-transform: uppercase;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-wrap: balance;
}

h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

p,
li {
  text-wrap: pretty;
}

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

img {
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

button:not(:disabled) {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

[data-surface="screen"] :focus-visible {
  outline-color: var(--screen-accent);
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--s2);
  left: var(--s2);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-sm);
  color: var(--on-plum);
  background: var(--plum);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.lucide {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  stroke-width: 1.75;
}

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

.section {
  padding-block: var(--section-y);
}

/* Section headings, as in the original layout: title on the left, description on the right.
   A short plum bar marks where each section starts, instead of a line across the page. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s4) var(--s8);
  align-items: end;
  margin-bottom: var(--s7);
}

.section-head h2,
.cols > div > h2:first-child {
  position: relative;
  padding-left: var(--s5);
}

.section-head h2::before,
.cols > div > h2:first-child::before {
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  left: 0;
  width: 4px;
  border-radius: var(--r-pill);
  background: var(--plum);
  content: "";
}

.section-head p,
.lead {
  color: var(--ink-2);
  font-size: var(--t-lead);
  line-height: 1.6;
}

.section-head p {
  max-width: 34rem;
}

@media (max-width: 48rem) {
  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.muted {
  color: var(--ink-3);
}

.small {
  font-size: var(--t-small);
}

.split-gap {
  margin-top: var(--s7);
}

/* Buttons and links */
.btn {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}

.btn--primary {
  color: var(--on-plum);
  background: var(--plum);
}

.btn--primary:hover {
  background: var(--plum-strong);
}

.btn--quiet {
  border-color: var(--rule-strong);
  color: var(--ink);
  background: var(--sheet);
}

.btn--quiet:hover {
  border-color: var(--ink-3);
}

.btn .lucide {
  transition: transform 160ms var(--ease);
}

.btn:hover .lucide {
  transform: scale(1.1);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  color: var(--plum);
  font-weight: 620;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.text-link:hover {
  color: var(--plum-strong);
  text-decoration-thickness: 2px;
}

/* Header: taller, translucent, original underline hover */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header-h);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 100%;
  align-items: center;
  gap: var(--s5);
}

.brand {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 2.75rem;
}

.brand__dark,
html[data-resolved-theme="dark"] .brand__light {
  display: none;
}

html[data-resolved-theme="dark"] .brand__dark {
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.site-nav a {
  position: relative;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding: 0 var(--s3);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
  transition: color 160ms var(--ease);
}

.site-nav a::after {
  position: absolute;
  right: var(--s3);
  bottom: var(--s1);
  left: var(--s3);
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--plum);
  content: "";
  transform: scaleX(0);
  transition: transform 180ms var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: var(--s3);
}

.header-actions .btn {
  min-height: 2.75rem;
}

.icon-btn {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: var(--sheet);
}

.icon-btn:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}

.theme-toggle .icon-moon,
html[data-resolved-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

html[data-resolved-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

.menu-btn {
  display: none;
}

.mobile-menu {
  position: fixed;
  z-index: 49;
  inset: var(--header-h) 0 auto;
  display: grid;
  gap: var(--s1);
  padding: var(--s4) var(--gutter) var(--s5);
  background: var(--paper);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 12%);
}

.mobile-menu a {
  padding: var(--s3) 0;
  font-size: 1.0625rem;
  font-weight: 580;
  text-decoration: none;
}

.mobile-menu a[aria-current="page"] {
  color: var(--plum);
}

.mobile-menu .btn {
  margin-top: var(--s3);
  color: var(--on-plum);
}

@media (max-width: 62rem) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .site-nav,
  .header-actions .btn {
    display: none;
  }

  .menu-btn {
    display: inline-grid;
  }
}

@media (min-width: 62.001rem) {
  .mobile-menu {
    display: none !important;
  }
}

/* Footer */
.site-footer {
  padding-block: var(--s5) var(--s8);
  color: var(--ink-2);
  font-size: var(--t-small);
}

/* Footer: logo and a short line on the left, links on the right, on the page background */
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--s7) var(--s8);
}

.site-footer__about {
  display: grid;
  align-content: start;
  gap: var(--s3);
  max-width: 22rem;
}

.site-footer__about img {
  width: auto;
  height: 2.75rem;
  margin-bottom: var(--s2);
}

.site-footer__copyright {
  color: var(--ink-3);
}

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
}

.site-footer__links h2 {
  margin-bottom: var(--s3);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.4;
}

.site-footer ul {
  display: grid;
  gap: var(--s2);
  padding: 0;
  list-style: none;
}

.site-footer a {
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--ink);
  text-decoration: underline;
}

@media (max-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Cursor ring */
.cursor-halo {
  --x: -4rem;
  --y: -4rem;
  --scale: 1;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--accent-bright);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--x), var(--y), 0) translate(-50%, -50%) scale(var(--scale));
  transition: opacity 160ms ease;
}

.cursor-halo.is-visible {
  opacity: 0.75;
}

.cursor-halo.is-interactive {
  --scale: 0.7;
}

.cursor-halo.is-pressed {
  --scale: 0.55;
}

/* Neuron canvas: dots that drift and gather toward the pointer.
   .dots-area holds one canvas behind several sections, so the dots flow across all of them. */
.dots-area {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.dots-area > :not(.neurons) {
  position: relative;
  z-index: 1;
}

/* The dots layer sits before <main>, which would swallow the hero's pull-up under the header
   (two negative margins collapse to the larger one). Keep main's own margins inside it. */
.dots-area > main {
  display: flow-root;
}

.neurons {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The tall version: one screen-sized canvas that stays in view while you scroll through the area,
   showing the part of the dot field that is on screen. */
.neurons.neurons--window {
  position: sticky;
  inset: 0 auto auto 0;
  display: block;
  height: 100vh;
  margin-bottom: -100vh;
}

/* Cards: one style, used to group things a visitor compares or acts on */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding: 0;
  list-style: none;
}

.card-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s6);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--sheet);
  box-shadow: var(--shadow);
}

.card p,
.card li {
  color: var(--ink-2);
}

.card__icon {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  margin-bottom: var(--s2);
  border-radius: var(--r-sm);
  color: var(--plum);
  background: var(--plum-wash);
}

.card__icon .lucide {
  width: 1.375rem;
  height: 1.375rem;
}

.card__num {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  margin-bottom: var(--s2);
  border-radius: 50%;
  color: var(--on-plum);
  background: var(--plum);
  font-weight: 700;
}

.card .text-link {
  margin-top: auto;
  padding-top: var(--s2);
}

@media (max-width: 62rem) {
  .card-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .card-grid,
  .card-grid--2,
  .card-grid--4 {
    grid-template-columns: 1fr;
  }

  .card {
    padding: var(--s5);
  }
}

/* Two columns of text, no boxes */
.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s7) var(--s8);
  align-items: center;
}

.cols > * {
  display: grid;
  align-content: start;
  gap: var(--s4);
}

@media (max-width: 48rem) {
  .cols {
    grid-template-columns: 1fr;
  }
}

/* Plain list with check icons */
.ticks {
  display: grid;
  gap: var(--s3);
  padding: 0;
  list-style: none;
}

.ticks li {
  display: flex;
  gap: var(--s3);
  color: var(--ink-2);
}

.ticks .lucide {
  margin-top: 0.2em;
  color: var(--plum);
}

/* Callout */
.note {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  color: var(--ink-2);
  background: var(--plum-wash);
}

.note .lucide {
  margin-top: 0.2em;
  color: var(--plum);
}

/* Closing call to action: one panel in two parts.
   A tinted side holds an icon and the question; the plain side holds the answer and the buttons. */
.cta {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--sheet);
}

.cta__head {
  position: relative;
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: var(--s7);
  overflow: hidden;
  padding: clamp(var(--s6), 4vw, var(--s7));
  background:
    radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--sheet) 55%, transparent), transparent 70%),
    var(--plum-wash);
  isolation: isolate;
}

/* The same dashed ring as the page headers, tucked into the corner */
.cta__head::after {
  position: absolute;
  z-index: -1;
  right: -6rem;
  bottom: -8rem;
  width: 18rem;
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--plum) 32%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3.5rem color-mix(in srgb, var(--sheet) 22%, transparent);
  content: "";
}

.cta__icon {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--on-plum);
  background: var(--plum);
}

.cta__icon .lucide {
  width: 1.5rem;
  height: 1.5rem;
}

.cta h2 {
  max-width: 14ch;
}

.cta__body {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s5);
  padding: clamp(var(--s6), 4vw, var(--s7));
}

.cta__body p {
  max-width: 32rem;
  color: var(--ink-2);
  font-size: var(--t-lead);
}

@media (max-width: 48rem) {
  .cta {
    grid-template-columns: 1fr;
  }

  .cta__head {
    gap: var(--s5);
  }
}

/* Header panel at the top of every inner page: title left, description right, dots behind */
.page-hero {
  padding-block: var(--s6) 0;
}

.page-hero__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--s6) var(--s8);
  min-height: 17rem;
  overflow: hidden;
  padding: clamp(var(--s6), 5vw, var(--s8));
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background:
    radial-gradient(55% 110% at 100% 0%, var(--plum-wash), transparent 70%),
    radial-gradient(45% 90% at 0% 100%, color-mix(in srgb, var(--plum) 6%, transparent), transparent 70%),
    var(--sheet);
  isolation: isolate;
}

.page-hero__ring {
  position: absolute;
  z-index: 0;
  top: -9rem;
  right: -7rem;
  width: 24rem;
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--plum) 30%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.page-hero__ring::after {
  position: absolute;
  inset: 22%;
  border: 1px solid color-mix(in srgb, var(--plum) 20%, transparent);
  border-radius: 50%;
  content: "";
}

.page-hero__title,
.page-hero__body {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.page-hero__body a,
.page-hero__body button {
  pointer-events: auto;
}

.page-hero__body {
  display: grid;
  justify-items: start;
  gap: var(--s4);
}

.page-hero h1 {
  max-width: 14ch;
}

.page-hero .lead {
  max-width: 34rem;
}

.page-hero + .section,
.page-hero + .container {
  padding-top: var(--s7);
}

@media (max-width: 48rem) {
  .page-hero__panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

/* Gentle entrance for content blocks marked data-reveal */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 600ms var(--ease), transform 700ms var(--ease);
}

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

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

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}