/* ============================================
   SPIRE LIGHT — COMPONENTS
   Buttons, cards, chips, grids, team, workflow
   ============================================ */

/* ── Buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  border-radius: var(--radius-md);
  transition: all var(--dur-normal) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg-deep);
  box-shadow: var(--shadow-glow-sm);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
  background: var(--accent-bright);
  color: var(--bg-deep);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--text-body);
  border: 1px solid var(--border-light);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-secondary:active {
  color: var(--text-white);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: var(--fs-xs);
}

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: var(--fs-body);
}

/* ── Chips ── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 1rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  letter-spacing: var(--ls-wide);
}

.chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Cards ── */

.card {
  background: transparent;
  padding: var(--space-5) 0;
  transition: all var(--dur-normal) var(--ease-out);
  position: relative;
}

.card:hover,
.card:focus-visible,
.card:active {
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--accent);
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.card h3 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h4);
}

.card p {
  color: var(--text-body);
  font-size: var(--fs-small);
  margin-bottom: var(--space-4);
}

.card-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-details span {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card-details span::before {
  content: '›';
  color: var(--accent);
  font-weight: var(--fw-bold);
}

/* ── Proof Strip ── */

.proof-strip {
  background: var(--bg-section);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-6) 0;
  overflow: hidden;
}

.proof-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.proof-item .proof-number {
  color: var(--accent);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

/* ── Capability Grid ── */

.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.capability-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  color: var(--text-body);
  transition: all var(--dur-normal) var(--ease-out);
}

.capability-item:hover,
.capability-item:focus-visible,
.capability-item:active {
  border-color: var(--border-accent);
  color: var(--text-heading);
  background: var(--bg-card-hover);
}

.capability-item svg,
.capability-item .cap-icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Tech Example Box ── */

.tech-box {
  background: var(--bg-deepest);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tech-box-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-subtle);
}

.tech-box-header .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tech-box-header .dot:nth-child(1) { background: #ff5f57; }
.tech-box-header .dot:nth-child(2) { background: #ffbd2e; }
.tech-box-header .dot:nth-child(3) { background: #28c840; }

.tech-box-header span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-left: var(--space-2);
}

.tech-box-body {
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.8;
  color: var(--text-body);
}

.tech-box-body .file {
  color: var(--accent);
}

.tech-box-body .dir {
  color: var(--teal);
}

.tech-box-body .comment {
  color: var(--text-dim);
}

.tech-box-body .indent {
  padding-left: var(--space-5);
}

.tech-box-body .indent-2 {
  padding-left: calc(var(--space-5) * 2);
}

/* ── Workflow Timeline ── */

.workflow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5);
}

.workflow-line {
  position: absolute;
  top: 28px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--border-subtle);
  z-index: 0;
}

.workflow-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.6s var(--ease-out);
  box-shadow: var(--shadow-glow-sm);
}

.workflow-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.workflow-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  transition: all var(--dur-normal) var(--ease-out);
}

.workflow-step.active .workflow-dot {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: var(--shadow-glow-sm);
}

.workflow-step h4 {
  font-size: var(--fs-small);
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  transition: color var(--dur-normal) var(--ease-out);
}

.workflow-step.active h4 {
  color: var(--text-heading);
}

.workflow-step p {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  line-height: 1.5;
  transition: color var(--dur-normal) var(--ease-out);
}

.workflow-step.active p {
  color: var(--text-muted);
}

/* ── Use Case Cards ── */

.use-case-card {
  padding: var(--space-5) 0;
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--dur-normal) var(--ease-out);
}

.use-case-card:hover,
.use-case-card:focus-visible,
.use-case-card:active {
  border-color: var(--accent);
}

