/* ============================================================
   Cinematic Agents — section components for the automation landing.
   Loaded AFTER styles.css. Reuses the same tokens.
   ============================================================ */

/* Shared centered section head */
.section-head.center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center p { margin-left: auto; margin-right: auto; }

/* ── Integration marquee ───────────────────────────── */
.marquee {
  position: relative; overflow: hidden; padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 28px; width: max-content;
  animation: marquee-scroll 42s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em;
  color: var(--text-2); white-space: nowrap;
}
.marquee-sep { color: rgba(249,115,22,.45); font-size: 9px; }

/* ── Tabbed feature showcase ───────────────────────── */
.showcase-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 44px auto 40px; max-width: 880px; }
.showcase-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13.5px; font-weight: 650; color: var(--text-2); letter-spacing: -0.01em;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.showcase-tab svg { width: 15px; height: 15px; }
.showcase-tab:hover { color: var(--text-1); }
.showcase-tab[aria-selected="true"] { color: #fff; border-color: rgba(249,115,22,.4); background: rgba(249,115,22,.08); }
.showcase-tab[aria-selected="true"] svg { color: var(--primary-400); }

.showcase-panel { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.showcase-copy .eyebrow { margin-bottom: 14px; }
.showcase-copy h3 { font-family: var(--font-display); font-weight: 720; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.028em; color: #fff; line-height: 1.12; }
.showcase-copy p { margin-top: 16px; color: var(--text-2); font-size: 1.02rem; line-height: 1.65; }
.showcase-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.showcase-list li { position: relative; padding-left: 28px; color: var(--text-1); font-size: 0.98rem; line-height: 1.45; }
.showcase-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 6px;
  background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.3);
}
.showcase-list li::after { content: ""; position: absolute; left: 6px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-400); }

/* node-inspector mock (right side of showcase) */
.inspector {
  border-radius: var(--radius-lg); background: rgba(16,18,31,.92);
  border: 1px solid var(--border); box-shadow: var(--shadow-elevated);
  overflow: hidden;
}
.inspector-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.inspector-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.inspector-bar .dot.live { background: var(--primary-500); box-shadow: 0 0 8px rgba(249,115,22,.7); }
.inspector-bar .name { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-left: 4px; }
.inspector-body { padding: 22px; }
.inspector-node {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  border-radius: 14px; border: 1px solid rgba(249,115,22,.3); background: rgba(249,115,22,.06);
}
.inspector-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  color: var(--primary-400); background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.25); }
.inspector-ic svg { width: 21px; height: 21px; }
.inspector-kind { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--primary-300); }
.inspector-title { font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.inspector-rows { margin-top: 18px; display: flex; flex-direction: column; gap: 1px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.inspector-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); font-family: var(--font-mono); font-size: 12px; }
.inspector-row .k { color: var(--text-3); }
.inspector-row .v { color: var(--text-1); }
.inspector-row .v.ok { color: var(--success-500); }
.inspector-row .v.accent { color: var(--primary-300); }

/* ── Stat row ──────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; }
.stat { padding: 26px 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.6rem); letter-spacing: -0.03em; color: #fff; line-height: 1; }
.stat-num b { color: var(--primary-500); }
.stat-label { margin-top: 10px; color: var(--text-2); font-size: 0.92rem; line-height: 1.45; }

/* ── Agent activity-log section ────────────────────── */
.agent-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; align-items: center; }
.agent-chips { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.agent-chip { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); padding: 6px 11px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); }
.agent-chip.on { color: var(--primary-300); border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.07); }

