/* =========================================================================
   QUANTHIO — design system
   Palette sampled from the brand illustrations: bone, deep navy, signal blue.
   ========================================================================= */

:root {
  /* ------------------------------------------------------------------
     The whole palette comes from the brand assets, not from taste:
       --ink       #0C2F66  the exact fill of quanthio_logo_clean.svg
       --bone      #F2EFEB  the exact cream background of the illustrations
       --navy-deep #0D223E  the exact navy the illustrations fade down into
     Those three make the logo, the page and the artwork one material.
     ------------------------------------------------------------------ */

  /* surface */
  --bone:        #F2EFEB;
  --bone-2:      #EBE7E1;
  --bone-3:      #E2DDD5;
  --paper:       #F8F6F3;

  /* ink — straight from the logo file */
  --ink:         #0C2F66;
  --ink-2:       #27447A;
  --muted:       #5B6E94;
  --muted-2:     #8A97B2;

  /* navy surfaces */
  --navy:        #0C2F66;
  --navy-deep:   #0D223E;
  --navy-soft:   #163A72;

  /* signal */
  --blue:        #1E56E0;
  --blue-2:      #4F86FF;
  --blue-3:      #9DBBFF;
  --blue-wash:   rgba(30, 86, 224, .08);

  /* lines */
  --line:        rgba(12, 47, 102, .14);
  --line-2:      rgba(12, 47, 102, .08);
  --line-dark:   rgba(255, 255, 255, .14);
  --line-dark-2: rgba(255, 255, 255, .07);

  /* type */
  --display: "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --maxw-text: 68ch;
  --section-y: clamp(72px, 10vw, 148px);

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--blue); color: #fff; }

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

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 940px; }
.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: clamp(52px, 7vw, 96px); }

.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); } }

.stack > * + * { margin-top: 1.1em; }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.018em; text-wrap: balance; }

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.022em;
  font-size: clamp(2.75rem, 7.2vw, 5.6rem);
}
.h1 { font-family: var(--display); font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.06; }
.h2 { font-family: var(--display); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; }
.h3 { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.18; }
.h4 { font-size: clamp(1.02rem, 1.3vw, 1.16rem); font-weight: 560; letter-spacing: -.01em; }

.lede {
  font-size: clamp(1.08rem, 1.55vw, 1.35rem);
  line-height: 1.56;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}
p { margin: 0; text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: .935rem; line-height: 1.6; }
.tiny { font-size: .8rem; line-height: 1.55; }

/* eyebrow / label */
.eyebrow {
  font-family: var(--mono);
  font-size: .705rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--blue);
  flex: none;
}
.eyebrow-plain::before { display: none; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--mono);
  font-size: .655rem; letter-spacing: .13em; text-transform: uppercase;
  padding: .42em .78em;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--muted);
  background: rgba(255,255,255,.5);
  white-space: nowrap;
}
.badge-live { color: var(--blue); border-color: rgba(30,86,224,.32); background: var(--blue-wash); }
.badge-live .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: pulse-dot 2.2s var(--ease) infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.on-dark .badge { border-color: var(--line-dark); background: rgba(255,255,255,.05); color: rgba(255,255,255,.66); }
.on-dark .badge-live { color: var(--blue-3); border-color: rgba(157,187,255,.32); background: rgba(79,134,255,.13); }
.on-dark .badge-live .dot { background: var(--blue-3); }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff; --bd: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; gap: .62em;
  padding: .86em 1.3em;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: 100px;
  font-size: .915rem; font-weight: 500; letter-spacing: -.005em;
  cursor: pointer;
  overflow: hidden;
  transition: transform .45s var(--ease-out), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.btn .arrow { transition: transform .45s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn:active { transform: scale(.98); }

.btn-ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line); }
.btn-ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

