/* ============================================================
   Referenz-Showcases (Startseite, Sektion "Referenzen")
   planchi: alles unter .pc gekapselt
   RIVCA:   alles unter .rv gekapselt
   Animationen: wwwroot/js/showcase.js
   ============================================================ */

/* ---------- planchi ---------- */
.pc {
  --pc-bg: #0c0c10;
  --pc-panel: #101015;
  --pc-panel-2: #15151c;
  --pc-line: rgba(255,255,255,.07);
  --pc-line-2: rgba(255,255,255,.12);
  --pc-text: #ededed;
  --pc-muted: #8b8b96;
  --pc-dim: #5c5c66;
  --pc-teal: #2dd4bf;
  --pc-cyan: #30daf7;          /* Akzent aus der planchi-Bildmarke */
  --pc-violet: #a78bfa;        /* KI / Agent */
  --pc-green: #22c55e;
  --pc-sans: var(--font-sans);
  --pc-serif: var(--font-serif);
  --pc-mono: var(--font-mono);

  max-width: 1180px; margin: 0 auto; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center;
  padding: 56px 48px; border-radius: 24px; border: 1px solid var(--pc-line);
  background:
    radial-gradient(600px 380px at 18% 100%, rgba(167,139,250,.10), transparent 70%),
    radial-gradient(520px 360px at 88% 10%, rgba(48,218,247,.07), transparent 70%),
    var(--pc-bg);
  color: var(--pc-text); font-family: var(--pc-sans);
}
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }

/* ---------- linke Spalte ---------- */
.pc-tags { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.pc-tag { font: 500 11px/1 var(--pc-mono); letter-spacing: .14em; text-transform: uppercase; }
.pc-tag--pill { color: var(--pc-teal); border: 1px solid rgba(45,212,191,.45); padding: 7px 12px; border-radius: 999px; }
.pc-tag--plain { color: var(--pc-muted); }
.pc-title { margin: 0; display: flex; align-items: center; gap: .26em; font: 600 clamp(44px, 6vw, 64px)/1 var(--pc-sans); letter-spacing: -.035em; }
.pc-logo { flex: none; width: auto; height: .82em; }
.pc-sub { margin: 10px 0 20px; font: italic 400 clamp(22px, 2.4vw, 28px)/1.2 var(--pc-serif); color: #d6d6dc; }
.pc-lead { margin: 0; color: #a1a1aa; font-size: 16px; line-height: 1.65; max-width: 520px; }
.pc-list { list-style: none; margin: 26px 0 30px; padding: 24px 0 0; border-top: 1px solid var(--pc-line); display: grid; gap: 13px; }
.pc-list li { display: flex; gap: 12px; font-size: 15px; color: #e4e4e7; }
.pc-list li::before { content: "+"; color: var(--pc-teal); font-family: var(--pc-mono); }
.pc-cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px; border: 1px solid var(--pc-line-2);
          color: var(--pc-text); text-decoration: none; font-weight: 500; transition: border-color .2s, background .2s; }
.pc-cta:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); }
.pc-cta span { transition: transform .2s; }
.pc-cta:hover span { transform: translate(2px,-2px); }

/* ---------- App-Fenster ---------- */
.pc-win { position: relative; border-radius: 16px; border: 1px solid var(--pc-line-2); background: var(--pc-panel); overflow: hidden;
          box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset; transition: opacity .6s; }
.pc-win.is-fading { opacity: 0; }
.pc-bar-top { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--pc-line); }
.pc-dots { display: flex; gap: 6px; } .pc-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2a2a31; }
.pc-crumb { font: 400 12px var(--pc-mono); color: var(--pc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-crumb b { color: var(--pc-text); font-weight: 500; }
.pc-tabs { margin-left: auto; display: flex; gap: 4px; }
.pc-tabs span { font: 500 11px var(--pc-mono); color: var(--pc-dim); padding: 5px 9px; border-radius: 6px; transition: color .3s, background .3s; }
.pc-tabs span.is-active { color: var(--pc-text); background: rgba(255,255,255,.07); }

/* Gantt */
.pc-gantt { --label: 136px; position: relative; padding: 14px 16px 6px; }
.pc-axis { display: grid; grid-template-columns: var(--label) 1fr; font: 400 10.5px var(--pc-mono); color: var(--pc-dim); height: 20px; }
.pc-months { display: grid; grid-template-columns: repeat(6, 1fr); }
.pc-grid { position: absolute; top: 34px; bottom: 6px; left: calc(16px + var(--label)); right: 16px; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; }
.pc-grid i { border-left: 1px dashed rgba(255,255,255,.05); }
.pc-today { position: absolute; top: 0; bottom: 0; left: var(--t, 0%); width: 1px; background: rgba(48,218,247,.55); opacity: 0; transition: opacity .4s, left 2.4s cubic-bezier(.4,0,.2,1); }
.pc-today::before { content: "heute"; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font: 500 9.5px/1 var(--pc-mono); color: var(--pc-cyan); background: var(--pc-panel); padding: 3px 5px; border: 1px solid rgba(48,218,247,.4); border-radius: 999px; }
.pc-today.is-on { opacity: 1; }

.pc-row { display: grid; grid-template-columns: var(--label) 1fr; align-items: center; height: 40px; border-bottom: 1px dashed var(--pc-line);
          opacity: .18; transform: translateY(5px); transition: opacity .45s, transform .45s; }
.pc-row.is-in { opacity: 1; transform: none; }
.pc-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 10px; }
.pc-label b { font: 500 12.5px var(--pc-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-label small { font: 400 10px var(--pc-mono); color: var(--pc-dim); transition: color .3s; }
.pc-label small.is-hot { color: var(--pc-violet); }
.pc-track { position: relative; height: 100%; }
.pc-gbar { position: absolute; top: 50%; left: var(--l); width: var(--w); height: 10px; margin-top: -5px; border-radius: 999px; overflow: hidden;
           border: 1px solid rgba(45,212,191,.45); background: rgba(45,212,191,.07);
           transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.pc-gbar.is-on { transform: scaleX(1); }
.pc-gbar.is-spec { border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.08); }
.pc-gbar.is-spec .pc-fill { background: linear-gradient(90deg, #7c5cf0, var(--pc-violet)); }
.pc-fill { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, #14b8a6, var(--pc-teal)); transition: width 2.2s cubic-bezier(.4,0,.2,1); }
.pc-ms { position: absolute; top: 50%; left: var(--l); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
         background: var(--pc-cyan); box-shadow: 0 0 0 3px rgba(48,218,247,.15), 0 0 14px rgba(48,218,247,.55);
         transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1), background .3s, box-shadow .3s; }
.pc-ms.is-on { transform: scale(1); }
.pc-ms.is-done { background: var(--pc-green); box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 0 16px rgba(34,197,94,.6); animation: pc-pulse 1.6s ease-out 2; }
@keyframes pc-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55), 0 0 16px rgba(34,197,94,.6); } 100% { box-shadow: 0 0 0 12px rgba(34,197,94,0), 0 0 16px rgba(34,197,94,.6); } }

/* Abnahme-Matrix */
.pc-accept { display: grid; grid-template-columns: var(--label, 136px) 1fr; align-items: center; gap: 0; margin: 4px 16px 0; padding: 12px 0;
             opacity: .35; transition: opacity .5s; }
.pc-accept.is-in { opacity: 1; }
.pc-accept .pc-label { padding-right: 10px; }
.pc-cells { display: flex; gap: 5px; flex-wrap: wrap; }
.pc-cell { font: 500 10px/1 var(--pc-mono); color: var(--pc-dim); padding: 6px 7px; border-radius: 6px; border: 1px solid var(--pc-line-2); background: rgba(255,255,255,.02);
           transition: color .25s, background .25s, border-color .25s, transform .25s; }
.pc-cell.is-ok { color: #bbf7d0; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.45); transform: translateY(-1px); }
.pc-state { font: 500 10.5px var(--pc-mono); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--pc-line-2); color: var(--pc-muted); margin-top: 3px; align-self: flex-start; white-space: nowrap;
            transition: all .3s; }
.pc-state.is-review { color: #fcd34d; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.08); }
.pc-state.is-done { color: #bbf7d0; border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.14); }

/* KI-Konsole */
.pc-console { margin: 8px 16px 16px; border-radius: 12px; border: 1px solid rgba(167,139,250,.22); background: linear-gradient(180deg, rgba(167,139,250,.06), rgba(167,139,250,.02)); padding: 12px 14px; }
.pc-console-head { display: flex; align-items: center; gap: 8px; font: 500 11.5px var(--pc-mono); color: var(--pc-text); }
.pc-console-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc-violet); box-shadow: 0 0 10px var(--pc-violet); }
.pc-console-head em { margin-left: auto; font-style: normal; color: var(--pc-teal); font-weight: 400; }
.pc-prompt { margin: 10px 0 6px; font: 400 12px/1.5 var(--pc-mono); color: #d4d4d8; min-height: 18px; }
.pc-prompt::before { content: "› "; color: var(--pc-violet); }
.pc-prompt.is-typing::after { content: ""; display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--pc-violet); animation: pc-blink 1s steps(1) infinite; }
@keyframes pc-blink { 50% { opacity: 0; } }
.pc-log { height: 84px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.pc-line { display: flex; gap: 8px; align-items: baseline; font: 400 11px/18px var(--pc-mono); color: var(--pc-muted); animation: pc-in .35s ease-out both; white-space: nowrap; }
.pc-line code { font: inherit; color: #c4b5fd; overflow: hidden; text-overflow: ellipsis; }
.pc-line .pc-k { width: 12px; flex: none; text-align: center; }
.pc-line .pc-k.is-run { color: var(--pc-violet); animation: pc-blink .6s steps(1) infinite; }
.pc-line .pc-k.is-ok { color: var(--pc-teal); }
.pc-line .pc-k.is-human { color: var(--pc-green); }
.pc-line .pc-r { margin-left: auto; color: var(--pc-text); padding-left: 10px; }
.pc-line.is-human code { color: #bbf7d0; }
@keyframes pc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 920px) {
  .pc { grid-template-columns: 1fr; gap: 40px; padding: 36px 20px; }
}
@media (max-width: 520px) {
  .pc-gantt, .pc-accept { --label: 96px; }
  .pc-tabs { display: none; }
  .pc-label small { display: none; }
  .pc-line .pc-r { display: none; }
}

/* ---------- RIVCA ---------- */
/* Layout: zwei Spalten – links ein „lebender“ Reisetermin im Produktfenster, rechts der Pitch.
   Eine Welt (dunkel), passend zur bestehenden Firmenseite. */
.rv {
  --rv-ground: #07080b;
  --rv-card: #0b0d12;
  --rv-panel: #10131a;
  --rv-line: rgba(232, 236, 248, 0.08);
  --rv-line-strong: rgba(232, 236, 248, 0.14);
  --rv-fg: #eceef4;
  --rv-muted: #8b90a0;
  --rv-faint: #5a5f6e;
  --rv-violet: #8b7cf6;
  --rv-teal: #2dd4bf;
  --rv-amber: #f5b971;
  --rv-grad: linear-gradient(90deg, #7c6cf2, #2dc3b4);
  --rv-sans: var(--font-sans);
  --rv-mono: var(--font-mono);
  --rv-serif: var(--font-serif);

  color-scheme: dark;
  color: var(--rv-fg);
  font-family: var(--rv-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.rv *, .rv *::before, .rv *::after { box-sizing: border-box; }

.rv-card {
  max-width: 1180px;
  margin: 0 auto;
  background: radial-gradient(120% 90% at 20% 0%, rgba(139,124,246,0.07), transparent 55%), var(--rv-card);
  border: 1px solid var(--rv-line);
  border-radius: 28px;
  padding: clamp(20px, 4.5vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* ---------- Produktfenster ---------- */
.rv-stage { position: relative; min-width: 0; padding-bottom: 140px; }
.rv-win {
  background: var(--rv-panel);
  border: 1px solid var(--rv-line-strong);
  border-radius: 16px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.4);
  overflow: hidden;
}
.rv-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rv-line);
  font: 500 12px/1 var(--rv-mono);
  color: var(--rv-muted);
}
.rv-dots { display: flex; gap: 6px; }
.rv-dots i { width: 8px; height: 8px; border-radius: 50%; background: #2a2e39; }
.rv-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-crumb b { color: var(--rv-fg); font-weight: 500; }
.rv-live { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--rv-teal); flex-shrink: 0; }
.rv-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rv-teal); box-shadow: 0 0 0 0 rgba(45,212,191,0.6); animation: rv-pulse 2s infinite; }

.rv-body { padding: 16px; display: grid; gap: 14px; transition: opacity .35s ease; }
.rv-body.is-reset { opacity: 0; }

.rv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rv-ship { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.rv-dates { font: 12px var(--rv-mono); color: var(--rv-muted); }

.rv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rv-kpi { border: 1px solid var(--rv-line); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,0.015); }
.rv-kpi small { display: block; font: 500 10px/1.2 var(--rv-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rv-muted); }
.rv-kpi strong { display: block; margin-top: 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color .4s; }
.rv-kpi strong.is-bump { color: var(--rv-teal); }
.rv-kpi strong span { color: var(--rv-faint); font-weight: 500; }

/* Route */
.rv-route { border: 1px solid var(--rv-line); border-radius: 10px; padding: 8px 6px 2px; background: linear-gradient(180deg, rgba(45,212,191,0.03), transparent); }
.rv-route svg { display: block; width: 100%; height: auto; overflow: visible; }
.rv-route .rv-river { fill: none; stroke: url(#rvRiver); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.rv-route .rv-river-glow { fill: none; stroke: #2dd4bf; stroke-width: 10; stroke-linecap: round; opacity: .06; }
.rv-route .rv-port { fill: var(--rv-panel); stroke: #6f7690; stroke-width: 1.5; }
.rv-route .rv-port.is-today { stroke: var(--rv-teal); fill: var(--rv-teal); }
.rv-route text { font: 500 8.5px var(--rv-mono); fill: var(--rv-muted); letter-spacing: 0.02em; }
.rv-route .rv-boat { fill: #fff; }
.rv-route .rv-boat-halo { fill: #2dd4bf; opacity: .25; }

/* Ausflüge */
.rv-list-head { display: flex; justify-content: space-between; font: 500 10px var(--rv-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rv-muted); padding: 0 2px; }
.rv-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rv-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--rv-line); border-radius: 10px;
  transition: border-color .4s, background-color .4s;
}
.rv-row.is-hot { border-color: rgba(45,212,191,0.45); background: rgba(45,212,191,0.04); }
.rv-row.is-warn { border-color: rgba(245,185,113,0.45); background: rgba(245,185,113,0.04); }
.rv-day { font: 500 10px/1.3 var(--rv-mono); color: var(--rv-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.rv-day b { display: block; font-size: 15px; color: var(--rv-fg); letter-spacing: 0; }
.rv-ex { min-width: 0; }
.rv-ex-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-ex-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rv-meter { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; }
.rv-meter i { display: block; height: 100%; border-radius: inherit; background: var(--rv-grad); transition: width .9s cubic-bezier(.2,.8,.2,1), background .4s; }
.rv-row.is-warn .rv-meter i { background: linear-gradient(90deg, #e9a25c, #f5c98f); }
.rv-count { font: 500 11px var(--rv-mono); color: var(--rv-muted); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.rv-pill {
  font: 500 10.5px/1 var(--rv-mono); padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--rv-line-strong); color: var(--rv-fg); background: rgba(255,255,255,0.03);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.rv-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rv-teal); }
.rv-pill[data-s="angefragt"]::before { background: var(--rv-amber); }
.rv-pill[data-s="fast voll"]::before { background: var(--rv-amber); }

/* Ablauf nach der Buchung */
.rv-flow { border-top: 1px solid var(--rv-line); padding-top: 14px; }
.rv-flow-title { font: 500 10px var(--rv-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rv-muted); margin-bottom: 10px; }
.rv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.rv-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 13px; height: 1px; background: var(--rv-line-strong); }
.rv-track { position: absolute; left: 12%; top: 13px; height: 1px; width: 0; background: var(--rv-grad); transition: width .8s ease; }
.rv-step { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.rv-node {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rv-panel); border: 1px solid var(--rv-line-strong); color: var(--rv-faint);
  transition: border-color .4s, color .4s, box-shadow .4s, background .4s;
}
.rv-node svg { width: 13px; height: 13px; }
.rv-step.is-done .rv-node { border-color: rgba(45,212,191,0.6); color: var(--rv-teal); }
.rv-step.is-active .rv-node { border-color: var(--rv-teal); color: #071a17; background: var(--rv-teal); box-shadow: 0 0 0 5px rgba(45,212,191,0.12); }
.rv-step span { font: 500 10.5px/1.25 var(--rv-mono); color: var(--rv-muted); }
.rv-step span small { display: block; font-size: 9px; color: var(--rv-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.rv-step.is-done span, .rv-step.is-active span { color: var(--rv-fg); }

/* Ereignis-Toast */
.rv-toast {
  position: absolute; left: -14px; bottom: 92px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  width: min(272px, 50%);
  padding: 12px 14px; border-radius: 12px;
  background: rgba(18,21,29,0.92); backdrop-filter: blur(12px);
  border: 1px solid var(--rv-line-strong);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,0.9);
  transition: opacity .3s, transform .3s;
}
.rv-toast.is-out { opacity: 0; transform: translateY(6px); }
.rv-toast-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(45,212,191,0.12); color: var(--rv-teal); }
.rv-toast[data-tone="warn"] .rv-toast-ic { background: rgba(245,185,113,0.14); color: var(--rv-amber); }
.rv-toast[data-tone="ai"] .rv-toast-ic { background: rgba(139,124,246,0.16); color: var(--rv-violet); }
.rv-toast-ic svg { width: 15px; height: 15px; }
.rv-toast-txt { min-width: 0; font-size: 12.5px; line-height: 1.35; }
.rv-toast-txt b { display: block; font-weight: 600; }
.rv-toast-txt span { color: var(--rv-muted); }

/* KI-Assistent */
.rv-ai {
  position: absolute; right: -22px; bottom: 0; z-index: 3;
  width: min(300px, 54%);
  border-radius: 14px; padding: 12px;
  background: rgba(16,18,26,0.94); backdrop-filter: blur(14px);
  border: 1px solid rgba(139,124,246,0.35);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.95), 0 0 40px -20px rgba(139,124,246,0.5);
  display: grid; gap: 8px;
}
.rv-ai-head { display: flex; align-items: center; gap: 8px; font: 500 10.5px var(--rv-mono); color: var(--rv-muted); letter-spacing: 0.04em; }
.rv-ai-head b { color: var(--rv-violet); font-weight: 500; }
.rv-ai-head i { margin-left: auto; font-style: normal; padding: 3px 6px; border-radius: 5px; border: 1px solid rgba(139,124,246,0.35); color: var(--rv-violet); font-size: 9.5px; }
.rv-msg { font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 10px; min-height: 2.9em; }
.rv-msg-q { background: rgba(255,255,255,0.05); justify-self: end; max-width: 92%; border-bottom-right-radius: 3px; }
.rv-msg-a { background: rgba(139,124,246,0.10); border: 1px solid rgba(139,124,246,0.18); border-bottom-left-radius: 3px; transition: opacity .3s; }
.rv-msg-a.is-out { opacity: 0; }
.rv-msg-a b { color: var(--rv-fg); font-weight: 600; }
.rv-caret::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--rv-fg); animation: rv-blink 1s steps(1) infinite; }
.rv-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.rv-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--rv-violet); animation: rv-dot 1s infinite; }
.rv-typing i:nth-child(2) { animation-delay: .15s; }
.rv-typing i:nth-child(3) { animation-delay: .3s; }

/* ---------- Pitch ---------- */
.rv-copy { min-width: 0; }
.rv-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 500 11px var(--rv-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rv-muted); }
.rv-tag { color: #b3a8ff; border: 1px solid rgba(139,124,246,0.5); background: rgba(139,124,246,0.08); padding: 6px 10px; border-radius: 99px; }
.rv-title { margin: 22px 0 0; display: flex; align-items: center; gap: .26em; font-size: clamp(44px, 6vw, 68px); line-height: 0.95; font-weight: 600; letter-spacing: -0.045em; }
.rv-logo { flex: none; width: auto; height: .62em; }
.rv-sub { margin: 14px 0 0; font: italic 400 clamp(22px, 2.4vw, 28px)/1.15 var(--rv-serif); color: var(--rv-fg); text-wrap: balance; }
.rv-lead { margin: 18px 0 0; color: var(--rv-muted); max-width: 52ch; }
.rv-lead strong { color: var(--rv-fg); font-weight: 500; }
.rv-feat { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rv-line); display: grid; gap: 12px; }
.rv-feat li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 14.5px; }
.rv-feat li::before { content: "+"; color: var(--rv-teal); font-family: var(--rv-mono); }
.rv-feat em { font-style: normal; color: var(--rv-muted); }
.rv-faces { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.rv-face { font: 500 11px var(--rv-mono); color: var(--rv-muted); padding: 7px 10px; border: 1px solid var(--rv-line-strong); border-radius: 8px; }
.rv-face b { color: var(--rv-fg); font-weight: 500; }

@keyframes rv-pulse { 0% { box-shadow: 0 0 0 0 rgba(45,212,191,0.5); } 70% { box-shadow: 0 0 0 7px rgba(45,212,191,0); } 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); } }
@keyframes rv-blink { 50% { opacity: 0; } }
@keyframes rv-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

@media (max-width: 1100px) {
  .rv-card { grid-template-columns: minmax(0, 1fr); }
  .rv-copy { order: -1; }
  .rv-stage { padding-bottom: 0; width: 100%; max-width: 640px; margin-inline: auto; }
  .rv-toast { left: 10px; bottom: auto; top: 54px; width: auto; max-width: calc(100% - 20px); }
  .rv-ai { position: relative; right: auto; bottom: auto; width: auto; margin: 14px 10px 0; }
}
@media (max-width: 460px) {
  .rv-kpi { padding: 8px 9px; }
  .rv-kpi small { font-size: 9px; letter-spacing: .03em; overflow-wrap: anywhere; }
  .rv-kpi strong { font-size: 17px; }
  .rv-row { grid-template-columns: 38px minmax(0, 1fr); }
  .rv-row .rv-pill { grid-column: 2; justify-self: start; }
  .rv-step span small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv *, .rv *::before, .rv *::after { animation: none !important; transition: none !important; }
}
.rv :focus-visible { outline: 2px solid var(--rv-teal); outline-offset: 2px; }