/* Finish layer, loaded last on every page.
 * One content width, one rhythm, and small motion that never hides
 * content: reveal only runs when scripts/reveal.js has marked <html>. */

:root{
  --content: calc(var(--site-max) - 2 * var(--site-pad-x));
  --edge: max(var(--site-pad-x), calc((100% - var(--content)) / 2));
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --rule: color-mix(in srgb, var(--bo-line) 80%, transparent);
}
html{ scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } }
body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-optical-sizing: auto; }
::selection{ background: #CFE6E8; color: var(--bo-ink); }
:focus-visible{ outline: 2px solid var(--bo-ops-teal); outline-offset: 3px; border-radius: 4px; }
.nowrap{ white-space: nowrap; }
.tnum{ font-variant-numeric: tabular-nums; }

/* ── One container for nav, sections, bands and footer ───────────── */
.bo-nav{ padding-left: var(--edge); padding-right: var(--edge); }
.bo-nav.scrolled{ background: color-mix(in srgb, var(--bo-paper) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.bo-section{ max-width: none; margin: 0; padding: 112px 0; }
.bo-section--tight{ padding: 56px 0; }
.bo-section__inner,
.page-hero__inner,
.home-hero__grid{ max-width: none; margin: 0; padding: 0 var(--edge); }
.bo-cta-band{ padding: 120px 0; }
.bo-cta-band__inner{ max-width: none; margin: 0; padding: 0 var(--edge); }
.bo-footer{ padding: 88px 0 36px; }
.bo-footer__inner{ max-width: none; margin: 0; padding: 0 var(--edge); }
@media (max-width: 720px){
  .bo-section{ padding: 72px 0; }
  .bo-cta-band{ padding: 80px 0; }
  .bo-footer{ padding-top: 64px; }
}

/* ── Nav ──────────────────────────────────────────────────────────── */
.bo-nav__links{ gap: 26px; margin-left: 28px; }
.bo-nav__links a{ position: relative; border-bottom: 0; color: var(--bo-graphite); transition: color .2s var(--ease-out); }
.bo-nav__links a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--bo-ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.bo-nav__links a:hover{ color: var(--bo-ink); }
.bo-nav__links a:hover::after, .bo-nav__links a.is-current::after{ transform: scaleX(1); }
.bo-nav__links a.is-current{ color: var(--bo-ink); }
@media (max-width: 440px){
  .bo-nav__cta .bo-btn--primary, .bo-nav__cta [data-auth="signin"]{ display: none; }
  .bo-nav__brand .wm{ font-size: 17px; }
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.bo-btn{ height: 46px; padding: 0 22px; border-radius: 11px; }
.bo-btn svg{ transition: transform .3s var(--ease-out); }
.bo-btn:hover svg{ transform: translateX(3px); }
.bo-btn--primary{ box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 18px -10px rgba(11,13,14,.55); }
.bo-btn--primary:hover{ background: #22282B; }
.bo-btn--secondary:hover{ border-color: var(--bo-ink); }
.bo-btn--sm{ height: 38px; padding: 0 15px; border-radius: 10px; }

/* ── Type rhythm ──────────────────────────────────────────────────── */
.bo-eyebrow{ font-size: 11px; letter-spacing: .12em; }
.bo-section__head{
  max-width: none; margin-bottom: 52px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 72px; align-items: end;
}
.bo-section__head > .bo-eyebrow{ grid-column: 1 / -1; }
.bo-section__head h2{ grid-column: 1; font-size: clamp(32px, 3.7vw, 50px); line-height: 1.03; letter-spacing: -0.038em; margin: 16px 0 0; max-width: 18ch; text-wrap: balance; }
.bo-section__head > p{ grid-column: 2; margin: 0; padding-bottom: 6px; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--bo-graphite); text-wrap: pretty; }
@media (max-width: 900px){
  .bo-section__head{ grid-template-columns: 1fr; margin-bottom: 36px; }
  .bo-section__head > p{ grid-column: 1; margin-top: 16px; padding: 0; }
}
.page-hero{ padding: 152px 0 72px; background: radial-gradient(80% 120% at 85% 0%, #FFFFFF 0%, transparent 60%), linear-gradient(180deg, var(--bo-paper) 0%, #FBFAF5 100%); }
.page-hero h1{ font-size: clamp(42px, 5.4vw, 76px); letter-spacing: -0.043em; line-height: 1.01; margin: 18px 0 22px; }
.page-hero p{ font-size: 19px; line-height: 1.58; max-width: 58ch; text-wrap: pretty; }
/* The plinth motif from the home illustration, drawn quietly on inner pages. */
.page-hero{ position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before, .page-hero::after{
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  width: min(760px, 58vw); aspect-ratio: 1; right: calc(var(--edge) - min(760px, 58vw) * 0.28); top: 50%;
  transform: translateY(-46%) perspective(1400px) rotateX(64deg);
}
.page-hero::after{
  background:
    radial-gradient(circle, transparent 0 48.5%, rgba(46,111,115,.6) 48.8% 49.1%, transparent 49.4%),
    radial-gradient(circle, transparent 0 36.6%, rgba(114,112,106,.3) 37% 37.25%, transparent 37.6%),
    radial-gradient(circle, transparent 0 23.6%, rgba(114,112,106,.24) 24% 24.25%, transparent 24.6%),
    radial-gradient(circle, rgba(46,111,115,.08) 0 30%, rgba(46,111,115,0) 50%);
}
.page-hero::before{
  background: repeating-conic-gradient(from 0deg, rgba(114,112,106,.45) 0 .35deg, transparent .35deg 3deg);
  -webkit-mask: radial-gradient(circle, transparent 0 44.5%, #000 45% 47%, transparent 47.4%);
          mask: radial-gradient(circle, transparent 0 44.5%, #000 45% 47%, transparent 47.4%);
}
@media (max-width: 1000px){ .page-hero::before{ display: none; } }
@media (max-width: 1000px){ .page-hero::after{ display: none; } }
@media (max-width: 720px){ .page-hero{ padding: 120px 0 52px; } }
.prose p{ text-wrap: pretty; }

/* ── Surfaces ─────────────────────────────────────────────────────── */
.card, .st-card{
  border-radius: 18px; border-color: var(--rule);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(11,13,14,.04);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
}
.card{ padding: 30px 28px 26px; gap: 12px; }
.card:hover{ transform: translateY(-3px); border-color: var(--bo-line); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 22px 40px -26px rgba(11,13,14,.35); }
.card svg.ic{ width: 40px; height: 40px; padding: 9px; border-radius: 11px; background: #EAF2F2; stroke-width: 1.6; margin-bottom: 6px; box-sizing: border-box; }
.card h3{ font-size: 19.5px; letter-spacing: -0.022em; }
.card p{ font-size: 15px; line-height: 1.6; }
.card .st{ margin-top: auto; }
.card p + .st{ margin-top: 14px; }
.cards3{ gap: 18px; }
.st-card{ padding: 30px 30px 14px; }
.st-card h3{ font-size: 20px; letter-spacing: -0.022em; }
.st-list{ counter-reset: row; }
.st-list li{ position: relative; padding: 14px 0 14px 38px; border-top-color: var(--rule); transition: background .25s; }
.st-list li::before{ counter-increment: row; content: counter(row, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 500 11px/1.4 var(--bo-font-mono); letter-spacing: .04em; color: var(--bo-stone); }
.st-list li:hover{ background: linear-gradient(90deg, transparent, rgba(46,111,115,.045) 30%, transparent); }
.st{ letter-spacing: .07em; }
.facts{ border-radius: 16px; border-color: var(--rule); }
.facts th, .facts td{ padding: 16px 20px; }

/* Proof row: numbers carry the weight. */
.proof{ border-radius: 18px; border-color: var(--rule); background: var(--rule); }
.proof li{ padding: 28px 26px 26px; background: var(--bo-white); }
.proof b{ font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.proof span{ margin-top: 8px; color: var(--bo-slate); }

/* Quote */
.kc-quote{ border-left: 0; padding: 34px 36px 30px; border-radius: 18px; position: relative; box-shadow: 0 0 0 1px var(--rule); max-width: 86ch; }
.kc-quote::before{ content: "“"; position: absolute; top: 26px; left: 34px; font: 800 64px/0.7 Georgia, "Times New Roman", serif; color: var(--bo-ops-teal); }
.kc-quote p{ font-size: 18px; line-height: 1.62; text-wrap: pretty; padding-top: 34px; }

/* ── CTA band: echoes the hero illustration ───────────────────────── */
.bo-cta-band{ position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(70% 120% at 85% 50%, #1D2A2E 0%, #121A1D 45%, #0D1214 100%); }
.bo-cta-band::before{
  content: ""; position: absolute; z-index: -1; right: -6%; top: 50%; width: min(720px, 70vw); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 39.6%, rgba(120,198,207,.5) 40% 40.2%, transparent 40.6%),
    radial-gradient(circle, transparent 0 27.6%, rgba(223,233,234,.12) 28% 28.2%, transparent 28.6%),
    radial-gradient(circle, transparent 0 15.6%, rgba(223,233,234,.10) 16% 16.2%, transparent 16.6%),
    repeating-conic-gradient(from 0deg, rgba(223,233,234,.16) 0 .25deg, transparent .25deg 3deg);
  -webkit-mask: radial-gradient(circle, #000 0 47%, transparent 47.5%); mask: radial-gradient(circle, #000 0 47%, transparent 47.5%);
  opacity: .85;
}
.bo-cta-band::after{ content: ""; position: absolute; z-index: -1; right: 10%; top: 50%; width: 520px; height: 520px; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle, rgba(120,198,207,.16), transparent 60%); }
.bo-cta-band__inner{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
.bo-cta-band h2{ font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -0.04em; max-width: 15ch; }
.bo-cta-band p{ font-size: 18px; margin-bottom: 0; max-width: 46ch; }
.bo-cta-band .ctas, .bo-cta-band__actions{ justify-content: flex-start; padding-bottom: 4px; }
@media (max-width: 900px){ .bo-cta-band::before{ right: -40%; opacity: .5; } }

/* ── Footer ───────────────────────────────────────────────────────── */
.bo-footer{ background: #0B0D0E; }
.bo-footer__top{ grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 40px; }
.bo-footer__brand .badges{ flex-direction: row; }
.bo-footer a{ color: rgba(247,245,239,.82); transition: color .2s, border-color .2s; }
.bo-footer a:hover{ color: #fff; }
.bo-footer__base{ color: rgba(247,245,239,.5); }
@media (max-width: 900px){ .bo-footer__top{ grid-template-columns: 1fr 1fr; } }

/* ── Reveal on scroll (only when JS is running) ───────────────────── */
html.rv-on .rv{ opacity: 0; transform: translate3d(0, 18px, 0); }
html.rv-on .rv.is-in{ opacity: 1; transform: none; transition: opacity .9s var(--ease-out) var(--rv-d, 0s), transform 1s var(--ease-out) var(--rv-d, 0s); }
@media (prefers-reduced-motion: reduce){ html.rv-on .rv{ opacity: 1; transform: none; } .card, .card:hover{ transform: none; } }
.bo-eyebrow{ flex-wrap: wrap; row-gap: 4px; }
html, body{ overflow-x: clip; }

/* Three numbered steps (pilot page) */
.steps3{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
.steps3 li{ background: var(--bo-white); border: 1px solid var(--bo-line); border-radius: var(--bo-radius-panel); padding: 26px 24px 24px; }
.steps3 b{ display: block; font: 500 12px/1 var(--bo-font-mono); letter-spacing: .12em; color: var(--bo-ops-teal); margin-bottom: 18px; }
.steps3 h3{ margin: 0 0 8px; font-size: 20px; letter-spacing: -0.02em; color: var(--bo-ink); }
.steps3 p{ margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--bo-graphite); }
@media (max-width: 860px){ .steps3{ grid-template-columns: 1fr; } }

/* ── Page illustrations (scripts/scenes) ─────────────────────────── */
.page-hero--scene::before, .page-hero--scene::after{ display: none; }
.page-hero__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 56px; align-items: center; padding: 0 var(--edge); }
.page-hero--scene .page-hero__inner{ padding: 0; }
.page-hero--scene h1{ font-size: clamp(40px, 4.4vw, 64px); }
@media (max-width: 980px){
  .page-hero__grid{ grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
.scene-3d{ margin: 0; position: relative; --sc-bg: radial-gradient(90% 70% at 50% 42%, #1E2A2E 0%, #121A1D 48%, #0B0F11 100%); }
.scene-3d__stage{ position: relative; aspect-ratio: 5 / 4; width: 100%; border-radius: 22px; overflow: hidden; isolation: isolate;
  background-color: #0B0F11; background-position: center; background-size: cover; background-repeat: no-repeat;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 0 0 1px rgba(11,13,14,.9), 0 40px 80px -40px rgba(11,40,44,.55), 0 18px 36px -24px rgba(11,13,14,.45); }
.scene-3d__stage::after{ content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 3; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.28) 100%); }
.scene-3d__stage canvas{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity .9s var(--ease-out); }
.scene-3d.is-live .scene-3d__stage canvas{ opacity: 1; }
.scene-3d figcaption{ display: flex; gap: 10px; align-items: baseline; margin-top: 14px; font-size: 13px; color: var(--bo-stone); line-height: 1.5; text-wrap: pretty; }
.scene-3d__tag{ flex: none; font-family: var(--bo-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--bo-panel); color: var(--bo-graphite); padding: 3px 8px; border-radius: 10px; }
.sb-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 980px){ .sb-grid{ grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* ── Common questions (home) ─────────────────────────────────────── */
.faq{ max-width: 860px; border-top: 1px solid var(--rule); }
.faq__item{ border-bottom: 1px solid var(--rule); }
.faq__item summary{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 22px 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--bo-ink); }
.faq__item summary::-webkit-details-marker{ display: none; }
.faq__item summary::after{ content: "+"; flex: none; font-family: var(--bo-font-mono); font-weight: 500; color: var(--bo-stone); transition: transform .25s var(--ease-out); }
.faq__item[open] summary::after{ transform: rotate(45deg); }
.faq__item p{ margin: -6px 0 24px; max-width: 68ch; font-size: 16px; line-height: 1.6; color: var(--bo-graphite); }