/* ===========================================================
   RootSystems brand site — design system v5
   Direction: confident B2B compliance software, not a hacker-terminal
   dev tool. Dominant navy, saffron as the one "act now" accent, green
   reserved exclusively for verified/trust signal — the same three-color
   language the product apps use, applied with more room to breathe and
   more visual weight than a dashboard needs. Inter carries the whole
   page through weight and size, not through switching typefaces;
   JetBrains Mono is reserved for the few places actual proof-shaped data
   appears (hashes, timestamps, stat counters) so monospace always means
   "this is real, checkable data," never decoration.
   =========================================================== */

:root {
  /* Navy family — dominant */
  --navy: #0a1f44;
  --navy-deep: #050f24;
  --navy-mid: #14315e;
  --navy-tint: #eef1f7;

  /* Saffron — the one CTA / "look here" accent */
  --saffron: #ff9933;
  --saffron-rgb: 255, 153, 51;
  --saffron-deep: #e37c0f;

  /* Green — reserved exclusively for verified/trust/live signal */
  --green: #1e9e45;
  --green-rgb: 30, 158, 69;
  --green-deep: #157836;
  --green-tint: #e6f6ec;

  /* Neutrals — cool, blue-biased, never a flat mid-grey */
  --paper: #f6f8fc;
  --surface: #ffffff;
  --surface-tint: #eef2f9;

  --ink: #0f1b2e;
  --ink-muted: #48566e;
  --ink-faint: #8a97ac;

  --border: #dfe5f0;
  --border-strong: #c5cee0;

  --font-display: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(10, 31, 68, 0.06), 0 1px 3px rgba(10, 31, 68, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 31, 68, 0.12);
  --shadow-lg: 0 20px 48px rgba(10, 31, 68, 0.18);

  /* Floor system — the three product-section accent colors (Part 3 palette).
     Namespaced as --floor-* rather than reusing --saffron/--green/--violet
     directly: those existing tokens already carry unrelated meaning
     elsewhere (CTA accent, verified/trust signal, one product's card
     accent) and overwriting them would recolor things this restructure
     never asked to touch. */
  --floor-saffron-core: #d97706;
  --floor-saffron: #ff9933;
  --floor-saffron-rgb: 255, 153, 51;
  --floor-green-core: #15803d;
  --floor-green: #138808;
  --floor-green-rgb: 19, 136, 8;
  --floor-violet-core: #6d28d9;
  --floor-violet: #6a0dad;
  --floor-violet-rgb: 106, 13, 173;
}

/* ---------- dark mode ----------
   Same token set, repointed. Every component below reads color exclusively
   through these custom properties, so nothing needs a second, hardcoded
   dark styling pass - flipping the tokens is the whole theme. */
:root[data-theme="dark"] {
  --navy: #eef1f7;
  --navy-deep: #060d1c;
  --navy-mid: #1b3c6e;
  --navy-tint: #10203d;

  --paper: #0a1120;
  --surface: #0f1a2e;
  --surface-tint: #142238;

  --ink: #e7ecf5;
  --ink-muted: #aab8cf;
  --ink-faint: #7c8ba5;

  --border: #22304b;
  --border-strong: #32456a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #eef1f7;
    --navy-deep: #060d1c;
    --navy-mid: #1b3c6e;
    --navy-tint: #10203d;

    --paper: #0a1120;
    --surface: #0f1a2e;
    --surface-tint: #142238;

    --ink: #e7ecf5;
    --ink-muted: #aab8cf;
    --ink-faint: #7c8ba5;

    --border: #22304b;
    --border-strong: #32456a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
  }
}

html {
  transition: background-color 0.25s ease;
}

body,
.site-header,
.product-card,
.simple-product,
.pricing-card,
.pricing-tier,
.trust-card,
.field-card,
.floor__lead {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--saffron-deep);
  margin: 0 0 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--saffron);
  border-radius: 2px;
}

.eyebrow--on-dark {
  color: #ffc27a;
}

.eyebrow--on-dark::before {
  background: #ffc27a;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 3rem;
  max-width: 22ch;
  color: var(--navy);
  text-wrap: balance;
}

/* Scroll-reveal utility - public/js/site.js adds .is-visible via
   IntersectionObserver as each section enters the viewport. Content is
   fully present and readable without JS, and reduced-motion users get
   everything visible immediately with no transition at all. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(246, 248, 252, 0.92);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__mark {
  height: 36px;
  width: 36px;
  object-fit: contain;
}

.brand__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Flex items default to min-width:auto, which refuses to shrink below
     content size - without this, the nav never actually narrows enough
     for its own overflow-x:auto to kick in, and instead spills past the
     viewport edge on narrow screens. */
  min-width: 0;
  flex-shrink: 1;
}

.brand {
  flex-shrink: 0;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav__link {
  position: relative;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink-muted);
  padding-bottom: 4px;
  transition: color 0.15s ease;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: var(--saffron);
  border-radius: 2px;
  transition: width 0.2s ease;
}

.site-nav__link:hover {
  color: var(--navy);
}

.site-nav__link:hover::after {
  width: 100%;
}

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.site-nav__cta:hover {
  background: var(--navy-mid);
  transform: translateY(-1px);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.9rem;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-primary {
  background: var(--saffron);
  color: var(--navy-deep);
  box-shadow: 0 10px 24px rgba(var(--saffron-rgb), 0.34);
}

.btn-primary:hover {
  background: #ffa64d;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(var(--saffron-rgb), 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

.btn-ghost--on-light {
  color: var(--navy);
  border-color: var(--border-strong);
}

.btn-ghost--on-light:hover {
  border-color: var(--navy);
}

.btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.btn__arrow {
  transition: transform 0.15s ease;
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: radial-gradient(ellipse 120% 100% at 15% 0%, var(--navy-mid) 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color: #fff;
  padding: 128px 0 150px;
  overflow: hidden;
}

.hero--compact {
  padding: 84px 0 96px;
}

/* Faint dot-grid texture, fading toward the bottom - reads as depth in the
   navy field, not decoration fighting the headline. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 75%);
  mask-image: linear-gradient(to bottom, black, transparent 75%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: 48px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  max-width: 15ch;
  color: #fff;
  text-wrap: balance;
}

.hero__title-accent {
  color: var(--saffron);
}

.hero__subhead {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 46ch;
  margin: 0 0 2.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* ---------- hero verification-chain graphic ---------- */
/* A literal, not decorative, representation of the product story: a chain
   of verified nodes, each checked off and linked to the one before it -
   the same hash-chain concept the products actually implement. Built from
   plain shapes, not an illustration, so it reads as "diagram" rather than
   "stock art." */

.chain {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
}

.chain-node {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  padding: 14px 0;
}

.chain-node__dot {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--green-rgb), 0.16);
  border: 1.5px solid rgba(var(--green-rgb), 0.55);
  color: var(--green);
  z-index: 1;
}

.chain-node:nth-child(2) .chain-node__dot {
  background: rgba(var(--saffron-rgb), 0.16);
  border-color: rgba(var(--saffron-rgb), 0.55);
  color: var(--saffron);
}

.chain-node__dot svg {
  width: 20px;
  height: 20px;
}

.chain-node__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chain-node__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
}

