/* ==========================================================================
   Zivia Labs — zivia.ai
   Design system
   --------------------------------------------------------------------------
   The palette encodes the company thesis: a "perception" accent (mint green)
   for everything downstream of neurology — Kael OS and the robotics — and a
   "cognition" accent (violet) for everything downstream of psychology.
   Colour is doing argumentative work here, so keep the mapping intact when
   adding sections.

   Amber, coral, sky and cyan are supporting hues. They belong to the emotion
   wheel and nothing else, and should not be used to label a product — that
   would blur the two-accent argument above.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* Surfaces: a deep indigo rather than near-black. Warmer and more inviting
     than a true black ground, while still letting bright accents sing. */
  --bg:            #101534;
  --bg-alt:        #161d44;
  --surface:       #1c2452;
  --surface-2:     #232c62;
  --line:          #333f7d;
  --line-soft:     #262f66;

  /* type */
  --text:          #f3f5ff;
  --text-2:        #bfc8ee;
  --text-3:        #8d99cc;

  /* Two semantic accents carry the thesis (see header note), and four
     supporting hues colour the illustrations and the emotion wheel. */
  --perception:    #57e6a1;   /* neurology · perception · action */
  --perception-dk: #2bc47f;
  --cognition:     #b48cff;   /* psychology · cognition · behaviour */
  --cognition-dk:  #8f5cff;

  --amber:         #ffc45c;
  --coral:         #ff7e93;
  --sky:           #74a6ff;
  --cyan:          #56d7f2;
  --warn:          var(--amber);

  /* typography */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* metrics */
  --wrap:      1180px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --radius:    14px;
  --radius-lg: 22px;
  --nav-h:     72px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, .35vw + .93rem, 1.075rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

::selection { background: var(--perception); color: #0b1030; }

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--perception);
  color: #0b1030;
  font-weight: 600;
  border-radius: 8px;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  border-top: 1px solid var(--line-soft);
}
.section--alt { background: var(--bg-alt); }

.section__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section__title {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  margin-bottom: 1.1rem;
}

.section__lede {
  color: var(--text-2);
  font-size: clamp(1.05rem, .5vw + .95rem, 1.2rem);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.15rem;
}
.eyebrow--perception { color: var(--perception); }
.eyebrow--cognition  { color: var(--cognition); }

/* The hero eyebrow is the longest one on the page; ease the tracking on narrow
   phones so it does not crowd the gutter. */
@media (max-width: 420px) {
  .eyebrow { font-size: .68rem; letter-spacing: .12em; }
}

.link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap .25s var(--ease), opacity .2s;
}
.link:hover { gap: .8rem; opacity: .78; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--ease), background .22s, border-color .22s, box-shadow .22s;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  --btn-bg: var(--perception);
  --btn-fg: #0b1030;
  --btn-bd: var(--perception);
  font-weight: 600;
}
.btn--primary:hover { box-shadow: 0 10px 34px -10px rgb(87 230 161 / .6); }

.btn--cognition {
  --btn-bg: var(--cognition);
  --btn-fg: #180b38;
  --btn-bd: var(--cognition);
  font-weight: 600;
}
.btn--cognition:hover { box-shadow: 0 10px 34px -10px rgb(180 140 255 / .65); }

.btn--ghost:hover { --btn-bd: #4d5ba8; background: rgb(255 255 255 / .06); }
.btn--sm { padding: .6rem 1.15rem; font-size: .88rem; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(16 21 52 / .72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.is-stuck { border-bottom-color: var(--line-soft); background: rgb(16 21 52 / .92); }

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  margin-right: auto;
}
.brand__mark { width: 30px; height: 30px; flex: none; color: var(--text); }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.13rem;
  font-weight: 600;
  letter-spacing: -.025em;
}

.nav__links { display: flex; gap: 1.75rem; }
.nav__links a {
  position: relative;
  font-size: .93rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color .2s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--perception);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  padding: 11px 10px;
  flex-direction: column;
  justify-content: space-between;
}
.nav__toggle span {
  display: block;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s;
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-8px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: .35rem;
  padding: .5rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.nav__mobile a {
  padding: .8rem 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--text-2);
}
.nav__mobile .btn { margin-top: .75rem; color: #0b1030; }

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__mobile:not([hidden]) { display: flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 11vh, 8rem) clamp(4rem, 9vw, 7rem);
  isolation: isolate;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  opacity: .55;
}

.hero__glow {
  position: absolute;
  z-index: -1;
  inset: -30% -10% auto -10%;
  height: 90%;
  background:
    radial-gradient(58% 52% at 22% 34%, rgb(87 230 161 / .10), transparent 70%),
    radial-gradient(52% 48% at 78% 20%, rgb(180 140 255 / .12), transparent 70%);
  pointer-events: none;
}

