/* css/home.css — landing page */

main { overflow-x: hidden; }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */

.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-6);
  position: relative;
  display: grid;
  gap: var(--space-7);
  text-align: center;
}

.hero-copy { display: flex; flex-direction: column; align-items: center; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--text-1);
  margin-bottom: var(--space-5);
}
.hero-title em {
  font-style: normal;
  color: var(--accent);
}

/* Thought cycle: fixed-height window, absolutely-positioned words
   crossing through it. Width morphs to fit whichever word is current. */
.hero-thought-slot {
  position: relative;
  display: inline-block;
  height: 1.1em;
  overflow: hidden;
  vertical-align: -0.08em;
  transition: width 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-thought-word {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-style: normal;
  white-space: nowrap;
  transform: translateY(0);
  opacity: 1;
}
/* Current word leaving: slides straight up out of the slot and fades
   as it goes, like the top item of a queue moving off. */
.hero-thought-word.is-outgoing {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1), opacity 320ms ease-in;
}
/* Next word waiting: parked directly below the slot, ready to rotate up. */
.hero-thought-word.is-incoming {
  transform: translateY(100%);
  opacity: 1;
}
/* Next word taking the spot: rotates up into the now-empty position. */
.hero-thought-word.is-entering {
  transform: translateY(0);
  opacity: 1;
  transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-thought-slot { transition: none; }
  .hero-thought-word { position: static; }
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--text-2);
  max-width: 520px;
  margin: 0 auto var(--space-6);
  line-height: 1.55;
}

@media (min-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 480px) minmax(0, 560px);
    align-items: center;
    text-align: left;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .hero-copy { align-items: flex-start; }
  .hero-subtitle { margin-left: 0; }
  .hero-actions { justify-content: flex-start; }
  .hero-stage { justify-self: end; margin: 0; transform: translateY(20px); }
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.hero-cta-primary {
  padding: var(--space-3) var(--space-6);
  background: var(--text-1);
  color: var(--bg-base);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-base);
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.hero-cta-primary:hover { background: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.hero-cta-primary:active { background: var(--accent-hover); transform: translateY(0); box-shadow: var(--shadow-sm); }
.hero-cta-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.hero-cta-secondary {
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-1);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-base);
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.hero-cta-secondary:hover { background: var(--bg-subtle); border-color: var(--text-3); }
.hero-cta-secondary:active { background: var(--border); }
.hero-cta-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.hero-note {
  font-size: var(--text-xs);
  color: var(--text-4);
  margin-bottom: var(--space-8);
}

/* ── Hero stage: a real, simulated chat interface ──
   width is fixed (not shrink-to-fit) so the box's size never depends
   on the width of whatever text/attachment chips happen to be typed
   or shown inside it during the animation loop. */
.hero-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.hero-preview-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 500px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.hero-stage.is-ready .hero-preview-window {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.hero-preview-avatar {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  flex-shrink: 0;
}
.hero-preview-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.hero-preview-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-4);
}

/* Message rows */
.hero-msg-row {
  display: flex;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.hero-msg-row.is-user { justify-content: flex-end; }
.hero-msg-row.is-assistant { justify-content: flex-start; }
.hero-msg-row.is-visible { opacity: 1; transform: translateY(0); }

.hero-msg-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 88%;
}
.hero-msg-stack.is-user { align-items: flex-end; }
.hero-msg-stack.is-assistant { align-items: flex-start; }

