/* Homepage sections (from Website.dc.html). Tokens/base in site.css. */

html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }

@keyframes bpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes bnFlow { to { stroke-dashoffset: -0.075; } }
@keyframes bnBlink { 50% { opacity: 0; } }
@keyframes bnMarquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.bdemo, .bdemo *),
  *:not(.bdemo, .bdemo *)::before,
  *:not(.bdemo, .bdemo *)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Freeze the hero demo on the final answer frame. */
  .bdemo, .bdemo * {
    animation-play-state: paused !important;
    animation-delay: -12.4s !important;
  }
}

.section-pad { padding: clamp(80px, 10vw, 150px) 0; }
.section-rule {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  padding-bottom: 16px; border-bottom: 2px solid currentColor;
  margin-bottom: clamp(36px, 5vw, 72px);
}
.section-rule .muted { color: var(--text-muted); }
.display {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  line-height: 0.95; letter-spacing: -0.015em; text-wrap: balance;
}
.display em { font-style: italic; color: var(--signal); }
.note-mono { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* Hero */
.hero { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 7vw, 112px); }
.hero h1 {
  margin: 0; max-width: 1240px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 10vw, 156px); line-height: 0.92; letter-spacing: -0.025em; text-wrap: balance;
}
.hero h1 em { color: var(--signal); font-style: italic; }
.hero-row {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px;
}
.hero-copy { flex: 0 1 560px; display: flex; flex-direction: column; gap: 16px; }
.hero-copy p { margin: 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; text-wrap: pretty; }
.hero-copy .pull {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; color: var(--gray-700);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-ctas .btn-primary { padding: 16px 24px; font-size: 15px; }
.hero-demo {
  margin-top: clamp(32px, 4vw, 56px);
  position: relative; aspect-ratio: 21 / 8; border: 1px solid var(--ink); background: var(--ink);
  overflow: hidden; max-width: 100%;
}
@media (max-width: 760px) { .hero-demo { aspect-ratio: 4 / 3; } }

/* Hero product demo (14s CSS loop from Website design) */
@keyframes bdScene{0%{opacity:0}3%{opacity:1}94%{opacity:1}99%,100%{opacity:0}}
@keyframes bdType{0%,6%{width:0}24%,100%{width:var(--qw)}}
@keyframes bdCaret{0%,25%{opacity:1}26%,100%{opacity:0}}
@keyframes bdQ{0%,4%{opacity:0;transform:translateY(8px)}6%,100%{opacity:1;transform:none}}
@keyframes bdRd0{0%,29.9%{opacity:0}30.0%,33.9%{opacity:1}34.0%,100%{opacity:0}}
@keyframes bdOk0{0%,33.9%{opacity:0;transform:scale(.4)}35.5%,100%{opacity:1;transform:none}}
@keyframes bdRow0{0%,29.9%{background:transparent;color:var(--gray-400)}30.0%,34.0%{background:var(--signal-tint);color:var(--paper)}36.0%,100%{background:transparent;color:var(--gray-200)}}
@keyframes bdRd1{0%,34.4%{opacity:0}34.5%,38.4%{opacity:1}38.5%,100%{opacity:0}}
@keyframes bdOk1{0%,38.4%{opacity:0;transform:scale(.4)}40.0%,100%{opacity:1;transform:none}}
@keyframes bdRow1{0%,34.4%{background:transparent;color:var(--gray-400)}34.5%,38.5%{background:var(--signal-tint);color:var(--paper)}40.5%,100%{background:transparent;color:var(--gray-200)}}
@keyframes bdRd2{0%,38.9%{opacity:0}39.0%,42.9%{opacity:1}43.0%,100%{opacity:0}}
@keyframes bdOk2{0%,42.9%{opacity:0;transform:scale(.4)}44.5%,100%{opacity:1;transform:none}}
@keyframes bdRow2{0%,38.9%{background:transparent;color:var(--gray-400)}39.0%,43.0%{background:var(--signal-tint);color:var(--paper)}45.0%,100%{background:transparent;color:var(--gray-200)}}
@keyframes bdRd3{0%,43.4%{opacity:0}43.5%,47.4%{opacity:1}47.5%,100%{opacity:0}}
@keyframes bdOk3{0%,47.4%{opacity:0;transform:scale(.4)}49.0%,100%{opacity:1;transform:none}}
@keyframes bdRow3{0%,43.4%{background:transparent;color:var(--gray-400)}43.5%,47.5%{background:var(--signal-tint);color:var(--paper)}49.5%,100%{background:transparent;color:var(--gray-200)}}
@keyframes bdRd4{0%,47.9%{opacity:0}48.0%,51.9%{opacity:1}52.0%,100%{opacity:0}}
@keyframes bdOk4{0%,51.9%{opacity:0;transform:scale(.4)}53.5%,100%{opacity:1;transform:none}}
@keyframes bdRow4{0%,47.9%{background:transparent;color:var(--gray-400)}48.0%,52.0%{background:var(--signal-tint);color:var(--paper)}54.0%,100%{background:transparent;color:var(--gray-200)}}
@keyframes bdThink{0%,30%{opacity:0}32%,58%{opacity:1}60%,100%{opacity:0;height:0}}
@keyframes bdAns{0%,59%{opacity:0;transform:translateY(10px)}63%,100%{opacity:1;transform:none}}
@keyframes bdBar0{0%,65%{height:0}70%,100%{height:62%}}
@keyframes bdBar1{0%,67%{height:0}72%,100%{height:70%}}
@keyframes bdBar2{0%,69%{height:0}74%,100%{height:66%}}
@keyframes bdBar3{0%,71%{height:0}76%,100%{height:74%}}
@keyframes bdBar4{0%,73%{height:0}78%,100%{height:38%}}
@keyframes bdBar5{0%,75%{height:0}80%,100%{height:46%}}
@keyframes bdBar6{0%,77%{height:0}82%,100%{height:58%}}
@keyframes bdStat{0%,79%{opacity:0;transform:scale(.7)}82%{opacity:1;transform:scale(1.08)}84%,100%{opacity:1;transform:none}}
@keyframes bdFoot{0%,84%{opacity:0}87%,100%{opacity:1}}
@keyframes bdProg{0%{width:0}94%,100%{width:100%}}
@keyframes bdSpin{to{transform:rotate(360deg)}}
@keyframes bdDot{0%,100%{opacity:.25}50%{opacity:1}}

.bdemo {
  position: absolute; inset: 0; container-type: size;
  background: var(--ink); color: var(--paper); overflow: hidden;
  font-family: var(--font-body);
}
.bdemo * { box-sizing: border-box; }
.bd-in {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  animation: bdScene 14s linear infinite;
}
.bd-top {
  flex: 0 0 auto; height: max(34px, 9cqh);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(14px, 2.4cqw); border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-mono); font-size: max(10px, 2.3cqh);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400);
}
.bd-dots { display: flex; gap: 6px; }
.bd-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-line); display: block; }
.bd-live { display: flex; align-items: center; gap: 8px; color: var(--paper); }
.bd-live b {
  width: 8px; height: 8px; border-radius: 50%; background: var(--signal);
  animation: bdDot 1.4s ease-in-out infinite;
}
.bd-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 26%) minmax(0, 1fr);
}
.bd-src {
  border-right: 1px solid var(--ink-line);
  padding: max(12px, 3.4cqh) max(12px, 1.8cqw);
  display: flex; flex-direction: column; gap: max(4px, 1.2cqh);
}
.bd-lbl {
  font-family: var(--font-mono); font-size: max(9px, 2.1cqh);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-600);
  margin-bottom: max(4px, 1cqh);
}
.bd-row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: max(6px, 1.7cqh) max(8px, 1cqw); font-size: max(12px, 3.2cqh); color: var(--gray-400);
}
.bd-st { position: relative; width: max(14px, 3.4cqh); height: max(14px, 3.4cqh); }
.bd-st i, .bd-st b {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
}
.bd-st i { border: 1.5px solid var(--signal); border-right-color: transparent; }
.bd-st b {
  background: var(--paper); color: var(--ink);
  font-size: max(9px, 2.2cqh); font-weight: 600;
}
.bd-st:before {
  content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--ink-line);
}
.bd-chat {
  position: relative; padding: max(14px, 4cqh) max(16px, 3cqw);
  display: flex; flex-direction: column; gap: max(10px, 3cqh); min-width: 0;
}
.bd-q {
  align-self: flex-end; max-width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: max(8px, 2.4cqh) max(12px, 1.6cqw);
  background: var(--paper); color: var(--ink);
  font-size: max(13px, 4.2cqh); line-height: 1.2;
  animation: bdQ 14s linear infinite;
}
.bd-qt {
  display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  --qw: 39ch; animation: bdType 14s linear infinite; animation-timing-function: steps(39, end);
}
.bd-car {
  display: inline-block; width: 2px; height: 1.1em; background: var(--signal);
  animation: bdCaret 14s linear infinite; flex: none;
}
.bd-think {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: max(10px, 2.3cqh);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400);
  animation: bdThink 14s linear infinite;
}
.bd-av { width: max(22px, 6cqh); height: max(22px, 6cqh); flex: 0 0 auto; display: block; }
.bd-think span i {
  display: inline-block; width: 5px; height: 5px; margin-left: 4px;
  border-radius: 50%; background: var(--signal); animation: bdDot 1s ease-in-out infinite;
}
.bd-think span i:nth-child(2) { animation-delay: 0.2s; }
.bd-think span i:nth-child(3) { animation-delay: 0.4s; }
.bd-ans {
  position: absolute; left: max(16px, 3cqw); right: max(16px, 3cqw);
  bottom: max(14px, 4cqh); top: max(70px, 22cqh);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: max(12px, 2.4cqw); animation: bdAns 14s linear infinite;
}
.bd-txt { display: flex; flex-direction: column; gap: max(8px, 2.2cqh); min-width: 0; }
.bd-txt p {
  margin: 0; font-family: var(--font-display);
  font-size: max(18px, 6.6cqh); line-height: 1.05; letter-spacing: -0.01em;
}
.bd-txt p em { color: var(--signal); font-style: italic; }
.bd-txt small { font-size: max(11px, 3cqh); line-height: 1.45; color: var(--gray-200); }
.bd-foot {
  font-family: var(--font-mono); font-size: max(9px, 2.1cqh);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-600);
  animation: bdFoot 14s linear infinite;
}
.bd-chart {
  position: relative; border: 1px solid var(--ink-line); background: var(--ink-2);
  padding: max(10px, 3cqh) max(10px, 1.4cqw) 0;
  display: flex; flex-direction: column; min-height: 0;
}
.bd-ch {
  display: flex; justify-content: space-between; align-items: flex-start;
  font-family: var(--font-mono); font-size: max(9px, 2.1cqh);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400);
}
.bd-stat {
  font-family: var(--font-display); font-size: max(22px, 8cqh); line-height: 0.9;
  letter-spacing: -0.02em; color: var(--signal); text-transform: none;
  transform-origin: right top; animation: bdStat 14s linear infinite;
}
.bd-bars {
  flex: 1; min-height: 0; display: flex; align-items: flex-end;
  gap: max(4px, 0.8cqw); padding-top: max(6px, 1.6cqh);
  border-bottom: 1px solid var(--ink-line);
}
.bd-bars i { flex: 1; display: block; background: var(--gray-700); min-width: 0; }
.bd-bars i.hit { background: var(--signal); }
.bd-days {
  display: flex; gap: max(4px, 0.8cqw); padding: max(4px, 1.2cqh) 0;
  font-family: var(--font-mono); font-size: max(8px, 1.9cqh); color: var(--gray-600);
}
.bd-days span { flex: 1; text-align: center; min-width: 0; }
.bd-prog {
  position: absolute; left: 0; bottom: 0; height: 2px; background: var(--signal);
  animation: bdProg 14s linear infinite;
}
@container (max-width: 640px) {
  .bd-body { grid-template-columns: 1fr; }
  .bd-src { display: none; }
  .bd-ans { grid-template-columns: 1fr; top: max(64px, 24cqh); }
  .bd-txt small, .bd-foot, .bd-top > span:nth-child(2) { display: none; }
  .bd-txt p { font-size: max(15px, 5.4cqh); }
}
.bd-r0 { animation: bdRow0 14s linear infinite; }
.bd-r0 .bd-st i { animation: bdRd0 14s linear infinite, bdSpin 0.8s linear infinite; }
.bd-r0 .bd-st b { animation: bdOk0 14s linear infinite; }
.bd-r1 { animation: bdRow1 14s linear infinite; }
.bd-r1 .bd-st i { animation: bdRd1 14s linear infinite, bdSpin 0.8s linear infinite; }
.bd-r1 .bd-st b { animation: bdOk1 14s linear infinite; }
.bd-r2 { animation: bdRow2 14s linear infinite; }
.bd-r2 .bd-st i { animation: bdRd2 14s linear infinite, bdSpin 0.8s linear infinite; }
.bd-r2 .bd-st b { animation: bdOk2 14s linear infinite; }
.bd-r3 { animation: bdRow3 14s linear infinite; }
.bd-r3 .bd-st i { animation: bdRd3 14s linear infinite, bdSpin 0.8s linear infinite; }
.bd-r3 .bd-st b { animation: bdOk3 14s linear infinite; }
.bd-r4 { animation: bdRow4 14s linear infinite; }
.bd-r4 .bd-st i { animation: bdRd4 14s linear infinite, bdSpin 0.8s linear infinite; }
.bd-r4 .bd-st b { animation: bdOk4 14s linear infinite; }
.bd-b0 { animation: bdBar0 14s linear infinite; }
.bd-b1 { animation: bdBar1 14s linear infinite; }
.bd-b2 { animation: bdBar2 14s linear infinite; }
.bd-b3 { animation: bdBar3 14s linear infinite; }
.bd-b4 { animation: bdBar4 14s linear infinite; }
.bd-b5 { animation: bdBar5 14s linear infinite; }
.bd-b6 { animation: bdBar6 14s linear infinite; }

