:root {
  --page: #0a0a0a;
  --surface: #111113;
  --surface-raised: #18181b;
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .18);
  --border-accent: linear-gradient(135deg, #4ade80, #22d3ee);
  --text: #f5f5f4;
  --text-secondary: #a1a1aa;
  --muted: #71717a;
  --accent: #4ade80;
  --accent-hover: #86efac;
  --accent-soft: rgba(74, 222, 128, .12);
  --accent-fill: rgba(74, 222, 128, .04);
  --error: #f87171;
  --warning: #fbbf24;
  --info: #60a5fa;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --code: #0d0d0f;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
/* Film grain over everything below the nav: one shared texture so the
   video world and the strata read as a single surface. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/assets/noise.png') repeat;
  opacity: .07;
  pointer-events: none;
  z-index: 200;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Nav ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 250;
  background: transparent;
  border-bottom: none;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
/* The nav is fully transparent at the top. The sky color shows
   through from the hero's background, which is set to the sky color
   so the area above the video content (which is cropped by
   object-position) is also sky-colored. */
.nav .brand,
.nav .nav-search,
.nav .nav-search-kbd,
.nav .nav-links a {
  transition: color .35s ease;
}
/* The nav floats over the hero video on marketing pages and over dark
   ground on docs pages — white text works on both. The Dashboard
   button is a white ghost over the video; docs pages keep the filled
   green default. */
body:has(.hero) .nav:not(.scrolled) .nav-links a.btn-primary {
  color: #fff;
  border-color: transparent;
  background: transparent;
}
body:has(.hero) .nav:not(.scrolled) .nav-links a.btn-primary:hover {
  color: var(--accent);
}
.nav.scrolled .brand,
.nav.scrolled .nav-search,
.nav.scrolled .nav-search-kbd,
.nav.scrolled .nav-links a:not(.btn-primary) {
  color: #fff;
}
.nav.scrolled .nav-links a.btn-primary {
  color: #fff;
  border-color: transparent;
  background: transparent;
  padding: 8px 10px;
}
.nav.scrolled .nav-links a.btn-primary:hover {
  color: var(--accent);
}
.nav.scrolled {
  padding-top: 14px;
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 999px;
  transition: max-width .4s cubic-bezier(.34, 1.2, .64, 1),
              background .35s ease,
              border-color .35s ease,
              box-shadow .35s ease,
              padding .35s ease;
}
.nav.scrolled .nav-inner {
  width: fit-content;
  margin: 0 auto;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  gap: 22px;
  background: rgba(17, 17, 19, .92);
  border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  padding: 8px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brand {
  font-weight: 700;
  color: var(--text);
  font-size: 18px;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  transition: font-size .3s ease;
}
.brand:hover { text-decoration: none; }
.nav.scrolled .brand { font-size: 15px; }
.brand-icon {
  display: block;
  border-radius: 4px;
  transition: width .3s ease, height .3s ease;
}
.nav.scrolled .brand-icon { width: 22px; height: 22px; }
.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 7px 12px;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-family: var(--sans);
  cursor: pointer;
  white-space: nowrap;
  justify-self: center;
  margin: 0 12px;
  transition: color .12s ease, border-color .12s ease, background .12s ease, padding .3s ease, gap .3s ease;
}
.nav-search:hover { color: #fff; border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .1); }
.nav.scrolled .nav-search { padding: 7px 12px; gap: 8px; }
.nav-search-icon { flex-shrink: 0; }
.nav-search-text { display: inline; }
.nav-search-kbd { font-family: var(--mono); font-size: 11px; color: #fff; opacity: .55; line-height: 1.4; }
.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-self: end;
  transition: gap .3s ease;
}
.nav-links a:not(.btn-primary) { color: var(--text); font-size: 14px; transition: font-size .3s ease, color .12s ease; }
.nav-links a:not(.btn-primary):hover { color: var(--accent); }
.nav-links a.btn-primary { transition: padding .3s ease, font-size .3s ease; }
.nav-links a.btn-primary:hover { filter: brightness(1.05); }
.nav-links a:hover { text-decoration: none; }
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  font-family: var(--sans);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.nav-toggle:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); }
.nav-toggle-bar {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: -.005em;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.btn:hover { text-decoration: none; border-color: var(--text-secondary); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { border-color: var(--accent); background: var(--accent); color: #0b2913; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #0b2913; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── Hero: typography (color/background are in the
   "jurassic video backdrop" block at the end of the file) ── */
/* One orchestrated page-load: the video fades in, then the content
   rises in reading order. Transform/opacity only, so it stays cheap;
   the global reduced-motion rule disables it entirely. */
@keyframes hero-fade {
  from { opacity: 0; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
}
.hero-video-bg { animation: hero-fade .9s ease-out backwards; }
.hero-content > * {
  animation: hero-rise .6s cubic-bezier(.22, 1, .36, 1) backwards;
}
.hero-content > *:nth-child(1) { animation-delay: .1s; }
.hero-content > *:nth-child(2) { animation-delay: .2s; }
.hero-content > *:nth-child(3) { animation-delay: .3s; }
.hero-content > *:nth-child(4) { animation-delay: .4s; }
.hero-content > *:nth-child(5) { animation-delay: .5s; }

.hero h1 { font-size: clamp(42px, 7vw, 72px); line-height: 1.05; margin: 0 0 16px; letter-spacing: -.03em; position: relative; z-index: 1; }
.hero h1 .accent { color: var(--accent); }
.hero-ctas { margin-bottom: 32px; position: relative; z-index: 1; }
.hero-ctas .btn { margin: 0 8px; }

.hero-sub {
  color: rgba(255, 255, 255, .88);
  font-size: 19px;
  max-width: 620px;
  margin: 0 auto 28px;
  position: relative;
  z-index: 1;
  line-height: 1.5;
}
.hero-trust-line {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: .02em;
  margin: 28px 0 0;
  position: relative;
  z-index: 1;
}

.hero-snippet {
  max-width: 640px;
  margin: 0 auto;
  background: var(--code);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  position: relative;
  z-index: 1;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.hero-snippet-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}
.hero-snippet-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}
.hero-snippet-dot:nth-child(1) { background: #f87171; opacity: .55; }
.hero-snippet-dot:nth-child(2) { background: #fbbf24; opacity: .55; }
.hero-snippet-dot:nth-child(3) { background: #4ade80; opacity: .55; }
.hero-snippet-title {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.hero-snippet-body {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  /* Code wraps on narrow screens instead of scrolling inside the
     window; long URLs break anywhere. */
  white-space: pre-wrap;
  overflow-x: visible;
  overflow-wrap: anywhere;
}
.hero-snippet-body code { font-family: inherit; }
.tok-c { color: var(--muted); font-style: italic; }
.tok-t { color: #22d3ee; }
.tok-a { color: #c084fc; }
.tok-s { color: #86efac; }
.tok-k { color: #fbbf24; }
.tok-f { color: #4ade80; }
.tok-brace { color: var(--text); }

@media (max-width: 700px) {
  .hero-eyebrow { font-size: 11px; padding: 5px 10px; }
  .hero-sub { font-size: 16px; }
  .hero-snippet-body { font-size: 12px; padding: 12px 14px; }
}

/* ── Sections ────────────────────────────────────── */
/* Sections are full-bleed so the strata backgrounds span the whole
   viewport — the dig is a cross-section of earth, not a floating
   column. Content is constrained by the child rule below. Bottom
   padding keeps content clear of the next layer's wave crest. */
.section { padding: 72px 20px 92px; position: relative; z-index: 60; }
.section > * { position: relative; z-index: 2; max-width: 1100px; margin-left: auto; margin-right: auto; }

/* ── Strata boundaries and textures ──────────────── */
/* Each layer's surface undulates up into the layer above it: a ghost
   crest at 45% opacity reads as the mixed deposit, the solid crest as
   the layer itself. */
.strata-wave {
  position: absolute;
  top: -76px;
  left: 0;
  width: 100%;
  height: 76px;
  display: block;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}
/* Fill override scoped to the wave's own crest paths — the grass
   group's paths carry their own fills and must not be touched. */
.strata-wave > path { fill: currentColor; }

/* ── Grass strip (hero → topsoil) ────────────────── */
/* A fixed-size tile (30em x 7.5em) repeated horizontally: the blades
   and waves keep their chunky, font-relative size at every viewport
   width. 5em of green wave strip, a 1em lighter wave riding its top,
   and blades in the headroom above. */
.grass-strip {
  position: absolute;
  /* Sits 2.5em sunk into the topsoil (the soil under-wave is the same
     color as the section, so the seam is invisible) — the blades stay
     5em above the section line, clear of the hero text. */
  bottom: calc(100% - 2.5em);
  left: 0;
  right: 0;
  height: 7.5em;
  max-width: none;
  z-index: 1;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 30em 7.5em;
}
/* Specimen-drawing motifs (pebbles, fossils, cracks...) tiled across
   the layer, behind its content. */
.strata-texture {
  position: absolute;
  inset: 0;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}
.section-title { font-size: 36px; margin: 0 auto 8px; letter-spacing: -.02em; line-height: 1.15; }
.section-sub { color: var(--muted); margin-bottom: 32px; }

/* ── Demo section ────────────────────────────────── */
/* The demo pit is a boxed dig site nested inside the full-bleed
   stratum-2 band. */
.demo-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 48px 40px; position: relative; }
.demo-content { display: flex; align-items: center; gap: 24px; }
.demo-text { text-align: left; }

/* ── Comparison table ────────────────────────────── */
.comparison-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.comparison-table th, .comparison-table td { text-align: left; padding: 13px 16px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.comparison-table th { background: transparent; font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; border-bottom: 1px solid var(--border-strong); }
.comparison-table tbody tr { transition: background .12s ease; }
.comparison-table tbody tr:hover { background: var(--accent-fill); }
.comparison-table td:last-child { color: var(--accent); font-weight: 600; }
.comparison-table tfoot td { background: transparent; border-top: 1px solid var(--border-strong); border-bottom: none; }

/* ── Cards (all surfaces get corner marks + accent fill hover) ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.steps { display: flex; align-items: center; gap: 16px; }
.steps .step-card { flex: 1; }
.step-arrow { font-size: 24px; color: var(--accent); flex-shrink: 0; }
.step-number { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 8px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  transition: border-color .12s ease, background .12s ease;
}
.card:hover { border-color: var(--border-strong); background: var(--accent-fill); }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }

/* ── Feature grid ────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.feature-icon { width: 24px; height: 24px; color: var(--accent); margin-bottom: 12px; }
.features-intro { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; font-size: 14px; color: var(--muted); font-style: italic; }
.features-intro .testo-sm { display: inline-block; vertical-align: middle; }

/* ── Pricing grid ────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.price-card.highlight { border-color: var(--accent); }
.price-card h3 { margin: 0; font-size: 20px; }
.price-card .price { font-size: 30px; font-weight: 700; }
.price-card .price .price-period { font-size: 16px; font-weight: 400; color: var(--muted); }
.price-card ul { margin: 0 0 24px; padding-left: 18px; color: var(--muted); font-size: 14px; }
.price-card .btn { margin-top: auto; display: block; text-align: center; }
.price-flag {
  position: absolute;
  top: -10px;
  right: 20px;
  padding: 3px 10px;
  background: var(--accent);
  color: #0b2913;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Depth-card pricing: each tier is a dig site. The mono depth label
   names the layer, tick marks down the card's left edge read as a
   gauge, and deeper tiers sit lower in the grid on wide screens. */
.price-depth {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-card.highlight .price-depth { color: var(--accent); }
.price-gem { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.depth-0 .price-gem { color: var(--muted); }
.depth-5 .price-gem { color: var(--accent); }
.depth-20 .price-gem { color: var(--info); }
.price-card[class*="depth-"] { padding-left: 38px; }
.price-card[class*="depth-"] {
  background-position: right -12px top -12px, right -12px bottom -12px;
  background-repeat: no-repeat, no-repeat;
  background-size: 200px 210px, 200px 210px;
}
.price-card.depth-0 {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'210'%20viewBox%3D'0%200%20200%20210'%3E%3Cg%20fill%3D'%23a1a1aa'%3E%3Cpath%20d%3D'M150%2018%20L184%2030%20L176%2062%20L142%2052%20Z'%20fill-opacity%3D'.10'%2F%3E%3Cpath%20d%3D'M184%2030%20L176%2062%20L142%2052%20Z'%20fill-opacity%3D'.20'%2F%3E%3Cpath%20d%3D'M158%2096%20L188%20108%20L166%20130%20Z'%20fill-opacity%3D'.12'%2F%3E%3Cpath%20d%3D'M188%20108%20L166%20130%20L172%20106%20Z'%20fill-opacity%3D'.18'%2F%3E%3Cpath%20d%3D'M140%20150%20L158%20144%20L164%20160%20L148%20166%20Z'%20fill-opacity%3D'.14'%2F%3E%3Cpath%20d%3D'M176%20176%20L194%20168%20L192%20190%20Z'%20fill-opacity%3D'.12'%2F%3E%3Cpath%20d%3D'M126%2074%20L134%2066%20L140%2076%20L132%2084%20Z'%20fill-opacity%3D'.15'%2F%3E%3Cpath%20d%3D'M120%20160%20L134%20154%20L136%20164%20L124%20168%20Z'%20fill-opacity%3D'.10'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'210'%20viewBox%3D'0%200%20200%20210'%3E%3Cg%20fill%3D'%23a1a1aa'%3E%3Cpath%20d%3D'M118%20118%20L146%20108%20L158%20132%20L134%20144%20Z'%20fill-opacity%3D'.10'%2F%3E%3Cpath%20d%3D'M146%20108%20L158%20132%20L134%20144%20Z'%20fill-opacity%3D'.20'%2F%3E%3Cpath%20d%3D'M84%20168%20L106%20158%20L120%20176%20L100%20190%20Z'%20fill-opacity%3D'.12'%2F%3E%3Cpath%20d%3D'M106%20158%20L120%20176%20L100%20190%20Z'%20fill-opacity%3D'.18'%2F%3E%3Cpath%20d%3D'M158%20158%20L172%20152%20L178%20166%20L164%20172%20Z'%20fill-opacity%3D'.14'%2F%3E%3Cpath%20d%3D'M172%20186%20L190%20178%20L188%20200%20Z'%20fill-opacity%3D'.12'%2F%3E%3Cpath%20d%3D'M96%20132%20L104%20124%20L110%20134%20L102%20142%20Z'%20fill-opacity%3D'.15'%2F%3E%3Cpath%20d%3D'M148%2096%20L162%2090%20L166%20102%20L152%20106%20Z'%20fill-opacity%3D'.10'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.price-card.depth-5 {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'210'%20viewBox%3D'0%200%20200%20210'%3E%3Cg%20fill%3D'%234ade80'%3E%3Cpath%20d%3D'M150%2020%20L172%2020%20L184%2032%20L184%2074%20L172%2086%20L150%2086%20L138%2074%20L138%2032%20Z'%20fill-opacity%3D'.10'%2F%3E%3Cpath%20d%3D'M154%2030%20L168%2030%20L176%2038%20L176%2068%20L168%2076%20L154%2076%20L146%2068%20L146%2038%20Z'%20fill-opacity%3D'.14'%2F%3E%3Cpath%20d%3D'M160%2040%20L170%2040%20L170%2066%20L160%2066%20Z'%20fill-opacity%3D'.22'%2F%3E%3Cpath%20d%3D'M156%20106%20L170%20106%20L178%20114%20L178%20138%20L170%20146%20L156%20146%20L148%20138%20L148%20114%20Z'%20fill-opacity%3D'.10'%2F%3E%3Cpath%20d%3D'M160%20114%20L168%20114%20L172%20118%20L172%20134%20L168%20138%20L160%20138%20L156%20134%20L156%20118%20Z'%20fill-opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M162%20120%20L168%20120%20L168%20132%20L162%20132%20Z'%20fill-opacity%3D'.22'%2F%3E%3Cpath%20d%3D'M176%20160%20L184%20160%20L189%20165%20L189%20172%20L184%20177%20L176%20177%20L171%20172%20L171%20165%20Z'%20fill-opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M142%20160%20L150%20160%20L155%20165%20L155%20172%20L150%20177%20L142%20177%20L137%20172%20L137%20165%20Z'%20fill-opacity%3D'.13'%2F%3E%3Cpath%20d%3D'M164%20186%20L171%20186%20L175%20190%20L175%20195%20L171%20199%20L164%20199%20L160%20195%20L160%20190%20Z'%20fill-opacity%3D'.18'%2F%3E%3Cpath%20d%3D'M150%20196%20L162%20196%20L162%20204%20L150%20204%20Z'%20fill-opacity%3D'.11'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'210'%20viewBox%3D'0%200%20200%20210'%3E%3Cg%20fill%3D'%234ade80'%3E%3Cpath%20d%3D'M136%20108%20L156%20108%20L168%20120%20L168%20146%20L156%20158%20L136%20158%20L124%20146%20L124%20120%20Z'%20fill-opacity%3D'.10'%2F%3E%3Cpath%20d%3D'M141%20116%20L153%20116%20L161%20124%20L161%20142%20L153%20150%20L141%20150%20L133%20142%20L133%20128%20Z'%20fill-opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M147%20128%20L156%20128%20L156%20142%20L147%20142%20Z'%20fill-opacity%3D'.22'%2F%3E%3Cpath%20d%3D'M172%2096%20L180%2096%20L185%20101%20L185%20108%20L180%20113%20L172%20113%20L167%20108%20L167%20101%20Z'%20fill-opacity%3D'.15'%2F%3E%3Cpath%20d%3D'M176%20168%20L183%20168%20L188%20173%20L188%20180%20L183%20185%20L176%20185%20L171%20180%20L171%20173%20Z'%20fill-opacity%3D'.17'%2F%3E%3Cpath%20d%3D'M104%20170%20L114%20170%20L120%20176%20L120%20184%20L114%20190%20L104%20190%20L98%20184%20L98%20176%20Z'%20fill-opacity%3D'.12'%2F%3E%3Cpath%20d%3D'M144%20178%20L156%20178%20L156%20188%20L144%20188%20Z'%20fill-opacity%3D'.11'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.price-card.depth-20 {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'210'%20viewBox%3D'0%200%20200%20210'%3E%3Cg%20fill%3D'%2360a5fa'%3E%3Cpath%20d%3D'M156%2014%20L178%2044%20L156%2084%20L134%2044%20Z'%20fill-opacity%3D'.10'%2F%3E%3Cpath%20d%3D'M156%2014%20L178%2044%20L156%2084%20Z'%20fill-opacity%3D'.18'%2F%3E%3Cpath%20d%3D'M180%20104%20L194%20122%20L180%20152%20L166%20122%20Z'%20fill-opacity%3D'.13'%2F%3E%3Cpath%20d%3D'M180%20104%20L194%20122%20L180%20152%20Z'%20fill-opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M140%20110%20L152%20124%20L140%20142%20L128%20124%20Z'%20fill-opacity%3D'.15'%2F%3E%3Cpath%20d%3D'M148%20168%20L162%20162%20L166%20174%20L152%20180%20Z'%20fill-opacity%3D'.13'%2F%3E%3Cpath%20d%3D'M120%20160%20L128%20170%20L120%20182%20L112%20170%20Z'%20fill-opacity%3D'.16'%2F%3E%3Cpath%20d%3D'M186%20176%20L196%20170%20L196%20184%20Z'%20fill-opacity%3D'.12'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'210'%20viewBox%3D'0%200%20200%20210'%3E%3Cg%20fill%3D'%2360a5fa'%3E%3Cpath%20d%3D'M150%20100%20L166%20100%20L158%20160%20Z'%20fill-opacity%3D'.12'%2F%3E%3Cpath%20d%3D'M150%20100%20L158%20100%20L158%20160%20Z'%20fill-opacity%3D'.18'%2F%3E%3Cpath%20d%3D'M176%20130%20L190%20130%20L182%20182%20Z'%20fill-opacity%3D'.14'%2F%3E%3Cpath%20d%3D'M128%20150%20L140%20150%20L134%20188%20Z'%20fill-opacity%3D'.13'%2F%3E%3Cpath%20d%3D'M118%20108%20L130%20118%20L118%20132%20L106%20118%20Z'%20fill-opacity%3D'.15'%2F%3E%3Cpath%20d%3D'M170%20196%20L182%20192%20L186%20202%20L174%20206%20Z'%20fill-opacity%3D'.14'%2F%3E%3Cpath%20d%3D'M104%20176%20L112%20172%20L116%20180%20L108%20184%20Z'%20fill-opacity%3D'.15'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.price-card[class*="depth-"]::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 12px;
  width: 7px;
  background: repeating-linear-gradient(180deg, var(--border-strong) 0 1px, transparent 1px 12px);
}
.pricing-note { margin: 16px 0 0; text-align: center; }
@media (min-width: 900px) {
  .price-card.depth-5 { transform: translateY(22px); }
  .price-card.depth-20 { transform: translateY(44px); }
  .pricing-note { margin-top: 64px; }
}

/* ── Enterprise section ──────────────────────────── */
.enterprise-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  margin: 32px 0;
  position: relative;
}
.enterprise-section h2 { margin-top: 0; }

/* ── Code blocks ─────────────────────────────────── */
.code-block { background: var(--code); border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 16px 0; }
.code-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--surface-raised); border-bottom: 2px solid var(--border); color: var(--muted); font-size: 12px; }
.copy-btn { background: transparent; border: 2px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: var(--sans); transition: border-color .12s ease, color .12s ease; }
.copy-btn:hover { color: var(--text); border-color: var(--accent); }
.code-block pre { margin: 0; padding: 16px; overflow-x: auto; }
.code-block code { font-family: var(--mono); font-size: 13px; }

/* ── Footer: bedrock ─────────────────────────────── */
/* The footer is the ninth and deepest layer of the dig: solid rock
   under the last stratum, carrying crystal facets in its texture and
   its own core-sample rail label. */
.footer {
  position: relative;
  z-index: 61;
  background: var(--s9);
}
.footer-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 88px 20px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
}
.footer-brand .brand { font-size: 18px; }
.footer-brand p { margin: 12px 0 0; color: var(--muted); font-size: 14px; max-width: 42ch; }
.footer-cols { display: flex; gap: 72px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}
.footer-col a { color: var(--text-secondary); font-size: 14px; }
.footer-col a:hover { color: var(--accent); text-decoration: none; }
.footer-dig {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 56px auto 0;
  padding: 18px 20px 26px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.footer-dig-line { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.error-page { max-width: 1100px; margin: 0 auto; padding: 140px 20px 120px; text-align: center; }

/* ── Utilities ───────────────────────────────────── */
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.cta { text-align: center; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; }

/* ── Trust section ───────────────────────────────── */
.trust-section { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-top: 56px; padding-bottom: 56px; }
.trust-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.trust-item { display: flex; gap: 16px; padding: 28px 32px; align-items: flex-start; }
.trust-item + .trust-item { border-left: 1px solid var(--border); }
.trust-item .feature-icon { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; }
.trust-item h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.01em; }
.trust-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 700px) {
  .trust-item + .trust-item { border-left: none; border-top: 1px solid var(--border); }
}

/* ── FAQ ─────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); overflow: hidden; }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item summary { padding: 18px 4px; cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: color .12s ease; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after { content: '+'; font-size: 20px; font-weight: 400; color: var(--muted); transition: transform .12s ease; flex-shrink: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-item[open] summary { color: var(--accent); }
.faq-item p { padding: 0 4px 20px; margin: 0; max-width: 68ch; color: var(--muted); font-size: 14px; line-height: 1.65; }

@media (max-width: 600px) {
  .nav-inner {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 10px 16px;
    margin: 10px 12px 0;
  }
  .nav.scrolled { padding-top: 0; }
  .nav-search { display: none; }
  .nav-toggle { display: inline-flex; justify-self: end; }
  .nav.scrolled .nav-inner,
  .nav-inner:has(.nav-links.open) {
    grid-template-columns: 1fr auto;
    width: auto;
    justify-content: stretch;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(17, 17, 19, .92);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .nav-inner:has(.nav-links.open) { border-radius: 20px; }
  .nav-links {
    grid-column: 1 / -1;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn-primary) { padding: 10px 4px; font-size: 15px; }
  .nav-links a.btn-primary { margin-top: 6px; text-align: center; }
  .nav-links.open a.btn-primary,
  body:has(.hero) .nav:not(.scrolled) .nav-links.open a.btn-primary,
  .nav.scrolled .nav-links.open a.btn-primary {
    color: #0b2913;
    background: var(--accent);
    border-color: var(--accent);
  }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; padding-top: 72px; }
  .footer-cols { flex-wrap: wrap; gap: 48px; }
  .footer-dig { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Report artifact (distilled feedback as it appears in the dashboard) ── */
.report {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 760px;
}
.report-head { padding: 28px 32px 0; }
.report-chips { display: flex; gap: 8px; margin-bottom: 14px; }
.report-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.report-chip.is-category { border: 1px solid var(--border-strong); color: var(--text-secondary); }
.report-chip.is-severity { background: rgba(251, 191, 36, .14); color: var(--warning); }
.report-title { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; }
.report-meta { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.report-body { padding: 20px 32px 24px; }
.report-summary {
  margin: 0 0 14px;
  padding: 16px 20px;
  background: var(--accent-fill);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}
.report-summary em { color: var(--text); font-style: normal; font-weight: 600; }
.report-next { margin: 0; font-size: 14px; color: var(--text-secondary); display: flex; gap: 12px; align-items: baseline; }
.report-next span {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.report-foot {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 32px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

/* ── Feature list (numbered, hairline rows, two columns) ── */
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 56px;
  margin-top: 40px;
}
.feature {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--border);
}
.feature-index {
  grid-row: 1 / 3;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  padding-top: 3px;
}
.feature h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 42ch; }

.customize-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 28px; }
.customize-stage {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.customize-label {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.widget-mock { position: absolute; right: 18px; bottom: 0; display: flex; flex-direction: column; align-items: flex-end; }
.widget-mock-panel { width: 250px; border-radius: 12px; padding: 12px 16px 14px; font-size: 13px; }
.widget-mock.is-dark .widget-mock-panel { background: #0a0a0a; color: #f5f5f4; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }
.widget-mock.is-light .widget-mock-panel { background: #fff; color: #0a0a0a; border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 8px 30px rgba(0, 0, 0, .22); }
.widget-mock-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.widget-mock-field { border-radius: 8px; padding: 8px 10px; min-height: 56px; font-size: 13px; line-height: 1.45; }
.widget-mock.is-dark .widget-mock-field { background: #111113; border: 1px solid rgba(255, 255, 255, .18); color: #71717a; }
.widget-mock.is-light .widget-mock-field { background: #f4f4f5; border: 1px solid rgba(0, 0, 0, .18); color: #71717a; }
.widget-mock-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.widget-mock-tags span { border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.widget-mock.is-dark .widget-mock-tags span { background: #111113; border: 1px solid rgba(255, 255, 255, .18); color: #a1a1aa; }
.widget-mock.is-dark .widget-mock-tags .is-active { background: #4ade80; border-color: #4ade80; color: #0b2913; }
.widget-mock.is-light .widget-mock-tags span { background: #f4f4f5; border: 1px solid rgba(0, 0, 0, .18); color: #52525b; }
.widget-mock.is-light .widget-mock-tags .is-active { background: #818cf8; border-color: #818cf8; color: #fff; }
.widget-mock-actions { display: flex; justify-content: flex-end; }
.widget-mock-send { border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; }
.widget-mock.is-dark .widget-mock-send { background: #4ade80; color: #0b2913; }
.widget-mock.is-light .widget-mock-send { background: #818cf8; color: #fff; }
.widget-mock-branding { margin-top: 8px; width: 100%; text-align: center; font-size: 11px; color: #71717a; }
.widget-mock-dino { display: block; width: 120px; height: 27px; object-fit: cover; object-position: top; margin-top: 14px; }
.widget-mock-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 14px 0 18px;
  border-radius: 50%;
  background: #818cf8;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.widget-mock-bubble svg { width: 22px; height: 22px; }
.customize-note { margin: 0; text-align: center; }

/* ── Hero: jurassic video backdrop ─────────────────── */
.hero {
  position: relative;
  /* The video is pinned to the viewport while its own section scrolls
     away; the first stratum then slides over it like a sheet of earth
     (rounded top edge below). The world stays behind the ground. */
  isolation: isolate;
}
.hero-video-bg {
  position: sticky;
  top: 0;
  /* Sized to the LARGE viewport: with the small (svh) height the
     container ends above the real bottom of the screen while the
     browser UI is expanded, exposing the page ground. The excess
     large-viewport height simply crops under the browser UI. */
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
  /* Still frame of the world: fills the gap before the video plays
     and stands in entirely under prefers-reduced-motion, so the nav
     always floats over real sky. */
  background: url('/assets/landscape/jurassic-landscape-1.png') center top / cover no-repeat;
}
.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.9) brightness(.9);
  /* The video fills from the very top of the viewport: the sky behind
     the fixed nav IS the video, so the strip above the fold is a
     perfect continuation, not an approximation. */
}
.hero-video-scrim {
  position: absolute;
  inset: 0;
  background:
    /* The scrim covers the full hero from the top (y=0). The vignette
       darkens immediately at the top so the area under the nav has
       visible darkening — the vignette is shared between the header
       and the hero with no gap. The first 72px (the nav area) gets
       a gentle 20% darkening, then it ramps up to 70% at the bottom
       for text legibility. */
    linear-gradient(180deg,
      rgba(10, 10, 10, 0) 0%,
      rgba(10, 10, 10, .2) 10%,
      rgba(10, 10, 10, .35) 30%,
      rgba(10, 10, 10, .7) 100%),
    radial-gradient(ellipse 80% 60% at 50% 60%,
      transparent 0%,
      rgba(10, 10, 10, .45) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  /* Pull the content up over the pinned video. padding-top: 72px
     accounts for the sky strip behind the fixed nav; the deep bottom
     padding keeps the trust line clear of the grass strip. */
  margin: -100vh auto 0;
  margin-top: -100lvh;
  padding: 232px 20px 10em;
  text-align: center;
}
.hero h1 {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.hero-sub {
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hero-trust-line {
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.hero-snippet {
  background: var(--code);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-bg video { display: none; }
}

/* ── The dig: geological strata ────────────────────── */
.dig { position: relative; }

/* Each section's top gets a strata "edge" — a wavy/serrated band
   that suggests a cross-section of layered earth between sections. */
.section {
  position: relative;
}

/* Strata background colors. As you descend, the page gets warmer and
   darker, evoking topsoil → clay → rock → bedrock. Flat solids; depth
   comes from the step between sections, not a gradient. */
/* Strata background colors. A slow color journey with depth: warm
   clay at the surface, ochre and shale mid-way, cool limestone and
   violet granite, basalt at bedrock. Neighboring layers differ enough
   in hue that the wave boundaries between them are visible. */
:root {
  --s1: #171310;
  --s2: #221510;
  --s3: #1e1a12;
  --s4: #191917;
  --s45: #161a16;
  --s5: #171a1c;
  --s6: #221c12;
  --s7: #1b191d;
  --s8: #131318;
  --s9: #0d0d12;
}
.stratum-1 { background: var(--s1); }
.stratum-2 { background: var(--s2); }
.stratum-3 { background: var(--s3); }
.stratum-4 { background: var(--s4); }
.stratum-45 { background: var(--s45); }
.stratum-5 { background: var(--s5); }
.stratum-6 { background: var(--s6); }
.stratum-7 { background: var(--s7); }
.stratum-8 { background: var(--s8); }
.stratum-9 { background: var(--s9); }
/* Sandstone keeps banded deposits — wider, warmer, denser. */
.stratum-6 {
  background: var(--s6) repeating-linear-gradient(180deg, rgba(180, 140, 90, .05) 0 2px, transparent 2px 36px);
}

/* ── Buried bones ─────────────────────────────────── */
/* Wider strata scatter small bones of varied size along their
   margins, where the viewport is wide enough to have real margins.
   Density varies per layer: sediment is richest, clay and granite
   carry only one each. */
.bones { display: none; }
@media (min-width: 1240px) {
  .bones {
    display: block;
    position: absolute;
    inset: 0;
    max-width: none;
    z-index: 1;
    pointer-events: none;
  }
  .bone {
    position: absolute;
    filter: saturate(.7) brightness(.8);
  }
  .bone-1 { width: 64px; right: max(24px, calc((100% - 1100px) / 2 - 96px)); top: 48px; transform: rotate(-24deg); opacity: .45; }
  .bone-2 { width: 36px; right: max(28px, calc((100% - 1100px) / 2 - 58px)); top: 44%; transform: rotate(41deg); opacity: .3; }
  .bone-3 { width: 52px; left: max(24px, calc((100% - 1100px) / 2 - 84px)); bottom: 72px; transform: rotate(64deg); opacity: .35; }
  .bone-4 { width: 32px; left: max(26px, calc((100% - 1100px) / 2 - 48px)); top: 16%; transform: rotate(-57deg); opacity: .28; }
  .bone-5 { width: 46px; right: 7%; bottom: 10%; transform: rotate(12deg); opacity: .3; }
  .bone-6 { width: 28px; left: 5%; bottom: 6%; transform: rotate(-14deg); opacity: .25; }
  .bone-7 { width: 32px; right: max(26px, calc((100% - 1100px) / 2 - 54px)); top: 30%; transform: rotate(22deg); opacity: .3; }
  .bone-8 { width: 44px; left: max(24px, calc((100% - 1100px) / 2 - 72px)); top: 24%; transform: rotate(-40deg); opacity: .32; }
  .bone-9 { width: 30px; right: max(26px, calc((100% - 1100px) / 2 - 50px)); bottom: 20%; transform: rotate(55deg); opacity: .26; }
  .bone-10 { width: 38px; left: max(26px, calc((100% - 1100px) / 2 - 56px)); bottom: 10%; transform: rotate(10deg); opacity: .3; }
  .bone-11 { width: 40px; right: max(24px, calc((100% - 1100px) / 2 - 66px)); top: 18%; transform: rotate(-18deg); opacity: .32; }
  .bone-12 { width: 30px; left: max(26px, calc((100% - 1100px) / 2 - 52px)); bottom: 28%; transform: rotate(48deg); opacity: .26; }
  .bone-13 { width: 34px; right: max(24px, calc((100% - 1100px) / 2 - 60px)); bottom: 30%; transform: rotate(-35deg); opacity: .3; }
}

/* The first stratum's surface undulates up over the pinned video like
   every other boundary — its wave lives in the markup (StrataWave). */

/* Demo section "dig pit" — dynamic point rig: the arm layer sits behind
   the body layer and rotates around its shoulder pivot to aim at the
   live widget button. */
.stratum-2 .testo-point {
  position: relative;
  width: 160px;
  aspect-ratio: 299 / 331;
  flex-shrink: 0;
  overflow: visible;
}
.stratum-2 .testo-point img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stratum-2 .testo-point .testo-point-arm {
  transform-origin: 56.52% 44.71%;
  clip-path: polygon(60.9% 45.9%, 75.3% 38.1%, 100% 41.7%, 100% 65.9%, 80.3% 68.9%, 65.6% 64.7%);
}

.stratum-4 { padding-top: 88px; padding-bottom: 88px; }

/* CTA at the deepest stratum: looks like bedrock. The final call
   to action emerges from solid rock — at display type scale, the one
   big typographic moment below the hero. */
.stratum-8.cta {
  background: var(--s8);
  text-align: center;
  padding: 110px 20px 120px;
}
.cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 56px;
}
.cta .testo { width: 352px; height: auto; opacity: .95; }
.cta-title {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 14ch;
  margin: 0 auto 20px !important;
}
.stratum-8.cta .section-sub { font-size: 17px; margin-bottom: 36px; }
@media (max-width: 900px) {
  .cta-inner { grid-template-columns: 1fr; gap: 28px; }
  .cta .testo { width: 200px; margin: 0 auto; }
}

/* Fossil-bed border: the trust section gets a thin ochre accent
   on top, hinting at buried artifacts. */
.stratum-6.trust-section {
  border-top: 1px solid rgba(180, 140, 90, .18);
  border-bottom: 1px solid rgba(180, 140, 90, .18);
}

@media (max-width: 700px) {
  /* The hero carries no padding of its own: the sticky video is
     in-flow and must stay full-bleed. Text spacing lives on
     .hero-content. */
  .hero-video-bg video { object-position: center 40%; }
  .demo-section { padding: 32px 24px; }
  .demo-content { flex-direction: column; align-items: flex-start; }
}