.on-dark .btn { --bg: #fff; --fg: var(--navy-deep); --bd: #fff; }
.on-dark .btn:hover { background: var(--blue-2); border-color: var(--blue-2); color: #fff; }
.on-dark .btn-ghost { --bg: transparent; --fg: #fff; --bd: var(--line-dark); }
.on-dark .btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.4); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* inline text link */
.link {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .92rem; font-weight: 500;
  color: var(--blue);
  border-bottom: 1px solid rgba(30,86,224,.28);
  padding-bottom: 1px;
  transition: border-color .28s var(--ease), gap .35s var(--ease-out);
}
.link:hover { border-color: var(--blue); gap: .7em; }
.on-dark .link { color: var(--blue-3); border-color: rgba(157,187,255,.3); }
.on-dark .link:hover { border-color: var(--blue-3); }

/* =========================================================================
   HEADER
   ========================================================================= */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(245,242,237,.78);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: var(--line-2);
}
.header-in {
  height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* The real logo file, not a redrawn approximation. */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 26px; width: auto; display: block; transition: opacity .3s var(--ease); }
.brand:hover img { opacity: .74; }
.footer .brand img { height: 28px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  padding: .5em .78em;
  font-size: .855rem; font-weight: 480; letter-spacing: -.002em;
  color: var(--ink-2);
  border-radius: 100px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav a:hover { color: var(--ink); background: rgba(11,27,51,.055); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 560; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: .12em;
  width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: var(--blue);
}

.header-cta { display: flex; align-items: center; gap: .55rem; }
.header-cta .ext {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  padding: .55em .85em;
  border: 1px solid var(--line); border-radius: 100px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.header-cta .ext:hover { color: var(--blue); border-color: rgba(30,86,224,.4); }

.burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer;
}
.burger span { position: relative; width: 15px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease-out), background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 15px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .35s var(--ease-out);
}
.burger span::before { top: -5px; } .burger span::after { top: 5px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { transform: translateY(5px) rotate(45deg); }
body.menu-open .burger span::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
}
/* SDK Method zostaje też na telefonie — ta sama ramka co na desktopie,
   tylko węższa, żeby zmieściła się obok logo i przycisku menu */
@media (max-width: 560px) {
  .header-cta { gap: .4rem; }
  .header-cta .ext { font-size: .58rem; letter-spacing: .08em; padding: .5em .7em; }
  .header-in .brand img { height: 22px; width: auto; }
}
@media (max-width: 360px) {
  .header-cta .ext .arr { display: none; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bone);
  padding: 92px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease-out), visibility .35s;
  overflow-y: auto;
}
body.menu-open .drawer { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  font-family: var(--display); font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.24;
  padding: .16em 0;
  border-bottom: 1px solid var(--line-2);
  transition: color .25s var(--ease), padding-left .35s var(--ease-out);
}
.drawer a:hover { color: var(--blue); padding-left: .18em; }

/* =========================================================================
   SURFACES
   ========================================================================= */
.on-dark { background: var(--navy-deep); color: rgba(255,255,255,.82); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .lede { color: rgba(255,255,255,.72); }
.on-dark .muted { color: rgba(255,255,255,.55); }
.on-dark .eyebrow { color: rgba(255,255,255,.5); }
.on-dark .eyebrow::before { background: var(--blue-2); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.on-dark .rule { background: var(--line-dark-2); }

/* card */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: clamp(20px, 2.4vw, 30px);
  transition: transform .5s var(--ease-out), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.card-hover:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: 0 18px 44px -28px rgba(11,27,51,.4); }
.on-dark .card { background: rgba(255,255,255,.032); border-color: var(--line-dark-2); }
.on-dark .card-hover:hover { border-color: var(--line-dark); box-shadow: none; background: rgba(255,255,255,.055); }

.card .ico { width: 44px; height: 44px; margin-bottom: 18px; }
/* the icons are transparent ink line art; on dark they only need lifting */
.on-dark .card .ico { filter: brightness(0) invert(1); opacity: .82; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; padding-top: 132px; padding-bottom: clamp(56px, 8vw, 104px); overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 1000px) { .hero-grid { grid-template-columns: minmax(0,1fr); } }

.hero .display { margin-bottom: 1.5rem; }
.hero .lede + .lede { margin-top: 1rem; }
.hero .btn-row { margin-top: 2.2rem; }

.hero-canvas-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 62vh;
  width: 100%;
}
.hero-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 1000px) { .hero-canvas-wrap { aspect-ratio: 16 / 11; max-height: none; order: -1; margin-bottom: 8px; } }