.hero-preview-msg {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.hero-preview-msg.is-user { background: var(--text-1); color: var(--bg-base); }
.hero-preview-msg.is-assistant {
  background: var(--bg-subtle);
  color: var(--text-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}
.hero-preview-msg.is-assistant.is-visible { opacity: 1; transform: translateY(0); }

/* Attachments attach to a message but read as their own physical object:
   a small card strip sitting just above the bubble, not inside it. */
.hero-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.hero-msg-attachments:empty { display: none; }

/* ── Thinking status: fully outside the message bubble ── */
.hero-thinking-status {
  display: none;
  align-items: center;
  min-height: 1.6em;
  padding: 2px 2px;
}
.hero-thinking-status.is-visible { display: inline-flex; }

.hero-thinking {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
.hero-thinking.is-visible { display: inline-flex; }
.hero-thinking-dots { display: inline-flex; gap: 4px; }
.hero-thinking-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-4);
  animation: hero-dot-bounce 1200ms ease-in-out infinite;
}
.hero-thinking-dot:nth-child(2) { animation-delay: 150ms; }
.hero-thinking-dot:nth-child(3) { animation-delay: 300ms; }
@keyframes hero-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.hero-thinking-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-weight: 500;
}

.hero-thought-for {
  display: none;
  font-size: var(--text-xs);
  color: var(--text-4);
  font-weight: 500;
  font-style: italic;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.hero-thought-for.is-visible {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0);
}

.type-text { white-space: pre-wrap; }

.type-caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 2px;
  background: var(--accent-2);
  vertical-align: text-bottom;
  opacity: 0;
}
.type-caret.is-active {
  opacity: 1;
  animation: caret-blink 700ms step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-preview-doc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-1);
  width: max-content;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 450ms var(--ease), transform 450ms var(--ease), background 300ms var(--ease), border-color 300ms var(--ease);
}
.hero-preview-doc i { color: var(--accent); }
.hero-preview-doc.is-visible { opacity: 1; transform: translateY(0); }
.hero-preview-doc.is-downloaded {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.hero-preview-doc.is-pulsing { animation: hero-doc-pulse 420ms var(--ease); }
@keyframes hero-doc-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ── Composer ──
   The attachment strip is a visually distinct object that sits above
   and slightly overlaps the input field — clipped to it, not merged
   into it, the way a real chat composer treats attachments. */
.hero-composer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: var(--space-3) var(--space-4) var(--space-3);
  background: var(--bg-elevated);
  box-sizing: border-box;
}

.hero-composer-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 8px 12px;
  margin-bottom: -8px;
  position: relative;
  z-index: 1;
}
.hero-composer-attachments:empty { display: none; padding: 0; margin-bottom: 0; }

.hero-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  opacity: 0;
  transform: scale(0.9);
  animation: hero-chip-in 300ms var(--ease) forwards;
}
.hero-attachment-chip i { color: var(--accent); font-size: 12px; }
@keyframes hero-chip-in {
  to { opacity: 1; transform: scale(1); }
}

/* The actual typing surface — its own bordered container so it reads
   clearly as "the input", distinct from the attachment strip above it.
   z-index raised above .hero-composer-attachments (z-index: 1) so the
   whole input area — including the quality dropdown menu that lives
   inside it — stacks ABOVE the attachment chip strip, not below it. */
.hero-composer-inputwrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  padding: var(--space-3) var(--space-3) var(--space-2);
  z-index: 2;
}

.hero-composer-field {
  min-height: 1.4em;
  font-size: var(--text-sm);
  color: var(--text-1);
  padding-bottom: var(--space-3);
}
.hero-composer-field:empty::before {
  content: 'Ask Cognita anything…';
  color: var(--text-4);
}

.hero-composer-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-composer-attach {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 14px;
  flex-shrink: 0;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.hero-composer-attach.is-active { background: var(--accent-subtle); border-color: var(--accent-2); color: var(--accent); }

/* ── Quality dropdown ──
   Collapsed: shows only the current selection as a pill trigger.
   Expanded: reveals the option list above the trigger; picking one
   collapses the menu back down to the pill. */
.hero-quality-dropdown {
  position: relative;
  margin-left: auto;
}

.hero-quality-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.hero-quality-dropdown.is-open .hero-quality-trigger {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}
.hero-quality-trigger i {
  font-size: 10px;
  color: var(--text-3);
  transition: transform 200ms var(--ease);
}
.hero-quality-dropdown.is-open .hero-quality-trigger i { transform: rotate(180deg); }

.hero-quality-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 132px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  z-index: 5;
}
.hero-quality-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.hero-quality-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.hero-quality-menu-item i { font-size: 11px; color: var(--accent); opacity: 0; }
.hero-quality-menu-item.is-current { color: var(--text-1); font-weight: 600; }
.hero-quality-menu-item.is-current i { opacity: 1; }