.chain-node__hash {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.01em;
}

.chain-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 60px;
  width: 2px;
  height: calc(100% - 12px);
  background: linear-gradient(180deg, rgba(var(--green-rgb), 0.5), rgba(255, 255, 255, 0.12));
}

/* ---------- stats strip ---------- */

.stats {
  background: var(--navy-deep);
  padding: 44px 0;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat {
  text-align: left;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  padding-left: 18px;
}

.stat__number {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: var(--green);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat__label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 720px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
}

/* ---------- products ---------- */

.products {
  padding: 108px 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent, var(--navy));
}

.product-card--saffron { --accent: var(--saffron); }
.product-card--green { --accent: var(--green); }
.product-card--navy { --accent: var(--navy-mid); }

a.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.product-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.product-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, var(--navy));
  color: #fff;
}

.product-card__icon svg {
  width: 22px;
  height: 22px;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.status-tag--live {
  color: var(--green-deep);
  background: var(--green-tint);
}

.status-tag--in-progress,
.status-tag--in-development {
  color: #8a5a00;
  background: #fef3de;
}

.status-tag--coming-soon {
  color: #8a5a00;
  background: #fef3de;
}

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.product-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0;
}

.product-card__description {
  font-family: var(--font-body);
  color: var(--ink-muted);
  font-size: 0.94rem;
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.product-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
  margin-top: 4px;
}

.product-card__go svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

a.product-card:hover .product-card__go svg {
  transform: translateX(3px);
}

@media (max-width: 780px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- trust / tamper-evidence ---------- */

.trust {
  padding: 108px 0;
  background: var(--navy-tint);
}

.trust__intro {
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 3.5rem;
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.trust-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px;
}

.trust-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-tint);
  color: var(--green-deep);
  margin-bottom: 1.2rem;
}

.trust-card__icon svg {
  width: 24px;
  height: 24px;
}

.trust-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 0.6rem;
}

.trust-card__body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
}

.trust-card__hash {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--green-deep);
  background: var(--green-tint);
  border-radius: 6px;
  padding: 8px 10px;
  word-break: break-all;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .trust__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- how it works ---------- */

.how {
  padding: 108px 0;
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.how-step {
  position: relative;
  padding-top: 0.4rem;
}

.how-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background: var(--navy);
  margin-bottom: 1.2rem;
}

.how-step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--navy);
  margin: 0 0 0.6rem;
}

.how-step__body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
}

@media (max-width: 720px) {
  .how__steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ---------- field notes (blog placeholder) ---------- */

.field {
  padding: 108px 0;
  background: var(--surface-tint);
}

.field__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.field-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.7rem;
  background: var(--surface);
}

.field-card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 4px 10px;
  margin-bottom: 1rem;
}

.field-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 0.5rem;
}

.field-card__body {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-faint);
  margin: 0;
}

@media (max-width: 860px) {
  .field__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- about ---------- */

.about {
  padding: 108px 0;
}

.about__inner {
  max-width: 660px;
}

.about__body {
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--ink-muted);
  margin: 0 0 1.2rem;
}

.about__body:last-child {
  margin-bottom: 0;
}

.about__body strong {
  color: var(--navy);
  font-weight: 700;
}

/* ---------- resources ("Tools We Use") ---------- */

.resources {
  padding: 96px 0 120px;
  background: var(--surface-tint);
}

.resources__disclosure {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink-faint);
  max-width: 62ch;
  margin: 0 0 2.5rem;
  line-height: 1.65;
}

.resource-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-strong);
}

.resource-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}

.resource-item__name {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-decoration: none;
}

a.resource-item__name {
  color: var(--navy);
  border-bottom: 2px solid var(--saffron);
}

a.resource-item__name:hover {
  color: var(--navy-mid);
}

.resource-item__desc {
  font-family: var(--font-body);
  font-size: 0.87rem;
  color: var(--ink-faint);
}

.resource-item__pending {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.75;
}

/* ---------- pricing page ---------- */

.pricing-notice {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff7ec;
  border: 1.5px solid rgba(var(--saffron-rgb), 0.5);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 60px;
}

.pricing-notice__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--saffron-deep);
}

.pricing-notice__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy);
  margin: 0 0 4px;
}

.pricing-notice__body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding-bottom: 108px;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 28px;
}

.pricing-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--navy);
  margin: 0 0 0.6rem;
}

.pricing-card__blurb {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 1.6rem;
}

.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.pricing-tier {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  background: var(--paper);
}

.pricing-tier__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--saffron-deep);
  margin: 0 0 8px;
}

.pricing-card__cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1.4rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  font-size: 0.9rem;
}

.pricing-tier__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 6px;
}

.pricing-tier__price span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.pricing-tier__note {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

@media (max-width: 720px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-tiers {
    grid-template-columns: 1fr;
  }
}

/* ---------- legal pages ---------- */

.legal {
  padding: 96px 0 130px;
}

.legal-doc {
  max-width: 70ch;
}

.legal-doc__meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 2.6rem;
}

.legal-doc__h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 2.6rem 0 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
}

.legal-doc__h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-doc__p {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-muted);
  margin: 0 0 1.15rem;
}

.legal-doc__list {
  margin: 0 0 1.15rem;
  padding-left: 1.3rem;
}

.legal-doc__list li {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}

.legal-doc__p strong,
.legal-doc__list strong {
  color: var(--ink);
  font-weight: 700;
}

.legal-doc__p a,
.legal-doc__list a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}

.legal-doc__p a:hover,
.legal-doc__list a:hover {
  color: var(--saffron-deep);
}

.legal__notice {
  max-width: 70ch;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #fff7ec;
  border: 1.5px solid rgba(var(--saffron-rgb), 0.5);
  border-radius: 14px;
  padding: 26px 28px;
}

.legal__notice-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--saffron-deep);
  margin-top: 2px;
}

.legal__notice-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
  margin: 0 0 8px;
}