.use-case-card h4 {
  color: var(--text-heading);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.use-case-card h4 svg {
  color: var(--accent);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.use-case-card p {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Proof Blocks (Case-style) ── */

.proof-block {
  padding: var(--space-5) 0;
  background: transparent;
  border-top: 2px solid var(--accent);
}

.proof-block-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.proof-block h4 {
  color: var(--text-heading);
  margin-bottom: var(--space-4);
}

.proof-block-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.proof-block-meta dt {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.proof-block-meta dd {
  font-size: var(--fs-small);
  color: var(--text-body);
  margin-bottom: var(--space-3);
}

/* ── Team Cards ── */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.team-card {
  text-align: left;
  padding: var(--space-5) 0;
  background: transparent;
  transition: all var(--dur-normal) var(--ease-out);
}

.team-card:hover,
.team-card:focus-within,
.team-card:active {
  transform: translateY(-2px);
}

.team-card-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 0 var(--space-4) 0;
  border: 2px solid var(--border-subtle);
  transition: border-color var(--dur-normal) var(--ease-out);
}

.team-card:hover .team-card-photo,
.team-card:focus-within .team-card-photo,
.team-card:active .team-card-photo {
  border-color: var(--accent);
}

.team-card-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 0 var(--space-4) 0;
  background: linear-gradient(135deg, var(--accent-subtle), rgba(123, 94, 167, 0.15));
  border: 2px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: var(--ls-tight);
  transition: border-color var(--dur-normal) var(--ease-out);
}

.team-card:hover .team-card-placeholder,
.team-card:focus-within .team-card-placeholder,
.team-card:active .team-card-placeholder {
  border-color: var(--accent);
}

.team-card h4 {
  color: var(--text-heading);
  margin-bottom: var(--space-1);
}

.team-card .team-role {
  font-size: var(--fs-small);
  color: var(--accent);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-3);
}

.team-card .team-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Final CTA Section ── */

.cta-section {
  background: linear-gradient(180deg, var(--bg-section) 0%, var(--bg-deepest) 100%);
  text-align: left;
  padding: var(--space-9) 0;
  position: relative;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: transparent;
}

.cta-section h2 {
  max-width: 700px;
  margin: 0 0 var(--space-5) 0;
}

.cta-section p {
  margin: 0 0 var(--space-7) 0;
  max-width: 560px;
}

.cta-section .cta-buttons {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.cta-section .cta-email {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.cta-section .cta-email a {
  color: var(--accent);
}

/* ── Responsive overrides for components ── */

@media (max-width: 1024px) {
  .proof-strip-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .workflow {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-7);
  }

  .workflow-line {
    display: none;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .workflow {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .proof-strip-inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .proof-block-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .card {
    padding: var(--space-5);
  }
  
  .workflow {
    grid-template-columns: 1fr;
  }
}

/* ── Use Case Board (click-driven) ── */

.use-case-board {
  position: relative;
  margin-top: var(--space-7);
  --uc-accent: var(--accent);
  --uc-accent-soft: rgba(56, 182, 255, 0.12);
  --uc-accent-tint: rgba(56, 182, 255, 0.20);
}

.use-case-board__indicator {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-5);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.use-case-board__indicator [data-uc-current] {
  color: var(--uc-accent);
  font-weight: var(--fw-semibold);
  transition: color 0.4s var(--ease-out);
}

.use-case-board__indicator-divider {
  color: var(--border-light);
}

.use-case-board__layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--space-7);
  align-items: stretch;
}

/* Tiles grid */
.use-case-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  align-content: start;
}

.uc-tile {
  appearance: none;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  padding: var(--space-4);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  font-family: inherit;
  color: var(--text-heading);
  transition: border-color var(--dur-normal) var(--ease-out),
              background var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
  --tile-accent: var(--accent);
}

.uc-tile:hover,
.uc-tile:focus-visible,
.uc-tile:active {
  transform: translateY(-2px);
  border-color: var(--tile-accent);
  background: var(--bg-card-hover);
}

.uc-tile.active {
  border-color: var(--tile-accent);
  background: var(--bg-deep);
  box-shadow: 0 0 0 1px var(--tile-accent), 0 8px 24px rgba(15, 23, 42, 0.06);
}

.uc-tile__glyph {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: color var(--dur-normal) var(--ease-out);
}

.uc-tile__glyph svg {
  width: 100%;
  height: 100%;
}

.uc-tile.active .uc-tile__glyph,
.uc-tile:hover .uc-tile__glyph,
.uc-tile:focus-visible .uc-tile__glyph,
.uc-tile:active .uc-tile__glyph {
  color: var(--tile-accent);
}

.uc-tile__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

/* Detail panel */
.use-case-detail {
  position: relative;
  min-height: 480px;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.use-case-detail::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 12%, var(--uc-accent-tint), transparent 55%),
    radial-gradient(circle at 88% 88%, var(--uc-accent-soft), transparent 65%);
  transition: background 0.6s var(--ease-out);
  z-index: 0;
  pointer-events: none;
}

.uc-detail {
  position: absolute;
  inset: 0;
  padding: var(--space-7);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-7);
  align-items: start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}

.uc-detail.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.uc-detail__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border-subtle);
}

.uc-detail__visual-glyph {
  width: 60%;
  height: 60%;
  color: var(--uc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.uc-detail__visual-glyph svg {
  width: 100%;
  height: 100%;
}

.uc-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.uc-detail__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--uc-accent);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}

.uc-detail__body h3 {
  margin: 0;
  color: var(--text-heading);
}

.uc-detail__body > p {
  color: var(--text-body);
  margin: 0;
  max-width: 56ch;
}

.uc-detail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.uc-detail__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--fs-small);
  color: var(--text-body);
  line-height: 1.55;
}

.uc-detail__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 1px;
  background: var(--uc-accent);
}

.uc-detail__example {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.65);
  border-left: 2px solid var(--uc-accent);
}

.uc-detail__example-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}

