/* THREEVER marketing theme -------------------------------------------------
   The SWAZM generator owns semantic markup and content. This file owns the
   product's visual language: quiet geometry, precise spacing, and restrained
   blue/orange light borrowed from the editor's studio IBL. */

@font-face {
  font-family: "Droid Sans";
  src: url("/assets/fonts/droid-sans-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Droid Sans";
  src: url("/assets/fonts/droid-sans-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light;
  --page-gutter: clamp(1.1rem, 3vw, 3.25rem);
  --container: 90rem;
  --header-height: 5.25rem;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --font-sans: "Droid Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  background: var(--color-bg);
}

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(var(--color-accent-rgb), .07), transparent 22rem),
    radial-gradient(circle at 4% 78%, rgba(201, 117, 78, .055), transparent 28rem),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  /* No text-rendering or -webkit-font-smoothing override. Measured side by side on this page they
     changed nothing visible, and both have a cost: optimizeLegibility forces optional ligatures and
     has a history of uneven spacing, and antialiased thins glyphs on macOS only, so the page would
     not weigh the same on two machines. The browser's default is the one that was tuned per
     platform. */
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 23, 26, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 23, 26, .018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 85%, transparent);
  pointer-events: none;
  content: "";
}

::selection { background: rgba(201, 117, 78, .3); color: #111315; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }

h1, h2, h3, p, ul, ol, figure { margin-top: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
h2 { margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3.65rem); }
h3 { font-size: 1.15rem; }

.container {
  width: min(100% - (var(--page-gutter) * 2), var(--container));
  margin-inline: auto;
}

.container--narrow { max-width: 58rem; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:focus-visible { outline: 3px solid rgba(201, 117, 78, .58); outline-offset: 4px; }

.eyebrow {
  margin-bottom: 1rem;
  color: var(--color-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  min-height: 3.15rem;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: .8rem 1.3rem;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .22s var(--ease-out), background .22s ease, color .22s ease, border-color .22s ease;
}

.button::after {
  width: 1rem;
  height: 1rem;
  background: currentColor;
  content: "";
  -webkit-mask: url("/assets/icons/lucide/arrow-right.svg") center / contain no-repeat;
  mask: url("/assets/icons/lucide/arrow-right.svg") center / contain no-repeat;
  transition: transform .22s var(--ease-out);
}
.button:hover { transform: translateY(-2px); }
.button:hover::after { transform: translateX(4px); }
.button--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.button--primary:hover { background: #08090a; border-color: #08090a; }
.button--ghost { border-color: #aeb2b5; background: rgba(255, 255, 255, .46); }
.button--ghost:hover { border-color: var(--color-text); background: #fff; }
.button--light { border-color: #fff; background: #fff; color: var(--color-primary); }

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: rgba(244, 244, 242, .84);
  backdrop-filter: blur(18px) saturate(140%);
  transition: height .25s var(--ease-out), border-color .25s ease, box-shadow .25s ease;
}

.site-header.is-scrolled {
  height: 4.55rem;
  border-color: rgba(23, 25, 28, .1);
  box-shadow: 0 8px 28px rgba(14, 16, 18, .05);
}

.site-header__inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: grid; grid-template-columns: auto; align-items: center; gap: .1rem; flex: 0 0 auto; }
.brand__logo { width: clamp(10.5rem, 15vw, 13.2rem); height: auto; filter: invert(1); }
.brand__tagline { margin-left: 2.7rem; color: #666b70; font-size: .48rem; letter-spacing: .35em; text-transform: uppercase; }

.site-nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.site-nav__list > li > a:not(.button) {
  position: relative;
  padding-block: .6rem;
  color: #393d42;
  font-size: .79rem;
  /* Regular, not a medium. Droid Sans ships 400 and 700 and nothing between, so the 550 this used to
     ask for resolved to the full bold face: eight chunky links at 12.6px, competing with the one
     button that is supposed to carry the emphasis. The underline on hover is the affordance here,
     not weight. */
  font-weight: 400;
}
.site-nav__list > li > a:not(.button)::after {
  position: absolute;
  right: 0;
  bottom: .28rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .22s var(--ease-out);
}
.site-nav__list > li > a:not(.button):hover::after,
.site-nav__list > li > a:not(.button).is-active::after { transform: scaleX(1); transform-origin: left; }
.site-nav__list > li > a:not(.button).is-active { color: var(--color-warm); }
.site-nav .button { min-height: 2.7rem; padding: .65rem 1rem; }
.nav-toggle { display: none; width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%; background: transparent; }
.nav-toggle__bar {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  margin: auto;
  background: currentColor;
  -webkit-mask: url("/assets/icons/lucide/menu.svg") center / contain no-repeat;
  mask: url("/assets/icons/lucide/menu.svg") center / contain no-repeat;
}

/* Hero ------------------------------------------------------------------- */

.hero { position: relative; min-height: min(54rem, calc(100vh - var(--header-height))); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--color-bg) 0%, rgba(244, 244, 242, .97) 34%, rgba(244, 244, 242, .18) 62%, rgba(244, 244, 242, 0) 100%),
    radial-gradient(circle at 61% 40%, rgba(var(--color-accent-rgb), .08), transparent 27%),
    radial-gradient(circle at 82% 66%, rgba(201, 117, 78, .07), transparent 23%);
  pointer-events: none;
  content: "";
}
.hero__inner { position: relative; display: grid; min-height: inherit; grid-template-columns: minmax(21rem, .78fr) 1.22fr; align-items: center; }
.hero__copy { z-index: 2; max-width: 41rem; padding: clamp(5rem, 10vh, 8rem) 0 7rem; }
.hero__eyebrow { display: flex; align-items: center; gap: .75rem; }
.hero__eyebrow::before { width: 1.8rem; height: 1px; background: var(--color-warm); content: ""; }
.hero__headline { max-width: 11.5ch; margin-bottom: 1.35rem; font-size: clamp(3.4rem, 5.6vw, 6.24rem); line-height: .91; letter-spacing: -.064em; }
.hero__headline .accent { color: var(--color-warm); }
.hero__lead { max-width: 37rem; color: #454a4f; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.5; }
.hero__lead p { margin-bottom: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__media { position: absolute; z-index: 0; top: 0; right: calc((100vw - min(100vw - (var(--page-gutter) * 2), var(--container))) / -2); bottom: 0; left: 36%; overflow: hidden; }
.hero__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-bg) 0%, transparent 20%), linear-gradient(0deg, var(--color-bg), transparent 13%);
  pointer-events: none;
  content: "";
}
.hero__media > img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; filter: contrast(1.02); }

.plexus-background {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.82) 48%, #000);
  pointer-events: none;
}

/* Shared sections -------------------------------------------------------- */

.cards, .about, .process, .contact, .faq { position: relative; padding: clamp(5.5rem, 9vw, 9rem) 0; border-bottom: 1px solid var(--color-border); }
.cards > .container > h2,
.process > .container > h2 { max-width: 18ch; }
.cards__intro, .faq__intro { max-width: 44rem; margin-bottom: 2.25rem; color: var(--color-muted); font-size: 1.05rem; }
.cards__intro p, .faq__intro p { margin-bottom: 0; }
.cards__grid { display: grid; margin: 2.5rem 0 0; padding: 0; gap: 1rem; list-style: none; }
.card { position: relative; min-width: 0; }
.card__icon { display: block; object-fit: contain; }
.card__title { margin-bottom: .65rem; }
.card__text { color: var(--color-muted); font-size: .9rem; line-height: 1.55; }
.card__text p { margin-bottom: 0; }
.card__badge { display: inline-flex; align-items: center; justify-content: center; }
.cards__cta { margin: 2rem 0 0; text-align: center; }

/* Proof strip */

.cards--proof { padding: 0; background: rgba(255, 255, 255, .62); }
.cards--proof .cards__grid { grid-template-columns: repeat(4, 1fr); margin: 0; gap: 0; }
.cards--proof .card { min-height: 8.75rem; padding: 2rem 1.5rem 1.7rem 4.6rem; border-right: 1px solid var(--color-border); }
.cards--proof .card:last-child { border-right: 0; }
.cards--proof .card__icon {
  position: absolute;
  top: 2rem;
  left: 1.35rem;
  width: 2rem;
  height: 2rem;
  padding: .42rem;
  border: 1px solid #a7abad;
  border-radius: .55rem;
  background: rgba(255,255,255,.65);
}
.cards--proof .card:nth-child(4) .card__icon { border-color: rgba(201,117,78,.65); }
.cards--proof .card__title { font-size: .98rem; letter-spacing: -.02em; }
.cards--proof .card__text { font-size: .74rem; }

/* Product workspace */

.about { overflow: hidden; padding-top: clamp(6rem, 9vw, 9rem); }
.about::before {
  position: absolute;
  top: 12%;
  left: 1%;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgba(23, 25, 28, .055);
  border-radius: 50%;
  content: "";
}
.about__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(24rem, .85fr); align-items: center; gap: clamp(2.5rem, 4.5vw, 4.5rem); }
.about__media { position: relative; margin-bottom: 0; }
.about__media::before { position: absolute; z-index: 2; inset: 0; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-md); pointer-events: none; content: ""; }
.about__media img { width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.about__media img + img { margin-top: clamp(.8rem, 1.6vw, 1.15rem); }
.about__sig { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; color: var(--color-muted); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.about__role { text-align: right; }
.about__copy h2 { font-size: clamp(2.2rem, 4vw, 4.2rem); }
.about__body { color: #4b5055; }
.about__body > p:first-child { font-size: 1.05rem; }
.about__body ul { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.about__body li { position: relative; margin: .65rem 0; padding-left: 1.5rem; }
.about__body li::before { position: absolute; left: 0; color: var(--color-warm); content: "✓"; }
.about__cta { margin-top: 2rem; }

/* Tool cards */

.cards--tools { background: rgba(255,255,255,.42); text-align: center; }
.cards--tools > .container > h2 { margin-inline: auto; }
.cards--tools .cards__intro { margin-inline: auto; }
.cards--tools .cards__grid { grid-template-columns: repeat(4, 1fr); text-align: left; }
.cards--tools .card {
  min-height: 18.5rem;
  padding: 1.15rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.75);
  transition: transform .28s var(--ease-out), box-shadow .28s ease, border-color .28s ease;
}
.cards--tools .card:hover { transform: translateY(-5px); border-color: #bfc3c5; box-shadow: 0 20px 45px rgba(17,20,23,.09); }
.cards--tools .card:hover .card__badge { border-color: var(--color-warm); color: var(--color-warm); }
.cards--tools .card__icon {
  width: 8.2rem;
  height: 8.2rem;
  margin: .35rem auto 1.6rem;
  padding: 2.35rem;
  border: 1px solid #a9adb0;
  background:
    linear-gradient(rgba(54,59,64,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54,59,64,.09) 1px, transparent 1px),
    linear-gradient(145deg, #eceeed, #cfd2d3);
  background-size: 25% 25%, 25% 25%, auto;
  border-radius: 30%;
  box-shadow: inset 0 0 0 1.25rem rgba(255,255,255,.24);
  transition: transform .35s var(--ease-out);
}
.cards--tools .card:hover .card__icon { transform: rotate(-3deg) scale(1.04); }
.cards--tools .card__badge { position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 1.4rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-muted); font-size: .62rem; }
.cards--tools .card__title { font-size: 1.12rem; }

/* Selection-mode panels */

.cards--modes .cards__grid { grid-template-columns: repeat(3, 1fr); }
.cards--modes .card {
  min-height: 28rem;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #e5e6e5;
}
.cards--modes .card::before {
  position: absolute;
  z-index: 0;
  inset: 9.5rem -4rem -3rem 6rem;
  border: 1px solid rgba(35,40,45,.2);
  background:
    linear-gradient(30deg, transparent 49.5%, rgba(35,40,45,.18) 50%, transparent 50.5%),
    linear-gradient(150deg, transparent 49.5%, rgba(35,40,45,.18) 50%, transparent 50.5%),
    linear-gradient(rgba(35,40,45,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,40,45,.16) 1px, transparent 1px),
    linear-gradient(145deg, #c9cbcb, #f0f0ef);
  background-size: 90px 52px, 90px 52px, 90px 52px, 90px 52px, auto;
  content: "";
  transform: perspective(28rem) rotateX(55deg) rotateZ(-14deg) scale(1.3);
  transform-origin: center;
}
.cards--modes .card::after {
  position: absolute;
  z-index: 1;
  right: 28%;
  bottom: 22%;
  width: 4.5rem;
  height: 4.5rem;
  border: 2px solid rgba(201, 117, 78, .88);
  background: rgba(201, 117, 78, .34);
  box-shadow: 0 0 0 5px rgba(201, 117, 78, .09);
  content: "";
  transform: rotate(30deg) skew(-12deg);
}
.cards--modes .card:nth-child(1)::after { width: .75rem; height: .75rem; border-radius: 50%; background: var(--color-warm); box-shadow: 0 0 0 7px rgba(201,117,78,.16); }
.cards--modes .card:nth-child(2)::after { width: 7rem; height: 3px; border: 0; border-radius: 4px; background: var(--color-warm); box-shadow: 0 0 0 5px rgba(201,117,78,.12); transform: rotate(-18deg); }
.cards--modes .card__title, .cards--modes .card__text, .cards--modes .card__badge { position: relative; z-index: 2; }
.cards--modes .card__icon { position: relative; z-index: 2; width: 2rem; height: 2rem; margin-bottom: 1rem; }
.cards--modes .card__badge { float: right; width: 2.1rem; height: 2.1rem; border: 1px solid #aaadaf; border-radius: 50%; font-size: .7rem; }
.cards--modes .card__text { max-width: 17rem; color: #4e5357; }

.cards--modes .card.has-precision-demo { min-height: 32rem; background: linear-gradient(145deg,#eff0ef,#dfe1e1); }
.cards--modes .card.has-precision-demo::before,
.cards--modes .card.has-precision-demo::after { display: none; }
.precision-demo {
  position: relative;
  z-index: 2;
  clear: both;
  height: 14.5rem;
  margin: 2rem -1rem -1rem;
  overflow: hidden;
  border: 1px solid rgba(46,51,56,.2);
  border-radius: .85rem;
  background:
    radial-gradient(circle at 76% 18%,rgba(var(--color-accent-rgb),.08),transparent 9rem),
    linear-gradient(145deg,rgba(255,255,255,.8),rgba(210,213,213,.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.precision-demo:active { cursor: grabbing; }
.precision-demo:focus-visible { outline: 3px solid rgba(201,117,78,.52); outline-offset: 3px; }
.precision-demo svg { width: 100%; height: 100%; }
.precision-demo__hint { fill: #686e73; font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: 1.1px; }
.precision-demo__solid { fill: #c6c9ca; stroke: #5d6368; stroke-width: 1.2; }
.precision-demo__solid--shade { fill: #959b9e; }
.precision-demo__solid--light { fill: #e0e2e2; }
.gizmo-axis { stroke-width: 5; stroke-linecap: round; cursor: grab; }
.gizmo-axis--x { stroke: #ca6944; }
.gizmo-axis--y { stroke: #5d987b; }
.gizmo-axis--z { stroke: #477fb7; }
.gizmo-tip { cursor: grab; }
.gizmo-tip--x { fill: #ca6944; }
.gizmo-tip--y { fill: #5d987b; }
.gizmo-tip--z { fill: #477fb7; }
.gizmo-center { fill: #f2f3f2; stroke: #34393e; stroke-width: 2; cursor: move; }
.snap-guide { stroke: #9ca1a5; stroke-width: 1.5; stroke-dasharray: 5 5; }
.snap-target polygon { fill: rgba(63,130,215,.14); stroke: #477fb7; stroke-width: 2; }
.snap-mover { cursor: grab; }
.snap-mover polygon { fill: rgba(201,117,78,.2); stroke: #c16e48; stroke-width: 2; }
.snap-vertex { stroke: #fff; stroke-width: 3; }
.snap-vertex--target { fill: #477fb7; }
.snap-vertex--moving { fill: #c16e48; }
.precision-demo--snap.is-snapped .snap-guide { stroke: #4c8c6b; stroke-dasharray: none; }
.precision-demo--snap.is-snapped .snap-vertex { fill: #4c8c6b; }
.precision-demo--snap.is-snapped .snap-vertex--target { animation: snap-pulse .55s var(--ease-out); }
@keyframes snap-pulse { 50% { r: 12px; opacity: .55; } }
.uvw-face { stroke: #4e5459; stroke-width: 1.5; }
.uvw-face--top { filter: brightness(1.12); }
.uvw-face--side { filter: brightness(.78); }
.uvw-seam { fill: none; stroke: rgba(201,117,78,.9); stroke-width: 2; }
.precision-demo__controls { position: absolute; right: .75rem; bottom: .65rem; display: flex; gap: .35rem; }
.precision-demo__controls button {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(57,62,67,.32);
  border-radius: .5rem;
  background: rgba(249,249,248,.9);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
}
.precision-demo__controls button:hover { border-color: var(--color-warm); color: var(--color-warm); }

/* Materials */

.cards--materials { overflow: hidden; background: #181b1f; color: #f4f5f5; }
.cards--materials::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 16% 45%, rgba(var(--color-accent-rgb), .24), transparent 28rem), radial-gradient(circle at 86% 48%, rgba(201,117,78,.2), transparent 30rem);
  content: "";
}
.cards--materials > .container { position: relative; }
.cards--materials .eyebrow, .cards--materials .cards__intro { color: #aeb3b7; }
.cards--materials .cards__grid { grid-template-columns: repeat(4, 1fr); }
.cards--materials .card {
  min-height: 20rem;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(12px);
}
.cards--materials .card::before {
  display: block;
  width: 8.5rem;
  height: 8.5rem;
  margin: 0 auto 2.25rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #f6f7f7 0, #9ca8b3 8%, #36495d 28%, #14171b 60%, #060708 100%);
  box-shadow: -1.7rem -1rem 3.5rem rgba(var(--color-accent-rgb),.22), 1.6rem 1rem 3.5rem rgba(201,117,78,.18);
  content: "";
}
.cards--materials .card:nth-child(2)::before { background: conic-gradient(from 210deg, #1a2735, #4b79a6, #eef4f6, #bd6949, #251b1a, #1a2735); filter: blur(.2px); }
.cards--materials .card:nth-child(3)::before { border-radius: 20%; background: linear-gradient(135deg,#15191e 0 48%,#3f82d7 49% 51%,#d7d9d8 52% 100%); transform: rotate(7deg); }
.cards--materials .card:nth-child(4)::before { border-radius: 0; background: repeating-conic-gradient(#e2e2df 0 25%,#696d72 0 50%) 50%/30px 30px; }
.cards--materials .card__badge { position: absolute; top: 1.15rem; right: 1.25rem; color: #92989e; font-size: .56rem; letter-spacing: .15em; }
.cards--materials .card__icon { width: 1.6rem; height: 1.6rem; margin-bottom: .8rem; filter: brightness(0) invert(1); opacity: .8; }
.cards--materials .card__text { color: #adb2b6; }

/* Workflow */

.process { background: rgba(255,255,255,.35); }
.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 3.5rem 0 0; padding: 0; counter-reset: none; list-style: none; }
.step { position: relative; min-height: 15rem; padding: 1.5rem 2rem 1rem; border-top: 1px solid #aeb2b5; border-right: 1px solid var(--color-border); }
.step:last-child { border-right: 0; }
.step::before { position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); content: ""; }
.step__num { display: block; margin-bottom: 3rem; color: var(--color-warm); font-size: .72rem; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.step__title { margin-bottom: .8rem; }
.step__text { color: var(--color-muted); font-size: .88rem; }
.step__text p { margin-bottom: 0; }

/* Why strip */

.cards--why { padding-block: 6rem; }
.cards--why > .container > h2 { margin-inline: auto; text-align: center; }
.cards--why .eyebrow { text-align: center; }
.cards--why .cards__grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
.cards--why .card { min-height: 9rem; padding: .5rem 2rem .5rem 5rem; border-right: 1px solid var(--color-border); }
.cards--why .card:last-child { border-right: 0; }
.cards--why .card__icon {
  position: absolute;
  top: .35rem;
  left: 1.2rem;
  width: 2.7rem;
  height: 2.7rem;
  padding: .65rem;
  border: 1px solid #8f9498;
  border-radius: .65rem;
  background: rgba(255,255,255,.6);
}
.cards--why .card:nth-child(4) .card__icon { border-color: rgba(201,117,78,.65); }

/* Pricing ---------------------------------------------------------------- */

.cards--pricing { overflow: hidden; background: linear-gradient(145deg,rgba(255,255,255,.72),rgba(237,239,239,.72)); }
.cards--pricing::before {
  position: absolute;
  top: -14rem;
  right: -9rem;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(201,117,78,.12),rgba(63,130,215,.035) 48%,transparent 70%);
  content: "";
}
.cards--pricing > .container { position: relative; }
.cards--pricing .cards__intro { max-width: 52rem; }
.cards--pricing .cards__grid { position: relative; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 4rem; }
.cards--pricing .cards__grid::before {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 11%;
  left: 11%;
  height: 2px;
  background: linear-gradient(90deg,var(--color-warm),rgba(201,117,78,.5) 34%,rgba(var(--color-accent-rgb),.48) 68%,var(--color-accent));
  content: "";
}
.cards--pricing .card {
  z-index: 1;
  min-height: 22rem;
  padding: 4.25rem 1.6rem 2rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-sm);
}
.cards--pricing .card::before {
  position: absolute;
  z-index: 3;
  top: .45rem;
  left: 50%;
  width: 1.15rem;
  height: 1.15rem;
  border: 4px solid #f7f7f5;
  border-radius: 50%;
  background: var(--color-warm);
  box-shadow: 0 0 0 1px rgba(201,117,78,.45);
  content: "";
  transform: translateX(-50%);
}
.cards--pricing .card:nth-child(2)::before { background: #bf876e; }
.cards--pricing .card:nth-child(3)::before { background: #778da8; box-shadow: 0 0 0 1px rgba(63,130,215,.35); }
.cards--pricing .card:nth-child(4)::before { background: var(--color-accent); box-shadow: 0 0 0 1px rgba(63,130,215,.5); }
.cards--pricing .card__badge { display: inline-flex; margin-bottom: 1.5rem; padding: .4rem .62rem; border: 1px solid rgba(201,117,78,.38); border-radius: 999px; color: var(--color-warm); font-size: .6rem; font-weight: 700; letter-spacing: .12em; }
.cards--pricing .card:nth-child(n+3) .card__badge { border-color: rgba(63,130,215,.3); color: #416f9f; }
.cards--pricing .card__icon { width: 3rem; height: 3rem; margin-bottom: 2.25rem; padding: .72rem; border: 1px solid #aeb2b5; border-radius: .8rem; background: rgba(244,244,242,.82); }
.cards--pricing .card__title { max-width: 13ch; font-size: 1.45rem; }
.cards--pricing .card__text { max-width: 27rem; font-size: .94rem; }
.cards--pricing .card__text a { color: var(--color-warm); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.cards--pricing .cards__cta { margin-top: 2.5rem; text-align: left; }

/* Changelog (generated from the commit log) ------------------------------ */

/* Matches the shared section rhythm: same vertical padding, same container width and the same
   light panel the FAQ uses, so it reads as part of the page rather than an appended list. */
#changelog {
  padding: clamp(5.5rem, 9vw, 9rem) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 0;
  background: rgba(255, 255, 255, .55);
}
#changelog .container--narrow { max-width: none; }
#changelog h2 { max-width: 18ch; }

/* The body is a flat run of "day heading + its list", so a two-column grid lays it out as a
   timeline: day and version on the left against the rule, changes reading down the right. */
#changelog .richtext__body {
  display: grid;
  margin-top: 2.5rem;
  border-top: 1px solid var(--color-border);
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  max-width: none;
}

#changelog h3 {
  position: relative;
  margin: 0;
  padding: 1.55rem 1.6rem 1.55rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: right;
  white-space: nowrap;
}
#changelog h3::after {                 /* the timeline rule, on the column boundary */
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
  content: "";
}
#changelog h3 em {
  display: block;
  margin-top: .3rem;
  color: #416f9f;
  font-size: .7rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .05em;
}

#changelog ul {
  margin: 0;
  padding: 1.55rem 0 1.55rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  list-style: disc;
}
#changelog li {
  margin: .34rem 0;
  padding-left: .15rem;
  color: var(--color-muted);
  font-size: .92rem;
  line-height: 1.55;
}
#changelog li:first-child { margin-top: 0; }
#changelog li:last-child { margin-bottom: 0; }
#changelog li::marker { color: rgba(63, 130, 215, .5); }

#changelog .richtext__body > p {        /* the "earlier changes" note */
  grid-column: 1 / -1;
  margin: 1.6rem 0 0;
  color: var(--color-muted);
  font-size: .82rem;
}
#changelog .richtext__body > p em { font-style: normal; }

@media (max-width: 760px) {
  #changelog .richtext__body { grid-template-columns: 1fr; border-top: 0; }
  #changelog h3 {
    padding: 1.6rem 0 .5rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
    text-align: left;
  }
  #changelog h3::after { display: none; }
  #changelog h3 em { display: inline; margin-left: .6rem; }
  #changelog ul { padding: 0 0 1.5rem 1.25rem; border-bottom: 0; }
}

/* Contact ---------------------------------------------------------------- */

.contact { overflow: hidden; background: rgba(255,255,255,.42); }
.contact::before {
  position: absolute;
  top: -13rem;
  left: -9rem;
  width: 32rem;
  height: 32rem;
  border: 1px solid rgba(201,117,78,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(201,117,78,.025), 0 0 0 10rem rgba(63,130,215,.018);
  content: "";
}
.contact > .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(19rem,.8fr) minmax(0,1.2fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 0 clamp(3rem,8vw,8rem);
  align-items: start;
}
.contact .eyebrow { grid-column: 1; grid-row: 1; }
.contact h2 { grid-column: 1; grid-row: 2; max-width: 13.5ch; font-size: clamp(2.7rem,4vw,4.5rem); }
.contact__intro { grid-column: 1; grid-row: 3; max-width: 30rem; color: var(--color-muted); font-size: 1.05rem; }
.contact__form {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.15rem;
  padding: clamp(1.5rem,4vw,3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.8);
  box-shadow: var(--shadow-sm);
}
.contact__form label { display: grid; gap: .5rem; color: #4a4f54; font-size: .78rem; font-weight: 700; }
.contact__form label:nth-of-type(3), .contact__privacy, .contact__status { grid-column: 1 / -1; }
.contact__form input, .contact__form textarea {
  width: 100%;
  border: 1px solid #b9bdc0;
  border-radius: var(--radius-sm);
  background: rgba(244,244,242,.72);
  padding: .85rem .95rem;
  outline: 0;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact__form textarea { min-height: 9rem; resize: vertical; }
.contact__form input:focus, .contact__form textarea:focus { border-color: var(--color-warm); background: #fff; box-shadow: 0 0 0 3px rgba(201,117,78,.13); }
.contact__privacy { color: var(--color-muted); font-size: .72rem; }
.contact__privacy p { margin: 0; }
.contact__privacy a { color: var(--color-warm); text-decoration: underline; text-underline-offset: .18em; }
.contact__form .button { justify-self: start; }
.contact__form .button:disabled { cursor: wait; opacity: .55; transform: none; }
.contact__status { min-height: 1.5rem; margin: 0; color: var(--color-muted); font-size: .8rem; }
.contact__status.is-success { color: #286840; }
.contact__status.is-error { color: #9b442d; }
.contact__status a { text-decoration: underline; text-underline-offset: .18em; }
.contact__fallback { grid-column: 1; grid-row: 4; margin: 2rem 0 0; color: var(--color-muted); font-size: .82rem; }
.contact__fallback a { color: var(--color-warm); }

/* FAQ -------------------------------------------------------------------- */

.faq { background: rgba(255,255,255,.55); }
.faq h2 { max-width: 13ch; }
.faq__items { margin-top: 2.5rem; border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__question {
  position: relative;
  padding: 1.4rem 3rem 1.4rem 0;
  cursor: pointer;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.02em;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  position: absolute;
  top: calc(50% - .55rem);
  right: .25rem;
  width: 1.1rem;
  height: 1.1rem;
  background: currentColor;
  content: "";
  -webkit-mask: url("/assets/icons/lucide/plus.svg") center / contain no-repeat;
  mask: url("/assets/icons/lucide/plus.svg") center / contain no-repeat;
}
.faq__item[open] .faq__question::after {
  -webkit-mask-image: url("/assets/icons/lucide/minus.svg");
  mask-image: url("/assets/icons/lucide/minus.svg");
}
.faq__answer { max-width: 45rem; padding: 0 2rem 1.6rem 0; color: var(--color-muted); }
.faq__answer p { margin-bottom: 0; }

/* CTA and footer --------------------------------------------------------- */

.cta-band { position: relative; overflow: hidden; background: #1b1e22; color: #fff; }
.cta-band::before { position: absolute; inset: 0; background: radial-gradient(circle at 80% 10%, rgba(var(--color-accent-rgb),.3), transparent 28rem), radial-gradient(circle at 95% 100%, rgba(201,117,78,.25), transparent 24rem); content: ""; }
.cta-band__inner { position: relative; display: flex; min-height: 17rem; align-items: center; justify-content: space-between; gap: 3rem; }
.cta-band h2 { margin-bottom: .6rem; font-size: clamp(2.2rem, 4vw, 4.4rem); }
.cta-band__text { color: #bdc2c6; }
.cta-band__text p { margin-bottom: 0; }
.cta-band .button { flex: 0 0 auto; }

.site-footer { padding: 5rem 0 1.4rem; background: #101214; color: #dfe1e2; }
.site-footer__inner { display: grid; grid-template-columns: minmax(16rem, 1.45fr) repeat(4, minmax(7rem,.5fr)); gap: 3rem; }
.site-footer__about { max-width: 26rem; }
.site-footer .brand__logo { width: 11.5rem; filter: none; }
.site-footer__text { margin-top: 1.5rem; color: #92989d; font-size: .86rem; }
.site-footer__text p { margin-bottom: 0; }
.site-footer__contact { display: inline-block; margin-top: 1rem; color: #d3d6d8; font-size: .8rem; }
.site-footer__contact a:hover { color: #fff; }
.site-footer__heading { margin-bottom: 1.2rem; color: #747b81; font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin: .65rem 0; }
.site-footer li a { color: #b7bcc0; font-size: .82rem; transition: color .2s ease; }
.site-footer li a:hover { color: #fff; }
.site-footer__cta { display: none; }
.site-footer__copyright { grid-column: 1 / -1; margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid #292d30; color: #6f757a; font-size: .68rem; letter-spacing: .03em; }
.site-footer__credit a:hover { color: #fff; }
.site-footer__credit a { display: inline-flex; align-items: center; vertical-align: middle; }
.site-footer__credit-logo { height: 15px; width: auto; opacity: .7; transition: opacity 140ms ease; }
.site-footer__credit a:hover .site-footer__credit-logo { opacity: 1; }

/* Legal pages ------------------------------------------------------------ */

.breadcrumbs { border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,.38); }
.breadcrumbs__list { display: flex; min-height: 3.75rem; align-items: center; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs__item { color: var(--color-muted); font-size: .74rem; }
.breadcrumbs__item + .breadcrumbs__item::before { margin-right: .65rem; color: #9da1a4; content: "/"; }
.breadcrumbs__item a:hover { color: var(--color-warm); }
.legal-contact { padding: clamp(5rem,9vw,8rem) 0 3rem; }
.legal-contact h1 { margin-bottom: 1.5rem; font-size: clamp(3rem,7vw,6rem); }
.legal-contact__intro { max-width: 45rem; color: var(--color-muted); font-size: 1.05rem; }
.legal-contact__intro p { margin-bottom: .65rem; }
.legal-contact__address {
  width: min(100%,32rem);
  margin: 2.5rem 0 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warm);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.62);
  font-style: normal;
  line-height: 1.75;
  white-space: pre-line;
}
.legal-contact__rows { width: min(100%,32rem); margin: 0 0 3rem; }
.legal-contact__rows > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--color-border); }
.legal-contact__rows dt { color: var(--color-muted); font-size: .76rem; }
.legal-contact__rows dd { margin: 0; }
.legal-contact__rows a { color: var(--color-warm); }
.legal-contact__body, .richtext__body { max-width: 48rem; color: #44494e; }
.legal-contact__body h2, .richtext__body h2 { margin: 3.25rem 0 1rem; font-size: clamp(1.45rem,3vw,2rem); letter-spacing: -.025em; }
.legal-contact__body p, .richtext__body p { margin-bottom: 1.15rem; }
.legal-contact__body a, .richtext__body a { color: var(--color-warm); text-decoration: underline; text-underline-offset: .2em; }
.richtext { padding: 0 0 clamp(6rem,10vw,10rem); }

/* Progressive motion ---------------------------------------------------- */

.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .cards__grid [data-reveal]:nth-child(2) { transition-delay: .06s; }
.js .cards__grid [data-reveal]:nth-child(3) { transition-delay: .12s; }
.js .cards__grid [data-reveal]:nth-child(4) { transition-delay: .18s; }
.js .cards__grid [data-reveal]:nth-child(5) { transition-delay: .03s; }
.js .cards__grid [data-reveal]:nth-child(6) { transition-delay: .09s; }
.js .cards__grid [data-reveal]:nth-child(7) { transition-delay: .15s; }
.js .cards__grid [data-reveal]:nth-child(8) { transition-delay: .21s; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1120px) {
  .site-nav__list { gap: 1rem; }
  .site-nav__list > li > a:not(.button) { font-size: .73rem; }
  .hero__inner { grid-template-columns: minmax(19rem,.8fr) 1.2fr; }
  .hero__headline { font-size: clamp(3.2rem, 5.6vw, 4.8rem); }
  .cards--materials .cards__grid, .cards--tools .cards__grid { grid-template-columns: repeat(2,1fr); }
  .cards--why .cards__grid { grid-template-columns: repeat(2,1fr); row-gap: 2.5rem; }
  .cards--why .card:nth-child(2) { border-right: 0; }
  .site-footer__inner { grid-template-columns: minmax(15rem,1.3fr) repeat(2,minmax(8rem,.7fr)); }
  .site-footer__column:nth-of-type(3) { display: none; }
}

@media (max-width: 860px) {
  :root { --header-height: 4.5rem; }
  .brand__logo { width: 10.4rem; }
  .brand__tagline { display: none; }
  .nav-toggle { display: grid; place-items: center; cursor: pointer; }
  .site-nav {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    padding: 1rem var(--page-gutter) 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    box-shadow: 0 18px 35px rgba(20,23,26,.1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .site-nav__list { align-items: stretch; flex-direction: column; gap: .15rem; }
  .site-nav__list > li > a { display: flex; min-height: 2.8rem; align-items: center; }
  .site-nav .button { margin-top: .5rem; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-nav { opacity: 1; pointer-events: auto; transform: none; }
  body.nav-open .nav-toggle__bar {
    -webkit-mask-image: url("/assets/icons/lucide/x.svg");
    mask-image: url("/assets/icons/lucide/x.svg");
  }

  .hero { min-height: auto; }
  .hero::before { background: linear-gradient(180deg, var(--color-bg) 0 46%, rgba(244,244,242,.15) 75%, var(--color-bg) 100%); }
  .hero__inner { display: block; padding-bottom: 0; }
  .hero__copy { max-width: 39rem; padding: 5.5rem 0 1.5rem; }
  .hero__headline { max-width: 11ch; font-size: clamp(2.88rem, 9.6vw, 5.2rem); }
  .hero__media { position: relative; right: auto; left: auto; width: calc(100% + (var(--page-gutter) * 2)); height: min(68vw, 35rem); margin-left: calc(var(--page-gutter) * -1); transform: none; }
  .hero__media::after { background: linear-gradient(0deg,var(--color-bg),transparent 14%), linear-gradient(180deg,var(--color-bg),transparent 13%); }
  .hero__media > img { object-position: 100% center; }

  .cards--proof .cards__grid { grid-template-columns: repeat(2,1fr); }
  .cards--proof .card:nth-child(2) { border-right: 0; }
  .cards--proof .card:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
  .about__inner { grid-template-columns: 1fr; }
  .about__media { order: 2; }
  .about__copy { order: 1; max-width: 42rem; }
  .contact > .container { grid-template-columns: 1fr; grid-template-rows: auto; }
  .contact .eyebrow, .contact h2, .contact__intro, .contact__form, .contact__fallback { grid-column: 1; grid-row: auto; }
  .contact h2 { max-width: 14ch; }
  .contact__intro { margin-bottom: 2rem; }
  .contact__fallback { margin-top: 1rem; }
  .cards--modes .cards__grid { grid-template-columns: 1fr; }
  .cards--modes .card { min-height: 23rem; }
  .cards--modes .card.has-precision-demo { min-height: 30rem; }
  .precision-demo { height: 13.5rem; }
  .cards--pricing .cards__grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; padding-left: 2.5rem; }
  .cards--pricing .cards__grid::before { top: 2rem; right: auto; bottom: 2rem; left: .7rem; width: 2px; height: auto; background: linear-gradient(180deg,var(--color-warm),rgba(201,117,78,.5) 34%,rgba(var(--color-accent-rgb),.48) 68%,var(--color-accent)); }
  .cards--pricing .card { min-height: auto; padding: 2rem; overflow: visible; }
  .cards--pricing .card::before { top: 2rem; left: -1.8rem; transform: translate(-50%,-50%); }
  .cards--pricing .card__icon { margin-bottom: 1.75rem; }
  .process__steps { grid-template-columns: repeat(2,1fr); }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(n+3) { border-top-color: var(--color-border); }
}

@media (max-width: 580px) {
  :root { --page-gutter: 1rem; }
  h2 { font-size: 2.35rem; }
  .hero__copy { padding-top: 4.25rem; }
  .hero__headline { font-size: clamp(2.76rem, 14.4vw, 4.4rem); }
  .hero__lead { font-size: .98rem; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button { width: 100%; }
  .hero__media { height: 25rem; }
  .cards, .about, .process, .contact, .faq { padding-block: 5rem; }
  .cards--proof { padding-block: 0; }
  .cards--proof .cards__grid { grid-template-columns: 1fr; }
  .cards--proof .card { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .cards--proof .card:last-child { border-bottom: 0; }
  .cards--tools .cards__grid, .cards--materials .cards__grid, .cards--why .cards__grid { grid-template-columns: 1fr; }
  .cards--tools .card { min-height: 17.5rem; }
  .cards--why .card { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .cards--why .card:last-child { border-bottom: 0; }
  .process__steps { grid-template-columns: 1fr; }
  .step { min-height: 13rem; border-right: 0; }
  .step__num { margin-bottom: 2rem; }
  .about__sig { align-items: flex-start; flex-direction: column; }
  .about__role { text-align: left; }
  .contact__form { grid-template-columns: 1fr; padding: 1.25rem; }
  .contact__form label { grid-column: 1; }
  .legal-contact { padding-top: 4rem; }
  .legal-contact__rows > div { grid-template-columns: 1fr; gap: .25rem; }
  .cta-band__inner { min-height: 22rem; align-items: flex-start; flex-direction: column; justify-content: center; gap: 1.4rem; }
  .cta-band .button { width: 100%; }
  .site-footer__inner { grid-template-columns: repeat(2,1fr); gap: 2.5rem 1.5rem; }
  .site-footer__about { grid-column: 1 / -1; }
  .site-footer__legal { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}