/* ==========================================================================
   SECTIONS — homepage storyline (also reused by sub pages)
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(3rem, 1.5rem + 5vw, 6.5rem));
  padding-bottom: var(--section-y-sm);
  overflow: clip;
}
.hero__bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(62rem, 110vh);
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 25%, transparent 78%);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 45% at 50% 0%, rgba(10, 61, 255, 0.09), transparent 72%);
}
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__badge { margin-bottom: var(--space-8); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.hero__badge .icon { color: var(--color-text-muted); transition: transform var(--dur) var(--ease-out); }
.hero__badge:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.hero__badge:hover .icon { transform: translateX(2px); }
.hero__title { max-width: 12em; }
.hero__lead { margin: var(--space-6) auto 0; max-width: 39rem; text-align: center; }
.hero__actions { margin-top: var(--space-10); justify-content: center; }
.hero__assurances {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  list-style: none;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.hero__assurances li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__assurances .icon { color: var(--color-primary); stroke-width: 2; }
.hero__visual-wrap { margin-top: clamp(3.5rem, 2rem + 5vw, 6rem); perspective: 1800px; }
.hero__visual {
  transform-origin: 50% 0%;
  transform: rotateX(calc(var(--tilt, 0) * 14deg)) scale(calc(1 - var(--tilt, 0) * 0.05));
}
@media (max-width: 479px) {
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ---- Flow visual (hero) ----------------------------------------------- */
.flow { max-width: 70rem; margin-inline: auto; }
.flow__scenario { font-weight: var(--weight-regular); color: var(--color-text-muted); transition: opacity var(--dur-slow) var(--ease-out); }
.flow__scenario:not(:empty)::before { content: "·"; margin: 0 0.45rem 0 0.1rem; color: var(--gray-300); }
.flow__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 6vw, 7rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background-color: var(--gray-25);
  background-image: radial-gradient(rgba(11, 17, 32, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.flow__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow__wires .wire {
  fill: none;
  stroke: var(--gray-300);
  stroke-width: 1.25;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
  transition: stroke var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.flow__wires .wire.is-active { stroke: var(--blue-300); stroke-dasharray: none; stroke-width: 1.5; }
.flow__wires .particle { fill: var(--color-primary); }
.flow__wires .particle-halo { fill: var(--color-primary); opacity: 0.16; }
.flow__wires .particle--reply { fill: var(--color-accent); }
.flow__wires .particle-halo--reply { fill: var(--color-accent); }

.flow__col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.flow__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.flow-node {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition: border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.flow-node__icon {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--gray-50);
  border: 1px solid var(--color-border);
  color: var(--gray-500);
  transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.flow-node__icon .icon { width: 1rem; height: 1rem; }
.flow-node__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.flow-node__text strong { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.flow-node__text small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.3em;
  transition: color var(--dur-slow) var(--ease-out);
}
.flow-node.is-active { border-color: var(--blue-200); box-shadow: 0 0 0 4px rgba(10, 61, 255, 0.06), var(--shadow-md); transform: translateY(-1px); }
.flow-node.is-active .flow-node__icon { background: var(--color-primary); border-color: transparent; color: #fff; }
.flow-node.is-active small { color: var(--color-text-secondary); }
.flow-node.is-done .flow-node__icon { background: var(--blue-50); border-color: var(--blue-100); color: var(--color-primary); }
.flow-node.is-done small { color: var(--color-text-secondary); }

.flow-core {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 1rem;
}
.flow-core__head { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--color-border); }
.flow-core__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: radial-gradient(circle at 30% 25%, var(--blue-400), var(--blue-600) 60%, var(--blue-800));
  box-shadow: 0 6px 14px -6px rgba(10, 61, 255, 0.6);
}
.flow-core__icon .icon { width: 1.05rem; height: 1.05rem; }
.flow-core__name { display: flex; flex-direction: column; line-height: 1.3; }
.flow-core__name strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.flow-core__name small { font-size: var(--text-xs); color: var(--color-text-muted); min-height: 1.3em; }
.flow-core__pulse { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); transition: background-color var(--dur) var(--ease-out); }
.flow-core.is-thinking .flow-core__pulse { background: var(--color-accent); animation: soft-blink 1.1s ease-in-out infinite; }
.flow-core__msg {
  margin-top: 0.9rem;
  min-height: 3.6rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: var(--gray-50);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.45;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.flow-core__msg small {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.flow-core__msg.is-empty { opacity: 0; transform: translateY(4px); }
.flow-core__log { margin-top: 0.75rem; display: grid; gap: 0.5rem; min-height: 5.4rem; align-content: start; }
.flow-core__log li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  animation: log-in var(--dur-slow) var(--ease-out) both;
}
.flow-core__log li .icon { width: 0.95rem; height: 0.95rem; color: var(--color-primary); stroke-width: 2; }

@media (max-width: 859px) {
  .flow__stage { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .flow__col--in, .flow__col--out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .flow__col--out { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow__label { grid-column: 1 / -1; text-align: center; }
  .flow-node { flex-direction: column; justify-content: center; gap: 0.4rem; padding: 0.65rem 0.25rem; text-align: center; }
  .flow-node__text strong { font-size: var(--text-xs); }
  .flow-node__text small { display: none; }
  .flow-core__log { min-height: 5.2rem; }
}

/* ---- 01 Problem -------------------------------------------------------- */
.problem__grid { display: grid; gap: var(--space-12); align-items: center; }
.problem__intro .h2 { margin-top: var(--space-5); }
.problem__intro .lead { margin-top: var(--space-6); }
@media (min-width: 1024px) {
  .problem__grid { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
}
.tasks { padding: 0.5rem; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.tasks__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem 0.9rem; font-size: var(--text-sm); }
.tasks__title { font-weight: var(--weight-medium); }
.tasks__counter { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.tasks__counter [data-tasks-count] { color: var(--color-primary); }
.task {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--color-border);
}
.task__icon {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--gray-50);
  border: 1px solid var(--color-border);
  color: var(--gray-500);
  transition: all var(--dur-slow) var(--ease-out);
}
.task__icon .icon { width: 1rem; height: 1rem; }
.task__name {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  text-decoration: line-through;
  text-decoration-color: transparent;
  transition: color var(--dur-slow) var(--ease-out), text-decoration-color var(--dur-slow) var(--ease-out);
}
.task__state { display: grid; font-size: var(--text-xs); font-weight: var(--weight-medium); }
.task__state > * { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.task__manual { color: var(--color-text-muted); }
.task__manual::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--gray-400); }
.task__auto { color: var(--color-primary); opacity: 0; transform: translateY(6px); }
.task__auto .icon { width: 0.9rem; height: 0.9rem; stroke-width: 2.2; }
.task.is-auto .task__manual { opacity: 0; transform: translateY(-6px); }
.task.is-auto .task__auto { opacity: 1; transform: none; }
.task.is-auto .task__icon { background: var(--blue-50); border-color: var(--blue-100); color: var(--color-primary); }
.task.is-auto .task__name { color: var(--color-text-muted); text-decoration-color: var(--gray-300); }

.statement {
  margin-top: clamp(5rem, 3rem + 7vw, 9rem);
  max-width: 21em;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
[data-scrub-text] .word { color: var(--gray-300); transition: color 0.35s var(--ease-out); }
[data-scrub-text] .word.is-lit { color: var(--color-text); }
html:not(.js) [data-scrub-text] .word { color: inherit; }

/* ---- 02 Explain (scroll story) --------------------------------------- */
.explain__grid { display: grid; gap: var(--space-8); }
/* Mobile: the whole visual column sticks (it is its own grid row). Desktop: the inner panel sticks. */
.explain__visual { position: sticky; top: calc(var(--header-h) + 0.75rem); z-index: 2; }
.explain__visual::before { content: ""; position: absolute; inset: calc(-0.75rem - 1px) -1rem auto; height: calc(0.75rem + 2px); background: var(--color-surface); }
.explain__screen {
  position: relative;
  height: 17.5rem;
  overflow: hidden;
  background: var(--gray-25);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
}
.explain__stack { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.65rem; }
.x-row { display: none; }
.x-row.is-shown { display: flex; animation: row-in 0.6s var(--ease-out) both; }
.x-row--col { flex-direction: column; gap: 0.5rem; }
.x-row .bubble { font-size: 0.8125rem; }
.x-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-inline: auto;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.x-card {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
}
.x-card__title { display: flex; align-items: center; gap: 0.45rem; font-weight: var(--weight-medium); }
.x-card__title .icon { color: var(--color-primary); }
.x-checks { margin-top: 0.5rem; display: grid; gap: 0.3rem; list-style: none; padding: 0; }
.x-checks li { display: flex; align-items: center; gap: 0.45rem; font-size: var(--text-xs); color: var(--color-text-secondary); }
.x-checks .icon { color: var(--color-success); stroke-width: 2.2; }
.x-checks__val { margin-left: auto; font-family: var(--font-mono); color: var(--color-text); font-size: var(--text-2xs); }
.x-card--event { display: flex; align-items: center; gap: 0.85rem; }
.x-card__date {
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.x-card__date small { font-size: 0.625rem; text-transform: uppercase; opacity: 0.75; letter-spacing: 0.06em; }
.x-card__date strong { font-size: 0.8125rem; font-weight: var(--weight-semibold); }
.x-card--event .x-card__title { display: block; }
.x-card__sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.x-card__ok { margin-left: auto; color: var(--color-success); stroke-width: 2.2; }
.x-fields { margin-top: 0.55rem; display: grid; gap: 0.3rem; }
.x-fields div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-xs); }
.x-fields dt { color: var(--color-text-muted); }
.x-fields dd { font-weight: var(--weight-medium); text-align: right; }

.explain__steps { display: flex; flex-direction: column; list-style: none; padding: 0; }
.x-step {
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2rem;
  opacity: 0.3;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.x-step.is-active { opacity: 1; }
.x-step__num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-primary); margin-bottom: 0.75rem; }
.x-step__title { font-size: var(--text-2xl); line-height: 1.15; letter-spacing: var(--tracking-heading); }
.x-step__text { margin-top: 0.75rem; max-width: 27rem; color: var(--color-text-secondary); font-size: var(--text-md); }
.explain__note {
  margin-top: var(--space-12);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 46rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}
.explain__note strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.explain__note p { padding-top: 0.45rem; }

@media (min-width: 1024px) {
  .explain__grid { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
  .explain__visual { grid-column: 2; grid-row: 1; position: static; }
  .explain__visual::before { display: none; }
  .explain__steps { grid-column: 1; grid-row: 1; }
  .explain__sticky { position: sticky; top: calc(var(--header-h) + 3rem); }
  .explain__screen { height: 29rem; }
  .explain__stack { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; gap: 0.75rem; }
  .x-row .bubble { font-size: var(--text-sm); }
  .x-step { min-height: 64vh; padding-block: 3rem; }
  .x-step:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 5rem; }
  .x-step:last-child { min-height: 58vh; }
}

/* ---- 03 Services (bento) ---------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.bento__item {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  overflow: hidden;
}
.bento__item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.bento__copy .chip { margin-bottom: var(--space-5); }
.bento__copy p { margin-top: 0.6rem; color: var(--color-text-secondary); font-size: 0.9375rem; max-width: 31rem; }
@media (min-width: 768px) {
  .bento__item--7, .bento__item--5, .bento__item--4, .bento__item--6 { grid-column: span 6; }
  .bento__item--4:nth-child(5) { grid-column: span 12; }
}
@media (min-width: 1024px) {
  .bento__item--7 { grid-column: span 7; }
  .bento__item--5 { grid-column: span 5; }
  .bento__item--4, .bento__item--4:nth-child(5) { grid-column: span 4; }
  .bento__item--6 { grid-column: span 6; }
}

.mock { font-size: var(--text-xs); list-style: none; padding: 0; }
.mock--chat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--gray-25);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.mock--chat .bubble { font-size: 0.8125rem; max-width: 80%; }
.mock__handoff {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  margin-top: 0.3rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  text-align: center;
}
.mock--inbox { display: grid; gap: 0.5rem; }
.mock--inbox li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  transition: transform var(--dur-slow) var(--ease-out);
}
.bento__item:hover .mock--inbox li:nth-child(2) { transform: translateX(4px); }
.mock__avatar {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gray-100);
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
}
.mock__line { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mock__line strong { font-size: 0.8125rem; font-weight: var(--weight-medium); }
.mock__line small { font-size: 0.71875rem; color: var(--color-text-muted); }
.chip--accent { background: var(--color-accent-soft); border-color: var(--orange-100); color: var(--orange-600); }

.mock--mail { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); overflow: hidden; }
.mock--mail li { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem; }
.mock--mail li + li { border-top: 1px solid var(--color-border); }
.mock__tag {
  min-width: 4.4rem;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--color-text-secondary);
  font-size: 0.65625rem;
  font-weight: var(--weight-medium);
  text-align: center;
}
.mock__tag--blue { background: var(--blue-50); color: var(--blue-700); }
.mock__bar { display: block; flex: none; width: var(--w, 60%); height: 6px; border-radius: 99px; background: var(--gray-100); }
/* Width utilities for the mock-up bars (classes instead of inline styles keep the CSP strict). */
.w-12 { --w: 12%; } .w-14 { --w: 14%; } .w-16 { --w: 16%; } .w-18 { --w: 18%; } .w-22 { --w: 22%; }
.w-48 { --w: 48%; } .w-55 { --w: 55%; } .w-56 { --w: 56%; } .w-62 { --w: 62%; } .w-70 { --w: 70%; }
.w-74 { --w: 74%; } .w-82 { --w: 82%; } .w-92 { --w: 92%; }
.mock__bar--short { background: var(--gray-200); }
.mock--mail .mock__bar { flex: 0 1 var(--w); }
.mock__draft { margin-left: auto; font-size: 0.65625rem; font-weight: var(--weight-medium); color: var(--color-primary); white-space: nowrap; }

.mock--week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--gray-25);
}
.mock__day { display: grid; gap: 0.35rem; text-align: center; }
.mock__day small { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; color: var(--color-text-muted); }
.mock__day i { display: block; height: 1.6rem; border-radius: 6px; background: var(--color-surface); border: 1px solid var(--color-border); }
.mock__day i.is-busy { background: var(--gray-100); border-color: transparent; }
.mock__day i.is-picked { background: var(--color-primary); border-color: transparent; box-shadow: 0 4px 12px -4px rgba(10, 61, 255, 0.6); transition: transform var(--dur-slow) var(--ease-spring); }
.bento__item:hover .mock__day i.is-picked { transform: scale(1.08); }

.mock--voice { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--gray-25); }
.mock__wave { display: flex; align-items: center; gap: 3px; height: 2.5rem; }
.mock__wave i { flex: 1; height: var(--h, 40%); border-radius: 2px; background: var(--blue-300); transform-origin: center; }
.mock__wave i:nth-child(4n+1) { --h: 35%; }
.mock__wave i:nth-child(4n+2) { --h: 75%; }
.mock__wave i:nth-child(4n+3) { --h: 55%; }
.mock__wave i:nth-child(4n) { --h: 90%; }
.mock__wave i:nth-child(n+11) { background: var(--blue-200); }
.bento__item:hover .mock__wave i { animation: wave 1.1s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -0.1s); }
.mock__wave i:nth-child(odd) { --d: 3; }
.mock__wave i:nth-child(3n) { --d: 6; }
.mock__summary { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-xs); color: var(--color-text-secondary); }
.mock__summary .icon { color: var(--color-success); stroke-width: 2.2; }