.uc-detail__example p {
  margin: 0;
  color: var(--text-body);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Per-use-case accent colors (drives both tile and active detail panel) */
.uc-tile--automotive    { --tile-accent: #f97316; }
.uc-tile--wake-word     { --tile-accent: #38b6ff; }
.uc-tile--multilingual  { --tile-accent: #14b8a6; }
.uc-tile--call-sim      { --tile-accent: #6366f1; }
.uc-tile--accessibility { --tile-accent: #22c55e; }
.uc-tile--stt           { --tile-accent: #f43f5e; }
.uc-tile--tts           { --tile-accent: #8b5cf6; }
.uc-tile--dialect       { --tile-accent: #f59e0b; }

/* When a particular detail is active, the board carries that accent */
.use-case-board.uc-vibe--automotive    { --uc-accent: #f97316; --uc-accent-soft: rgba(249, 115, 22, 0.10); --uc-accent-tint: rgba(249, 115, 22, 0.18); }
.use-case-board.uc-vibe--wake-word     { --uc-accent: #38b6ff; --uc-accent-soft: rgba(56, 182, 255, 0.12); --uc-accent-tint: rgba(56, 182, 255, 0.20); }
.use-case-board.uc-vibe--multilingual  { --uc-accent: #14b8a6; --uc-accent-soft: rgba(20, 184, 166, 0.12); --uc-accent-tint: rgba(20, 184, 166, 0.20); }
.use-case-board.uc-vibe--call-sim      { --uc-accent: #6366f1; --uc-accent-soft: rgba(99, 102, 241, 0.10); --uc-accent-tint: rgba(99, 102, 241, 0.18); }
.use-case-board.uc-vibe--accessibility { --uc-accent: #22c55e; --uc-accent-soft: rgba(34, 197, 94, 0.10); --uc-accent-tint: rgba(34, 197, 94, 0.18); }
.use-case-board.uc-vibe--stt           { --uc-accent: #f43f5e; --uc-accent-soft: rgba(244, 63, 94, 0.10); --uc-accent-tint: rgba(244, 63, 94, 0.18); }
.use-case-board.uc-vibe--tts           { --uc-accent: #8b5cf6; --uc-accent-soft: rgba(139, 92, 246, 0.10); --uc-accent-tint: rgba(139, 92, 246, 0.18); }
.use-case-board.uc-vibe--dialect       { --uc-accent: #f59e0b; --uc-accent-soft: rgba(245, 158, 11, 0.10); --uc-accent-tint: rgba(245, 158, 11, 0.20); }

@media (max-width: 1024px) {
  .use-case-board__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .use-case-detail {
    min-height: 0;
    position: relative;
  }

  .uc-detail {
    position: relative;
    inset: auto;
    display: none;
  }

  .uc-detail.active {
    display: grid;
  }
}

@media (max-width: 720px) {
  .uc-detail {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .uc-detail__visual {
    max-width: 160px;
  }

  .use-case-tiles {
    grid-template-columns: 1fr;
  }
}

/* ── Page Vibe (full-page tint, synced with team spotlight) ── */

.page-vibe {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.page-vibe__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
  will-change: opacity;
}

.page-vibe__layer.active {
  opacity: 1;
}

.page-vibe__layer[data-page-vibe="0"] {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(56, 182, 255, 0.22), transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(125, 211, 252, 0.16), transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(56, 182, 255, 0.05), transparent 70%);
}

.page-vibe__layer[data-page-vibe="1"] {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(20, 184, 166, 0.22), transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(45, 212, 191, 0.16), transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(20, 184, 166, 0.05), transparent 70%);
}

.page-vibe__layer[data-page-vibe="2"] {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(139, 92, 246, 0.20), transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(167, 139, 250, 0.14), transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.05), transparent 70%);
}

.page-vibe__layer[data-page-vibe="3"] {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(245, 158, 11, 0.22), transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(251, 191, 36, 0.16), transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(245, 158, 11, 0.05), transparent 70%);
}

.page-vibe__layer[data-page-vibe="4"] {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(244, 63, 94, 0.20), transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(244, 114, 182, 0.16), transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(244, 63, 94, 0.05), transparent 70%);
}

.page-vibe__layer[data-page-vibe="5"] {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(34, 197, 94, 0.22), transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(132, 204, 22, 0.16), transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(34, 197, 94, 0.05), transparent 70%);
}

/* ── Team Spotlight (click-driven) ── */

.team-spotlight {
  position: relative;
  margin-top: var(--space-7);
}

.team-spotlight__indicator {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-5);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.team-spotlight__indicator [data-team-current] {
  color: var(--accent);
  font-weight: var(--fw-semibold);
}

.team-spotlight__indicator-divider {
  color: var(--border-light);
}

.team-spotlight__layout {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--space-9);
  align-items: center;
  margin-bottom: var(--space-8);
}

.team-spotlight__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  background: transparent;
}

.team-spotlight__photos {
  position: absolute;
  inset: 0;
}

.team-vibe {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(0) scale(0.97);
  transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-out);
  pointer-events: none;
  will-change: opacity, transform;
  --vibe-accent: var(--accent);
  --vibe-accent-soft: rgba(56, 182, 255, 0.22);
}

.team-vibe.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.team-vibe__halo {
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--vibe-accent-soft), transparent 70%);
  filter: blur(12px);
  z-index: 0;
}

.team-spotlight__photo {
  position: relative;
  z-index: 1;
  width: 62%;
  height: 62%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.18),
    0 0 0 1px var(--vibe-accent, var(--accent));
}

/* Per-person vibes */
.team-vibe--andreas {
  --vibe-accent: #38b6ff;
  --vibe-accent-soft: rgba(56, 182, 255, 0.22);
  --vibe-tint-1: rgba(56, 182, 255, 0.40);
  --vibe-tint-2: rgba(125, 211, 252, 0.22);
  --vibe-base: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
}

.team-vibe--emil {
  --vibe-accent: #14b8a6;
  --vibe-accent-soft: rgba(20, 184, 166, 0.22);
  --vibe-tint-1: rgba(20, 184, 166, 0.38);
  --vibe-tint-2: rgba(45, 212, 191, 0.20);
  --vibe-base: linear-gradient(135deg, #ccfbf1 0%, #f0fdfa 100%);
}

.team-vibe--gustav {
  --vibe-accent: #8b5cf6;
  --vibe-accent-soft: rgba(139, 92, 246, 0.22);
  --vibe-tint-1: rgba(139, 92, 246, 0.32);
  --vibe-tint-2: rgba(167, 139, 250, 0.20);
  --vibe-base: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
}

.team-vibe--joyi {
  --vibe-accent: #f59e0b;
  --vibe-accent-soft: rgba(245, 158, 11, 0.22);
  --vibe-tint-1: rgba(245, 158, 11, 0.32);
  --vibe-tint-2: rgba(251, 191, 36, 0.22);
  --vibe-base: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
}

.team-vibe--mateo {
  --vibe-accent: #f43f5e;
  --vibe-accent-soft: rgba(244, 63, 94, 0.22);
  --vibe-tint-1: rgba(244, 114, 182, 0.32);
  --vibe-tint-2: rgba(251, 113, 133, 0.20);
  --vibe-base: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);
}

.team-vibe--pekka {
  --vibe-accent: #22c55e;
  --vibe-accent-soft: rgba(34, 197, 94, 0.22);
  --vibe-tint-1: rgba(34, 197, 94, 0.30);
  --vibe-tint-2: rgba(132, 204, 22, 0.20);
  --vibe-base: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
}

.team-spotlight__bios {
  position: relative;
  min-height: 240px;
}

.team-bio {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease-out) 0s, transform 0.5s var(--ease-out) 0s;
  pointer-events: none;
}

.team-bio.active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s var(--ease-out) 0.12s, transform 0.5s var(--ease-out) 0.12s;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .team-vibe,
  .team-bio {
    transition: opacity 0.2s linear !important;
    transform: none !important;
  }
}

.team-bio h3 {
  margin: 0 0 var(--space-2) 0;
  color: var(--text-heading);
}

.team-bio__role {
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--accent);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-5);
}

.team-bio p {
  color: var(--text-body);
  margin: 0 0 var(--space-3) 0;
  max-width: 56ch;
}

.team-bio__support {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.team-spotlight__selector {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-5);
}

.team-pill {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  transition: border-color var(--dur-normal) var(--ease-out),
              background var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out);
  font-family: inherit;
}