.hero-composer-send {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--text-1);
  color: var(--bg-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.hero-composer-send.is-active { transform: scale(0.88); opacity: 0.85; }

/* ── File picker modal ──
   Fixed structural fix for the mobile overflow bug: grid columns use
   minmax(0, 1fr) rather than a bare 1fr (which lets a long filename's
   intrinsic min-content width push the track — and the whole modal —
   wider than its container). Items also get min-width: 0 so their own
   ellipsis rule can actually take effect instead of forcing growth. */
.hero-file-modal {
  position: absolute;
  left: var(--space-4); right: var(--space-4);
  bottom: 66px;
  max-width: calc(100% - (var(--space-4) * 2));
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  z-index: 4;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.hero-file-modal.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hero-file-modal-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--space-3);
}
.hero-file-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  width: 100%;
  box-sizing: border-box;
}
.hero-file-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.hero-file-item i:first-child { color: var(--accent); font-size: 15px; flex-shrink: 0; }
.hero-file-item span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-file-check {
  margin-left: auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-file-check i { opacity: 0; font-size: 9px; color: #fff; }
/* .hero-file-item span (above) matches EVERY span inside the item,
   including this checkmark circle, and — because it's a class+element
   selector — it's more specific than plain .hero-file-check, so it was
   winning: overriding the circle's fixed 14x14 size with flex:1 and
   stretching it into a wide pill that painted over the filename. This
   rule targets the checkmark specifically (two classes = higher
   specificity than .hero-file-item span) so it keeps its own fixed
   size no matter what the generic span rule says. */
.hero-file-item .hero-file-check {
  flex: none;
  width: 14px;
  height: 14px;
}
.hero-file-item.is-selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.hero-file-item.is-selected .hero-file-check {
  background: var(--accent);
  border-color: var(--accent);
}
.hero-file-item.is-selected .hero-file-check i { opacity: 1; }

.hero-file-modal-add {
  width: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--text-1);
  color: var(--bg-base);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
}

/* Cursor that performs every user action */
.hero-cursor {
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  opacity: 0;
  transition: left 900ms var(--ease), top 900ms var(--ease), opacity 250ms var(--ease);
  z-index: 6;
}
.hero-cursor.is-visible { opacity: 1; }
.hero-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(23, 23, 23, 0.25)); }
.hero-cursor.is-clicking svg { animation: hero-cursor-tap 300ms var(--ease); }
@keyframes hero-cursor-tap {
  0% { transform: scale(1); }
  40% { transform: scale(0.82); }
  100% { transform: scale(1); }
}
.hero-cursor-ring {
  position: absolute;
  left: 20%; top: 15%;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
}
.hero-cursor.is-clicking .hero-cursor-ring {
  animation: hero-cursor-pulse 550ms ease-out;
}
@keyframes hero-cursor-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-thinking-status { display: none !important; }
  .type-caret { display: none !important; }
  .hero-preview-window { opacity: 1; transform: none; }
  .hero-preview-doc { transition: none; }
  .hero-preview-msg.is-assistant { opacity: 1 !important; transform: none !important; }
  .hero-cursor { display: none !important; }
  .hero-file-modal { display: none !important; }
}

@media (max-width: 620px) {
  .hero-preview-window { height: 520px; }
}

@media (max-width: 380px) {
  .hero-file-modal-grid { grid-template-columns: 1fr; }
  .hero-quality-menu { min-width: 118px; }
}

/* ═══════════════════════════════════════════════
   SECTION LABELS
═══════════════════════════════════════════════ */