/* page hero (interior pages) */
.phero { padding-top: 136px; padding-bottom: clamp(40px, 5vw, 68px); position: relative; overflow: hidden; }
.phero .h1 { margin-bottom: 1.3rem; }

/* =========================================================================
   ANIMATION PRIMITIVES
   ========================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s var(--ease-out), transform .95s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
}

/* animated diagram shell */
.figure {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(30,86,224,.055), transparent 62%),
    var(--paper);
  padding: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
}
.on-dark .figure {
  border-color: var(--line-dark-2);
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(79,134,255,.12), transparent 62%),
    rgba(255,255,255,.028);
}
.figure-cap {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 16px;
}
.on-dark .figure-cap { color: rgba(255,255,255,.42); }

/* faint dot-grid backdrop */
.dotfield {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(11,27,51,.16) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent 75%);
  opacity: .5;
}
.on-dark .dotfield { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.2) 1px, transparent 0); }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-2);
  padding-block: 15px;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > div { display: flex; }
.marquee span {
  font-family: var(--mono); font-size: .715rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); padding-inline: 1.5rem;
  display: inline-flex; align-items: center; gap: 1.5rem; white-space: nowrap;
}
.marquee span::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--blue); opacity: .55; }
@keyframes marquee { to { transform: translateX(-50%); } }
.on-dark .marquee { border-color: var(--line-dark-2); }
.on-dark .marquee span { color: rgba(255,255,255,.5); }

/* =========================================================================
   PRODUCT CARDS
   ========================================================================= */
.product {
  display: block;
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
  transition: transform .55s var(--ease-out), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.product:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: 0 26px 60px -34px rgba(11,27,51,.46); }
.product-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-deep);
  border-bottom: 1px solid var(--line-2);
}
.product-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
  filter: saturate(.92);
}
.product:hover .product-media img { transform: scale(1.045); filter: saturate(1.04); }
.product-media .scan {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(30,86,224,.22) 50%, transparent 60%);
  transform: translateY(-100%);
  transition: transform 0s;
}
.product:hover .product-media .scan { animation: scan 1.5s var(--ease) 1; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

.product-body { padding: clamp(20px, 2.2vw, 28px); }
.product-body .h3 { margin-bottom: .5rem; }
.product-name { font-family: var(--mono); font-size: 1.02rem; letter-spacing: -.01em; font-weight: 500; }
.product-tech {
  font-family: var(--mono); font-size: .705rem; line-height: 1.85; letter-spacing: .02em;
  color: var(--muted-2); margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-2);
}
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 1.1rem; flex-wrap: wrap; }

/* =========================================================================
   PEOPLE
   ========================================================================= */
.person { position: relative; }
/* The photographs keep their own proportions — nothing is cropped, nothing is
   enlarged, and there are no filler bars, because the frame simply takes the
   shape of the picture. The row alignment is handled by the subgrid below. */
.person-photo {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line-2);
  line-height: 0;
}
/* Every portrait is black and white, without exception — the source photos
   were shot in different studios and only one treatment makes them a set. */
.person-photo img {
  width: 100%; height: auto;
  filter: grayscale(1) contrast(1.04);
}
.person h4 { margin-top: 1.05rem; }
.person .role {
  font-family: var(--mono); font-size: .665rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin-top: .38rem;
}
.person .bio { margin-top: .7rem; color: var(--muted); font-size: .9rem; line-height: 1.62; }

/* Photographs differ in proportion, so the cards use a subgrid: every photo
   sits on a common bottom line and every name starts on the same line, with
   no cropping or letterboxing to force them into one shape. */