.hero__inner { position: relative; }

.hero__title {
  font-size: clamp(2.9rem, 8.4vw, 6.4rem);
  font-weight: 600;
  letter-spacing: -.04em;
  margin-bottom: 1.6rem;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(96deg, var(--perception) 8%, var(--cognition) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  max-width: 60ch;
  color: var(--text-2);
  font-size: clamp(1.08rem, .7vw + .95rem, 1.32rem);
  margin-bottom: 2.4rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* stats strip */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Flex column with an auto margin under the label so the big numbers sit on a
   shared baseline even when one label wraps to two lines. */
.stat {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: 1.4rem 1.5rem;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: auto;
  padding-bottom: .55rem;
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -.03em;
}
.stat__unit { color: var(--perception); }

/* ==========================================================================
   THESIS
   ========================================================================== */
.halves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.half {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease);
}
.half:hover { transform: translateY(-3px); }
.half::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
}
.half--perception::before { background: linear-gradient(90deg, var(--perception), transparent 75%); }
.half--cognition::before  { background: linear-gradient(90deg, var(--cognition), transparent 75%); }
.half--perception:hover { border-color: rgb(87 230 161 / .35); }
.half--cognition:hover  { border-color: rgb(180 140 255 / .4); }

.half__tag {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.half--perception .half__tag { color: var(--perception); }
.half--cognition  .half__tag { color: var(--cognition); }

.half__title { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-bottom: .9rem; }
.half > p { color: var(--text-2); }

/* margin-bottom:auto pushes the closing link to the card floor, so both cards'
   links line up regardless of how long their copy runs. */
.half__list { margin: 1.4rem 0 auto; padding-bottom: 1.4rem; display: grid; gap: .6rem; }
.half .link { align-self: start; }
.half__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: .95rem;
  color: var(--text-2);
}
.half__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.half--perception .half__list li::before { background: var(--perception); opacity: .85; }
.half--cognition  .half__list li::before { background: var(--cognition);  opacity: .85; }

/* contrast / flow diagram */
.contrast {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.contrast__title {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  margin-bottom: 2rem;
}
.contrast__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
}

.flow__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.1rem;
}
.flow--ours .flow__label { color: var(--perception); }

.flow__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .4rem;
  margin-bottom: 1.1rem;
}
.chip {
  display: flex;
  align-items: center;
  padding: .55rem .8rem;
  background: rgb(255 255 255 / .035);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.35;
  color: var(--text-2);
}
.chip + .chip { position: relative; margin-left: .85rem; }
.chip + .chip::before {
  content: "→";
  position: absolute;
  left: -1.05rem;
  color: var(--text-3);
  font-family: var(--font-body);
}
.chip--warn { border-color: rgb(255 196 92 / .45); color: var(--warn); background: rgb(255 196 92 / .07); }
.chip--good { border-color: rgb(87 230 161 / .45); color: var(--perception); background: rgb(87 230 161 / .07); }

.flow__note { font-size: .95rem; color: var(--text-3); }
.flow--ours .flow__note { color: var(--text-2); }

/* ==========================================================================
   PHYSICAL AI
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* minmax(0, 1fr) rather than 1fr: a bare 1fr track takes its minimum from its
   content, which lets wide children (code blocks, long strings) push the track
   past the viewport instead of scrolling inside it. */
@media (max-width: 940px) { .split { grid-template-columns: minmax(0, 1fr); } }

.claim {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background: rgb(87 230 161 / .05);
  border: 1px solid rgb(87 230 161 / .22);
  border-left: 3px solid var(--perception);
  border-radius: var(--radius);
}
.claim__big {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--perception);
  margin-bottom: .5rem;
}
.claim__body { color: var(--text-2); font-size: .98rem; }
.claim__body + .claim__body { margin-top: .8rem; }

/* Second claim in a column: same accent so the Kael OS colour mapping holds,
   distinguished by weight rather than by hue. */
.claim--outline {
  background: none;
  border-color: rgb(87 230 161 / .16);
  border-left-style: dashed;
}

.caps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cap {
  position: relative;
  background: var(--surface);
  padding: 1.5rem 1.6rem 1.5rem 4.2rem;
  transition: background .25s;
}
.cap:hover { background: var(--surface-2); }
.cap h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.cap p { font-size: .93rem; color: var(--text-3); }

.applies {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}
.applies__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1rem;
}
.applies__list { display: flex; flex-wrap: wrap; gap: .55rem; }
.applies__list li {
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .88rem;
  color: var(--text-2);
  transition: border-color .25s, color .25s;
}
.applies__list li:hover { border-color: rgb(87 230 161 / .4); color: var(--text); }

/* ==========================================================================
   AGTECH · video
   ========================================================================== */