/* Problem */
.problem { border-top: 1px solid var(--ink); background: var(--paper-2); color: var(--ink); }
.problem .section-rule { border-color: var(--ink); }
.problem h2 { font-size: clamp(40px, 6.6vw, 104px); max-width: 1100px; }
.problem h2 .dim { color: var(--gray-600); font-style: italic; }
.reports {
  margin-top: clamp(48px, 6vw, 96px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start;
}
.report {
  background: var(--paper); border: 1px solid var(--rule); display: flex; flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s, border-color 0.3s, opacity 0.8s;
  opacity: 0; transform: translateY(24px);
}
.report.is-in { opacity: 1; }
.report.is-in.scatter-0 { transform: rotate(-1.2deg); margin-top: 0; }
.report.is-in.scatter-1 { transform: rotate(0.8deg); margin-top: 56px; }
.report.is-in.scatter-2 { transform: rotate(-0.5deg); margin-top: 18px; }
.report.is-in.scatter-3 { transform: rotate(1.4deg); margin-top: 72px; }
.report:hover, .report:focus-within {
  transform: translateY(-10px) rotate(0) scale(1.03) !important; margin-top: 0 !important;
  border-color: var(--ink); box-shadow: var(--shadow-hard); z-index: 2; position: relative;
}
.report-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
}
.report-head .tool { display: flex; align-items: center; gap: 8px; }
.report-head .logo {
  width: 24px; height: 24px; background: var(--white); border: 1px solid var(--rule-soft);
  display: grid; place-items: center;
}
.report-head .logo img { width: 14px; height: 14px; display: block; }
.report-head .id { color: var(--gray-400); }
.report-body { padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 18px; }
.report-metric { font-family: var(--font-display); font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; }
.report-metric .up { color: var(--signal); }
.report-chart { height: 84px; position: relative; }
.report-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.report-foot {
  padding: 10px 16px; border-top: 1px solid var(--paper-2);
  font-family: var(--font-mono); font-size: 11px; color: var(--gray-600);
  display: flex; justify-content: space-between;
}
.funnel { display: flex; flex-direction: column; gap: 5px; height: 100%; justify-content: center; }
.funnel-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--gray-600);
}
.funnel-row .bar { height: 12px; background: var(--rule); }
.funnel-row .hot { background: var(--signal); color: var(--signal); }
.commits { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.commit-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--gray-400);
}
.commit-dot.hot { width: 12px; height: 12px; background: var(--signal); }
.problem-close {
  margin-top: clamp(48px, 6vw, 88px); padding-top: 24px; border-top: 1px solid var(--ink);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.problem-close p { margin: 0; max-width: 520px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--gray-700); }