.people-grid { grid-auto-rows: auto; }
.people-grid .person {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 0;
}
.people-grid .person > .person-photo { align-self: end; }
.people-grid .person > .person-head { padding-top: 1.05rem; }
@supports not (grid-template-rows: subgrid) {
  .people-grid .person { display: block; }
  .people-grid .person > .person-head { padding-top: 1.05rem; }
}

/* founder feature */
.founder {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
@media (max-width: 820px) { .founder { grid-template-columns: minmax(0,1fr); } }

/* =========================================================================
   METRICS / EVIDENCE
   ========================================================================= */
.metric { padding: clamp(18px,2vw,26px) 0; border-top: 1px solid var(--line); }
.on-dark .metric { border-color: var(--line-dark-2); }
.metric .val {
  font-family: var(--display); font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1;
  letter-spacing: -.02em; color: var(--ink);
}
.on-dark .metric .val { color: #fff; }
.metric .val em { font-style: normal; font-size: .48em; color: var(--muted); letter-spacing: 0; margin-left: .14em; }
.on-dark .metric .val em { color: rgba(255,255,255,.5); }
.metric .lab { margin-top: .55rem; font-size: .875rem; color: var(--muted); line-height: 1.5; }

/* =========================================================================
   PROCESS LADDER
   ========================================================================= */
.ladder { position: relative; display: grid; gap: 0; counter-reset: step; }
.ladder-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 118px) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
  align-items: start;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--line);
  transition: background .5s var(--ease);
}
.ladder-item:last-child { border-bottom: 1px solid var(--line); }
.on-dark .ladder-item { border-color: var(--line-dark-2); }
.on-dark .ladder-item:last-child { border-bottom-color: var(--line-dark-2); }
.ladder-item .n {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--muted-2);
  padding-top: .3em; position: relative;
}
/* the rule draws in AFTER the number, never across it */
.ladder-item .n::after {
  content: ""; position: absolute; left: 2.5em; top: .95em;
  width: 0; height: 1px; background: var(--blue);
  transition: width 1.1s var(--ease-out) var(--d, 0ms);
}
.ladder-item.in .n::after { width: 14px; }
.ladder-item .t { font-family: var(--mono); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .12em; }
.ladder-item .d { color: var(--muted); font-size: .945rem; }
@media (max-width: 760px) {
  .ladder-item { grid-template-columns: 42px minmax(0,1fr); }
  .ladder-item .d { grid-column: 2; }
}

/* =========================================================================
   SPLIT / EDITORIAL
   ========================================================================= */
/* -------------------------------------------------------------------------
   SPLIT

   The eyebrow is a full-width row of its own, so the title in column one and
   the body text in column two begin on the SAME row. Nothing on the right can
   float above the heading on the left.

   `.to-col-2` puts a following block (a list, a chain) in the second column,
   so it lines up with the sentence rather than with the title.
   ------------------------------------------------------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  column-gap: clamp(28px, 5vw, 76px);
  row-gap: clamp(20px, 2.4vw, 30px);
  align-items: start;
}
.split > .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.split > .to-col-2 { grid-column: 2; }
/* The heading always starts at the top of the row. The column beside it is
   pulled to the bottom, so when the heading is the taller of the two the body
   text finishes level with its last line — and when the body is taller, the
   heading still sits at the top instead of being pushed down. */
.split > :not(.eyebrow) { align-self: start; }
.split > :not(.eyebrow) ~ :not(.eyebrow) { align-self: end; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0,1fr); row-gap: 20px; }
  .split > .to-col-2 { grid-column: 1; }
}