.video { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* The demo source is 640×480. A 4:3 frame capped in width shows the whole frame
   without cropping it or blowing 480 lines up across a full-width container. */
.video__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 760px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgb(0 0 0 / .9);
}

.video__el {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}
.video.has-video .video__el { opacity: 1; pointer-events: auto; }
.video.has-video .video__pending { opacity: 0; pointer-events: none; }

.video__pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .6rem;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(60% 60% at 50% 45%, rgb(87 230 161 / .07), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 22px, rgb(255 255 255 / .015) 22px 44px);
  transition: opacity .4s;
}
.video__pendingArt { display: flex; gap: .45rem; margin-bottom: .4rem; }
.video__pendingArt span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--perception);
  opacity: .3;
  animation: pulse 1.6s var(--ease) infinite;
}
.video__pendingArt span:nth-child(2) { animation-delay: .22s; }
.video__pendingArt span:nth-child(3) { animation-delay: .44s; }
@keyframes pulse { 0%, 100% { opacity: .22; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

.video__pendingTitle { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.video__pendingBody { max-width: 46ch; font-size: .9rem; color: var(--text-3); }
.video__pendingBody code {
  font-family: var(--font-mono);
  font-size: .84em;
  padding: .1rem .35rem;
  background: rgb(255 255 255 / .06);
  border-radius: 5px;
  color: var(--text-2);
}

.video figcaption {
  margin-top: .9rem;
  font-size: .88rem;
  color: var(--text-3);
  font-family: var(--font-mono);
  letter-spacing: .01em;
  text-align: center;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pillar { padding-top: 1.1rem; border-top: 2px solid var(--line); transition: border-color .3s; }
.pillar:hover { border-top-color: var(--perception); }
.pillar h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.pillar p { font-size: .93rem; color: var(--text-3); }

.why {
  display: grid;
  gap: 1rem;
  justify-items: start;
  max-width: 60ch;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.why__title { font-size: 1.2rem; }
.why p { color: var(--text-2); }

/* ==========================================================================
   PERSONAUT
   ========================================================================== */
.pn {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 980px) { .pn { grid-template-columns: minmax(0, 1fr); } }

.code {
  background: #141a42;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 70px -45px rgb(0 0 0 / .95);
}
.code__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem .9rem;
  background: rgb(255 255 255 / .025);
  border-bottom: 1px solid var(--line-soft);
}
.code__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.code__bar em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-3);
}
.code pre {
  margin: 0;
  padding: 1.25rem 1.35rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.75;
  color: #d3dbeb;
  tab-size: 4;
}
.code .c { color: var(--cognition); }
.code .f { color: var(--perception); }
.code .s { color: #7fd1c4; }
.code .n { color: var(--warn); }
.code .o { color: var(--text-3); }

.pn__install {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .9rem;
  padding: .7rem .8rem .7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pn__install code { font-family: var(--font-mono); font-size: .86rem; color: var(--text); }
.copy {
  margin-left: auto;
  padding: .35rem .75rem;
  background: rgb(255 255 255 / .05);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: .78rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.copy:hover { background: var(--cognition); border-color: var(--cognition); color: #180b38; }
.copy.is-copied { background: var(--perception); border-color: var(--perception); color: #0b1030; }

.pn__h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin-bottom: .9rem; }
.pn__text > p { color: var(--text-2); }

.specs { display: grid; gap: .85rem; margin: 1.6rem 0; }
.specs li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .96rem;
  color: var(--text-2);
}
.specs li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--cognition);
  transform: rotate(45deg);
}
.specs b { color: var(--text); font-weight: 600; }

.pn__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.fact {
  padding: .45rem .9rem;
  background: rgb(180 140 255 / .08);
  border: 1px solid rgb(180 140 255 / .25);
  border-radius: 999px;
  font-size: .84rem;
  color: var(--text-2);
}
.fact b { color: var(--cognition); }

.pn__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  counter-reset: step;
}
.step { background: var(--bg-alt); padding: 1.6rem 1.5rem; transition: background .25s; }
.step:hover { background: var(--surface); }
.step__n {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-bottom: .9rem;
  border: 1px solid rgb(180 140 255 / .4);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--cognition);
}
.step h4 { font-size: 1rem; margin-bottom: .4rem; }
.step p { font-size: .9rem; color: var(--text-3); }

/* ==========================================================================
   COMPANY
   ========================================================================== */
.company {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 940px) { .company { grid-template-columns: minmax(0, 1fr); } }

.company__text p { color: var(--text-2); }
.company__text p + p { margin-top: 1.1rem; }

.company__partners {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.company__partners h3 { font-size: 1.15rem; margin-bottom: 1.2rem; }
.company__partners ul { display: grid; gap: 1rem; }
.company__partners li {
  padding-left: 1.1rem;
  border-left: 2px solid var(--line);
  font-size: .95rem;
  color: var(--text-3);
  transition: border-color .3s;
}
.company__partners li:hover { border-left-color: var(--cognition); }
.company__partners b { color: var(--text); font-weight: 600; display: block; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(60% 80% at 20% 0%, rgb(87 230 161 / .07), transparent 65%),
    radial-gradient(55% 80% at 82% 10%, rgb(180 140 255 / .09), transparent 65%),
    var(--bg-alt);
  overflow: hidden;
}
.cta__inner { text-align: center; }
.cta__title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin-bottom: 1.1rem; }
.cta__lede {
  max-width: 54ch;
  margin: 0 auto 2.75rem;
  color: var(--text-2);
  font-size: clamp(1.02rem, .5vw + .92rem, 1.18rem);
}

.cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
  text-align: left;
}
.ctaCard {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  /* Pins the tag to the card ceiling and the body to its floor, so a label that
     wraps to two lines does not drag the tag out of line with its neighbours. */
  align-content: space-between;
  gap: .4rem 1rem;
  padding: 1.5rem 1.6rem;
  background: rgb(255 255 255 / .025);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform .28s var(--ease), border-color .28s, background .28s;
}
.ctaCard:hover {
  transform: translateY(-4px);
  border-color: rgb(87 230 161 / .4);
  background: rgb(255 255 255 / .05);
}
.ctaCard__tag {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--perception);
}
.ctaCard__body { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; }
.ctaCard__go { justify-self: end; color: var(--text-3); transition: transform .28s var(--ease), color .28s; }
.ctaCard:hover .ctaCard__go { transform: translateX(6px); color: var(--perception); }