.team-pill:hover,
.team-pill:focus-visible,
.team-pill:active {
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}

.team-pill.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.team-pill__photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
  transition: border-color var(--dur-normal) var(--ease-out);
}

.team-pill.active .team-pill__photo {
  border-color: var(--accent);
}

.team-pill__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.team-pill__text strong {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-pill__text span {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-pill.active .team-pill__text strong {
  color: var(--accent-bright);
}

@media (max-width: 1024px) {
  .team-spotlight__layout {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .team-spotlight__visual {
    max-width: 360px;
  }

  /* On narrow viewports the active bio (especially Andreas's, which is
     the longest) wraps to more lines than the 200px min-height reserved
     for the absolute-positioned stack. That overflow used to clip the
     bio and overlap the selector pills below. Stack the bios in a
     single grid cell instead so the container grows to the tallest
     bio's natural height while the crossfade still animates. */
  .team-spotlight__bios {
    min-height: 0;
    display: grid;
  }

  .team-bio {
    position: static;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
  }

  .team-spotlight__selector {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .team-spotlight__selector {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-pill {
    padding: var(--space-3);
  }
}

/* ── Team section: scroll-driven two-act reveal ──────────────
   Act 1 (p ≈ 0 → 0.32): oversized italic "Meet the team" alone,
   page tint cycling through the six person-accents.
   Act 2 (p ≈ 0.32 → 0.85): intro lifts away, the spotlight
   materializes with light staggered timings, tint settles onto
   Andreas's blue (the default active person). After Act 2 the
   pill clicks drive the spotlight as before. */
.team-section {
  --p: 0;
  position: relative;
  height: 280vh;
  padding: 0;
  overflow: clip;
  content-visibility: auto;
  contain-intrinsic-size: 1px 280vh;

  /* Smoothstepped reveal slices */
  --intro-out-t:   clamp(0, (var(--p) - 0.20) * 4.0, 1);
  --header-in-t:   clamp(0, (var(--p) - 0.30) * 4.0, 1);
  --indic-in-t:    clamp(0, (var(--p) - 0.32) * 4.6, 1);
  --photo-in-t:    clamp(0, (var(--p) - 0.34) * 3.6, 1);
  --bio-in-t:      clamp(0, (var(--p) - 0.40) * 3.4, 1);
  --pills-in-t:    clamp(0, (var(--p) - 0.46) * 3.2, 1);

  --intro-out:  calc(var(--intro-out-t) * var(--intro-out-t) * (3 - 2 * var(--intro-out-t)));
  --header-in:  calc(var(--header-in-t) * var(--header-in-t) * (3 - 2 * var(--header-in-t)));
  --indic-in:   calc(var(--indic-in-t)  * var(--indic-in-t)  * (3 - 2 * var(--indic-in-t)));
  --photo-in:   calc(var(--photo-in-t)  * var(--photo-in-t)  * (3 - 2 * var(--photo-in-t)));
  --bio-in:     calc(var(--bio-in-t)    * var(--bio-in-t)    * (3 - 2 * var(--bio-in-t)));
  --pills-in:   calc(var(--pills-in-t)  * var(--pills-in-t)  * (3 - 2 * var(--pills-in-t)));

  /* Tint cycle factor: 0 at start, 1 by p ≈ 0.30, then locked. */
  --tint-t:    clamp(0, var(--p) * 3.4, 1);
}

.team-section__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background tint that cycles through the six person-accents
   during Act 1, then fades out so the page's normal background
   takes over once the spotlight is in. The page-vibe layer
   (already on the page) handles the per-person tint after that. */
.team-section__tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* A wide linear gradient containing all six person-accents,
     scrolled horizontally as --tint-t grows. The viewport sees
     the local hue at any moment, so the page reads as a soft
     coloured wash that smoothly cycles through every accent
     during Act 1 and then fades out as Act 2 takes over. */
  background: linear-gradient(135deg,
    rgba(56, 182, 255, 0.20) 0%,
    rgba(20, 184, 166, 0.20) 20%,
    rgba(139, 92, 246, 0.20) 40%,
    rgba(245, 158, 11, 0.20) 60%,
    rgba(244, 63, 94, 0.20)  80%,
    rgba(34, 197, 94, 0.20)  100%
  );
  background-size: 600% 100%;
  background-position: calc(var(--tint-t) * 100%) 0;
  /* Bloom in during Act 1, then fade out for Act 2 so the
     existing page-vibe tint owns the spotlight phase. */
  opacity: calc(
    clamp(0, var(--tint-t) * 1.4, 1)
    * (1 - clamp(0, (var(--p) - 0.34) * 3.6, 1))
  );
  filter: blur(8px);
  will-change: opacity, background-position;
}

/* Act 1: oversized centered phrase. */
.team-intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-7);
  pointer-events: none;
  opacity: calc(1 - var(--intro-out));
  transform: translateY(calc(var(--intro-out) * -40px));
  will-change: opacity, transform;
}

.team-intro__line {
  margin: 0;
  font-family: var(--font-display, 'Inter', serif);
  font-weight: var(--fw-medium);
  font-size: clamp(2.6rem, 8.6vw, 7rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
  text-align: center;
  max-width: 18ch;
}

.team-intro__line em {
  font-style: italic;
  font-weight: var(--fw-medium);
  color: color-mix(in oklab, var(--text-heading) 70%, #6f7886);
}

/* Act 2: spotlight stage. Sits on top of the tint, gated by --p
   so it only earns the screen after Act 1 has lifted. */
.team-section__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Reserved height so the layout doesn't reflow as the inner
     pieces fade in. Matches the natural height of the spotlight
     when fully revealed. */
  max-height: 100vh;
  max-height: 100dvh;
  overflow: visible;
}

.team-section__header {
  opacity: var(--header-in);
  transform: translateY(calc((1 - var(--header-in)) * 24px));
  will-change: opacity, transform;
}

.team-section .team-spotlight {
  margin-top: var(--space-6);
}

.team-section .team-spotlight__indicator {
  opacity: var(--indic-in);
  transform: translateY(calc((1 - var(--indic-in)) * 16px));
  will-change: opacity, transform;
}

/* Photo halo blooms in: scale up and fade in together. The
   .team-vibe.active rule still owns the per-person photo
   crossfade once the spotlight is interactive. */
.team-section .team-spotlight__visual {
  opacity: var(--photo-in);
  transform: scale(calc(0.92 + var(--photo-in) * 0.08));
  transform-origin: 50% 55%;
  will-change: opacity, transform;
}

.team-section .team-spotlight__bios {
  opacity: var(--bio-in);
  transform: translateY(calc((1 - var(--bio-in)) * 22px));
  will-change: opacity, transform;
}

.team-section .team-spotlight__selector {
  opacity: var(--pills-in);
  transform: translateY(calc((1 - var(--pills-in)) * 28px));
  will-change: opacity, transform;
}

@media (max-width: 1024px) {
  .team-section { height: 240vh; }
  .team-intro__line {
    font-size: clamp(2.4rem, 9.5vw, 5rem);
  }
}

@media (max-width: 900px) {
  /* On phones and small tablets the pin can feel long; collapse
     to a static section that just fades in normally, and skip the
     rainbow cycle in favour of a single warm-up. */
  .team-section {
    height: auto;
    padding: var(--space-9) 0;
    content-visibility: visible;
  }
  .team-section__sticky {
    position: relative;
    top: auto;
    height: auto;
    display: block;
    overflow: visible;
  }
  .team-section__tint { display: none; }
  .team-intro {
    position: relative;
    inset: auto;
    padding: 0 var(--space-5) var(--space-7);
    opacity: 1 !important;
    transform: none !important;
  }
  .team-intro__line {
    font-size: clamp(2rem, 9vw, 3rem);
    text-align: left;
    max-width: 14ch;
  }
  .team-section__stage,
  .team-section__header,
  .team-section .team-spotlight__indicator,
  .team-section .team-spotlight__visual,
  .team-section .team-spotlight__bios,
  .team-section .team-spotlight__selector {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Stage was capped at max-height: 100vh to fit the pinned spotlight
     on desktop. With everything stacking vertically (photo + heading +
     bio + 6 pills) on phones the content blows past 100vh and the
     parent .team-section { overflow: clip } chops it off, taking the
     bio's tail and the entire selector with it. Lift the cap on mobile
     and let the section grow to fit. */
  .team-section { overflow: visible; }
  .team-section__stage { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .team-section { height: auto; padding: var(--space-9) 0; }
  .team-section__sticky {
    position: relative;
    top: auto;
    height: auto;
    display: block;
    overflow: visible;
  }
  .team-section__tint { display: none; }
  .team-intro {
    position: relative;
    inset: auto;
    padding: 0 var(--space-5) var(--space-7);
    opacity: 1;
    transform: none;
  }
  .team-intro__rainbow {
    background-position: 0 0;
  }
  .team-section__stage,
  .team-section__header,
  .team-section .team-spotlight__indicator,
  .team-section .team-spotlight__visual,
  .team-section .team-spotlight__bios,
  .team-section .team-spotlight__selector {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* .pixel-background and the pulse-glow keyframes used to be applied to
   proof-blocks, use-case cards, and the old CTA section. The current
   markup no longer attaches the class anywhere, so the rules and the
   infinite pulse keyframes have been removed. The structural rules
   below preserve the positioning context for elements that previously
   relied on the parent being a positioning ancestor. */

.cta-section {
  position: relative;
  overflow: hidden;
}

.use-case-card {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.proof-block {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* ── Scroll Dot Indicator ── */
.scroll-dots {
  position: fixed;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 100;
}

.scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-light);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--dur-normal) var(--ease-out);
}

.scroll-dot.active {
  background: var(--accent);
  transform: scale(1.5);
  box-shadow: 0 0 8px rgba(56, 182, 255, 0.5);
}

.scroll-dot:hover,
.scroll-dot:focus-visible,
.scroll-dot:active {
  background: var(--accent-dim);
}

@media (max-width: 1024px) {
  .scroll-dots { display: none; }
}

/* ── Glassmorphism Stat Cards (CTA) ── */
.stat-card {
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  transition: all var(--dur-normal) var(--ease-out);
}

.stat-card:hover,
.stat-card:focus-visible,
.stat-card:active {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-sm);
}

/* ── Workflow Section ── */

.workflow-header {
  max-width: 760px;
  margin: 0 0 var(--space-7) 0;
}

.workflow-header .label {
  margin-bottom: var(--space-3);
  display: inline-block;
}

.workflow-header h2 {
  margin: 0 0 var(--space-4) 0;
}

.workflow-header p {
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 680px;
  margin: 0;
}

.workflow-stages {
  display: grid;
  grid-template-columns: 1fr 48px 1.55fr 48px 1fr;
  align-items: stretch;
}

.workflow-stage {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
  position: relative;
}

.workflow-stage:hover,
.workflow-stage:focus-within,
.workflow-stage:active {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-lg);
}

.workflow-stage__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.workflow-stage__num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--accent-bright);
  letter-spacing: var(--ls-wide);
}

.workflow-stage__kicker {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-subtle);
}

.workflow-stage__title {
  font-size: var(--fs-h3);
  color: var(--text-heading);
  margin: 0 0 var(--space-3) 0;
  line-height: var(--lh-heading);
}

.workflow-stage__desc {
  font-size: var(--fs-small);
  color: var(--text-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-5) 0;
}

.workflow-stage__points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
}