/* -------------------------------------------------------------------------
   ILLUSTRATIONS

   The artwork is never framed. Two treatments, both built so the image has
   no visible edge at all:

   .illus  — an illustration whose field is the same cream as the page.
             A soft mask dissolves all four edges, so it reads as drawn
             onto the paper rather than pasted on top of it.

   .band   — a full-bleed transition. These illustrations are cream at the
             top and navy at the bottom, which is exactly how the page moves
             from a light section to a dark one. The scrim pins the top to
             --bone and the bottom to --navy-deep, so both seams disappear
             whatever the crop or viewport.
   ------------------------------------------------------------------------- */
.illus {
  position: relative;
  line-height: 0;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.illus img { width: 100%; height: auto; }

/* A calm strip of artwork used to settle a page that would otherwise be all
   type and air. Feathered on every edge, so it has no frame and no hard edge. */
/* Żadnego kadrowania: cały rysunek, w jego własnych proporcjach.
   Wcześniej pokazywaliśmy sam górny pas i na każdym ekranie wyglądało to
   na ucięte — teraz widać całość, a maska z .illus rozpuszcza krawędzie. */
.illus-quiet { margin-top: clamp(30px, 4vw, 56px); }
.illus-quiet img { width: 100%; height: auto; }

.band {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  /* the artwork's own ratio, so nothing is cropped: its cream top lands
     exactly on --bone and its navy base exactly on --navy-deep */
  aspect-ratio: 1672 / 941;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  /* the aspect ratio gives a fractional height; without this the page
     background shows through the rounding gap as a bright hairline */
  margin-bottom: -1px;
}
/* Most of these illustrations already end in deep navy, so the scrim only
   tidies the last few pixels. Two of them (bridge, layers) end in mid-grey
   instead — .band-fade pulls their fade much further up, which reads as the
   mist those pieces already have in their lower half. */
.band { --scrim-start: 86%; }
.band-fade { --scrim-start: 34%; }
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--bone) 0%,
    rgba(242, 239, 235, 0) 6%,
    rgba(13, 34, 62, 0) var(--scrim-start),
    /* solid a little before the edge, so the join to the section below is
       genuinely seamless rather than 99% opaque at the last pixel row */
    var(--navy-deep) 97%,
    var(--navy-deep) 100%
  );
}
/* the light section that ends in a band must not hold it off the boundary */
.section-to-band { padding-bottom: 0; }
/* a band already carries a lot of height; the section after it needs less */
.band + .section, .band + section.section { padding-top: clamp(48px, 6vw, 92px); }

/* product screenshots — these DO get an edge; they are interface, not artwork */
.shot {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 520px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--navy-deep);
  transition: transform .55s var(--ease-out), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* the four products are one list, not four chapters — keep them close */
.section-product { padding-block: clamp(26px, 3.4vw, 46px); }
.shot:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: 0 22px 50px -30px rgba(12,47,102,.4); }

/* alternate which side the screenshot sits on, so the page never repeats
   the same text-left / picture-right rhythm four times in a row */
.product-row .shot { justify-self: end; }
.product-flip > div  { order: 2; }
.product-flip > .shot { order: 1; justify-self: start; }
/* on a flipped row the label belongs over its own title, not over the picture */
.product-flip > .eyebrow { grid-column: 2; }
@media (max-width: 900px) {
  .product-flip > div  { order: 0; }
  .product-flip > .shot { order: 1; }
  .product-flip > .eyebrow { grid-column: 1; }
  .shot { max-width: none; justify-self: stretch !important; }
}

/* =========================================================================
   CHAIN — research → invention → development → outcome
   ========================================================================= */
.chain {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem 0;
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 2.4vw, 30px);
}
.chain li {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center;
}
.chain li + li::before {
  content: "→";
  margin: 0 1.1em;
  color: var(--blue);
  font-size: .9em;
}
.chain li:last-child { color: var(--ink); }
.on-dark .chain li:last-child { color: #fff; }

/* =========================================================================
   BULLET BIOS
   ========================================================================= */
.bullets { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.bullets li {
  position: relative;
  padding-left: 1.05em;
  font-size: .885rem; line-height: 1.55; color: var(--muted);
}
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--blue); opacity: .7;
}
.on-dark .bullets li { color: rgba(255,255,255,.6); }