.problem-close .ask {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(36px, 4.4vw, 68px); line-height: 1.05; color: var(--signal);
}
@media (max-width: 1000px) {
  .reports { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .report.is-in { transform: none !important; margin-top: 0 !important; }
}
@media (max-width: 560px) {
  .reports { grid-template-columns: minmax(0, 1fr); }
}

/* Solve */
.solve {
  position: relative; overflow: hidden; background: var(--ink); color: var(--paper);
  padding: clamp(80px, 10vw, 150px) 0;
}
.solve .section-rule { border-color: var(--paper); color: var(--paper); }
.solve .section-rule .muted { color: var(--gray-400); }
.solve-shape {
  position: absolute; right: clamp(-80px, -3vw, -20px); top: clamp(60px, 6vw, 110px);
  width: clamp(220px, 34vw, 500px); height: auto; pointer-events: none; will-change: transform;
}
.solve h2 { margin: 0 0 clamp(48px, 6vw, 88px); font-size: clamp(48px, 10vw, 164px); line-height: 0.9; letter-spacing: -0.02em; }
.solve-grid {
  display: flex; flex-wrap: wrap; gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line);
}
.solve-ask, .solve-find {
  flex: 1 1 440px; min-width: 0; padding: clamp(24px, 3.4vw, 44px);
  display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px);
}
.solve-ask { background: var(--ink); }
.solve-find { background: var(--ink-2); gap: 20px; }
.lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--gray-400);
}
.ask-q {
  font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1; text-wrap: pretty;
}
.dots { display: flex; flex-direction: column; border-top: 1px solid var(--ink-line); }
.dot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding: 14px 0; border-bottom: 1px solid var(--ink-line);
  opacity: 0.4; transition: opacity 0.5s;
}
.dot.is-on { opacity: 1; }
.dot .chip {
  width: 32px; height: 32px; flex: none; align-self: center;
  background: var(--ink-line); display: grid; place-items: center; transition: background 0.4s;
}
.dot.is-on .chip { background: var(--paper); }
.dot .chip img { width: 18px; height: 18px; display: block; }
.dot .chip img.dim { filter: grayscale(1) opacity(0.55); }
.dot .name { flex: 0 0 130px; font-size: 16px; font-weight: 500; }
.dot .arrow { font-family: var(--font-mono); font-size: 13px; color: var(--signal); }
.dot .what { flex: 1 1 200px; font-size: 15px; color: var(--gray-200); }
.dot .st { font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-600); }
.dot.is-on .st { color: var(--signal); }
.find-head { display: flex; align-items: center; gap: 10px; }
.find-head .star { color: var(--signal); font-size: 18px; line-height: 1; font-family: var(--font-body); }
.find-body { display: flex; flex-direction: column; gap: 20px; opacity: 0.08; transform: translateY(10px); transition: opacity 0.7s, transform 0.7s; }
.find-body.is-ready { opacity: 1; transform: none; }
.find-body p { margin: 0; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.5; text-wrap: pretty; }
.find-body p.sec { color: var(--gray-200); }
.find-next { border-top: 1px solid var(--signal); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.find-next .lbl { color: var(--signal); }
.find-next span:last-child {
  font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2;
}
.find-wait {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--gray-400);
}
.find-wait .pulse { width: 6px; height: 6px; background: var(--signal); animation: bpulse 1s infinite; }
.solve-close {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px;
}
.solve-close p {
  margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 52px); line-height: 1.08;
}
.connectors { margin-top: clamp(40px, 5vw, 72px); display: flex; flex-direction: column; gap: 18px; }
.marquee-wrap {
  overflow: hidden; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line);
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee { display: flex; width: max-content; animation: bnMarquee 40s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee-item {
  display: flex; align-items: center; gap: 12px; padding: 0 28px; flex: none;
}
.marquee-item .logo {
  width: 40px; height: 40px; background: var(--paper); display: grid; place-items: center;
}
.marquee-item .logo img { width: 22px; height: 22px; display: block; }
.marquee-item .name { font-size: 16px; font-weight: 500; white-space: nowrap; color: var(--paper); }

/* How it works */
.how { background: var(--ink); color: var(--paper); }
.how .section-rule { border-color: var(--paper); color: var(--paper); }
.how .section-rule .muted { color: var(--gray-400); }
.how h2 { margin: 0 0 clamp(48px, 6vw, 96px); font-size: clamp(44px, 8.4vw, 136px); line-height: 0.92; }
.flow { width: 100%; max-width: 1080px; margin: 0 auto; overflow: hidden; }
.flow-stage {
  position: relative; width: 1080px; height: 1090px; transform-origin: 0 0;
  font-family: var(--font-body);
}
.flow-stage svg { position: absolute; inset: 0; overflow: visible; }
.flow-stage .paths { fill: none; stroke: var(--gray-600); stroke-width: 1.5; stroke-dasharray: 1; transition: stroke-dashoffset 0.9s ease; }
.flow-stage .flow-anim {
  fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: square;
  stroke-dasharray: 0.015 0.06; opacity: 0; transition: opacity 0.4s;
  animation: bnFlow 1.6s linear infinite;
}
.flow-stage.is-s2 .flow-anim.a1,
.flow-stage.is-s5 .flow-anim.a2 { opacity: 1; }
.flow-label {
  position: absolute; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em;
  opacity: 0; transform: translateY(12px); transition: opacity 0.6s, transform 0.6s;
}
.flow-stage.is-s1 .flow-label.c1,
.flow-stage.is-s3 .flow-label.c2,
.flow-stage.is-s5 .flow-label.c3 { opacity: 1; transform: none; }
.flow-tools {
  position: absolute; left: 214px; top: 50px; display: flex; gap: 20px;
  opacity: 0; transform: translateY(12px); transition: opacity 0.6s, transform 0.6s;
}
.flow-stage.is-s1 .flow-tools { opacity: 1; transform: none; }
.flow-tools span {
  width: 64px; height: 64px; background: var(--paper); display: grid; place-items: center;
}
.flow-tools img { width: 36px; height: 36px; display: block; transition: opacity 0.5s; }
.flow-tools img.dim { opacity: 0.4; }
.flow-mark {
  position: absolute; left: 505px; top: 264px; height: 96px; width: auto;
  opacity: 0; transform: scale(0.8); transition: opacity 0.6s, transform 0.6s;
}
.flow-stage.is-s2 .flow-mark { opacity: 1; transform: none; }
.flow-ask-box {
  position: absolute; left: 220px; top: 390px; width: 640px; height: 76px;
  background: var(--ink-2); border: 1px solid var(--paper);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  opacity: 0; transform: translateY(12px); transition: opacity 0.6s, transform 0.6s;
}
.flow-stage.is-s3 .flow-ask-box { opacity: 1; transform: none; }
.flow-ask-box .q { font-family: var(--font-mono); font-size: 20px; white-space: nowrap; }
.flow-ask-box .caret { width: 2px; height: 26px; background: var(--signal); animation: bnBlink 1s steps(1) infinite; }
.flow-find-card {
  position: absolute; left: 140px; top: 600px; width: 800px;
  background: var(--paper); color: var(--ink);
  opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s;
}
.flow-stage.is-s5 .flow-find-card { opacity: 1; transform: none; }
.flow-find-card .head {
  display: flex; justify-content: space-between; padding: 14px 24px;
  border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
}
.flow-find-card .body { display: flex; gap: 28px; padding: 26px 24px 20px; }
.flow-find-card .copy { display: flex; flex-direction: column; gap: 18px; }
.flow-find-card .copy p {
  margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 1.02;
}
.flow-find-card .rec { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.flow-find-card .rec span:first-child { font-size: 17px; color: var(--gray-700); }
.flow-find-card .rec .yes {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em;
  padding: 6px 10px; border: 1px solid var(--ink); transition: all 0.2s;
}
.flow-stage.is-s6 .flow-find-card .rec .yes { background: var(--ink); color: var(--paper); }
.flow-find-card .foot {
  padding: 12px 24px; border-top: 1px solid var(--paper-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--gray-600);
}
.flow-next {
  position: absolute; left: 180px; top: 910px; width: 720px;
  background: var(--ink-2); border: 1px solid var(--ink-line); box-shadow: var(--shadow-hard);
  opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s;
}
.flow-stage.is-s7 .flow-next { opacity: 1; transform: none; }
.flow-next .head {
  display: flex; justify-content: space-between; padding: 14px 24px;
  border-bottom: 1px solid var(--ink-line); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
}
.flow-next .head span:last-child { color: var(--gray-400); }
.flow-next .rows { display: flex; flex-direction: column; gap: 12px; padding: 18px 24px 22px; }
.flow-next .row { display: flex; gap: 16px; align-items: baseline; }
.flow-next .row .n { font-family: var(--font-mono); font-size: 13px; color: var(--signal); }
.flow-next .row .t { font-size: 18px; }
@media (max-width: 1100px) {
  .flow-stage { /* scaled via JS */ }
}

/* Trust teaser */
.trust-teaser { border-top: 1px solid var(--ink); background: var(--paper-2); }
.trust-teaser .section-rule { border-color: var(--ink); }
.trust-grid {
  display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 96px); align-items: flex-start;
}
.trust-lead { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.trust-lead h2 { font-size: clamp(40px, 6.4vw, 100px); }
.trust-lead p {
  margin: 0; max-width: 520px; font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5; color: var(--gray-700); text-wrap: pretty;
}
.trust-promises { flex: 1 1 440px; min-width: 0; border-top: 2px solid var(--ink); }
.trust-promises a {
  display: flex; align-items: baseline; gap: 24px; padding: 22px 0; min-height: 44px;
  border-bottom: 1px solid var(--rule); color: var(--ink);
}
.trust-promises a:hover { color: var(--signal); }
.trust-promises .n { font-family: var(--font-mono); font-size: 13px; color: var(--signal); }
.trust-promises .t { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; }

/* 06 From the blog */
.blog-home { border-top: 1px solid var(--ink); background: var(--paper); }
.blog-home .section-rule { border-color: var(--ink); }
.blog-home-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: clamp(32px, 4vw, 56px);
}
.blog-home-head .display { max-width: 900px; font-size: clamp(40px, 6.4vw, 100px); }
.ball {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; min-height: 44px;
  border: 1px solid var(--ink); color: var(--ink); font-weight: 500; font-size: 15px;
  transition: background 0.3s, color 0.3s;
}
.ball:hover { background: var(--ink); color: var(--paper); }
.ball .arrow { font-family: var(--font-mono); }
.bgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
@media (max-width: 900px) { .bgrid { grid-template-columns: 1fr; } }
.bpost {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s;
}
.bpost:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-hard);
  border-color: var(--ink); color: var(--ink);
}
.bpost .barw {
  display: inline-block; color: var(--signal);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bpost:hover .barw { transform: translateX(5px); }
.bthumb {
  display: block; position: relative; aspect-ratio: 30 / 19;
  overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--ink);
}
.bthumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bpost:hover .bthumb img { transform: scale(1.08) rotate(-0.6deg); }
.bpost-meta {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--gray-600);
}
.bpost-meta .cat { color: #b83300; text-transform: uppercase; }
.bpost-title {
  padding: 22px 18px 8px; font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 36px); line-height: 1.02;
}
.bpost-dek {
  padding: 0 18px 22px; font-size: 16px; line-height: 1.5; color: var(--gray-700);
}
.bpost-foot {
  margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  display: flex; justify-content: space-between; text-transform: uppercase;
}