.section-eyebrow {
  display: block;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--text-1);
  margin-bottom: var(--space-3);
}
.section-subtitle {
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-base);
  max-width: 480px;
  margin: 0 auto var(--space-7);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════
   PRODUCT STORY
═══════════════════════════════════════════════ */

.story {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}

.story-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.story-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.story-row.is-revealed { opacity: 1; transform: translateY(0); }
.story-row--reverse { direction: rtl; }
.story-row--reverse > * { direction: ltr; }

.story-copy h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-1);
  line-height: 1.25;
  margin: var(--space-2) 0 var(--space-3);
}
.story-copy p {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.6;
  max-width: 420px;
}
.story-row .section-eyebrow { text-align: left; margin-bottom: 0; }

.story-visual {
  position: relative;
  height: 220px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ── Understand: read the document, then surface what was pulled out
   of it. Runs on a loop — draws in, holds, clears, and redraws — driven
   entirely by JS toggling .is-active on/off (see wireStoryVisuals). ── */
.uv-doc {
  position: absolute;
  top: 26px; left: 50%;
  transform: translateX(-50%);
  width: 68%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.uv-doc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4);
  margin-bottom: 2px;
}
.uv-doc-header i { color: var(--accent); font-size: 12px; }

.uv-line {
  position: relative;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  width: 100%;
  overflow: hidden;
}
.uv-line--title { width: 55%; height: 12px; }
.uv-line--short { width: 70%; }

.uv-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.story-visual[data-anim="understand"].is-active .uv-line::after {
  animation: uv-focus-sweep 900ms ease forwards;
}
.story-visual[data-anim="understand"].is-active .uv-doc-header i { animation: uv-focus-sweep 900ms ease forwards; }
.story-visual[data-anim="understand"].is-active .uv-line:nth-child(2)::after { animation-delay: 200ms; }
.story-visual[data-anim="understand"].is-active .uv-line:nth-child(3)::after { animation-delay: 800ms; }
.story-visual[data-anim="understand"].is-active .uv-line:nth-child(4)::after { animation-delay: 1400ms; }
.story-visual[data-anim="understand"].is-active .uv-line:nth-child(5)::after { animation-delay: 2000ms; }

@keyframes uv-focus-sweep {
  0%   { opacity: 0;    transform: scaleX(0); }
  35%  { opacity: 1;    transform: scaleX(1); }
  65%  { opacity: 1;    transform: scaleX(1); }
  100% { opacity: 0.28; transform: scaleX(1); }
}

.uv-tags {
  position: absolute;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 78%;
}
.uv-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-1);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.uv-tag i { color: var(--accent); font-size: 11px; }
.story-visual[data-anim="understand"].is-active .uv-tag {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: calc(2600ms + (var(--td) * 220ms));
}

/* ── Explore: nodes orbit the center node, and each node also tumbles
   on its own independent, unsynced cycle — so every card drifts through
   a full rotation and periodically settles upright on its own timing,
   never in lockstep with the others. ── */
.ev-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 164px; height: 164px;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--border-strong);
  border-radius: 50%;
  pointer-events: none;
}

.ev-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  opacity: 0;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.story-visual[data-anim="explore"].is-active .ev-center {
  opacity: 1;
  transition-delay: 100ms;
}

.ev-orbit-item {
  --radius: 82px;
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 1px;
  transform: rotate(var(--offset));
  animation: ev-orbit-spin 22s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--offset) / 360deg * -22s);
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.story-visual[data-anim="explore"].is-active .ev-orbit-item {
  opacity: 1;
  animation-play-state: running;
  transition-delay: 500ms;
}

.ev-orbit-line {
  position: absolute;
  left: 0; top: 0;
  width: var(--radius);
  height: 1.5px;
  background: var(--accent-2);
  transform-origin: 0 0;
}