/* =========================================================================
   VIDEO — an elegant frame, deliberately not oversized
   ========================================================================= */
/* A card that opens the film on YouTube. An inline embed returned Error 153
   (this video's owner does not permit embedding), so the card links out. */
.video {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: 0 18px 44px -30px rgba(12,47,102,.38);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.video img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter .5s var(--ease);
  filter: saturate(.92) brightness(.88);
}
.video:hover { transform: translateY(-3px); box-shadow: 0 28px 60px -32px rgba(12,47,102,.5); }
.video:hover img { transform: scale(1.04); filter: saturate(1) brightness(.95); }

.video-play {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  transition: transform .45s var(--ease-out), background .3s var(--ease);
}
.video-play::after {
  content: ""; position: absolute; left: 21px; top: 17px;
  border-left: 16px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.video:hover .video-play { transform: scale(1.08); background: #fff; }

.video-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.1rem .9rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
}
.on-dark .video { border-color: var(--line-dark); }

/* contact: the form stands on its own, centred */
.form-wrap { max-width: 720px; margin-inline: auto; }

/* a figure with no card behind it — for full-width diagrams.
   Specificity has to beat `.on-dark .figure`, hence the doubled class. */
/* the diagram needs more vertical room on a narrow screen */
@media (max-width: 700px) { [data-scene="flow"] { height: 360px !important; } }

.figure.figure-plain,
.on-dark .figure.figure-plain {
  border: 0;
  background: none;
  padding: 0;
}

/* =========================================================================
   MANIFESTO
   ========================================================================= */
.manifesto-body p {
  font-family: var(--display);
  font-size: clamp(1.55rem, 3.4vw, 2.55rem);
  line-height: 1.24;
  letter-spacing: -.018em;
  color: var(--ink);
}
.on-dark .manifesto-body p { color: #fff; }
.manifesto-body p + p { margin-top: 1.15em; }
.manifesto-body .sm {
  font-family: var(--sans); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.6;
  color: var(--muted); letter-spacing: 0; max-width: 56ch;
}
.on-dark .manifesto-body .sm { color: rgba(255,255,255,.6); }

.pull {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.14; letter-spacing: -.022em;
  max-width: 20ch;
}

/* =========================================================================
   FORM
   ========================================================================= */
.field { display: grid; gap: .48rem; }
.field label {
  font-family: var(--mono); font-size: .665rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: .96rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .82em .9em;
  width: 100%;
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,86,224,.13);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { background: var(--navy-deep); color: rgba(255,255,255,.62); padding-block: clamp(56px, 7vw, 88px) 34px; position: relative; overflow: hidden; }
.footer a { color: rgba(255,255,255,.62); transition: color .25s var(--ease); }
.footer a:hover { color: #fff; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(26px, 3vw, 48px); }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: minmax(0,1fr); } }
.footer .brand .word { color: #fff; }
.footer h5 {
  margin: 0 0 .95rem; font-family: var(--mono); font-size: .655rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.38); font-weight: 400;
}
/* lista stron w dwóch kolumnach — po usunięciu pozostałych kolumn
   stopka w jednej kolumnie robiła się niepotrzebnie długa */
.footer ul { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); gap: .48rem 1.6rem; align-items: start; }
.footer ul a { font-size: .905rem; }
.footer-bottom {
  margin-top: clamp(40px, 5vw, 60px); padding-top: 24px;
  border-top: 1px solid var(--line-dark-2);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: rgba(255,255,255,.4);
  text-transform: uppercase;
}

/* =========================================================================
   MISC
   ========================================================================= */
.kicker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kicker-list li {
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  padding-block: 1.05rem;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.kicker-list li:last-child { border-bottom: 1px solid var(--line); }
.on-dark .kicker-list li { border-color: var(--line-dark-2); }
.on-dark .kicker-list li:last-child { border-bottom-color: var(--line-dark-2); }
.kicker-list .k { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.kicker-list .v { color: var(--muted); font-size: .945rem; }
@media (max-width: 620px) { .kicker-list li { grid-template-columns: minmax(0,1fr); gap: 4px; } }

.table-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); }
.on-dark .table-wrap { border-color: var(--line-dark-2); background: rgba(255,255,255,.028); }
table.t { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .9rem; }
table.t th, table.t td { text-align: left; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.on-dark table.t th, .on-dark table.t td { border-color: var(--line-dark-2); }
table.t tr:last-child td { border-bottom: none; }
table.t th {
  font-family: var(--mono); font-size: .655rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 400;
}
table.t td.mono { font-family: var(--mono); font-size: .84rem; }
table.t td .muted { display: block; }

.note {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--muted-2); line-height: 1.7;
  border-left: 2px solid var(--line); padding-left: 1rem;
}
.on-dark .note { color: rgba(255,255,255,.45); border-color: var(--line-dark); }

.anchor { scroll-margin-top: 92px; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; }
/* Kept clear of the section's own top edge: overflow:hidden clips the glow,
   and a glow that reached the edge drew a visible line under the band above. */
.cta-band .cta-glow {
  position: absolute; left: 50%; top: 64%; width: 620px; height: 620px; margin-left: -310px; margin-top: -310px;
  background: radial-gradient(circle, rgba(30,86,224,.34), transparent 66%);
  pointer-events: none; filter: blur(8px);
  animation: breathe 9s var(--ease) infinite;
}
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.14); opacity: 1; } }