.mock--doc { display: grid; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.mock__doc-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.65rem; border-bottom: 1px dashed var(--color-border-strong); font-size: 0.8125rem; }
.mock__doc-head strong { font-weight: var(--weight-medium); }
.mock__doc-line { display: flex; align-items: center; justify-content: space-between; }

.mock--pipeline { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--gray-25); }
.mock--pipeline > .icon { color: var(--gray-400); flex: none; }
.mock__stage { flex: 1; min-width: 0; display: grid; gap: 0.35rem; padding: 0.6rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; }
.mock__stage small { font-size: 0.6875rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock__stage i { display: block; height: 0.9rem; border-radius: 4px; background: var(--gray-100); }
.mock__stage i.is-blue { background: var(--blue-100); }
.mock__stage i.is-accent { background: var(--orange-100); }

.services-mini { margin-top: var(--space-4); display: grid; gap: var(--space-4); }
.services-mini__item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-slow) var(--ease-out);
}
.services-mini__item:hover { border-color: var(--color-border-strong); }
.services-mini__item h3 { font-size: 0.9375rem; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); line-height: 1.35; }
.services-mini__item p { margin-top: 0.2rem; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
@media (min-width: 640px) { .services-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .services-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.section-foot { margin-top: var(--space-10); display: flex; justify-content: center; }

/* ---- 04 Demo ----------------------------------------------------------- */
.demo__window { max-width: 70rem; margin-inline: auto; }
.pipeline { position: relative; display: none; }
.pipeline__track {
  position: absolute;
  left: calc(3rem + 1.5rem);
  right: calc(3rem + 1.5rem);
  top: calc(2rem + 1.5rem - 1px);
  height: 2px;
  border-radius: 2px;
  background: var(--gray-200);
}
.pipeline__fill {
  position: relative;
  display: block;
  height: 100%;
  width: calc(var(--progress, 0) * 100%);
  border-radius: inherit;
  background: var(--color-primary);
  transition: width 0.9s var(--ease-in-out);
}
.pipeline__fill::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.16);
}
.pipeline__node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; border-radius: var(--radius-md); }
.pipeline__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--gray-400);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-slow) var(--ease-out);
}
.pipeline__label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted); transition: color var(--dur-slow) var(--ease-out); }
.pipeline__node:hover .pipeline__icon { border-color: var(--blue-300); }
.pipeline__node.is-done .pipeline__icon { color: var(--color-primary); border-color: var(--blue-200); background: var(--blue-25); }
.pipeline__node.is-active .pipeline__icon {
  background: var(--color-primary);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px rgba(10, 61, 255, 0.1), 0 12px 24px -10px rgba(10, 61, 255, 0.7);
}
.pipeline__node.is-active .pipeline__label, .pipeline__node.is-done .pipeline__label { color: var(--color-text); }