.legal__notice-body {
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.7);
  padding: 44px 0 46px;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.site-footer__line {
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.site-footer__link {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer__link:hover {
  color: var(--saffron);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__legal-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.site-footer__legal-link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer__comment {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 18px;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  /* Headline/subhead/CTA stay first in reading order on mobile - the chain
     graphic is supporting visual, not the primary message, so it follows
     the text (natural DOM order) instead of jumping ahead of it. */
  .hero__visual {
    margin-top: 40px;
    max-width: 360px;
  }
}

@media (max-width: 860px) {
  .hero {
    padding: 64px 0 56px;
  }

  .products,
  .trust,
  .how,
  .field,
  .about,
  .resources,
  .legal,
  .pricing-grid {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .site-nav {
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .wrap {
    padding: 0 20px;
  }

  .site-header__inner {
    padding: 14px 20px;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .stat {
    padding-left: 14px;
  }
}

/* ===========================================================
   Flagship homepage v6 - bright portfolio studio
   =========================================================== */
:root { --aqua:#32d6c5; --aqua-soft:#dffaf6; --violet:#9a78ff; --violet-soft:#eee9ff; --coral:#ff6f61; --coral-soft:#fff0ed; --amber:#ffb547; --amber-soft:#fff5df; }
.section-shell { padding:112px 0; }
.section-heading { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:70px; align-items:end; margin-bottom:44px; }
.section-heading .section-title { margin-bottom:0; max-width:22ch; font-size:clamp(2rem,4vw,3.3rem); letter-spacing:-.045em; }
.section-heading__body { margin:0; color:var(--ink-muted); font-size:1rem; line-height:1.8; }
.section-heading--compact { grid-template-columns:1fr; margin-bottom:38px; }.section-heading--compact .section-title{max-width:25ch}
.section-title--on-dark { color:#fff; }.text-link{display:inline-flex;align-items:center;gap:7px;color:var(--navy);font-weight:800;text-decoration:none}.text-link svg,.btn svg,.site-nav__cta svg,.product-card__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.brand__lockup { display:flex; flex-direction:column; line-height:1.05; }.brand__descriptor { margin-top:4px; color:var(--ink-faint); font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.site-header { background:rgba(255,255,255,.9); box-shadow:0 8px 30px rgba(5,15,36,.05); }.site-nav__cta{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:9px;background:var(--navy);color:#fff}.site-nav__cta:hover{background:#173765;color:#fff}

.hero--home { padding:105px 0 112px; min-height:720px; background:linear-gradient(132deg,#06142f 0%,#0b2551 50%,#173c69 100%); }
.hero--home::before { background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 92%) }
.hero__aurora { position:absolute; border-radius:50%; filter:blur(12px); opacity:.5; pointer-events:none; }.hero__aurora--one{width:430px;height:430px;right:-120px;top:-170px;background:radial-gradient(circle,rgba(50,214,197,.48),transparent 68%)}.hero__aurora--two{width:480px;height:480px;left:35%;bottom:-350px;background:radial-gradient(circle,rgba(154,120,255,.32),transparent 68%)}
.hero--home .hero__grid { grid-template-columns:minmax(0,1fr) minmax(430px,.82fr); gap:76px; }.hero__content{position:relative;z-index:2}.hero__flag{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);color:#c8d7ed;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.hero__flag-dot{width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 5px rgba(50,214,197,.13)}
.hero__title--home { max-width:11ch; font-size:clamp(3.6rem,6.2vw,5.8rem); line-height:.98; letter-spacing:-.065em; }.hero__title-accent{background:linear-gradient(100deg,var(--saffron),#ffd36e);-webkit-background-clip:text;background-clip:text;color:transparent}.hero--home .hero__subhead{max-width:55ch;color:#b9c9e2;font-size:1.08rem}.hero--home .btn{border-radius:9px}.hero__signals{display:flex;flex-wrap:wrap;gap:16px 22px;margin-top:28px;color:#9eb1cf;font-size:.73rem;font-weight:700}.hero__signals span{display:flex;align-items:center;gap:6px}.hero__signals svg{width:14px;height:14px;fill:none;stroke:var(--aqua);stroke-width:2}
.hero__visual{position:relative;z-index:2}.proof-console{overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(5,15,36,.78);box-shadow:0 34px 90px rgba(0,0,0,.38);backdrop-filter:blur(16px);transform:perspective(1200px) rotateY(-3deg) rotateX(1deg)}.proof-console__bar{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045)}.proof-console__window-dots{display:flex;gap:5px}.proof-console__window-dots span{width:7px;height:7px;border-radius:50%;background:#425878}.proof-console__window-dots span:nth-child(1){background:var(--coral)}.proof-console__window-dots span:nth-child(2){background:var(--amber)}.proof-console__window-dots span:nth-child(3){background:var(--aqua)}.proof-console__title{flex:1;color:#9fb1ce;font-size:.7rem;font-weight:700}.proof-console__live{display:flex;align-items:center;gap:6px;color:#8aefbd;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.proof-console__live span{width:6px;height:6px;border-radius:50%;background:#4be495;box-shadow:0 0 10px #4be495}.proof-console__body{padding:23px}.proof-console__summary{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.proof-console__overline{display:block;color:#6f87a9;font-size:.58rem;text-transform:uppercase;letter-spacing:.12em}.proof-console__summary strong{display:block;margin-top:3px;color:#fff}.proof-console__score{display:flex;align-items:center;gap:5px;padding:6px 9px;border-radius:7px;background:rgba(75,228,149,.11);color:#66e8a8;font:800 .65rem var(--font-mono)}.proof-console__score svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}.proof-console__flow{display:flex;flex-direction:column;gap:8px}.proof-row{display:grid;grid-template-columns:36px 1fr 22px;align-items:center;gap:10px;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.035)}.proof-row__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:rgba(50,214,197,.1);color:var(--aqua)}.proof-row__icon svg,.proof-row__check svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}.proof-row div strong,.proof-row div span{display:block}.proof-row div strong{color:#eaf1fc;font-size:.76rem}.proof-row div span{color:#6f87a9;font-size:.62rem}.proof-row__check{color:#4be495}.proof-console__hash{display:flex;align-items:center;gap:10px;margin-top:13px;padding:10px;border-radius:8px;background:#030b1b;color:#5d7190;font-size:.63rem}.proof-console__hash code{flex:1;color:#92a7c5;font-family:var(--font-mono)}.proof-console__copy svg{width:14px;height:14px;fill:none;stroke:currentColor}.hero-float{position:absolute;display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid rgba(255,255,255,.17);border-radius:11px;background:rgba(14,41,78,.92);box-shadow:0 16px 36px rgba(0,0,0,.25)}.hero-float--top{right:-28px;top:-35px}.hero-float--bottom{left:-38px;bottom:-34px}.hero-float__icon{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:rgba(255,181,71,.14);color:var(--amber)}.hero-float__icon svg{width:15px;height:15px;fill:none;stroke:currentColor}.hero-float strong,.hero-float span{display:block}.hero-float strong{color:#fff;font-size:.72rem}.hero-float div span{color:#8297b8;font-size:.59rem}.hero-float__pulse{width:9px;height:9px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 6px rgba(50,214,197,.12)}

.focus-band{padding:24px 0;background:#fff;border-bottom:1px solid var(--border)}.focus-band__inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.focus-band__label{color:var(--ink-faint);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.13em}.focus-band__items{display:flex;align-items:center;gap:24px;color:var(--navy);font-size:.77rem;font-weight:800}.focus-band__items i{width:4px;height:4px;border-radius:50%;background:var(--saffron)}

.products{background:linear-gradient(180deg,#f6f8fc,#fff)}.product-grid{gap:24px}.product-card{display:grid;grid-template-columns:135px 1fr;padding:0;min-height:310px;border-radius:20px}.product-card::before{display:none}.product-card__visual{position:relative;overflow:hidden;background:var(--accent-deep,var(--navy));}.product-card__orb{position:absolute;border-radius:50%}.product-card__orb--one{width:110px;height:110px;right:-42px;top:-30px;background:rgba(255,255,255,.1)}.product-card__orb--two{width:130px;height:130px;left:-70px;bottom:-50px;background:rgba(255,255,255,.07)}.product-card__number{position:absolute;left:15px;top:14px;color:rgba(255,255,255,.46);font:700 .66rem var(--font-mono)}.product-card__icon{position:absolute;left:50%;top:50%;width:58px;height:58px;transform:translate(-50%,-50%);background:rgba(255,255,255,.14);backdrop-filter:blur(8px)}.product-card__icon svg{width:28px;height:28px}.product-card__content{display:flex;flex-direction:column;padding:25px}.product-card__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px;color:var(--ink-faint);font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.product-card__name{font-size:1.35rem}.product-card__outcome{margin:7px 0 9px;color:var(--navy);font-size:.9rem;font-weight:700;line-height:1.45}.product-card__description{font-size:.82rem;line-height:1.55;flex:0}.product-card__capabilities{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.product-card__capabilities span{padding:5px 8px;border-radius:6px;background:var(--surface-tint);color:var(--ink-muted);font-size:.62rem;font-weight:700}.product-card__go{margin-top:auto;padding-top:18px}.product-card--coral{--accent-deep:#c64c43}.product-card--violet{--accent-deep:#5d45a1}.product-card--aqua{--accent-deep:#087f82}.product-card--amber{--accent-deep:#b86a16}

.standard{position:relative;overflow:hidden;background:linear-gradient(135deg,#06142f,#0d2b58);color:#aebed5}.standard__grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:75px;align-items:center}.standard__story>p:not(.eyebrow){max-width:53ch}.standard__principles{display:flex;flex-direction:column;gap:18px;margin-top:34px}.standard__principles>div{display:flex;gap:13px}.standard__principles>div>span{color:var(--aqua);font:700 .68rem var(--font-mono)}.standard__principles strong,.standard__principles p{display:block}.standard__principles strong{color:#fff;font-size:.85rem}.standard__principles p{margin:2px 0 0;color:#8298b8;font-size:.74rem}.evidence-map{padding:22px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.05);box-shadow:0 30px 70px rgba(0,0,0,.2)}.evidence-map__header,.evidence-map__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#7d92b1;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.evidence-map__badge{padding:5px 7px;border-radius:5px;background:rgba(50,214,197,.1);color:var(--aqua)}.evidence-map__pipeline{display:flex;align-items:center;margin:28px 0}.map-node{flex:1;padding:13px 10px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.04);text-align:center}.map-node__icon{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 8px;border-radius:8px;background:rgba(255,255,255,.07);color:var(--aqua)}.map-node__icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}.map-node div span,.map-node strong,.map-node small{display:block}.map-node div span{color:#647b9c;font-size:.52rem;text-transform:uppercase}.map-node strong{margin:3px 0;color:#fff;font-size:.71rem}.map-node small{color:#6f86a7;font-size:.54rem}.map-connector{display:flex;align-items:center;width:35px;color:#607796}.map-connector i{height:1px;flex:1;background:#415979}.map-connector svg{width:13px;height:13px;fill:none;stroke:currentColor}.evidence-map__footer{padding-top:14px;border-top:1px solid rgba(255,255,255,.08);text-transform:none;letter-spacing:0}.evidence-map__footer span{display:flex;align-items:center;gap:6px}.evidence-map__footer i{width:6px;height:6px;border-radius:50%;background:#4be495}.evidence-map__footer code{font-family:var(--font-mono)}

.trust{background:#f2f5fb}.trust-card{position:relative;overflow:hidden;padding:30px;border-radius:18px}.trust-card__number{position:absolute;right:18px;top:15px;color:#d9e0eb;font:800 2.2rem var(--font-mono)}.trust-card__icon{position:relative;margin-bottom:24px}.trust-card h3{position:relative;margin:0 0 10px;color:var(--navy);font-size:1.1rem}.trust-card p{position:relative;margin:0;color:var(--ink-muted);font-size:.84rem}.trust-card code{display:block;margin-top:18px;padding:8px;border-radius:7px;background:var(--navy-tint);color:var(--navy-mid);font:.66rem var(--font-mono)}.trust-card--blue .trust-card__icon{background:#e7f1ff;color:#347bd8}.trust-card--violet .trust-card__icon{background:var(--violet-soft);color:#7151c9}.trust-card--green .trust-card__icon{background:var(--green-tint);color:var(--green)}.trust-card__chain{display:flex;align-items:center;margin-top:25px}.trust-card__chain span{width:15px;height:15px;border:3px solid var(--violet);border-radius:50%}.trust-card__chain i{width:32px;height:2px;background:#d5cafa}.trust-card__verified{display:inline-flex;align-items:center;gap:6px;margin-top:18px;color:var(--green);font-size:.7rem;font-weight:800}.trust-card__verified svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

.process{background:#fff}.process__heading{max-width:720px;margin-bottom:48px}.process__heading .section-title{max-width:20ch;margin-bottom:18px}.process__heading>p:last-child{color:var(--ink-muted)}.process__steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:18px;overflow:hidden}.process-step{position:relative;padding:30px;border-right:1px solid var(--border)}.process-step:last-child{border-right:0}.process-step__number{color:var(--ink-faint);font:700 .65rem var(--font-mono)}.process-step__icon{display:grid;place-items:center;width:46px;height:46px;margin:26px 0 22px;border-radius:11px;background:var(--navy);color:#fff}.process-step:nth-child(2) .process-step__icon{background:#6c4eb4}.process-step:nth-child(3) .process-step__icon{background:#118d7d}.process-step__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}.process-step h3{margin:0 0 8px;color:var(--navy)}.process-step p{margin:0;color:var(--ink-muted);font-size:.86rem}

.about{background:linear-gradient(150deg,#fff9f1,#f5f1ff)}.about__grid{display:grid;grid-template-columns:1fr .72fr;gap:90px;align-items:center}.about__content .section-title{margin-bottom:25px}.about__content>p{color:var(--ink-muted)}.about__lead{color:var(--navy)!important;font-size:1.12rem;font-weight:700}.about__manifesto{position:relative;padding:42px;border:1px solid rgba(154,120,255,.22);border-radius:20px;background:rgba(255,255,255,.75);box-shadow:var(--shadow-md)}.about__quote-mark{position:absolute;right:26px;top:5px;color:#e3d9ff;font-size:5rem;font-weight:900}.about__manifesto blockquote{position:relative;margin:0 0 28px;color:var(--navy);font-size:1.4rem;font-weight:800;line-height:1.4}.about__signature{display:flex;align-items:center;gap:11px;padding-top:18px;border-top:1px solid var(--border)}.about__signature img{width:34px;height:34px}.about__signature strong,.about__signature span{display:block}.about__signature strong{color:var(--navy);font-size:.76rem}.about__signature span{color:var(--ink-faint);font-size:.64rem}
.cta-panel{padding:0 0 100px;background:linear-gradient(150deg,#fff9f1,#f5f1ff)}.cta-panel__inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px;overflow:hidden;padding:48px;border-radius:22px;background:linear-gradient(120deg,#071735,#153e6c);color:#b5c5db}.cta-panel__inner h2{margin:0 0 10px;color:#fff;font-size:clamp(1.8rem,3vw,2.6rem)}.cta-panel__inner p{margin:0}.cta-panel__glow{position:absolute;width:300px;height:300px;right:10%;bottom:-250px;border-radius:50%;background:var(--violet);filter:blur(30px);opacity:.3}.cta-panel__inner>div:not(.cta-panel__glow){position:relative;z-index:1}.cta-panel__actions{display:flex;gap:10px;flex-shrink:0}.cta-panel .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}

.site-footer{padding:68px 0 28px}.site-footer__top{display:flex;justify-content:space-between;gap:70px;padding-bottom:40px}.site-footer__brand{max-width:360px}.site-footer__brand p{color:#7589a8;font-size:.82rem}.brand--footer .brand__word{color:#fff}.site-footer__nav{display:flex;gap:70px}.site-footer__column{display:flex;flex-direction:column;align-items:flex-start;gap:9px}.site-footer__heading{margin-bottom:5px;color:#647a9b;font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.site-footer__availability{display:flex;align-items:center;gap:7px;color:#7589a8;font-size:.72rem}.site-footer__availability>span{width:6px;height:6px;border-radius:50%;background:var(--aqua)}.site-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}.site-footer__legal{padding:0;border:0}

@media(max-width:1000px){.hero--home .hero__grid{grid-template-columns:1fr;gap:70px}.hero__visual{max-width:560px;margin:0 auto;width:100%}.hero__title--home{max-width:12ch}.standard__grid,.about__grid{grid-template-columns:1fr;gap:55px}}
@media(max-width:820px){.section-shell{padding:78px 0}.section-heading{grid-template-columns:1fr;gap:20px}.product-card{grid-template-columns:105px 1fr}.process__steps{grid-template-columns:1fr}.process-step{border-right:0;border-bottom:1px solid var(--border)}.process-step:last-child{border-bottom:0}.cta-panel__inner{align-items:flex-start;flex-direction:column}.site-footer__top{flex-direction:column}.focus-band__inner{align-items:flex-start;flex-direction:column}.focus-band__items{flex-wrap:wrap}}
@media(max-width:620px){.site-nav__link:nth-child(2),.site-nav__link:nth-child(3),.site-nav__link:nth-child(4){display:none}.site-header__inner{gap:10px}.brand__descriptor{display:none}.site-nav{gap:10px}.site-nav__cta{padding:9px 11px}.hero--home{min-height:0;padding:72px 0 88px}.hero__title--home{font-size:clamp(3.1rem,15vw,4.4rem)}.hero__visual{max-width:100%}.hero-float{display:none}.proof-console{transform:none}.proof-console__body{padding:16px}.product-grid{grid-template-columns:1fr}.product-card{grid-template-columns:1fr}.product-card__visual{height:105px}.product-card__content{padding:22px}.focus-band__items{gap:10px 14px}.focus-band__items i{display:none}.evidence-map__pipeline{align-items:stretch;flex-direction:column;gap:8px}.map-connector{width:auto;height:22px;justify-content:center;transform:rotate(90deg)}.cta-panel__inner{padding:30px}.cta-panel__actions{align-items:stretch;flex-direction:column;width:100%}.site-footer__nav{gap:35px;flex-direction:column}.site-footer__bottom{align-items:flex-start;flex-direction:column}.trust__grid{grid-template-columns:1fr}}

/* Calm, compact flagship composition */
.hero--quiet { min-height:640px; padding:108px 0; }
.hero--quiet .hero__grid { grid-template-columns:minmax(0,1fr) minmax(350px,.7fr); }
.hero--quiet .hero__title--home { max-width:10ch; font-size:clamp(3.3rem,5.8vw,5.4rem); }
.hero--quiet .hero__subhead { max-width:50ch; }
.portfolio-window { overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(5,15,36,.66); box-shadow:0 28px 70px rgba(0,0,0,.28); backdrop-filter:blur(15px); }
.portfolio-window__bar { display:flex; align-items:center; justify-content:space-between; padding:15px 17px; border-bottom:1px solid rgba(255,255,255,.09); color:#8fa4c3; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.portfolio-window__status { display:flex; align-items:center; gap:6px; color:#b9c8de; }.portfolio-window__status i { width:6px; height:6px; border-radius:50%; background:var(--aqua); }
.portfolio-window__list { padding:10px; }.portfolio-window__list>div { display:grid; grid-template-columns:11px 1fr auto; align-items:center; gap:10px; padding:15px 13px; border-bottom:1px solid rgba(255,255,255,.07); }.portfolio-window__list>div:last-child{border-bottom:0}.portfolio-window__list strong{color:#edf4ff;font-size:.82rem}.portfolio-window__list small{color:#7087a8;font-size:.63rem}.portfolio-dot{width:8px;height:8px;border-radius:3px}.portfolio-dot--coral{background:var(--coral)}.portfolio-dot--violet{background:var(--violet)}.portfolio-dot--aqua{background:var(--aqua)}.portfolio-dot--amber{background:var(--amber)}
.hero-art { position:relative; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:#06142f; box-shadow:0 34px 80px rgba(0,0,0,.32); isolation:isolate; }.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,20,47,.38),transparent 35%);pointer-events:none}.hero-art img{width:100%;aspect-ratio:1.28/1;object-fit:cover;object-position:68% center;transition:transform 8s cubic-bezier(.2,.7,.2,1)}.hero-art:hover img{transform:scale(1.035)}
@keyframes hero-art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes aurora-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24px,18px,0) scale(1.08)}}.hero-art{animation:hero-art-float 9s ease-in-out infinite}.hero--quiet .hero__aurora--one{animation:aurora-drift 16s ease-in-out infinite}
.product-grid--simple { grid-template-columns:repeat(4,1fr); gap:15px; }.simple-product { --product-accent:var(--navy); display:flex; min-height:300px; flex-direction:column; padding:23px; border:1px solid var(--border); border-radius:16px; background:#fff; color:inherit; text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .18s ease,box-shadow .18s ease; }.simple-product:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.simple-product--coral{--product-accent:#d75d52}.simple-product--violet{--product-accent:#7655c2}.simple-product--aqua{--product-accent:#078c88}.simple-product--amber{--product-accent:#bd7518}.simple-product__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.simple-product__icon{display:grid;place-items:center;width:43px;height:43px;border-radius:10px;background:color-mix(in srgb,var(--product-accent) 12%,white);color:var(--product-accent)}.simple-product__icon svg{width:21px;height:21px}.simple-product__category{color:var(--product-accent);font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.simple-product h3{margin:7px 0 10px;color:var(--navy);font-size:1.08rem;line-height:1.3}.simple-product p{margin:0;color:var(--ink-muted);font-size:.8rem;line-height:1.62}.simple-product__link{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;color:var(--navy);font-size:.72rem;font-weight:800}.simple-product__link svg{width:14px;height:14px;fill:none;stroke:currentColor}.method-section{background:#f0f4fa}.method-section__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}.method-section .section-title{margin-bottom:20px}.method-section__lead{max-width:45ch;color:var(--ink-muted)}.method-list{overflow:hidden;border:1px solid var(--border);border-radius:15px;background:#fff}.method-list>div{display:flex;gap:18px;padding:22px;border-bottom:1px solid var(--border)}.method-list>div:last-child{border-bottom:0}.method-list>div>span{color:var(--aqua);font:800 .68rem var(--font-mono)}.method-list strong{display:block;color:var(--navy)}.method-list p{margin:3px 0 0;color:var(--ink-muted);font-size:.8rem}.studio-strip{padding:78px 0;background:#fff}.studio-strip__inner{display:grid;grid-template-columns:1fr .8fr;gap:80px;align-items:end}.studio-strip h2{max-width:19ch;margin:0;color:var(--navy);font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.16}.studio-strip__inner>p{margin:0;color:var(--ink-muted);font-size:.96rem;line-height:1.75}
.simple-product__logo { width:48px; height:48px; border-radius:13px; box-shadow:0 8px 18px rgba(10,31,68,.13); }
@media(max-width:980px){.product-grid--simple{grid-template-columns:1fr 1fr}.hero--quiet .hero__grid{grid-template-columns:1fr}.portfolio-window{max-width:580px}.method-section__grid{gap:55px}}
@media(max-width:700px){.method-section__grid,.studio-strip__inner{grid-template-columns:1fr;gap:35px}.hero--quiet{padding:72px 0}.hero--quiet .hero__title--home{font-size:clamp(3rem,14vw,4.2rem)}.product-grid--simple{grid-template-columns:1fr}.simple-product{min-height:230px}.section-heading{margin-bottom:32px}.portfolio-window__list>div{grid-template-columns:11px 1fr}.portfolio-window__list small{display:none}}
@media(prefers-reduced-motion:reduce){.hero-art,.hero--quiet .hero__aurora--one,.live-dot{animation:none!important}.hero-art img{transition:none}}

/* v7 composition: open layout, saffron-led brand */
.site-header { border-bottom:0; box-shadow:0 1px 0 rgba(10,31,68,.08); }
.site-nav__link::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; border-radius:2px; background:var(--saffron); transition:right .2s ease; }.site-nav__link:hover::after{right:0}
.site-nav__cta { background:var(--saffron); color:#2a1804; box-shadow:0 7px 18px rgba(255,153,51,.22); }.site-nav__cta:hover{background:#ffad5c;color:#201000}
.hero--quiet { min-height:680px; padding:112px 0 122px; }.hero--quiet .hero__grid{grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr);gap:34px}.hero--quiet .hero__content{padding-right:28px}.hero__flag{color:#ffd29c;border-color:rgba(255,153,51,.3);background:rgba(255,153,51,.08)}.hero__flag-dot{background:var(--saffron);box-shadow:0 0 0 5px rgba(255,153,51,.13)}
.hero-art { margin:-42px -12vw -48px 0; border:0; border-radius:0; background:transparent; box-shadow:none; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 84%,transparent 100%),linear-gradient(0deg,transparent 0,#000 18%,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 84%,transparent 100%),linear-gradient(0deg,transparent 0,#000 18%,#000 88%,transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; }.hero-art::after{display:none}.hero-art img{aspect-ratio:1.38/1;object-position:72% center}
.products.section-shell { padding:118px 0 128px; background:#fff; }.products .section-heading{padding-bottom:36px;border-bottom:1px solid var(--border)}.products .eyebrow,.method-section .eyebrow,.studio-strip .eyebrow{color:var(--saffron-deep)}
.product-grid--simple { gap:0; border-top:0; }.simple-product { position:relative; min-height:310px; padding:30px 26px; border:0; border-right:1px solid var(--border); border-radius:0; box-shadow:none; }.simple-product:last-child{border-right:0}.simple-product::before{content:"";position:absolute;left:26px;top:0;width:42px;height:3px;border-radius:3px;background:var(--saffron)}.simple-product:hover{z-index:1;transform:translateY(-5px);background:#fffaf4;box-shadow:0 24px 50px rgba(10,31,68,.09)}.simple-product__category{color:var(--saffron-deep)}.simple-product__logo{width:52px;height:52px}.simple-product h3{font-size:1.14rem}
.method-section { position:relative; overflow:hidden; background:#f6f8fc; }.method-section::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(var(--saffron),#ffbd76)}.method-list{border:0;border-radius:0;background:transparent}.method-list>div{padding:24px 0;border-color:var(--border)}.method-list>div>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:var(--saffron);color:#2a1804}.studio-strip{padding:88px 0;border-top:1px solid #ffe0bb;background:linear-gradient(105deg,#fff7ec 0%,#fff 72%)}.studio-strip h2{position:relative}.studio-strip h2::after{content:"";display:block;width:64px;height:4px;margin-top:22px;border-radius:4px;background:var(--saffron)}
.site-footer{border-top:5px solid var(--saffron)}
@media(max-width:1100px){.hero-art{margin:-20px -5vw -30px 0}.hero--quiet .hero__grid{grid-template-columns:minmax(0,.9fr) minmax(410px,1.1fr)}}
@media(max-width:980px){.hero--quiet .hero__grid{grid-template-columns:1fr;gap:40px}.hero--quiet .hero__content{padding-right:0}.hero-art{max-width:760px;margin:0 auto -30px}.product-grid--simple{grid-template-columns:1fr 1fr}.simple-product:nth-child(2){border-right:0}.simple-product:nth-child(-n+2){border-bottom:1px solid var(--border)}}
@media(max-width:700px){.hero--quiet{padding:74px 0 84px}.hero-art{margin:0 -20px -20px}.product-grid--simple{grid-template-columns:1fr}.simple-product{min-height:230px;border-right:0;border-bottom:1px solid var(--border)}.simple-product:last-child{border-bottom:0}.simple-product:nth-child(2){border-right:0}}

/* Contact: open editorial layout with one purposeful form */
.contact-page{background:#fff}.contact-hero{position:relative;overflow:hidden;padding:92px 0 82px;background:linear-gradient(125deg,#06142f,#0e315d);color:#b8c7dc}.contact-hero::after{content:"";position:absolute;width:430px;height:430px;right:-110px;top:-250px;border-radius:50%;background:rgba(255,153,51,.24);filter:blur(10px)}.contact-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:70px;align-items:end}.contact-hero .eyebrow{color:var(--saffron)}.contact-hero h1{max-width:15ch;margin:12px 0 20px;color:#fff;font-size:clamp(2.8rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.055em}.contact-hero p:last-child{max-width:54ch;margin:0;font-size:1.03rem;line-height:1.75}.contact-hero__signal{display:flex;align-items:center;gap:12px;padding-bottom:9px;color:#dce7f6;font:800 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.contact-hero__signal span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--saffron);color:#251505}.contact-hero__signal i{width:34px;height:1px;background:rgba(255,255,255,.25)}
.contact-section{padding:100px 0 118px}.contact-grid{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(500px,1.3fr);gap:100px;align-items:start}.contact-intro{padding-top:13px}.contact-intro h2{max-width:14ch;margin:0 0 20px;color:var(--navy);font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.12;letter-spacing:-.035em}.contact-intro>p{margin:0;color:var(--ink-muted);line-height:1.78}.contact-note{margin-top:38px;padding:22px 0;border-top:3px solid var(--saffron);border-bottom:1px solid var(--border)}.contact-note strong,.contact-note span{display:block}.contact-note strong{color:var(--navy);font-size:.86rem}.contact-note span{margin-top:6px;color:var(--ink-faint);font-size:.76rem;line-height:1.55}
.contact-form{display:flex;flex-direction:column;gap:24px;padding:0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-field{display:flex;flex-direction:column;gap:9px;color:var(--navy);font-size:.76rem;font-weight:800}.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid #cdd6e3;border-radius:10px;background:#f9fbfd;color:var(--ink);font:500 .92rem var(--font-body);outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.form-field input,.form-field select{height:52px;padding:0 14px}.form-field textarea{min-height:165px;padding:14px;resize:vertical;line-height:1.6}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--saffron);background:#fff;box-shadow:0 0 0 4px rgba(255,153,51,.13)}.form-field [aria-invalid="true"]{border-color:#bd3f3f}.form-error{color:#a72e2e;font-size:.7rem;font-weight:700}.form-trap{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.contact-form__footer{display:flex;align-items:center;gap:18px;padding-top:4px}.contact-form__footer .btn{border:0;cursor:pointer}.contact-form__footer>span{max-width:28ch;color:var(--ink-faint);font-size:.7rem;line-height:1.5}
.form-alert{padding:14px 16px;border:1px solid #e4a1a1;border-left:4px solid #bd3f3f;border-radius:8px;background:#fff5f5;color:#852525;font-size:.82rem;font-weight:700;line-height:1.55}
.contact-success{padding:15px 0}.contact-success__mark{display:grid;place-items:center;width:58px;height:58px;margin-bottom:28px;border-radius:50%;background:var(--saffron);color:#261605;font-size:1.5rem;font-weight:900}.contact-success .eyebrow{color:var(--saffron-deep)}.contact-success h2{max-width:17ch;margin:10px 0 15px;color:var(--navy);font-size:clamp(2rem,3.7vw,3.2rem);line-height:1.08}.contact-success>p:not(.eyebrow){margin:0 0 28px;color:var(--ink-muted)}
@media(max-width:850px){.contact-hero__grid,.contact-grid{grid-template-columns:1fr}.contact-hero__signal{display:none}.contact-grid{gap:55px}.contact-section{padding:75px 0 90px}}@media(max-width:560px){.contact-hero{padding:68px 0}.contact-hero h1{font-size:clamp(2.6rem,13vw,3.7rem)}.form-row{grid-template-columns:1fr}.contact-form__footer{align-items:flex-start;flex-direction:column}}

/* ---------- mobile nav (hamburger) ----------
   Below the breakpoint the inline nav row can no longer fit Products/
   Approach/Contact without crowding or scrolling, so it collapses behind
   a toggle button into a full-width dropdown panel instead. Desktop keeps
   the existing inline .site-nav flex row untouched - the toggle button is
   display:none until the breakpoint hits. */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
}

.site-nav__toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
  .site-nav__toggle {
    display: flex;
  }

  /* Cancels the older, narrower breakpoint above (max-width:620px) that
     used to hide the 2nd/3rd nav children outright when there was nowhere
     for them to go - now they belong inside the dropdown instead. */
  .site-nav__link:nth-child(2),
  .site-nav__link:nth-child(3),
  .site-nav__link:nth-child(4) {
    display: flex;
  }

  .site-header__inner {
    position: relative;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0 32px;
    border-top: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 16px 30px rgba(5, 15, 36, 0.1);
    transition: max-height 0.25s ease;
  }

  .site-nav.is-open {
    max-height: 320px;
    padding: 8px 32px 22px;
    overflow-y: auto;
  }

  .site-nav__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }

  .site-nav__cta {
    justify-content: center;
    margin-top: 16px;
  }
}

@media (max-width: 560px) {
  .site-nav,
  .site-nav.is-open {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------- theme toggle ---------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--floor-saffron);
  transform: translateY(-1px);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }

.site-header__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ---------- product floors ---------- */

.floor {
  margin-top: 64px;
}

.floor:first-of-type {
  margin-top: 0;
}

.floor__heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.floor__label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--floor-color);
}

.floor__lead {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.86rem;
}

.floor--saffron { --floor-color: var(--floor-saffron-core); }
.floor--green { --floor-color: var(--floor-green-core); }
.floor--violet { --floor-color: var(--floor-violet-core); }

:root[data-theme="dark"] .floor--saffron { --floor-color: var(--floor-saffron); }
:root[data-theme="dark"] .floor--green { --floor-color: var(--floor-green); }
:root[data-theme="dark"] .floor--violet { --floor-color: var(--floor-violet); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .floor--saffron { --floor-color: var(--floor-saffron); }
  :root:not([data-theme="light"]) .floor--green { --floor-color: var(--floor-green); }
  :root:not([data-theme="light"]) .floor--violet { --floor-color: var(--floor-violet); }
}

/* Floor accent applied as a left border + badge/label color only - the
   card body stays the normal neutral surface, never a full color wash. */
.simple-product--floor-saffron { border-left: 3px solid var(--floor-saffron); }
.simple-product--floor-green { border-left: 3px solid var(--floor-green); }
.simple-product--floor-violet { border-left: 3px solid var(--floor-violet); }
.simple-product--floor-saffron::before,
.simple-product--floor-green::before,
.simple-product--floor-violet::before {
  display: none;
}
.simple-product--floor-saffron .simple-product__category { color: var(--floor-saffron-core); }
.simple-product--floor-green .simple-product__category { color: var(--floor-green-core); }
.simple-product--floor-violet .simple-product__category { color: var(--floor-violet-core); }
:root[data-theme="dark"] .simple-product--floor-saffron .simple-product__category { color: var(--floor-saffron); }
:root[data-theme="dark"] .simple-product--floor-green .simple-product__category { color: var(--floor-green); }
:root[data-theme="dark"] .simple-product--floor-violet .simple-product__category { color: var(--floor-violet); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .simple-product--floor-saffron .simple-product__category { color: var(--floor-saffron); }
  :root:not([data-theme="light"]) .simple-product--floor-green .simple-product__category { color: var(--floor-green); }
  :root:not([data-theme="light"]) .simple-product--floor-violet .simple-product__category { color: var(--floor-violet); }
}

.status-tag--early-stage {
  color: #6d28d9;
  background: #f2e9ff;
}

:root[data-theme="dark"] .status-tag--early-stage,
:root[data-theme="dark"] .status-tag--coming-soon,
:root[data-theme="dark"] .status-tag--in-progress,
:root[data-theme="dark"] .status-tag--in-development,
:root[data-theme="dark"] .status-tag--pilot,
:root[data-theme="dark"] .status-tag--private-preview,
:root[data-theme="dark"] .status-tag--live {
  filter: brightness(1.15) saturate(1.05);
}

@media (max-width: 780px) {
  .floor { margin-top: 48px; }
}

/* ---------- entrance motion (hero, header) ---------- */
/* Staggered fade/slide-up on load: header, then hero kicker, headline,
   subtext, actions. Runs once on paint; content is fully present in the
   DOM the whole time, so nothing blocks readability or scroll while the
   animation plays. */

@keyframes enter-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-header,
.hero__flag,
.hero__title,
.hero__subhead,
.hero__actions {
  animation: enter-up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.site-header { animation-delay: 0ms; }
.hero__flag { animation-delay: 80ms; }
.hero__title { animation-delay: 150ms; }
.hero__subhead { animation-delay: 220ms; }
.hero__actions { animation-delay: 290ms; }

/* .hero-art already has its own infinite idle float (hero-art-float,
   defined earlier) - added as a second comma-separated animation here
   rather than overriding that declaration, so the entrance plays once
   and the float keeps going afterward instead of replacing it. */
.hero-art {
  animation: enter-up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 200ms both,
    hero-art-float 9s ease-in-out 700ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .hero__flag,
  .hero__title,
  .hero__subhead,
  .hero__actions,
  .hero-art {
    animation: none;
  }
}

/* ---------- dark-mode component overrides ---------- */
/* Everything else on the page already reads color through the tokens above
   and repaints for free. These are the handful of places that used a flat
   hardcoded hex for a light decorative surface, which needs an explicit
   dark counterpart so it doesn't stay a bright-white patch inside an
   otherwise-dark page. */

:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .site-nav.is-open,
:root[data-theme="dark"] .products.section-shell,
:root[data-theme="dark"] .products,
:root[data-theme="dark"] .trust,
:root[data-theme="dark"] .method-section,
:root[data-theme="dark"] .simple-product,
:root[data-theme="dark"] .pricing-notice,
:root[data-theme="dark"] .legal__notice,
:root[data-theme="dark"] .studio-strip,
:root[data-theme="dark"] .about,
:root[data-theme="dark"] .about__manifesto,
:root[data-theme="dark"] .form-field input,
:root[data-theme="dark"] .form-field select,
:root[data-theme="dark"] .form-field textarea,
:root[data-theme="dark"] .choice-card,
:root[data-theme="dark"] .pricing-flow-list {
  background: var(--surface);
}

:root[data-theme="dark"] .site-header { background: rgba(15, 26, 46, 0.9); }
:root[data-theme="dark"] .products.section-shell,
:root[data-theme="dark"] .products { background: linear-gradient(180deg, var(--paper), var(--surface)); }
:root[data-theme="dark"] .trust { background: var(--navy-tint); }
:root[data-theme="dark"] .method-section { background: var(--surface-tint); }
:root[data-theme="dark"] .pricing-notice,
:root[data-theme="dark"] .legal__notice { border-color: rgba(var(--floor-saffron-rgb), 0.4); background: rgba(var(--floor-saffron-rgb), 0.08); }
:root[data-theme="dark"] .studio-strip,
:root[data-theme="dark"] .about { background: linear-gradient(150deg, var(--surface-tint), var(--surface)); }
:root[data-theme="dark"] .form-field input,
:root[data-theme="dark"] .form-field select,
:root[data-theme="dark"] .form-field textarea { border-color: var(--border-strong); color: var(--ink); }
:root[data-theme="dark"] .cta-panel { background: linear-gradient(150deg, var(--surface-tint), var(--surface)); }
:root[data-theme="dark"] .hero-art::after { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header,
  :root:not([data-theme="light"]) .site-nav.is-open,
  :root:not([data-theme="light"]) .products.section-shell,
  :root:not([data-theme="light"]) .products,
  :root:not([data-theme="light"]) .trust,
  :root:not([data-theme="light"]) .method-section,
  :root:not([data-theme="light"]) .simple-product,
  :root:not([data-theme="light"]) .pricing-notice,
  :root:not([data-theme="light"]) .legal__notice,
  :root:not([data-theme="light"]) .studio-strip,
  :root:not([data-theme="light"]) .about,
  :root:not([data-theme="light"]) .about__manifesto,
  :root:not([data-theme="light"]) .form-field input,
  :root:not([data-theme="light"]) .form-field select,
  :root:not([data-theme="light"]) .form-field textarea,
  :root:not([data-theme="light"]) .choice-card,
  :root:not([data-theme="light"]) .pricing-flow-list {
    background: var(--surface);
  }

  :root:not([data-theme="light"]) .site-header { background: rgba(15, 26, 46, 0.9); }
  :root:not([data-theme="light"]) .products.section-shell,
  :root:not([data-theme="light"]) .products { background: linear-gradient(180deg, var(--paper), var(--surface)); }
  :root:not([data-theme="light"]) .trust { background: var(--navy-tint); }
  :root:not([data-theme="light"]) .method-section { background: var(--surface-tint); }
  :root:not([data-theme="light"]) .pricing-notice,
  :root:not([data-theme="light"]) .legal__notice { border-color: rgba(var(--floor-saffron-rgb), 0.4); background: rgba(var(--floor-saffron-rgb), 0.08); }
  :root:not([data-theme="light"]) .studio-strip,
  :root:not([data-theme="light"]) .about { background: linear-gradient(150deg, var(--surface-tint), var(--surface)); }
  :root:not([data-theme="light"]) .form-field input,
  :root:not([data-theme="light"]) .form-field select,
  :root:not([data-theme="light"]) .form-field textarea { border-color: var(--border-strong); color: var(--ink); }
  :root:not([data-theme="light"]) .cta-panel { background: linear-gradient(150deg, var(--surface-tint), var(--surface)); }
  :root:not([data-theme="light"]) .hero-art::after { display: none; }
}

/* ---------- pricing: progressive disclosure ---------- */

.pricing-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 56px;
}

.choice-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 26px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.choice-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.choice-card[aria-pressed="true"] {
  border-color: var(--floor-saffron);
  box-shadow: 0 0 0 3px rgba(var(--floor-saffron-rgb), 0.16);
}

.choice-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--navy);
  margin: 0;
}

.choice-card__desc {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.pricing-flow-panel {
  display: none;
}

.pricing-flow-panel.is-active {
  display: block;
  animation: enter-up 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.pricing-flow-heading {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--navy);
}

.pricing-flow-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  padding-bottom: 40px;
}

.pricing-contact-note {
  display: block;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
  font-size: 0.82rem;
}

@media (max-width: 780px) {
  .pricing-choice { grid-template-columns: 1fr; }
  .pricing-flow-list { grid-template-columns: 1fr; }
}