.ev-orbit-node {
  position: absolute;
  left: var(--radius); top: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: ev-orbit-spin-reverse 22s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--offset) / 360deg * -22s);
}
.story-visual[data-anim="explore"].is-active .ev-orbit-node {
  animation-play-state: running;
}

/* Independent tumble, applied on a nested element so it stacks with,
   rather than fights, the counter-rotation that keeps orbit position
   stable. Different duration per card = organic, non-repeating drift.
   All three cards now share --tumble-dir: -1 (set inline in the HTML),
   matching the direction that was already reading correctly on the
   "Pricing shift" card — with the counter-rotation the other direction
   was partially cancelling itself out and looked closer to static. */
.ev-orbit-node-inner {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  animation: ev-tumble var(--tumble-dur, 34s) linear infinite;
  animation-play-state: paused;
}
.story-visual[data-anim="explore"].is-active .ev-orbit-node-inner {
  animation-play-state: running;
}

@keyframes ev-orbit-spin {
  from { transform: rotate(var(--offset)); }
  to   { transform: rotate(calc(var(--offset) + 360deg)); }
}
@keyframes ev-orbit-spin-reverse {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes ev-tumble {
  from { transform: rotate(0deg); }
  to   { transform: rotate(calc(360deg * var(--tumble-dir, 1))); }
}

/* ── Think: three different scenarios cycle automatically, each option
   resolving one at a time. Visibility is now controlled directly by JS
   adding/removing .is-shown / .is-resolved / .is-picked on each option
   (built fresh per scenario), rather than by static nth-child delays —
   that's what makes it possible to swap in new scenario text and replay
   cleanly. Options stay at matching scale; the picked option is only
   distinguished by colour/weight, never a larger font-size. ── */
.story-visual--think {
  height: 250px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: var(--space-6) 0;
  box-sizing: border-box;
}

.tv-list {
  width: 78%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tv-option {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--text-3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 450ms var(--ease), transform 450ms var(--ease), border-color 450ms var(--ease), color 450ms var(--ease), background 450ms var(--ease);
}
.tv-option.is-shown {
  opacity: 1;
  transform: translateY(0);
}
.tv-option.is-picked {
  font-weight: 600;
  border-color: var(--accent);
  color: var(--text-1);
  background: var(--accent-subtle);
}
.tv-option.is-picked .tv-text i { color: var(--accent); flex-shrink: 0; font-size: 1em; vertical-align: -0.05em; }

.tv-loader {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 8px;
  opacity: 1;
  transition: opacity 250ms var(--ease), width 250ms var(--ease), margin 250ms var(--ease);
}
.tv-loader span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-4);
  opacity: 0.5;
  animation: tv-loader-bounce 900ms ease-in-out infinite;
}
.tv-loader span:nth-child(2) { animation-delay: 120ms; }
.tv-loader span:nth-child(3) { animation-delay: 240ms; }
@keyframes tv-loader-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.tv-text {
  font-size: 1em;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 350ms var(--ease);
}

.tv-option.is-resolved .tv-loader {
  opacity: 0;
  width: 0;
  margin-right: 0;
}
.tv-option.is-resolved .tv-text {
  opacity: 1;
}

/* ── Create: notes converge toward the document, then it assembles
   with a small confident "pop" and confirms with a check. A short
   while later a hand reaches in, takes the finished document, and
   carries it off — then the whole visual clears and replays. ── */