.demo__body { display: grid; gap: 1.25rem; padding: 1.25rem; }
.demo__pane-label {
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.demo__chat { display: none; }
.demo__chat-log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  height: 22rem;
  padding: 1rem;
  overflow: hidden;
  border-radius: 16px;
  background: var(--gray-25);
  border: 1px solid var(--color-border);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
}
.demo__chat-log .bubble { display: none; font-size: 0.84375rem; flex: none; }
.demo__chat-log .bubble.is-shown { display: block; animation: bubble-in var(--dur-slow) var(--ease-out) both; }

.demo__artifacts { position: relative; min-height: 19.5rem; }
.artifact {
  position: absolute;
  inset: 0;
  padding: 1.25rem;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.99);
  transition: opacity var(--dur-slow) var(--ease-out), transform 0.7s var(--ease-out), visibility 0s linear var(--dur-slow);
}
.artifact.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform 0.7s var(--ease-out), visibility 0s; }
.artifact__head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.artifact__head > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.artifact__head strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.artifact__head small { font-size: var(--text-xs); color: var(--color-text-muted); }
.artifact__head > .chip, .artifact__ok { margin-left: auto; }
.artifact__quote { font-size: var(--text-lg); line-height: 1.45; letter-spacing: var(--tracking-title); }
.artifact__quote::before { content: "“"; color: var(--gray-300); }
.artifact__quote::after { content: "”"; color: var(--gray-300); }
.artifact__big { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: 1.15; letter-spacing: var(--tracking-heading); }
.artifact__big--sm { font-size: var(--text-xl); }
.artifact__chips { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.artifact__checks { display: grid; gap: 0.5rem; list-style: none; padding: 0; }
.artifact__checks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: var(--gray-25);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.artifact__checks .icon { color: var(--color-success); stroke-width: 2.2; }
.artifact__checks strong { margin-left: auto; color: var(--color-text); font-weight: var(--weight-medium); text-align: right; }
.artifact.is-active .artifact__checks li,
.artifact.is-active .artifact__fields > div,
.artifact.is-active .artifact__lines li { animation: row-in 0.5s var(--ease-out) both; }
.artifact.is-active :is(.artifact__checks li, .artifact__fields > div, .artifact__lines li):nth-child(2) { animation-delay: 0.12s; }
.artifact.is-active :is(.artifact__checks li, .artifact__fields > div, .artifact__lines li):nth-child(3) { animation-delay: 0.24s; }
.artifact.is-active :is(.artifact__checks li, .artifact__fields > div, .artifact__lines li):nth-child(4) { animation-delay: 0.36s; }
.artifact__fields, .artifact__mail { display: grid; }
.artifact__fields > div, .artifact__mail > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.artifact__fields dt, .artifact__mail dt { color: var(--color-text-muted); }
.artifact__fields dd, .artifact__mail dd { font-weight: var(--weight-medium); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.artifact__lines { list-style: none; padding: 0; }
.artifact__lines li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px dashed var(--color-border-strong); font-size: var(--text-sm); }
.artifact__note { margin-top: 1rem; font-size: var(--text-xs); color: var(--color-text-muted); }
.artifact__mail { margin-bottom: 1rem; }
.artifact .mock__bar + .mock__bar { margin-top: 0.5rem; }
.artifact__attach {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.artifact__ok { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 183, 106, 0.12); color: var(--color-success); }
.artifact__ok .icon { stroke-width: 2.4; }

.demo__steps { display: grid; list-style: none; padding: 0; }
.demo-step { position: relative; display: flex; gap: 0.85rem; padding: 0.5rem 0; opacity: 0.45; transition: opacity var(--dur-slow) var(--ease-out); }
.demo-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(0.75rem - 1px);
  top: 2.15rem;
  bottom: -0.4rem;
  width: 2px;
  border-radius: 2px;
  background: var(--gray-200);
  transition: background-color var(--dur-slow) var(--ease-out);
}
.demo-step__marker {
  position: relative;
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  margin-top: 0.05rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 1.5px solid var(--gray-300);
  transition: all var(--dur-slow) var(--ease-out);
}
.demo-step__marker .icon { width: 0.8rem; height: 0.8rem; stroke: #fff; stroke-width: 2.8; opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.demo-step__text strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.5; }
.demo-step__text small { display: none; margin-top: 0.1rem; font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-muted); }
.demo-step.is-done, .demo-step.is-active { opacity: 1; }
.demo-step.is-done::before { background: var(--color-primary); }
.demo-step.is-done .demo-step__marker { background: var(--color-primary); border-color: var(--color-primary); }
.demo-step.is-done .demo-step__marker .icon { opacity: 1; }
.demo-step.is-active .demo-step__marker { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(10, 61, 255, 0.12); }
.demo-step.is-active .demo-step__marker::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.demo-step.is-active small { display: block; }