/* =========================================================================
   TOUCH & SMALL SCREENS

   Two things a desktop layout gets away with and a phone does not: label type
   set at 10–11px, and links whose tap area is only as tall as their text.
   Below 900px the small mono labels come up to a readable size, and every
   link in the menu, the form and the body gets a 44px touch target.
   ========================================================================= */
@media (max-width: 900px) {
  .eyebrow      { font-size: .78rem; }
  .badge        { font-size: .72rem; padding: .5em .85em; }
  .person .role { font-size: .74rem; }
  .field label  { font-size: .74rem; }
  .chain li     { font-size: .78rem; }
  .ladder-item .n { font-size: .78rem; }
  .ladder-item .t { font-size: .86rem; }
  .product-tech { font-size: .78rem; }
  .footer-bottom, .footer h5 { font-size: .72rem; }

  /* comfortable touch targets */
  .drawer a { min-height: 52px; display: flex; align-items: center; }
  .link { min-height: 44px; }
  .kicker-list .k a { min-height: 44px; display: inline-flex; align-items: center; }
  .video-cap { font-size: .74rem; }
  .brand { min-height: 44px; align-items: center; }
  .footer ul a { min-height: 40px; display: inline-flex; align-items: center; }

  /* form controls at a size iOS will not zoom into */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* na telefonie stopka zajmowała ponad pół ekranu — lista stron idzie
   w dwie kolumny, marginesy siadają, całość mieści się w jednym rzucie oka */
@media (max-width: 620px) {
  .footer { padding-block: clamp(36px, 8vw, 52px) 22px; }
  .footer-top { gap: 26px; }
  .footer-top p.small { margin-top: .9rem !important; max-width: 40ch !important; }
  .footer h5 { margin-bottom: .7rem; }
  .footer ul { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 1.1rem; align-items: start; }
  /* pozycje o naturalnej wysokości i wyrównane do góry wiersza — inaczej
     dwuwierszowe „Proprietary Technology" rozjeżdża sąsiada w bok */
  .footer ul a { min-height: 0; display: block; padding: .5rem 0; line-height: 1.35; }
  .footer .brand img { height: 24px; }
  .footer-bottom { margin-top: 24px; padding-top: 16px; gap: 6px 18px; }
}

/* on a phone the hero canvas should not eat the whole first screen */
@media (max-width: 620px) {
  .hero-canvas-wrap { aspect-ratio: 4 / 3; }
  .video { max-width: none; }
}