.cv-notes {
  position: absolute;
  left: 16%; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cv-note {
  width: 64px;
  padding: 6px 0;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 10px;
  color: var(--text-4);
  opacity: 0;
  transform: translate(0, 0);
}
.cv-note:nth-child(2) { margin-left: 14px; }
.story-visual[data-anim="create"].is-active .cv-note {
  animation: cv-note-converge 2600ms var(--ease) forwards;
  animation-delay: calc(var(--n) * 120ms + 150ms);
}

@keyframes cv-note-converge {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  20%  { opacity: 1; transform: translate(0, 0) scale(1); }
  70%  { opacity: 1; transform: translate(46px, 0) scale(0.9); }
  100% { opacity: 0; transform: translate(92px, 0) scale(0.5); }
}

.cv-doc {
  position: absolute;
  right: 16%; top: 50%;
  transform: translateY(-50%) scale(0.4);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-1);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cv-doc i:first-child { color: var(--accent); }
.cv-doc-check {
  color: var(--accent) !important;
  font-size: 13px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.story-visual[data-anim="create"].is-active .cv-doc {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  transition-delay: 1900ms;
}
.story-visual[data-anim="create"].is-active .cv-doc-check {
  opacity: 1;
  transform: scale(1);
  transition-delay: 2500ms;
}

/* Hand: hidden and off to the right by default. .is-grabbing (added by
   JS a couple of seconds after the document finishes assembling) plays
   a short keyframe animation that brings it in, holds briefly over the
   document (the "grab"), then carries both the hand and the document
   off together while fading out — after which JS resets everything for
   the next loop. */
.cv-hand {
  position: absolute;
  right: 16%; top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--text-1);
  opacity: 0;
  transform: translate(60px, -50%);
  pointer-events: none;
  z-index: 3;
}
.story-visual[data-anim="create"].is-grabbing .cv-hand {
  animation: cv-hand-grab 1300ms ease-in-out forwards;
}
@keyframes cv-hand-grab {
  0%   { opacity: 0; transform: translate(60px, -50%); }
  22%  { opacity: 1; transform: translate(6px, -50%); }
  55%  { opacity: 1; transform: translate(6px, -50%); }
  100% { opacity: 0; transform: translate(190px, -50%); }
}
.story-visual[data-anim="create"].is-grabbing .cv-doc {
  animation: cv-doc-taken 1300ms ease-in-out forwards;
}
@keyframes cv-doc-taken {
  0%   { opacity: 1; transform: translateY(-50%) scale(1); }
  55%  { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) translateX(190px) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .story-row { opacity: 1; transform: none; }
  .uv-line::after, .uv-doc-header i { opacity: 0.28 !important; transform: scaleX(1) !important; animation: none !important; }
  .uv-tag { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cv-note { opacity: 1 !important; transform: none !important; animation: none !important; }
  .cv-doc { opacity: 1 !important; transform: translateY(-50%) scale(1) !important; transition: none !important; }
  .cv-doc-check { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cv-hand { display: none !important; }

  .ev-center { opacity: 1 !important; transition: none !important; }
  .ev-orbit-item {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    transform: rotate(var(--offset)) !important;
  }
  .ev-orbit-node {
    animation: none !important;
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--offset))) !important;
  }
  .ev-orbit-node-inner { animation: none !important; }

  .tv-option { transform: none; opacity: 1 !important; transition: none !important; }
  .tv-loader { display: none !important; }
  .tv-text { opacity: 1 !important; transition: none !important; }
}

@media (max-width: 780px) {
  .story-row, .story-row--reverse { grid-template-columns: 1fr; direction: ltr; }
  .story-visual { height: 200px; }
  .story-visual--think { height: 230px; }
  .story-copy p { max-width: none; }
  .ev-ring { width: 130px; height: 130px; }
  .ev-orbit-item { --radius: 64px; }
}

/* ═══════════════════════════════════════════════
   CAPABILITIES
═══════════════════════════════════════════════ */

.capabilities {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}

.capability-grid {
  margin-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.capability-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  opacity: 0;
  transform: translateY(10px);
}
.capability-card.is-revealed { opacity: 1; transform: translateY(0); }
.capability-card:nth-child(1) { transition-delay: 0ms; }
.capability-card:nth-child(2) { transition-delay: 50ms; }
.capability-card:nth-child(3) { transition-delay: 100ms; }
.capability-card:nth-child(4) { transition-delay: 150ms; }
.capability-card:nth-child(5) { transition-delay: 200ms; }
.capability-card:nth-child(6) { transition-delay: 250ms; }