.demo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background: var(--gray-25);
}
.demo__caption { display: none; }
.demo__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-primary); white-space: nowrap; }
.demo__controls { display: flex; gap: 0.25rem; margin-left: auto; }

@media (min-width: 1024px) {
  .pipeline { display: flex; justify-content: space-between; padding: 2rem 3rem 1.6rem; border-bottom: 1px solid var(--color-border); }
  .demo__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.75rem; padding: 1.75rem; }
  .demo__steps { display: none; }
  .demo__chat { display: block; }
  .demo__artifacts { min-height: 22rem; }
  .demo__caption { display: flex; align-items: baseline; gap: 0.9rem; min-width: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
  .demo__caption strong { margin-right: 0.6rem; color: var(--color-text); font-weight: var(--weight-medium); }
}

/* ---- CTA band (after the live demo) ----------------------------------- */
.cta-band {
  max-width: 70rem;
  margin: var(--space-6) auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-xl);
  background: var(--blue-25);
}
.cta-band__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); }
.cta-band p { margin-top: 0.3rem; max-width: 36rem; font-size: var(--text-sm); color: var(--color-text-secondary); }
.cta-band .btn-row { gap: 1rem 1.5rem; }

/* ---- 05 Explorer ------------------------------------------------------- */
.explorer {
  display: grid;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}