.workflow-stage__points li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.9;
}

.workflow-stage__points li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent-bright);
  font-weight: var(--fw-semibold);
}

.workflow-stage__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 0 0;
  margin-top: auto;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-body);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: color var(--dur-fast) var(--ease-out);
}

.workflow-stage__toggle:hover,
.workflow-stage__toggle:focus-visible,
.workflow-stage__toggle:active {
  color: var(--accent-bright);
}

.workflow-stage__toggle .toggle-chevron {
  margin-left: auto;
  transition: transform var(--dur-normal) var(--ease-out);
}

.workflow-stage__toggle[aria-expanded="true"] .toggle-chevron {
  transform: rotate(180deg);
}

.workflow-stage__detail {
  margin-top: var(--space-4);
  animation: workflow-detail-in var(--dur-normal) var(--ease-out);
}

.workflow-stage__detail[hidden] {
  display: none;
}

@keyframes workflow-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.workflow-detail__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Emphasized middle (hub) stage */

.workflow-stage--hub {
  background: var(--bg-ambient-alt);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glow-sm);
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-5) 0;
}

.platform-cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--border-accent);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.platform-cap:hover,
.platform-cap:focus-visible,
.platform-cap:active {
  border-color: var(--border-accent);
  border-left-color: var(--accent-bright);
  transform: translateY(-2px);
}