.capability-card i {
  font-size: 1.15rem;
  color: var(--accent);
  grid-row: 1 / 3;
  padding-top: 2px;
}
.capability-card h3 { font-size: var(--text-lg); font-weight: 600; color: var(--text-1); margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.capability-card p { font-size: var(--text-sm); color: var(--text-3); line-height: 1.6; max-width: 480px; }

/* ═══════════════════════════════════════════════
   USE CASES
═══════════════════════════════════════════════ */

.use-cases {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}

.use-case-row {
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 550ms var(--ease), transform 550ms var(--ease);
}
.use-case-row:nth-child(even) { transform: translateX(24px); }
.use-case-row.is-revealed { opacity: 1; transform: translateX(0); }
.use-case-row:last-child { border-bottom: none; }

.use-case-tag {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.use-case-row h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.use-case-row p { font-size: var(--text-base); color: var(--text-2); line-height: 1.6; max-width: 560px; }

/* ═══════════════════════════════════════════════
   TRUST
   Each item's paragraph lives inside a height:0/overflow:hidden
   wrapper. Height is only ever animated to the size of content that
   has actually arrived — there is no reserved space for items that
   haven't started typing yet.
═══════════════════════════════════════════════ */

.trust {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.trust-item {
  text-align: left;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 450ms var(--ease), transform 450ms var(--ease);
}
.trust-item.is-revealed { opacity: 1; transform: translateY(0); }
.trust-item i { font-size: 1.1rem; color: var(--accent); margin-bottom: var(--space-3); display: block; }

.trust-item-inner {
  height: 0;
  overflow: hidden;
  transition: height 450ms var(--ease);
}

.trust-item p { font-size: var(--text-sm); color: var(--text-3); line-height: 1.6; }
.trust-item p.is-typing::after {
  content: '';
  display: inline-block;
  width: 1px; height: 1em;
  margin-left: 2px;
  background: var(--accent-2);
  vertical-align: text-bottom;
  animation: caret-blink 700ms step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .trust-item { opacity: 1; transform: none; }
  .trust-item-inner { height: auto !important; transition: none; }
  .trust-item p.is-typing::after { display: none; }
}

/* ═══════════════════════════════════════════════
   PRICING TEASER + FINAL CTA
═══════════════════════════════════════════════ */

.pricing-teaser {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  text-align: center;
}
.pricing-teaser-cta {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-weight: 600;
  color: var(--text-1);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.pricing-teaser-cta:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

/* ═══════════════════════════════════════════════
   FAQ
   The accordion behavior itself (.faq-list / .faq-item / .faq-question /
   .faq-panel / .faq-contact) lives in shared.css since pricing.html
   reuses the exact same component — this just sets this section's own
   width and spacing on the homepage.
═══════════════════════════════════════════════ */
.faq {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}
.faq .faq-list {
  margin-top: var(--space-6);
}

.final-cta {
  position: relative;
  background: #171717;
  color: #f3f3ef;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  margin: var(--space-7) var(--space-5) var(--space-8);
  border-radius: var(--radius-lg);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.final-cta h2 {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #f3f3ef;
  margin-bottom: var(--space-2);
}
.final-cta p {
  position: relative;
  color: rgba(243, 243, 239, 0.64);
  margin-bottom: var(--space-5);
}
.final-cta .hero-cta-primary {
  position: relative;
  display: inline-block;
  background: var(--accent);
  color: #fff;
}
.final-cta .hero-cta-primary:hover { background: var(--accent-hover); opacity: 1; }

@media (max-width: 860px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .trust-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .capability-card { grid-template-columns: 32px 1fr; column-gap: var(--space-3); }
  .capability-card i { font-size: 1rem; }
}

/* ── Component type roles are defined once, at their point of use
   above. (A duplicate override block that fought those definitions —
   including making final-cta text invisible on its own dark panel —
   was removed here.) ── */