.explorer__tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.75rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  background: var(--gray-25);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.explorer__tabs::-webkit-scrollbar { display: none; }
.explorer__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.5rem;
  padding: 0 0.9rem;
  flex: none;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.explorer__tab .icon { width: 1.05rem; height: 1.05rem; color: var(--gray-400); transition: color var(--dur) var(--ease-out); }
.explorer__tab:hover { color: var(--color-text); background: rgba(11, 17, 32, 0.04); }
.explorer__tab[aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-border); }
.explorer__tab[aria-selected="true"] .icon { color: var(--color-primary); }
.explorer__panels { display: flex; flex-direction: column; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.explorer__panel:not([hidden]) { animation: panel-in var(--dur-slow) var(--ease-out); }
.explorer__panel:focus-visible { outline-offset: 8px; }
.explorer__title { font-size: var(--text-2xl); line-height: 1.15; letter-spacing: var(--tracking-heading); max-width: 22ch; }
.explorer__list {
  margin-top: 2rem;
  display: grid;
  gap: 1px;
  list-style: none;
  padding: 0;
  overflow: hidden;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.explorer__list li { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.25rem 1.35rem; background: var(--color-surface); }
.explorer__list strong { display: flex; font-size: 0.9375rem; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); line-height: 1.4; }
.explorer__list strong::before { content: ""; width: 6px; height: 6px; flex: none; margin: 0.5em 0.65rem 0 0; border-radius: 2px; background: var(--color-primary); }
.explorer__list span { padding-left: calc(6px + 0.65rem); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
.explorer__foot {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (min-width: 768px) { .explorer__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .explorer { grid-template-columns: 16.5rem minmax(0, 1fr); }
  .explorer__tabs { flex-direction: column; gap: 0.2rem; padding: 1rem; overflow: visible; border-bottom: 0; border-right: 1px solid var(--color-border); }
  .explorer__tab { width: 100%; height: 2.75rem; }
  .explorer__tab[aria-selected="true"]::after { content: ""; margin-left: auto; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }
  .explorer__panels { min-height: 33rem; }
}

/* ---- 06 Industries ----------------------------------------------------- */
.industry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); list-style: none; padding: 0; }
.industry {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.industry > .icon { width: 1.4rem; height: 1.4rem; margin-bottom: 0.75rem; color: var(--color-primary); }
.industry strong { font-size: 0.9375rem; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); line-height: 1.35; }
.industry span { font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
.industry:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.industry--more { grid-column: span 2; padding: 0; background: var(--color-dark); border-color: transparent; color: #fff; }
.industry--more a { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem; height: 100%; min-height: 8rem; padding: 1.25rem; border-radius: inherit; }
.industry--more strong { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-lg); }
.industry--more strong .icon { width: 1.1rem; height: 1.1rem; transition: transform var(--dur) var(--ease-out); }
.industry--more:hover strong .icon { transform: translateX(4px); }
.industry--more span { color: rgba(255, 255, 255, 0.65); }
.industries__claim {
  margin: var(--space-16) auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}
@media (min-width: 768px) { .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .industry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }

/* ---- 07 Process -------------------------------------------------------- */
.process__grid { display: grid; gap: var(--space-12); }
.process__head .h2, .process__head .lead { margin-top: var(--space-5); }
.process__head .btn { margin-top: var(--space-8); }
@media (min-width: 1024px) {
  .process__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-24); }
  .process__head { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
}
.timeline { position: relative; display: grid; list-style: none; padding: 0; }
.timeline__line { position: absolute; left: calc(1.25rem - 1px); top: 1.25rem; bottom: 1.25rem; width: 2px; border-radius: 2px; background: var(--gray-200); }
.timeline__progress { display: block; width: 100%; height: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(to bottom, var(--blue-300), var(--color-primary)); }
.timeline__step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.5rem; padding-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__num {
  position: relative;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  transition: all var(--dur-slow) var(--ease-out);
}
.timeline__step.is-reached .timeline__num { background: var(--color-primary); border-color: transparent; color: #fff; box-shadow: 0 0 0 5px rgba(10, 61, 255, 0.1); }
.timeline__step h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding-top: 0.4rem; }
.timeline__step p { margin-top: 0.5rem; max-width: 30rem; color: var(--color-text-secondary); }

/* ---- 08 Examples ------------------------------------------------------- */
.example-grid { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .example-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.example { display: flex; flex-direction: column; }
.example__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.example__intro { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--color-text-secondary); }
.mini-flow { margin-top: 1.5rem; list-style: none; padding: 1.25rem 1.25rem 0.25rem; border-radius: var(--radius-lg); background: var(--gray-25); border: 1px solid var(--color-border); }
.mini-flow li { position: relative; padding: 0 0 1rem 1.75rem; font-size: var(--text-sm); line-height: 1.45; }
.mini-flow li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--blue-300);
  background: var(--color-surface);
}
.mini-flow li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.35rem - 0.75px); top: 1.15rem; bottom: 0.1rem; width: 1.5px; background: var(--blue-100); }
.mini-flow li:first-child::before { background: var(--color-primary); border-color: var(--color-primary); }
.mini-flow li:last-child::before { background: var(--color-accent); border-color: var(--color-accent); }