.log-panel { border-radius: var(--radius-lg); background: #0a0b14; border: 1px solid var(--border); box-shadow: var(--shadow-elevated); overflow: hidden; }
.log-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.log-head .who { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.log-head .who b { color: var(--primary-300); font-weight: 600; }
.log-head .sess { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.log-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.log-line { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.4; color: var(--text-2); display: flex; gap: 10px; }
.log-line .tag { color: var(--primary-400); flex-shrink: 0; }
.log-line .tag.ok { color: var(--success-500); }
.log-cursor { color: var(--primary-400); }

/* ── Code / API section ────────────────────────────── */
.api-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; align-items: center; }
.code-card { border-radius: var(--radius-lg); background: #0a0b14; border: 1px solid var(--border); box-shadow: var(--shadow-elevated); overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.code-head .file { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.code-head .badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-300); padding: 3px 9px; border-radius: var(--radius-full); border: 1px solid rgba(249,115,22,.3); background: rgba(249,115,22,.07); }
.code-card pre { margin: 0; padding: 18px 20px; overflow-x: auto; }
.code-card code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--text-1); background: none; border: 0; padding: 0; }
.tok-key { color: var(--primary-300); }
.tok-str { color: var(--secondary-warm); }
.tok-num { color: #8fb8ff; }
.tok-mut { color: var(--text-3); }
.client-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.client-pill { font-size: 13px; font-weight: 600; color: var(--text-1); padding: 8px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); }

/* ── Capabilities grid (3-col) ─────────────────────── */
.cap-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ── Personas tabs ─────────────────────────────────── */
.persona-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 44px 0 36px; }
.persona-tab {
  padding: 10px 18px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 14px; font-weight: 650; color: var(--text-2); letter-spacing: -0.01em;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.persona-tab:hover { color: var(--text-1); }
.persona-tab[aria-selected="true"] { color: #fff; border-color: rgba(249,115,22,.4); background: rgba(249,115,22,.08); }
.persona-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.persona-copy h3 { font-family: var(--font-display); font-weight: 720; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.028em; color: #fff; line-height: 1.15; }
.persona-copy p { margin-top: 16px; color: var(--text-2); font-size: 1.02rem; line-height: 1.65; }
.persona-list { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.persona-list li { position: relative; padding-left: 26px; color: var(--text-1); font-size: 0.97rem; line-height: 1.45; }
.persona-list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--primary-500); transform: rotate(45deg); }
.persona-art {
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: radial-gradient(600px 300px at 70% 0%, rgba(249,115,22,.10), transparent 60%), rgba(16,18,31,.9);
  min-height: 300px; display: grid; place-items: center; padding: 28px; box-shadow: var(--shadow-soft);
}
.persona-art .glyph { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; color: var(--primary-400); background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.22); }
.persona-art .glyph svg { width: 42px; height: 42px; }

/* ── Pricing ───────────────────────────────────────── */
.pricing-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.price-card { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--border); background: rgba(16,18,31,.9); padding: 30px 26px; box-shadow: var(--shadow-soft); }
.price-card.featured { border-color: rgba(249,115,22,.4); box-shadow: var(--shadow-soft), 0 0 36px rgba(249,115,22,.10); }
.price-flag { position: absolute; top: -11px; left: 26px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; padding: 4px 11px; border-radius: var(--radius-full); background: linear-gradient(135deg,#f97316,#ea580c); box-shadow: var(--cta-shadow); }
.price-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-300); }
.price-amount { margin-top: 14px; display: flex; align-items: baseline; gap: 6px; }
.price-amount .num { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.price-amount .per { color: var(--text-3); font-size: 0.9rem; }
.price-desc { margin-top: 12px; color: var(--text-2); font-size: 0.95rem; line-height: 1.55; min-height: 42px; }
.price-features { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.price-features li { position: relative; padding-left: 28px; color: var(--text-1); font-size: 0.94rem; line-height: 1.45; }
.price-features li svg { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; color: var(--primary-400); }
.price-cta { margin-top: 24px; }
.price-cta .btn { width: 100%; justify-content: center; }
.price-note { margin-top: 26px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

/* ── Contact band ──────────────────────────────────── */
.contact-band { text-align: center; }
.social-links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.social-link { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-1); font-size: 14px; font-weight: 600; transition: border-color var(--dur-fast), color var(--dur-fast); }
.social-link svg { width: 16px; height: 16px; color: var(--primary-400); }
.social-link:hover { border-color: rgba(249,115,22,.4); color: #fff; }
.contact-meta { margin-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 940px) {
  .showcase-panel, .agent-split, .api-split, .persona-panel { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .agent-split .log-panel, .api-split .code-card { order: 2; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
}