.cta__grid { margin-bottom: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding-block: 3.5rem 2.5rem; border-top: 1px solid var(--line-soft); }
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 2.5rem;
}
@media (max-width: 780px) { .footer__inner { grid-template-columns: minmax(0, 1fr); } }

.footer__brand {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .6rem;
  align-items: center;
  align-content: start;
}
.footer__brand .brand__mark { width: 26px; height: 26px; }
.footer__brand .brand__name { align-self: center; }
.footer__brand p { grid-column: 2; font-size: .92rem; color: var(--text-3); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 2rem;
}
.footer__cols h4 {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .9rem;
}
.footer__cols a {
  display: block;
  padding: .28rem 0;
  font-size: .93rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color .2s;
}
.footer__cols a:hover { color: var(--perception); }

.footer__legal {
  grid-column: 1 / -1;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
  font-size: .84rem;
  color: var(--text-3);
}

/* ==========================================================================
   ARTWORK
   --------------------------------------------------------------------------
   The page carries exactly two images: Personaut's emotion wheel (inline SVG,
   so it inherits the palette through var() and stays crisp at any size) and
   the Personaut logo. Everything else is type, rule and colour on purpose —
   do not reintroduce decorative illustration here.
   ========================================================================== */
.figure {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: linear-gradient(155deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.figure--wide { padding-inline: clamp(.75rem, 2vw, 2rem); }

.figure figcaption {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--text-3);
  text-align: center;
}

.art { width: 100%; height: auto; overflow: visible; }

.art__label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
}
.art__big {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -.03em;
}
.art--wheel { max-width: 620px; margin-inline: auto; }
.figure--wheel { max-width: 780px; margin-inline: auto; }

/* Category names shrink with the viewBox, so bump them back up on phones. */
@media (max-width: 620px) {
  .art--wheel .art__label { font-size: 16px; }
}

/* ---------- Personaut logo ---------- */
.pnHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section__head--flush { margin-bottom: 0; }

/* The artwork is watercolour on white, so it gets a genuinely white card rather
   than being dropped straight onto the indigo — otherwise it reads as a stray
   white rectangle instead of a sticker. */
.pnLogo {
  width: clamp(150px, 22vw, 232px);
  padding: 10px;
  background: #fff;
  border-radius: 26px;
  box-shadow:
    0 0 0 1px rgb(180 140 255 / .35),
    0 22px 50px -22px rgb(0 0 0 / .7);
  rotate: -2.5deg;
  transition: rotate .4s var(--ease), scale .4s var(--ease);
}
.pnLogo:hover { rotate: 0deg; scale: 1.03; }
.pnLogo img { width: 100%; height: auto; border-radius: 18px; }

@media (max-width: 760px) {
  .pnHead { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  /* Logo first on narrow screens: it introduces the product before the prose. */
  .pnLogo { grid-row: 1; margin-bottom: .5rem; }
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* stagger children of a grid-ish parent */
.stats.is-in .stat,
.pillars.is-in .pillar { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__canvas { display: none; }
}

/* print */
@media print {
  .nav, .hero__canvas, .hero__glow, .cta__grid { display: none; }
  body { background: #fff; color: #000; }
}