/* ---- 09 Integrations --------------------------------------------------- */
.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.integration-group { padding: 1.5rem 1.35rem; background: var(--color-surface); }
.integration-group__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.integration-group__title .icon { color: var(--color-primary); }
.integration-group ul { display: grid; gap: 0.6rem; list-style: none; padding: 0; }
.integration-group li { font-size: 0.9375rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-title); transition: color var(--dur) var(--ease-out); }
.integration-group li:hover { color: var(--color-primary); }
.integrations__note { margin-top: 1.25rem; text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (min-width: 768px) { .integration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .integration-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- 10 Why ------------------------------------------------------------ */
.why__intro { max-width: 52rem; }
.why__intro .h1 { margin-top: var(--space-5); }
.why__intro .lead { margin-top: var(--space-6); }
.principles { margin-top: var(--space-16); display: grid; list-style: none; padding: 0; border-top: 1px solid var(--color-border); }
.principle { padding: 1.75rem 0; border-bottom: 1px solid var(--color-border); }
.principle > .icon { width: 1.4rem; height: 1.4rem; margin-bottom: 1.25rem; color: var(--color-primary); }
.principle h3 { font-size: 1rem; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-title); }
.principle p { margin-top: 0.4rem; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-secondary); max-width: 20rem; }
@media (min-width: 640px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle { padding: 2rem 1.75rem; }
  .principle:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--color-border); }
}
@media (min-width: 1024px) {
  .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .principle:nth-child(odd) { padding-left: 1.75rem; }
  .principle:nth-child(4n+1) { padding-left: 0; }
  .principle:not(:nth-child(4n)) { border-right: 1px solid var(--color-border); }
}