/* CTA */
.cta {
  position: relative; background: var(--signal); color: var(--ink); overflow: hidden;
  padding: clamp(100px, 13vw, 200px) 0;
}
.cta-mark {
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%) rotate(-8deg);
  height: clamp(320px, 44vw, 700px); width: auto; opacity: 0.18; pointer-events: none;
}
.cta .eyebrow { letter-spacing: 0.16em; color: var(--ink); margin: 0; }
.cta h2 {
  margin: clamp(16px, 2vw, 24px) 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 9vw, 148px); line-height: 0.95; letter-spacing: -0.015em;
}
.cta h2 em { font-style: italic; }
.cta-row {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px;
}
.cta-row p { margin: 0; max-width: 560px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; }
.cta-row .btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cta .btn-primary:hover { background: var(--paper); color: var(--ink); }

/* Demo dialog */
.demo-dialog {
  width: min(1040px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  padding: 0; border: 1px solid var(--ink); background: var(--paper);
  box-shadow: 10px 10px 0 var(--signal); color: var(--ink);
}
.demo-dialog::backdrop { background: rgba(18, 19, 22, 0.72); backdrop-filter: blur(6px); }
.demo-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--ink);
}
.demo-head .eyebrow { margin: 0 0 4px; color: var(--gray-600); letter-spacing: 0.16em; }
.demo-head h2 { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1; font-weight: 400; }
.demo-close {
  width: 44px; height: 44px; border: 1px solid var(--ink); background: transparent;
  color: var(--ink); font-size: 20px; cursor: pointer; flex: none;
}
.demo-close:hover { background: var(--ink); color: var(--paper); }
.demo-body {
  display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); max-height: min(70vh, 560px); overflow: auto;
}
.demo-left, .demo-right {
  flex: 1 1 320px; min-width: 0; padding: clamp(24px, 4vw, 44px);
  display: flex; flex-direction: column; gap: 22px;
}
.demo-left { background: var(--paper); }
.demo-right { background: var(--ink); color: var(--paper); justify-content: space-between; gap: 28px; }
.demo-steps { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.demo-steps div {
  display: flex; gap: 18px; align-items: baseline; padding: 18px 0;
  border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 1.4;
}
.demo-steps .n { font-family: var(--font-mono); font-size: 13px; color: #b83300; }
.demo-right .pick { font-family: var(--font-display); font-size: clamp(34px, 4vw, 48px); line-height: 1; }
.demo-right .pick em { color: var(--signal); font-style: italic; }
.demo-right .hint { font-size: 15px; line-height: 1.5; color: var(--gray-200); }
.demo-actions { display: flex; flex-direction: column; gap: 10px; }
.demo-actions a {
  font-weight: 500; padding: 16px 24px; min-height: 44px;
  display: flex; justify-content: space-between; align-items: center;
}
.demo-actions .cal { background: var(--signal); color: var(--ink); font-size: 16px; }
.demo-actions .cal:hover { background: var(--paper); color: var(--ink); }
.demo-actions .start {
  border: 1px solid var(--paper); color: var(--paper); font-size: 15px;
}
.demo-actions .start:hover { border-color: var(--signal); color: var(--signal); }

/* Trust page extras */
.trust-page .hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255, 77, 18, 0.45); background: #fff0eb;
  padding: 6px 13px; font-size: 12px; font-weight: 600; color: #b83300;
}
.trust-page .hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.trust-page .ai-card {
  background: var(--surface-card-hover); border: 1px solid var(--border);
  box-shadow: var(--shadow-hard); overflow: hidden;
}
.trust-page .ai-card-head {
  display: flex; align-items: center; gap: 9px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); background: var(--white); font-weight: 600; font-size: 13px;
}
.trust-page .ai-rows { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.trust-page .ai-row {
  display: flex; align-items: flex-start; gap: 12px; background: var(--white);
  border: 1px solid var(--border); padding: 15px 16px;
}
.trust-page .ai-row .mark {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; border: 1px solid rgba(255, 77, 18, 0.45);
  background: #fff0eb; color: #b83300;
}
.trust-page .ai-row .mark.no { background: #f4f4f5; border-color: var(--border); color: var(--gray-600); }
.trust-page .ai-row p { margin: 0; }
.trust-page .ai-row .t { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.trust-page .ai-row .d { font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.promise-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 16px; margin-top: 28px;
}
.promise-card { background: var(--white); border: 1px solid var(--border); padding: 22px; }
.promise-card .ph {
  display: flex; align-items: center; gap: 9px; margin: 0 0 11px;
}
.promise-card .ph .n {
  width: 24px; height: 24px; background: var(--signal); color: var(--white);
  font: 700 11px var(--font-body); display: grid; place-items: center; flex: none;
}
.promise-card .ph p { margin: 0; font-weight: 700; font-size: 16px; }
.promise-card > p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-muted); }
.step-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px; margin-top: 28px;
}
.step-card { background: var(--bg-section-alt); border: 1px solid var(--border); padding: 22px; }
.step-card.hot { background: linear-gradient(160deg, #fdf2f8 0%, #faf5ff 100%); border: 1.5px solid rgba(255, 77, 18, 0.45); }
.step-card .eyebrow { margin: 0 0 10px; }
.step-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.step-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.checklist { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.checklist p {
  margin: 0; padding-left: 26px; position: relative;
  font-size: 15px; line-height: 1.6; color: var(--gray-700); font-weight: 500;
}
.checklist .x, .checklist .ok { position: absolute; left: 0; top: 0; font-weight: 700; }
.checklist .x { color: var(--gray-400); }
.checklist .ok { color: #b83300; }
.faq-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 0 clamp(24px, 5vw, 64px);
}
.faq-item { border-top: 1px solid var(--border); padding: 20px 0; }
.faq-item h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.4; font-weight: 700; }
.faq-item p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-muted); }
.two-col {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.two-col h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 29px); margin: 0; }