/* Shared by every page: tokens, the navigation bar with its Product menu, the footer, page-arrival fades.
   Numbers anywhere on the site are DEMO DATA until the lab publishes. */
:root {
  --red: #e8283f; --amber: #e6b34a; --fg: #ecebe6; --fg2: rgba(236,235,230,.66); --fg3: rgba(236,235,230,.42);
  --hair: rgba(236,235,230,.14); --glass: rgba(12,12,14,.72); --ease: cubic-bezier(.16,1,.3,1);
  --display: "Segoe UI Variable Display", "Segoe UI Variable Text", Inter, system-ui, sans-serif;
  --text: "Segoe UI Variable Text", "Segoe UI Variable Display", Inter, system-ui, sans-serif;
  --mono: "Cascadia Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
::selection { background: var(--red); color: #fff; }
a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- navigation */
nav.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 84px; padding: 0 clamp(22px, 4.5vw, 72px);
  display: flex; align-items: center; justify-content: space-between; font-family: var(--text); color: var(--fg); }
nav.nav::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,0)); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
nav.nav.solid::before { opacity: 1; }
nav.nav .brand { position: relative; display: flex; align-items: center; gap: 14px; }
nav.nav .brand img { width: 28px; height: 22px; opacity: .92; }
nav.nav .brand span { font-family: var(--display); font-weight: 300; font-size: 14px; letter-spacing: .5em; }
nav.nav .links { position: relative; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); font-size: 13.5px; letter-spacing: .02em; }
nav.nav .links > a, nav.nav .mbtn { opacity: .66; cursor: pointer; transition: opacity .3s var(--ease); }
nav.nav .links > a:hover, nav.nav .mbtn:hover, nav.nav .menu.open .mbtn, nav.nav .links > a.on { opacity: 1; }
nav.nav .get { opacity: 1 !important; padding: 9px 18px; border: 1px solid rgba(236,235,230,.28); border-radius: 999px; transition: border-color .3s var(--ease) !important; }
nav.nav .get:hover { border-color: rgba(236,235,230,.7); }
nav.nav .mbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 7px; }
nav.nav .mbtn::after { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
nav.nav .menu.open .mbtn::after { transform: translateY(1px) rotate(225deg); }

/* the Product menu: every feature with one line and one proof figure */
nav.nav .menu { position: relative; }
nav.nav .panel { position: absolute; top: calc(100% + 22px); left: 50%; width: 640px; transform: translate(-50%, -8px); padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(10,10,12,.9); border: 1px solid var(--hair); border-radius: 18px;
  backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .35s; }
nav.nav .menu.open .panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s; }
nav.nav .panel a { display: block; padding: 16px 18px 15px; border-radius: 12px; transition: background .25s ease; }
nav.nav .panel a:hover { background: rgba(236,235,230,.06); }
nav.nav .panel b { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 14.5px; color: var(--fg); }
nav.nav .panel b i { font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 7px; }
nav.nav .panel span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--fg2); }
nav.nav .panel em { display: block; margin-top: 10px; font-style: normal; font-size: 12px; color: var(--fg3); }
nav.nav .panel em::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin-right: 8px; vertical-align: 1px; }

/* ---------------------------------------------------------------- footer */
.site-foot { width: min(1120px, calc(100vw - 48px)); margin: 0 auto; padding: 60px 0 34px;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px 40px; color: var(--fg2); font-family: var(--text); font-size: 13px; }
.site-foot .fb { display: flex; align-items: center; gap: 12px; color: var(--fg); }
.site-foot .fb img { width: 26px; height: 20px; }
.site-foot .fb span { font-family: var(--display); font-weight: 300; font-size: 13px; letter-spacing: .5em; }
.site-foot .fl { display: flex; flex-wrap: wrap; gap: 28px; justify-content: flex-end; }
.site-foot .fl a:hover { color: var(--fg); }
.site-foot .fm { grid-column: 1 / -1; font-size: 11px; letter-spacing: .12em; color: var(--fg3); }

/* the page arrives out of black (the other half of the dive that left the previous page) */
.veil { position: fixed; inset: 0; z-index: 90; background: #000; pointer-events: none; opacity: 0; transition: opacity .42s var(--ease); }
.veil.on { opacity: 1; pointer-events: auto; }
html.arriving .veil { opacity: 1; }
/* if the page script never runs, the black still lifts */
html.arriving .veil { animation: veil-safe .6s ease 3.5s forwards; }
@keyframes veil-safe { to { opacity: 0; visibility: hidden; } }

.demo-badge { position: fixed; right: 16px; bottom: 14px; z-index: 40; font-family: var(--text); font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(232,40,63,.85); border: 1px solid rgba(232,40,63,.35); padding: 6px 10px; border-radius: 4px; }

@media (max-width: 900px) { nav.nav .links > a:not(.get), nav.nav .menu { display: none; } }

/* ---------------------------------------------------------------- "Book a meeting" (nav.js) */
.book { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .35s var(--ease); }
.book.on { opacity: 1; }
.book[hidden] { display: none; }
.book-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 36px 36px 30px; border-radius: 22px; background: #0b0b0c;
  border: 1px solid rgba(237,237,232,.14); box-shadow: 0 40px 120px -30px rgba(0,0,0,.9); font-family: "Geist", var(--text); color: #edede8;
  transform: translateY(14px) scale(.985); transition: transform .5s var(--ease); }
.book.on .book-card { transform: none; }
.book-x { position: absolute; top: 16px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(237,237,232,.16); background: none; color: #edede8; font-size: 20px; line-height: 1; cursor: pointer; }
.book-x:hover { border-color: rgba(237,237,232,.5); }
.book h2 { margin: 0; font-family: "Jost", var(--display); font-weight: 300; font-size: 34px; }
.book-card > p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: rgba(237,237,232,.62); }
.book-form { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.book-form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: rgba(237,237,232,.62); }
.book-form label i { font-style: normal; color: rgba(237,237,232,.38); }
.book-form label.wide { grid-column: 1 / -1; }
.book-form input, .book-form select { font: inherit; font-size: 15px; color: #edede8; background: rgba(237,237,232,.03); border: 1px solid rgba(237,237,232,.12); border-radius: 10px; padding: 12px 13px; outline: none; }
.book-form input:focus, .book-form select:focus { border-color: rgba(237,237,232,.45); }
.book-form select option { background: #0b0b0c; }
.book-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: rgba(237,237,232,.42); }
.book-send { height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: #edede8; color: #070708; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.book-send:hover { background: #fff; }
@media (max-width: 560px) { .book-form { grid-template-columns: 1fr; } .book-card { padding: 30px 22px 24px; } }