/* ---- 11 Assistant invite ---------------------------------------------- */
.assistant-invite__grid { display: grid; gap: var(--space-12); align-items: center; }
.assistant-invite .h2, .assistant-invite .lead { margin-top: var(--space-5); }
.assistant-invite .btn-row { margin-top: var(--space-8); }
.assistant-preview { display: grid; gap: 1rem; width: 100%; max-width: 30rem; justify-self: center; padding: 1.5rem; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.assistant-preview__head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.assistant-preview__head > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.assistant-preview__head strong { font-size: var(--text-sm); }
.assistant-preview__head small { font-size: var(--text-xs); color: var(--color-text-muted); }
.assistant-preview .bubble { max-width: 100%; background: var(--gray-50); border: 1px solid var(--color-border); }
@media (min-width: 1024px) { .assistant-invite__grid { grid-template-columns: 1fr 1fr; gap: var(--space-24); } }

/* ---- 12 FAQ ------------------------------------------------------------ */
.faq-section__grid { display: grid; gap: var(--space-10); }
.faq-section header .h2, .faq-section header .lead { margin-top: var(--space-5); }
.faq-section__link { margin-top: var(--space-6); }
.faq__answer a { color: var(--color-primary); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .faq-section__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-24); } }

/* ---- Final CTA --------------------------------------------------------- */
.cta-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 4rem + 8vw, 11rem);
  background: var(--color-dark);
  color: #fff;
}
.cta-final__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 65% 75% at 50% 30%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 65% 75% at 50% 30%, #000 15%, transparent 75%);
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(55% 55% at 50% 0%, rgba(10, 61, 255, 0.5), transparent 72%);
}
.cta-final__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-final .h1 { max-width: 13em; }
.cta-final .lead { margin: var(--space-6) auto 0; color: rgba(255, 255, 255, 0.72); text-align: center; }
.cta-final .btn-row { margin-top: var(--space-10); justify-content: center; }
.contact-strip {
  margin-top: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  width: 100%;
  max-width: 58rem;
  display: grid;
  gap: 1px;
  list-style: none;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
}
.contact-strip a { display: flex; align-items: center; gap: 0.9rem; height: 100%; padding: 1.25rem 1.4rem; background: var(--color-dark); text-align: left; transition: background-color var(--dur) var(--ease-out); }
.contact-strip a:hover { background: #0B2450; }
.contact-strip a > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.contact-strip .icon { width: 1.35rem; height: 1.35rem; color: var(--blue-300); }
.contact-strip small { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.contact-strip strong { font-size: 0.9375rem; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
@media (min-width: 768px) { .contact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479px) { .cta-final .btn-row .btn { flex: 1 1 100%; } }