.platform-cap strong {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  line-height: 1.3;
}

.platform-cap span {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Chips */

.workflow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.workflow-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  color: var(--accent-bright);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  line-height: 1.6;
  white-space: nowrap;
}

/* Connector */

.workflow-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  position: relative;
}

.workflow-connector svg {
  display: block;
  overflow: visible;
}

.workflow-connector .flow-line {
  stroke-dasharray: 4 4;
  animation: workflow-flow 3s linear infinite;
}

@keyframes workflow-flow {
  from { stroke-dashoffset: 16; }
  to   { stroke-dashoffset: 0; }
}

/* Deliverables strip */

.workflow-deliverables {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--bg-ambient-alt);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.workflow-deliverables__head {
  flex-shrink: 0;
  min-width: 200px;
}

.workflow-deliverables__head .label {
  margin-bottom: var(--space-2);
  display: inline-block;
}

.workflow-deliverables__head h4 {
  margin: 0;
  font-size: var(--fs-h4);
  color: var(--text-heading);
  line-height: var(--lh-heading);
}

.workflow-deliverables__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1;
}

.workflow-chip--tech {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.workflow-chip--tech::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.workflow-chip--tech:hover,
.workflow-chip--tech:focus-visible,
.workflow-chip--tech:active {
  border-color: var(--border-accent);
  color: var(--accent-bright);
}

/* Responsive */

@media (max-width: 1024px) {
  .workflow-stages {
    grid-template-columns: 1fr;
  }

  .workflow-connector {
    padding: var(--space-3) 0;
    min-height: 40px;
  }

  .workflow-connector svg {
    transform: rotate(90deg);
  }

  .workflow-stage {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
  }

  .workflow-deliverables {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

@media (max-width: 600px) {
  .platform-grid {
    grid-template-columns: 1fr;
  }

  .workflow-stage {
    padding: var(--space-5);
  }
}

/* ──────────────────────────────────────────────────────────────
   Final CTA (home only) — pinned section that reveals against
   --p (set by scroll-progress.js). The headline types out
   character-by-character as the user scrolls into the section,
   then the body, stats, and buttons settle in behind it.
   ────────────────────────────────────────────────────────────── */

/* Registered so the CSS animation below can interpolate it as a
   real number. Without @property the variable would jump from 0
   to 1 instead of typing smoothly. */
@property --type-in {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Reveal vars are <number> properties so we can transition them
   smoothly on class change. Without @property, custom-property
   changes snap and the var()-driven opacity/translate would jump. */
@property --label-in    { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --body-in     { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --buttons-in  { syntax: '<number>'; inherits: true; initial-value: 0; }

.cta-final {
  --p: 0;
  --type-in: 0;
  position: relative;
  height: 200vh;
  padding: 0;
  overflow: clip;
  background: linear-gradient(180deg,
    #f6f5f8 0%,
    #f9f6ef 50%,
    #fbf6e8 100%);
  content-visibility: auto;
  contain-intrinsic-size: 1px 200vh;

  /* Reveal cascade is gated on .is-typed (added by cta-typewriter.js
     after the headline finishes), not scroll. Each var transitions
     with its own delay so label → body → buttons/email → stats
     cascade in after the headline lands. */
  --label-in:    0;
  --body-in:     0;
  --buttons-in:  0;

  transition:
    --label-in   500ms cubic-bezier(0.16, 1, 0.3, 1)   80ms,
    --body-in    520ms cubic-bezier(0.16, 1, 0.3, 1)  220ms,
    --buttons-in 540ms cubic-bezier(0.16, 1, 0.3, 1)  420ms;
}

.cta-final.is-typed {
  --label-in:   1;
  --body-in:    1;
  --buttons-in: 1;
}

/* Headline plays its own type-on animation once the section
   enters the viewport (cta-typewriter.js adds .is-typing). */
.cta-final.is-typing {
  animation: cta-type-in 1.8s ease-out forwards;
}

@keyframes cta-type-in {
  from { --type-in: 0; }
  to   { --type-in: 1; }
}

/* Top-edge bleed: hides the seam between the team section's
   neutral end-tint and the CTA's slightly cooler base, the same
   way partner-story bleeds into use-flag. */
.cta-final__bleed {
  position: absolute;
  inset: 0 0 auto 0;
  height: 240px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(246, 245, 248, 0)   0%,
    rgba(246, 245, 248, 0.8) 60%,
    rgba(246, 245, 248, 1)   100%);
  z-index: 1;
}

.cta-final__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

.cta-final__stage {
  position: relative;
  width: 100%;
  padding: var(--space-7) var(--space-5);
}

.cta-final__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  min-height: 70vh;
}

.cta-final__label {
  display: inline-block;
  opacity: var(--label-in);
  transform: translateY(calc((1 - var(--label-in)) * 12px));
  will-change: opacity, transform;
}

.cta-final__headline {
  margin: var(--space-3) 0 var(--space-5) 0;
  font-size: var(--fs-h1);
  line-height: 1.1;
}

.cta-headline__type {
  position: relative;
  display: inline;
}

/* The headline text node sits at opacity 0 until the typewriter
   script populates it with per-character spans. Prevents a brief
   flash of fully-rendered text on first paint. */
.cta-headline__text {
  opacity: 0;
}

.cta-headline__text:has(.cta-headline__char) {
  opacity: 1;
}

/* Words wrap inline-block so the browser only breaks lines at
   word boundaries, never mid-word. Spaces between words stay
   as plain text nodes (placed by cta-typewriter.js) so wrapping
   still works naturally. */
.cta-headline__word {
  display: inline-block;
  white-space: nowrap;
}

/* Per-character reveal driven by the section's --type-in.
   --char-i is set on each span by cta-typewriter.js;
   --char-total is set on the parent. The "+ 4" gives a
   tail of overshoot so the last character reaches full
   opacity before --type-in actually saturates. The fallback
   on --type-in keeps the text visible if the JS hasn't booted. */
.cta-headline__char {
  display: inline-block;
  opacity: clamp(
    0,
    (var(--type-in, 1) * (var(--char-total, 1) + 4)) - var(--char-i, 0),
    1
  );
  /* Each character animates ONCE when the section enters view, then
     sits static. No will-change so we don't keep 40+ permanent GPU
     layers on the page for an animation that runs once for 1.8s. */
}

.cta-headline__caret {
  display: inline-block;
  margin-left: 0.05em;
  opacity: 0;
}

/* Caret rides the same window as the typing animation: appears as
   typing starts, sits visible through the run, fades at the end. */
.cta-final.is-typing .cta-headline__caret {
  animation: cta-caret-show 1.8s ease-out forwards;
}

@keyframes cta-caret-show {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

.cta-headline__caret-inner {
  display: inline-block;
  font-weight: var(--fw-light);
  color: var(--text-heading);
  animation: cta-caret-blink 1.2s ease-in-out infinite;
}

@keyframes cta-caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.cta-final__body {
  margin: 0 0 var(--space-7) 0;
  max-width: 500px;
  color: var(--text-body);
  opacity: var(--body-in);
  transform: translateY(calc((1 - var(--body-in)) * 14px));
  will-change: opacity, transform;
}

.cta-final__buttons {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  opacity: var(--buttons-in);
  transform: translateY(calc((1 - var(--buttons-in)) * 14px));
  will-change: opacity, transform;
}

.cta-final__email {
  font-size: var(--fs-small);
  color: var(--text-muted);
  opacity: var(--buttons-in);
  transform: translateY(calc((1 - var(--buttons-in)) * 8px));
  will-change: opacity, transform;
}

.cta-final__email a {
  color: var(--accent);
}

.cta-final__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.cta-stat {
  --stat-i: 0;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(16px);
  /* Per-card stagger: each stat enters 120ms after the previous,
     starting once the headline finishes typing (.is-typed lands). */
  transition:
    opacity   600ms cubic-bezier(0.16, 1, 0.3, 1) calc(520ms + var(--stat-i) * 120ms),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1) calc(520ms + var(--stat-i) * 120ms);
  will-change: opacity, transform;
}

.cta-final.is-typed .cta-stat {
  opacity: 1;
  transform: translateY(0);
}

.cta-stat__number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.cta-stat__number--accent { color: var(--accent); }
.cta-stat__number--teal   { color: var(--teal); }

.cta-stat__label {
  color: var(--text-muted);
  margin-top: var(--space-2);
  font-size: var(--fs-small);
}

@media (max-width: 900px) {
  .cta-final {
    height: auto;
    overflow: visible;
    --label-in: 1;
    --type-in: 1;
    --body-in: 1;
    --buttons-in: 1;
    content-visibility: visible;
  }
  .cta-final.is-typing,
  .cta-final.is-typing .cta-headline__caret {
    animation: none;
  }
  .cta-final__sticky {
    position: relative;
    height: auto;
    padding: var(--space-9) 0;
  }
  .cta-final__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    min-height: 0;
  }
  .cta-final__bleed { display: none; }
  .cta-stat {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cta-headline__caret { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-final {
    --label-in: 1;
    --type-in: 1;
    --body-in: 1;
    --buttons-in: 1;
  }
  .cta-final.is-typing,
  .cta-final.is-typing .cta-headline__caret {
    animation: none;
  }
  .cta-stat {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cta-headline__caret { display: none; }
  .cta-headline__caret-inner { animation: none; }
}


/* ══════════════════════════════════════════════
   PAGE TOC — fixed left-side section nav
   ══════════════════════════════════════════════ */

.page-toc {
  position: fixed;
  /* Anchor in the gutter of the widest content column (1400px) with
     ~9rem of breathing room reserved for the TOC's own width. */
  left: max(1rem, calc((100vw - 1400px) / 2 - 9rem));
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  max-width: 11rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.page-toc--visible {
  opacity: 1;
  pointer-events: auto;
}

.page-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Vertical track line */
.page-toc__list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-subtle);
  border-radius: 1px;
}

.page-toc__link {
  display: block;
  padding: 0.625rem 0 0.625rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-dim);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  letter-spacing: 0.01em;
}

/* Active indicator bar */
.page-toc__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.375rem;
  bottom: 0.375rem;
  width: 2px;
  background: transparent;
  border-radius: 1px;
  transition: background 0.3s ease;
}

.page-toc__link:hover {
  color: var(--text-body);
}

.page-toc__link.active {
  color: var(--text-heading);
  font-weight: 600;
}

.page-toc__link.active::before {
  background: var(--text-heading);
  width: 3px;
  left: -0.5px;
}

/* Hide unless the viewport has enough lateral room to clear the
   1400px-wide content column without overlapping it. */
@media (max-width: 1700px) {
  .page-toc { display: none; }
}


/* ══════════════════════════════════════════════
   HERO RATING — Datarade pill under hero CTAs
   ══════════════════════════════════════════════ */

/* Trust row — wraps the Datarade rating + SKI verified pill side by side. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-top: var(--space-5);
}

.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-body);
  font-size: 0.875rem;
  line-height: 1;
  backdrop-filter: blur(8px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* The rating used to provide its own top margin when it sat directly
   under the CTAs. Inside .hero-trust the wrapper owns that spacing. */
.hero-trust .hero-rating { margin-top: 0; }

.hero-rating:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.hero-rating__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #f5b301;
}

.hero-rating__text {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-body);
}

.hero-rating__text strong {
  color: var(--text-heading);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hero-rating__logo {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: contain;
  display: inline-block;
  vertical-align: -3px;
}

/* SKI verified-supplier variant of the hero pill — square-ish stamp,
   no hover lift since it's not a link. */
.hero-rating--ski {
  cursor: default;
  padding-left: 0.5rem;
}

.hero-rating__logo--ski {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #ffffff;
  padding: 1px;
  vertical-align: middle;
}

/* Trustpilot-style tiled stars. Two stacked rows: a muted background
   and a green foreground clipped to var(--rating) so the visual matches
   the actual score (e.g. 88% for 4.4/5). Used in the hero pill and the
   footer verifications row. */
.tp-stars {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.tp-stars__row {
  display: inline-flex;
  gap: 2px;
}

.tp-stars__row--fg {
  position: absolute;
  inset: 0;
  width: var(--rating, 100%);
  overflow: hidden;
}

.tp-tile {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tp-tile svg {
  width: 12px;
  height: 12px;
  display: block;
}

.tp-stars__row--bg .tp-tile { background: #dcdce6; }
.tp-stars__row--bg .tp-tile svg { color: #ffffff; }
.tp-stars__row--fg .tp-tile { background: #00b67a; }
.tp-stars__row--fg .tp-tile svg { color: #ffffff; }

.tp-stars--lg .tp-tile { width: 22px; height: 22px; }
.tp-stars--lg .tp-tile svg { width: 14px; height: 14px; }
.tp-stars--lg .tp-stars__row { gap: 3px; }

.tp-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-heading);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

.tp-brand__star {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.tp-brand--lg {
  font-size: 1rem;
}

.tp-brand--lg .tp-brand__star {
  width: 20px;
  height: 20px;
}

.hero-rating--trustpilot {
  gap: 0.5rem;
  padding: 0.4375rem 0.75rem;
}

/* ══════════════════════════════════════════════
   FOOTER VERIFICATIONS — Datarade + SKI badges
   ══════════════════════════════════════════════ */

.footer-verifications {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer-verif {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  min-width: 200px;
  height: 56px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-body);
  font-size: 0.8125rem;
  line-height: 1.2;
  box-sizing: border-box;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

a.footer-verif:hover {
  border-color: rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

.footer-verif img {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}

.footer-verif--ski img {
  border-radius: 4px;
  background: #ffffff;
  padding: 2px;
}

/* Footer Trustpilot chip uses the tiled-stars layout instead of a
   single emblem so it matches the official Trustpilot visual. */
.footer-verif--trustpilot {
  gap: 0.5rem;
}

.footer-verif__text {
  color: var(--text-body);
}

.footer-verif__text strong {
  color: var(--text-heading);
  font-weight: 600;
}

@media (max-width: 600px) {
  .hero-rating { font-size: 0.8125rem; padding: 0.4375rem 0.75rem; }
  .footer-verif {
    padding: 0.4375rem 0.75rem;
    font-size: 0.75rem;
    min-width: 0;
    flex: 1 1 0;
    height: 50px;
  }
  .footer-verif img { width: 30px; height: 30px; }
}