/* ═════════════════════════════════════════════════
   components.css
   ═════════════════════════════════════════════════ */

/* ═══ NAV ═══ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:20px 48px;background:linear-gradient(180deg,rgba(8,17,31,.82) 0%,transparent 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.04)}
.nav-logo{font-weight:800;font-size:22px;letter-spacing:-.5px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-logo span{font-weight:400;opacity:.6;-webkit-text-fill-color:var(--text-dim);font-size:12px;margin-left:10px;letter-spacing:2px;text-transform:uppercase;font-family:var(--mono)}

/* Brand wordmark */
.brand-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  line-height:1;
}
.brand-logo{
  height:28px;
  width:auto;
  display:block;
  flex:0 0 auto;
  filter:drop-shadow(0 0 8px rgba(124,58,237,.28));
}
.brand-logo--loader{height:36px}
.brand-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:1em;
  font-weight:400;
  font-style:normal;
  opacity:.64;
  color:var(--text-dim);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-family:var(--mono);
  line-height:1;
  transform:translateY(1px);
  margin-top: 5px;
}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--text-dim);font-size:14px;font-weight:500;transition:color .3s;letter-spacing:.2px}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:inline-block;background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.32);color:#d8c7ff;padding:11px 24px;border-radius:100px;
  font-size:13px;font-weight:600;transition:all .3s;letter-spacing:.4px;text-decoration:none;cursor:pointer}
.nav-cta:hover{background:var(--violet);color:#fff;border-color:var(--violet);box-shadow:0 10px 30px rgba(124,58,237,.4)}


/* ═══ LOADER ═══ */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}
#loader.hidden{opacity:0;visibility:hidden}
.loader-bar{width:220px;height:2px;background:var(--surface2);border-radius:2px;overflow:hidden;margin-top:24px}
.loader-fill{height:100%;width:0%;background:linear-gradient(to right,var(--cyan),var(--violet));border-radius:2px;transition:width .3s}
.loader-text{font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:2px;margin-top:12px;text-transform:uppercase}


/* ═══ REVEAL ═══ */
/* ═══ SCROLL REVEAL — sections ═══ */
.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  filter: blur(8px);
  transition:
    opacity 1.1s cubic-bezier(.22, 1, .36, 1),
    transform 1.1s cubic-bezier(.22, 1, .36, 1),
    filter 0.9s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform, filter;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ═══ STAGGERED CARD REVEAL (inside any .reveal section) ═══ */
.reveal .bullet,
.reveal .feature,
.reveal .price-card,
.reveal .use-card,
.reveal .story-card,
.reveal .friction-card,
.reveal .scheduled-item,
.reveal .step,
.reveal .int-card,
.reveal .metric,
.reveal .cap-tab {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  /* No transition here — we use animation when .visible toggles */
}
.reveal.visible .bullet,
.reveal.visible .feature,
.reveal.visible .price-card,
.reveal.visible .use-card,
.reveal.visible .story-card,
.reveal.visible .friction-card,
.reveal.visible .scheduled-item,
.reveal.visible .step,
.reveal.visible .int-card,
.reveal.visible .metric,
.reveal.visible .cap-tab {
  animation: cardFlyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 300ms);
}
/* ═══ Faster reveal for integration logo cards ═══ */
.reveal.visible .int-card {
  animation: cardFlyIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 28ms + 60ms);
}
@keyframes cardFlyIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Keep transform free for the most important hover-lift cards. */
.price-card.featured {
  --reveal-base-transform: scale(1.04);
}
.reveal .price-card,
.reveal .metric,
.reveal .step,
.reveal .use-card,
.reveal .story-card {
  transform: var(--reveal-base-transform, none);
  translate: 0 40px;
  scale: .95;
}
.reveal.visible .price-card,
.reveal.visible .metric,
.reveal.visible .step,
.reveal.visible .use-card,
.reveal.visible .story-card {
  opacity: 1;
  animation: cardLiftIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 300ms);
}
@keyframes cardLiftIn {
  from {
    opacity: 0;
    translate: 0 40px;
    scale: .95;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}


/* ═══ MODAL ═══ */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(8,17,31,.88);
  display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .4s;padding:20px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
.modal-overlay.active{display:flex;opacity:1}
.modal-content{width:100%;max-width:460px;background:rgba(14,20,37,.95);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:36px;text-align:center;
  transform:scale(.95) translateY(20px);transition:transform .5s cubic-bezier(.2,.9,.4,1.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.modal-overlay.active .modal-content{transform:scale(1) translateY(0)}
.modal-logo-wrap{width:72px;height:72px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.modal-logo-wrap img{max-width:100%;max-height:100%;object-fit:contain}
.modal-content h3{font-size:22px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px}
.modal-content .subcopy{font-size:14px;color:var(--text-dim);margin-bottom:10px}
.modal-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.modal-dl{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;font-size:14px;font-weight:500;transition:all .3s;color:var(--text)}
.modal-dl:hover{background:rgba(6,182,212,.08);border-color:rgba(6,182,212,.4);color:var(--cyan)}
.modal-dl img{width:20px;height:20px;object-fit:contain}
.modal-dl-light{background:#f4f6fa !important;color:#0b0f1a !important;border:1px solid rgba(255,255,255,.12) !important;font-weight:600 !important}
.modal-dl-light:hover{background:#fff !important;color:#0b0f1a !important;border-color:#fff !important;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 0 1px rgba(124,58,237,.3),0 0 20px rgba(124,58,237,.15)}
.modal-dl-light img{filter:none}
.modal-logo-wrap{width:72px;height:72px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 22px rgba(124,58,237,.35))}
.modal-logo-wrap img{max-width:100%;max-height:100%;object-fit:contain}
.modal-legal{font-size:11px;color:var(--text-dim);line-height:1.5}
.modal-legal a{color:var(--cyan)}


/* ═══ TOAST ═══ */
.toast{position:fixed;top:90px;right:-400px;z-index:700;background:rgba(14,20,37,.92);border:1px solid rgba(6,182,212,.2);
  border-radius:14px;padding:14px 20px;display:flex;gap:10px;align-items:center;transition:right .5s cubic-bezier(.2,.9,.4,1.1);max-width:340px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.toast.visible{right:24px}
.toast-icon{font-size:18px}
.toast-text{font-size:12.5px;line-height:1.5}
.toast-text strong{display:block;font-size:13px;margin-bottom:2px;color:var(--text)}


/* ═══ SCROLL HINT ═══ */
.scroll-hint{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeUp 1s 2s both;pointer-events:none}
.scroll-hint span{font-size:10px;font-family:var(--mono);letter-spacing:2px;color:var(--text-dim);text-transform:uppercase}
.scroll-line{width:1px;height:32px;background:linear-gradient(to bottom,var(--cyan),transparent);animation:scrollPulse 2s infinite}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:.5;transform:translateX(-50%) translateY(0)}}


/* ═══ Compat aliases for product-showcase block ═══ */
:root{
  --primary: var(--violet);
  --accent: var(--cyan);
  --primary-2: var(--green);
  --muted: var(--text-dim);
  --line: rgba(148,163,184,.18);
  --panel: rgba(15,23,42,.78);
  --panel-2: rgba(19,31,54,.86);
  --radius: 24px;
  --radius-sm: 18px;
  --max: 1440px;
}


/* ═══ Product showcase section adapts ═══ */
.product-showcase .overline{color:var(--cyan)}
.product-showcase .ps-copy{font-size:16px;color:var(--text-dim);max-width:620px;margin:14px auto 0;line-height:1.7;text-align:center}
.product-showcase .container{max-width:1400px;margin:0 auto;padding:0 48px;position:relative;z-index:2}


    .product-showcase {
      padding-top: 54px;
      padding-bottom: 108px;
      margin-top: 0;
    }

    .product-showcase .section-head {
      max-width: 820px;
      margin-bottom: 34px;
      margin-top: 0;
      padding-top: 22px;
    }

    .product-showcase h2 {
      font-size: clamp(28px, 4.2vw, 52px);
      line-height: 1.1;
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }

    .product-showcase .section-copy {
      max-width: 760px;
      margin-top: 14px;
    }

    .product-showcase .container {
      width: min(1440px, calc(100% - 40px));
    }

    .product-showcase-shell {
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      --ps-mx: 50%;
      --ps-my: 50%;
      position: relative;
      border-radius: 32px;
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      overflow: hidden;
    }

    .product-showcase-shell::before {
      content: none;
    }

    .product-showcase-frame {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(8,14,24,0.98), rgba(4,9,18,0.98));
      box-shadow: 0 24px 80px rgba(0,0,0,0.26);
      transform: perspective(1600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0);
      transform-style: preserve-3d;
      transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
      will-change: transform;
    }

    .product-showcase-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at var(--ps-mx) var(--ps-my), rgba(255,255,255,0.07), transparent 26%);
      opacity: 0;
      transition: opacity 0.16s ease-out;
      pointer-events: none;
      z-index: 4;
    }

    .product-showcase-shell:hover .product-showcase-frame {
      box-shadow: 0 28px 90px rgba(0,0,0,0.32), 0 0 28px rgba(124,58,237,0.18), 0 0 0 1px rgba(124,58,237,0.28);
      border-color: rgba(124,58,237,0.38);
    }

    .product-showcase-shell:hover .product-showcase-frame::after {
      opacity: 1;
    }

    .product-showcase-scale {
      zoom: 0.72;
    }
    /* Firefox fallback — uses transform but may leave small bottom gap */
    @supports (-moz-appearance:none){
      .product-showcase-scale {
        zoom: 1;
        transform: scale(0.72);
        transform-origin: top left;
        width: calc(100% / 0.72);
        margin-bottom: calc((1 - 0.72) * -100%);
      }
    }

    .product-showcase-topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(7,13,25,0.86);;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}

    .product-showcase-dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .product-showcase-dots span {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
    }

    .product-showcase-dots span:nth-child(1) { background: #ff6b57; }
    .product-showcase-dots span:nth-child(2) { background: #f7c948; }
    .product-showcase-dots span:nth-child(3) { background: #34c759; }

    .product-showcase-label {
      color: #cddbf0;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .product-showcase-pill {
      padding: 8px 12px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(6,182,212,0.16));
      border: 1px solid rgba(255,255,255,0.08);
      color: #e5f2ff;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .product-app {
      display: grid;
      grid-template-columns: 210px minmax(0, 1fr) 256px;
      min-height: 620px;
      width: 100%;
      background:
        radial-gradient(circle at 50% 25%, rgba(16,58,132,0.18), transparent 34%),
        linear-gradient(180deg, #06101f 0%, #040b16 100%);
    }

    .app-sidebar,
    .app-main,
    .app-right {
      position: relative;
      z-index: 1;
    }

    .app-sidebar {
      padding: 20px 18px 18px;
      border-right: 1px solid rgba(255,255,255,0.06);
      background: linear-gradient(180deg, rgba(7,16,34,0.98), rgba(5,13,28,0.98));
      display: flex;
      flex-direction: column;
    }

    .app-brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 16px;
      margin-bottom: 18px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .app-brand-mark {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #fff;
      font-weight: 800;
      font-size: 18px;
    }

    .app-brand-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(124,58,237,0.32), rgba(6,182,212,0.28));
      box-shadow: 0 10px 28px rgba(124,58,237,0.22);
      font-size: 16px;
    }

    .app-icon-btn {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,0.08);
      color: #b7c7dc;
      background: rgba(255,255,255,0.02);
      font-size: 14px;
    }

    .app-nav-group {
      margin-bottom: 20px;
    }

    .app-nav-title {
      color: #6f86a8;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin: 0 0 10px;
      font-weight: 800;
    }

    .app-nav-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 11px 8px;
      color: #cfdcf0;
      font-size: 14px;
      border-radius: 12px;
    }

    .app-nav-item-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .app-nav-ico {
      width: 18px;
      text-align: center;
      color: #9fb6d5;
    }

    .app-nav-badge {
      min-width: 30px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(6,182,212,0.14);
      color: #6ce9ff;
      font-size: 12px;
      text-align: center;
      font-weight: 800;
    }

    .app-side-status {
      margin-top: auto;
      border-radius: 18px;
      padding: 16px;
      background: linear-gradient(180deg, rgba(18,23,59,0.94), rgba(16,19,48,0.96));
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 18px 44px rgba(0,0,0,0.18);
    }

    .app-side-status-head {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .app-live-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #3ee48f;
      box-shadow: 0 0 14px rgba(62,228,143,0.5);
    }

    .app-side-status-sub {
      color: #93a7c4;
      font-size: 13px;
      margin-bottom: 14px;
    }

    .app-side-graph {
      height: 58px;
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(6,182,212,0.08), rgba(6,182,212,0.02)),
        radial-gradient(circle at 20% 20%, rgba(124,58,237,0.14), transparent 50%);
      position: relative;
      overflow: hidden;
      margin-bottom: 14px;
    }

    .app-side-graph::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(84,240,255,0.0) 10%, rgba(84,240,255,0.8) 24%, rgba(84,240,255,0.0) 40%, transparent 100%);
      clip-path: polygon(0 70%, 8% 64%, 16% 34%, 24% 50%, 32% 18%, 40% 46%, 48% 40%, 56% 66%, 64% 56%, 72% 72%, 80% 42%, 88% 58%, 100% 48%, 100% 100%, 0 100%);
      opacity: 0.95;
    }

    .app-side-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .app-side-metrics span {
      display: block;
      color: #7e96b7;
      font-size: 11px;
      margin-bottom: 4px;
    }

    .app-side-metrics strong {
      color: #fff;
      font-size: 14px;
    }

    .app-main {
      padding: 12px 24px 18px;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .app-topnav {
      display: flex;
      justify-content: center;
      gap: 10px;
      padding: 4px 0 18px;
    }

    .app-tab {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
      color: #aebfda;
      font-size: 14px;
      font-weight: 700;
    }

    .app-tab.active {
      background: linear-gradient(135deg, rgba(13,113,204,0.4), rgba(6,182,212,0.22));
      color: #fff;
      box-shadow: 0 14px 30px rgba(6,182,212,0.12);
    }

    .app-main-shell {
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(8,15,29,0.78), rgba(6,12,24,0.82));
      overflow: hidden;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }

    .app-main-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 18px 22px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      flex-shrink: 0;
    }

    .app-main-title {
      color: #fff;
      font-size: 16px;
      font-weight: 700;
    }

    .app-main-title span {
      color: #8ea4c3;
      font-weight: 500;
      margin-left: 8px;
    }

    .app-status-pill {
      padding: 8px 14px;
      border-radius: 12px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      color: #dce9fa;
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .app-status-pill::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: #36e086;
      box-shadow: 0 0 12px rgba(54,224,134,0.45);
    }

    .app-chat {
      padding: 24px 24px 22px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .app-chat .app-input {
      margin-top: auto;
    }

    .app-bubble {
      max-width: 470px;
      border-radius: 20px;
      padding: 18px 20px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.04);
      box-shadow: 0 16px 36px rgba(0,0,0,0.18);
      margin-bottom: 16px;
    }

    .app-bubble.you {
      margin-left: auto;
      background: linear-gradient(180deg, rgba(14,60,120,0.50), rgba(11,30,65,0.42));
    }

    .app-bubble-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 18px;
    }

    .app-avatar {
      width: 54px;
      height: 54px;
      border-radius: 999px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(124,58,237,0.28));
      border: 1px solid rgba(255,255,255,0.08);
      color: #fff;
      font-weight: 800;
      box-shadow: 0 14px 34px rgba(124,58,237,0.16);
    }

    .app-bubble-meta {
      color: #55dcff;
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .app-bubble-meta span {
      color: #8399b7;
      font-weight: 500;
      margin-left: 8px;
    }

    .app-bubble-copy {
      color: #edf5ff;
      font-size: 15px;
      line-height: 1.65;
    }

    .app-workflow {
      border-radius: 22px;
      padding: 18px 18px 16px;
      background: linear-gradient(180deg, rgba(14,23,44,0.86), rgba(12,20,36,0.9));
      border: 1px solid rgba(79,135,255,0.20);
      box-shadow: 0 20px 54px rgba(0,0,0,0.18);
      margin-bottom: 18px;
    }

    .app-workflow-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 18px;
    }

    .app-workflow-kicker {
      color: #42d7f8;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .app-workflow-title {
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .app-view-btn {
      padding: 10px 16px;
      border-radius: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      color: #d2def0;
      font-size: 14px;
      font-weight: 700;
    }

    .app-steps {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      align-items: start;
      margin-bottom: 18px;
    }

    .app-step {
      position: relative;
      text-align: center;
      color: #d9e6f7;
      font-size: 13px;
      line-height: 1.45;
      padding-top: 38px;
    }

    .app-step::before {
      content: "";
      position: absolute;
      top: 12px;
      left: 50%;
      width: 28px;
      height: 28px;
      transform: translateX(-50%);
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.02);
      z-index: 2;
    }

    .app-step::after {
      content: "";
      position: absolute;
      top: 25px;
      left: calc(50% + 14px);
      width: calc(100% - 4px);
      height: 2px;
      background: rgba(255,255,255,0.10);
    }

    .app-step:last-child::after { display: none; }

    .app-step.done::before {
      background: #41dff3;
      border-color: rgba(65,223,243,0.35);
      box-shadow: 0 0 18px rgba(65,223,243,0.35);
    }

    .app-step.done::after,
    .app-step.active::after {
      background: linear-gradient(90deg, #41dff3, rgba(127,112,255,0.7));
    }

    .app-step.active::before {
      background: radial-gradient(circle, rgba(124,58,237,0.18), rgba(8,14,28,0.98));
      border-color: rgba(151,133,255,0.55);
      box-shadow: 0 0 0 4px rgba(138,120,255,0.16), 0 0 24px rgba(138,120,255,0.3);
    }

    .app-output {
      border-radius: 16px;
      padding: 16px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.05);
    }

    .app-output-kicker {
      color: #42d7f8;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .app-output-copy {
      color: #e6f0fb;
      font-size: 15px;
      margin-bottom: 14px;
      line-height: 1.65;
    }

    .app-output-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .app-mini-btn {
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.02);
      color: #d6e3f5;
      font-size: 14px;
      font-weight: 700;
    }

    .app-quick-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 18px;
    }

    .app-quick-chip {
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.02);
      color: #c8d7eb;
      font-size: 14px;
    }

    .app-input {
      display: flex;
      align-items: center;
      gap: 14px;
      border-radius: 18px;
      padding: 18px 18px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(2,8,16,0.45);
      min-height: 92px;
    }

    .app-input-main {
      flex: 1;
    }

    .app-input-placeholder {
      color: #6e83a5;
      font-size: 15px;
      margin-bottom: 18px;
    }

    .app-input-icons {
      display: flex;
      gap: 14px;
      color: #8da4c5;
      font-size: 15px;
    }

    .app-send {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #1ebdf4, #67dfff);
      color: white;
      font-size: 22px;
      box-shadow: 0 20px 36px rgba(30,189,244,0.22);
      flex: 0 0 auto;
    }

    .app-right {
      padding: 12px 24px 16px 6px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .app-userbar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
      padding: 2px 0 4px;
    }

    .app-user-icon {
      color: #c4d3e9;
      font-size: 16px;
    }

    .app-user-card {
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.02);
      border-radius: 16px;
      padding: 10px 14px;
      color: white;
    }

    .app-user-meta strong {
      display: block;
      font-size: 15px;
    }

    .app-user-meta span {
      display: block;
      color: #8fa4c3;
      font-size: 12px;
      margin-top: 2px;
    }

    .app-user-avatar {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(124,58,237,0.72), rgba(99,102,241,0.72));
      font-size: 13px;
      font-weight: 800;
    }

    .app-panel {
      border-radius: 22px;
      padding: 16px 16px 18px;
      background: linear-gradient(180deg, rgba(8,15,29,0.84), rgba(6,11,22,0.92));
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 16px 40px rgba(0,0,0,0.16);
    }

    .app-panel-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      color: #fff;
      font-size: 15px;
      font-weight: 700;
    }

    .app-panel-head a {
      color: #7abaff;
      font-size: 13px;
      font-weight: 700;
    }

    .app-task-list,
    .app-steps-list,
    .app-tools-grid {
      display: grid;
      gap: 10px;
    }

    .app-task {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      color: #eaf2ff;
      font-size: 14px;
    }

    .app-task span {
      color: #8095b5;
      font-size: 13px;
      white-space: nowrap;
    }

    .app-task .running { color: #3fe6ff; font-weight: 700; }

    .app-tools-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .app-tool {
      aspect-ratio: 1 / 1;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      color: #88dfff;
      font-weight: 800;
      font-size: 18px;
    }

    .app-step-item {
      position: relative;
      padding-left: 22px;
      color: #dce8f8;
      font-size: 14px;
      line-height: 1.55;
    }

    .app-step-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 6px;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.16);
    }

    .app-step-item.done::before {
      background: #59efb0;
      box-shadow: 0 0 14px rgba(89,239,176,0.32);
    }

    .app-step-item.active::before {
      background: #7e68ff;
      box-shadow: 0 0 16px rgba(126,104,255,0.32);
    }

    .app-step-item small {
      display: block;
      color: #748aa9;
      font-size: 12px;
      margin-top: 2px;
    }

    .app-perf-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .app-perf-item span {
      display: block;
      color: #8ca2c1;
      font-size: 12px;
      margin-bottom: 6px;
    }

    .app-perf-item strong {
      display: block;
      color: #fff;
      font-size: 18px;
      margin-bottom: 4px;
    }

    .app-perf-item em {
      color: #52e79f;
      font-style: normal;
      font-size: 13px;
      font-weight: 700;
    }

    .product-showcase-meta {
      display: none;
    }

    .marquee:hover { animation-play-state: paused; }

    .testimonials .marquee {
      animation: marquee 26s linear infinite !important;
      animation-play-state: running !important;
      will-change: transform;
    }

/* === responsive (mobile only, was @media(max-width:760px) in original) === */
@media (max-width: 760px){
  .product-showcase-frame {
    transform: none !important;
  }
  .product-showcase-scale {
    transform: none;
    width: 100%;
    margin-bottom: 0;
  }
  .product-app {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .app-sidebar, .app-right {
    display: none;
  }
  .product-showcase-shell {
    padding: 12px;
    border-radius: 24px;
  }
  .product-showcase-topbar {
    padding: 12px 12px;
    gap: 10px;
  }
  .product-showcase-label {
    font-size: 11px;
  }
  .product-showcase-pill {
    font-size: 10px;
    padding: 7px 10px;
  }
  .app-main, .app-sidebar {
    padding-left: 12px;
    padding-right: 12px;
  }
  .app-chat, .app-main-head {
    padding-left: 14px;
    padding-right: 14px;
  }
  .app-topnav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 14px;
  }
  .app-bubble, .app-bubble.you {
    max-width: 100%;
  }
  .app-output-actions,
  .app-quick-actions,
  .app-perf-grid,
  .app-side-metrics {
    grid-template-columns: 1fr;
  }
  .app-send {
    width: 48px;
    height: 48px;
  }
}


/* ═══ FEATURES TABS (cap-*) ═══ */
.features-tabs{padding:120px 48px;position:relative}
.cap-tabs-wrap{max-width:1180px;margin:0 auto}
.cap-tabs-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:40px;padding:8px;background:rgba(14,20,37,.6);border:1px solid rgba(255,255,255,.06);border-radius:100px;width:fit-content;margin-left:auto;margin-right:auto;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.cap-tab{padding:11px 22px;background:transparent;border:none;color:var(--text-dim);font-size:13px;font-weight:600;border-radius:100px;transition:all .3s;font-family:var(--sans);letter-spacing:.2px;position:relative}
.cap-tab:hover{color:var(--text)}
.cap-tab.active{color:#fff;background:linear-gradient(135deg,rgba(124,58,237,.85),rgba(6,182,212,.75));box-shadow:0 8px 24px rgba(124,58,237,.35),inset 0 1px 0 rgba(255,255,255,.15)}
.cap-showcase{position:relative;min-height:460px}
.cap-panel{display:none;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
.cap-panel.active{display:grid;animation:capFade .5s cubic-bezier(.22,1,.36,1)}
@keyframes capFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.cap-visual-box{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(6,182,212,.08)),rgba(7,10,18,.92);box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 40px rgba(124,58,237,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.cap-visual-img{position:absolute;inset:0;background-size:cover;background-position:center top;opacity:.88}
.cap-visual-overlay{display:none}
@keyframes dotFlow{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2);box-shadow:0 0 8px var(--cyan)}}
.cap-copy-box h3{font-size:30px;font-weight:700;letter-spacing:-.8px;margin-bottom:14px;line-height:1.15}
.cap-copy-box p{font-size:15px;color:var(--text-dim);line-height:1.7;margin-bottom:24px}
.cap-bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.cap-bullets li{font-size:14px;color:var(--text);padding-left:22px;position:relative;line-height:1.5}
.cap-bullets li::before{content:'◆';position:absolute;left:0;top:4px;color:var(--cyan);font-size:10px}
.cap-copy-box .btn-primary{display:inline-flex;padding:14px 28px}
@media(max-width:900px){
  .cap-panel.active{grid-template-columns:1fr;gap:28px}
  .cap-copy-box h3{font-size:24px}
  .cap-tabs-nav{border-radius:20px}
  .cap-tab{padding:9px 16px;font-size:12px}
}


/* ═══ MOCKUP ANIMATIONS (lightweight) ═══ */

/* Live status dot — pulsing ring */
.app-live-dot{position:relative;animation:appLivePulse 2.2s ease-in-out infinite}
@keyframes appLivePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55),0 0 8px rgba(34,197,94,.5)}
  50%{box-shadow:0 0 0 8px rgba(34,197,94,0),0 0 14px rgba(34,197,94,.8)}
}

/* Sidebar nav items — subtle hover lift + glow */
.app-nav-item{transition:background .25s ease,transform .25s ease,color .25s ease}
.app-nav-item:hover{background:rgba(124,58,237,.12)!important;transform:translateX(3px);color:#fff}
.app-nav-item:hover .app-nav-ico{color:var(--cyan);text-shadow:0 0 8px rgba(6,182,212,.6)}

/* Sidebar sparkline — sweeping highlight (adds to original sparkline ::after) */
.app-side-graph{position:relative;overflow:hidden}
.app-side-graph::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,transparent 0%,rgba(6,182,212,.28) 50%,transparent 100%);
  animation:sideSweep 3.6s ease-in-out infinite;
  mix-blend-mode:screen;
  pointer-events:none;
}
@keyframes sideSweep{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(110%)}
}

/* Active workflow step (dot in chat workflow) */
.app-step.active::before{
  background:linear-gradient(135deg,var(--violet),var(--cyan))!important;
  animation:activeDotBreathe 1.6s ease-in-out infinite;
}
@keyframes activeDotBreathe{
  0%,100%{box-shadow:0 0 6px rgba(124,58,237,.5),0 0 0 0 rgba(124,58,237,.4)}
  50%{box-shadow:0 0 12px rgba(6,182,212,.7),0 0 0 6px rgba(6,182,212,0)}
}

/* Tab indicator shimmer when hovered */
.app-tab{transition:background .25s ease,color .25s ease,transform .25s ease}
.app-tab:hover:not(.active){background:rgba(124,58,237,.1);transform:translateY(-1px)}

/* NOTE: old bubbleIn auto-animations removed — they conflicted with the
   chat-is-live scroll-gated animation system defined at end of file */

/* Send button — subtle breathing glow */
.app-send{animation:sendPulse 3s ease-in-out infinite}
@keyframes sendPulse{
  0%,100%{box-shadow:0 6px 18px rgba(124,58,237,.35)}
  50%{box-shadow:0 6px 28px rgba(124,58,237,.7),0 0 0 4px rgba(6,182,212,.15)}
}

.app-input-placeholder{position:relative}

/* Running task badge — compact animated pill */
.app-task{gap:8px}
.app-task .running{
  position:relative;overflow:hidden;
  display:inline-block;
  padding:3px 9px;
  border-radius:100px;
  background:linear-gradient(90deg,rgba(34,197,94,.18),rgba(6,182,212,.18))!important;
  color:var(--green)!important;
  border:1px solid rgba(34,197,94,.3)!important;
  font-size:11px!important;
  line-height:1.3;
  flex-shrink:0;
  white-space:nowrap;
}
.app-task span{font-size:11px!important;flex-shrink:0;white-space:nowrap}
.app-task .running::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%);
  animation:runShimmer 1.8s linear infinite;
}
@keyframes runShimmer{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(110%)}
}
.app-task > div:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}

/* Workflow step-item .active mini pulse on dot */
.app-step-item.active{position:relative}
.app-step-item.active::before{
  animation:smallPulse 1.5s ease-in-out infinite;
}
@keyframes smallPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(6,182,212,.55),0 0 8px rgba(6,182,212,.5)}
  50%{box-shadow:0 0 0 6px rgba(6,182,212,0),0 0 12px rgba(6,182,212,.8)}
}

/* Workflow card — soft ambient glow breathe */
.app-workflow{animation-delay:.4s,0s;animation-duration:.7s,5s;animation-name:bubbleIn,workflowBreathe;animation-iteration-count:1,infinite;animation-timing-function:cubic-bezier(.22,1,.36,1),ease-in-out;animation-fill-mode:both,none}
@keyframes workflowBreathe{
  0%,100%{box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px rgba(124,58,237,.15)}
  50%{box-shadow:0 12px 46px rgba(0,0,0,.4),0 0 0 1px rgba(6,182,212,.3),0 0 24px rgba(124,58,237,.08)}
}

/* Perf items count-up fade-in */
.app-perf-item strong{animation:perfPop .8s cubic-bezier(.22,1,.36,1) both}
.app-perf-item:nth-child(1) strong{animation-delay:.2s}
.app-perf-item:nth-child(2) strong{animation-delay:.35s}
.app-perf-item:nth-child(3) strong{animation-delay:.5s}
@keyframes perfPop{
  from{opacity:0;transform:translateY(6px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Quick chips hover */
.app-quick-chip{transition:transform .2s ease,background .25s ease,color .2s ease}
.app-quick-chip:hover{transform:translateY(-2px);color:var(--cyan);background:rgba(6,182,212,.12)!important;border-color:rgba(6,182,212,.35)!important}

/* Connected tools icons subtle scale cycle */
.app-tool{transition:transform .25s ease,background .25s ease,color .25s ease}
.app-tool:hover{transform:scale(1.1) rotate(-3deg);color:var(--cyan);background:rgba(6,182,212,.12)!important}


/* ═══════════════════════════════════════════════════════
   FRICTION TERMINAL TYPING ANIMATION
   ══════════════════════════════════════════════════════ */

/* Initial state: terminal lines hidden, clipped from right */
.friction.reveal .terminal > div {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}

/* When section becomes visible, each line reveals left-to-right with stagger */
.friction.reveal.visible .terminal > div {
  animation: terminalTypeLine 0.2s linear forwards;
}

/* Staggered delays — both columns animate in parallel, after cards fade in */
.friction.reveal.visible .terminal > div:nth-child(1) { animation-delay: 1.00s; }
.friction.reveal.visible .terminal > div:nth-child(2) { animation-delay: 1.18s; }
.friction.reveal.visible .terminal > div:nth-child(3) { animation-delay: 1.36s; }
.friction.reveal.visible .terminal > div:nth-child(4) { animation-delay: 1.54s; }
.friction.reveal.visible .terminal > div:nth-child(5) { animation-delay: 1.72s; }
.friction.reveal.visible .terminal > div:nth-child(6) { animation-delay: 1.90s; }

@keyframes terminalTypeLine {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
}

/* ERROR lines flash red on appear */
.friction.reveal.visible .terminal > div:has(.err) {
  animation: terminalTypeLine 0.2s linear forwards,
             errorFlash 0.6s ease-out forwards;
}
.friction.reveal.visible .terminal > div:nth-child(3):has(.err) {
  animation-delay: 1.36s, 1.56s;
}
.friction.reveal.visible .terminal > div:nth-child(5):has(.err) {
  animation-delay: 1.72s, 1.92s;
}

@keyframes errorFlash {
  0%   { background: transparent; }
  30%  { background: rgba(239,68,68,0.14); box-shadow: 0 0 12px rgba(239,68,68,0.3); }
  100% { background: transparent; box-shadow: none; }
}

/* Blinking cursor at end of terminal — appears after last line printed */
.terminal {
  position: relative;
}
.friction.reveal .terminal::after {
  content: '▋';
  display: inline-block;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  margin-left: 0;
  margin-top: 6px;
  opacity: 0;
}
.friction.reveal.visible .terminal::after {
  animation: terminalCursorBlink 0.9s steps(2) infinite;
  animation-delay: 2.20s;
}
.friction-card.good .terminal::after {
  color: var(--green);
}
@keyframes terminalCursorBlink {
  0%, 49.9%   { opacity: 1; }
  50%, 100%   { opacity: 0; }
}

/* Friction list items — fade+slide from left, starts after terminal finishes */
.friction.reveal .friction-list li {
  opacity: 0;
  transform: translateX(-12px);
}
.friction.reveal.visible .friction-list li {
  animation: frictionListIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.friction.reveal.visible .friction-list li:nth-child(1) { animation-delay: 2.30s; }
.friction.reveal.visible .friction-list li:nth-child(2) { animation-delay: 2.42s; }
.friction.reveal.visible .friction-list li:nth-child(3) { animation-delay: 2.54s; }
.friction.reveal.visible .friction-list li:nth-child(4) { animation-delay: 2.66s; }
.friction.reveal.visible .friction-list li:nth-child(5) { animation-delay: 2.78s; }

@keyframes frictionListIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Arrow between cards — already has its own continuous arrowFlow animation */

/* ═══════════════════════════════════════════════════════
   PRODUCT SHOWCASE — LIVE CHAT ANIMATION
   ══════════════════════════════════════════════════════ */

/* ─── Typing dots inside Lentrox's bubble ─────────────── */
.app-typing-dots {
  display: flex;
  gap: 6px;
  padding: 6px 0 4px;
  align-items: center;
  overflow: hidden;
}
.app-typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(124, 184, 255, 0.85);
  display: inline-block;
}
.app-typing-dots span:nth-child(1) { animation: typingBounce 1.1s ease-in-out infinite; }
.app-typing-dots span:nth-child(2) { animation: typingBounce 1.1s ease-in-out infinite 0.15s; }
.app-typing-dots span:nth-child(3) { animation: typingBounce 1.1s ease-in-out infinite 0.30s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ─── Initial hidden state for animating elements ─── */
.product-showcase.reveal .app-bubble.you,
.product-showcase.reveal .app-bubble-row,
.product-showcase.reveal .app-workflow,
.product-showcase.reveal .app-step,
.product-showcase.reveal .app-output,
.product-showcase.reveal .app-mini-btn,
.product-showcase.reveal .app-quick-chip,
.product-showcase.reveal .app-input,
.product-showcase.reveal .app-step-item {
  opacity: 0;
}

/* Typing dots start hidden (not shown until Lentrox bubble appears) */
.product-showcase.reveal .app-typing-dots {
  opacity: 0;
}
/* Lentrox's copy starts hidden — will fade in AFTER typing dots */
.product-showcase.reveal .app-bubble-row .app-bubble-copy {
  opacity: 0;
}

/* ─── Animations once .visible triggers ─────────────── */

/* 1. User bubble appears (0.2s delay) */
.product-showcase.chat-is-live .app-bubble.you {
  animation: psBubbleIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
@keyframes psBubbleIn {
  from { opacity: 0; transform: translateY(12px) translateX(8px); }
  to   { opacity: 1; transform: translateY(0) translateX(0); }
}

/* 2. Lentrox's bubble row appears (0.9s delay) with typing dots active */
.product-showcase.chat-is-live .app-bubble-row {
  animation: psBubbleInLeft 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}
@keyframes psBubbleInLeft {
  from { opacity: 0; transform: translateY(12px) translateX(-8px); }
  to   { opacity: 1; transform: translateY(0) translateX(0); }
}

/* 3. Typing dots fade in with bubble (1.1s) */
.product-showcase.chat-is-live .app-typing-dots {
  animation: psFadeIn 0.3s ease-out 1.1s forwards;
}

/* 4. Typing dots hide at 2.4s, copy fades in */
.product-showcase.chat-is-live .app-bubble-row .app-typing-dots {
  animation: psFadeIn 0.3s ease-out 1.1s forwards, psFadeOut 0.25s ease-in 2.4s forwards;
}
.product-showcase.chat-is-live .app-bubble-row .app-bubble-copy {
  animation: psFadeIn 0.4s ease-out 2.45s forwards;
}
@keyframes psFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes psFadeOut {
  from { opacity: 1; max-height: 30px; margin: 6px 0 4px; padding: 6px 0 4px; }
  to   { opacity: 0; max-height: 0;    margin: 0;          padding: 0;         }
}

/* 5. Workflow card scales in (2.9s) */
.product-showcase.chat-is-live .app-workflow {
  animation: psWorkflowIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 2.9s forwards;
}
@keyframes psWorkflowIn {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 6. Steps appear sequentially from 2.8s, stagger 220ms */
.product-showcase.chat-is-live .app-step {
  animation: psStepIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.product-showcase.chat-is-live .app-step:nth-child(1) { animation-delay: 3.5s; }
.product-showcase.chat-is-live .app-step:nth-child(2) { animation-delay: 4.34s; }
.product-showcase.chat-is-live .app-step:nth-child(3) { animation-delay: 5.18s; }
.product-showcase.chat-is-live .app-step:nth-child(4) { animation-delay: 6.02s; }
.product-showcase.chat-is-live .app-step:nth-child(5) { animation-delay: 6.86s; }

@keyframes psStepIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Step done-circle scale-pop */
.product-showcase.reveal .app-step.done::before {
  transform: translateX(-50%) scale(0);
}
.product-showcase.chat-is-live .app-step.done::before {
  animation: psStepDonePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.product-showcase.chat-is-live .app-step:nth-child(1).done::before { animation-delay: 3.7s; }
.product-showcase.chat-is-live .app-step:nth-child(2).done::before { animation-delay: 4.54s; }
.product-showcase.chat-is-live .app-step:nth-child(3).done::before { animation-delay: 5.38s; }

@keyframes psStepDonePop {
  from { transform: translateX(-50%) scale(0); }
  70%  { transform: translateX(-50%) scale(1.2); }
  to   { transform: translateX(-50%) scale(1); }
}

/* Active step — pulsing glow + subtle spin indicator */
.product-showcase.reveal .app-step.active::before {
  transform: translateX(-50%) scale(0);
}
.product-showcase.chat-is-live .app-step.active::before {
  animation: psStepDonePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 6.22s forwards,
             psActivePulse 1.6s ease-in-out 6.62s infinite;
}
@keyframes psActivePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(138,120,255,0.16), 0 0 24px rgba(138,120,255,0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(138,120,255,0.08), 0 0 36px rgba(138,120,255,0.55); }
}

/* Progress line (::after) for done steps animates left-to-right */
.product-showcase.reveal .app-step.done::after,
.product-showcase.reveal .app-step.active::after {
  transform-origin: left center;
  transform: scaleX(0);
}
.product-showcase.chat-is-live .app-step.done::after,
.product-showcase.chat-is-live .app-step.active::after {
  animation: psStepLineGrow 0.3s linear forwards;
}
.product-showcase.chat-is-live .app-step:nth-child(1).done::after { animation-delay: 3.8s; }
.product-showcase.chat-is-live .app-step:nth-child(2).done::after { animation-delay: 4.64s; }
.product-showcase.chat-is-live .app-step:nth-child(3).done::after { animation-delay: 5.48s; }
.product-showcase.chat-is-live .app-step:nth-child(4).active::after { animation-delay: 6.32s; }

@keyframes psStepLineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 7. Output block appears (7.3s) */
.product-showcase.chat-is-live .app-output {
  animation: psOutputIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 7.3s forwards;
}
@keyframes psOutputIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 8. Mini action buttons pop in with stagger (4.2s+) */
.product-showcase.chat-is-live .app-mini-btn {
  animation: psMiniBtnPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.product-showcase.chat-is-live .app-mini-btn:nth-child(1) { animation-delay: 7.6s; }
.product-showcase.chat-is-live .app-mini-btn:nth-child(2) { animation-delay: 7.7s; }
.product-showcase.chat-is-live .app-mini-btn:nth-child(3) { animation-delay: 7.8s; }

@keyframes psMiniBtnPop {
  from { opacity: 0; transform: scale(0.7) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 9. Quick chips appear from left with stagger (4.6s+) */
.product-showcase.chat-is-live .app-quick-chip {
  animation: psChipIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.product-showcase.chat-is-live .app-quick-chip:nth-child(1) { animation-delay: 8.0s; }
.product-showcase.chat-is-live .app-quick-chip:nth-child(2) { animation-delay: 8.08s; }
.product-showcase.chat-is-live .app-quick-chip:nth-child(3) { animation-delay: 8.16s; }
.product-showcase.chat-is-live .app-quick-chip:nth-child(4) { animation-delay: 8.24s; }
.product-showcase.chat-is-live .app-quick-chip:nth-child(5) { animation-delay: 8.32s; }

@keyframes psChipIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 10. Input field appears (8.5s) with blinking cursor */
.product-showcase.chat-is-live .app-input {
  animation: psInputIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 8.5s forwards;
}
@keyframes psInputIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Blinking cursor in input placeholder (starts after input appears) */
.app-input-placeholder {
  position: relative;
}
.product-showcase.chat-is-live .app-input-placeholder::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 15px;
  background: var(--cyan);
  margin-left: 3px;
  vertical-align: -2px;
  animation: psInputCursor 0.9s steps(2) 9.1s infinite;
  opacity: 0;
}
@keyframes psInputCursor {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ═══ RIGHT SIDEBAR — Workflow steps list sync with main chat ═══ */
.product-showcase.reveal .app-step-item {
  opacity: 0;
}
.product-showcase.chat-is-live .app-step-item {
  animation: psStepItemIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.product-showcase.chat-is-live .app-step-item:nth-child(1) { animation-delay: 3.7s; }
.product-showcase.chat-is-live .app-step-item:nth-child(2) { animation-delay: 4.54s; }
.product-showcase.chat-is-live .app-step-item:nth-child(3) { animation-delay: 5.38s; }
.product-showcase.chat-is-live .app-step-item:nth-child(4) { animation-delay: 6.22s; }
.product-showcase.chat-is-live .app-step-item:nth-child(5) { animation-delay: 7.06s; }

@keyframes psStepItemIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* === Lentrox verification + result modal === */
.modal-content.is-result{max-width:760px;text-align:left}
.form-view{animation:modalViewIn .32s ease both}
.form-view--hidden{display:none}
.form-view--shown{display:block}
.captcha-wrap{max-height:0;opacity:0;overflow:hidden;transform:translateY(-8px);transition:max-height .42s ease,opacity .28s ease,transform .42s ease;margin:0}
.captcha-wrap.show{max-height:210px;opacity:1;transform:translateY(0);margin:0 0 18px}
.captcha-card{border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(6,182,212,.08));border-radius:18px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.captcha-start{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(6,10,22,.58);color:var(--text);cursor:pointer;text-align:left;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.captcha-start:hover,.captcha-start:focus-visible{border-color:rgba(6,182,212,.45);background:rgba(6,182,212,.08);outline:none}
.captcha-start.is-solving{transform:translateY(-1px);border-color:rgba(6,182,212,.6)}
.captcha-start.is-verified{border-color:rgba(52,211,153,.58);background:rgba(52,211,153,.08)}
.captcha-start:disabled{cursor:default;opacity:.92}
.captcha-orbit{position:relative;isolation:isolate;overflow:hidden;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 42px;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.34),transparent 34%),linear-gradient(135deg,var(--violet),var(--cyan));box-shadow:0 0 22px rgba(6,182,212,.18);transform:translateZ(0);transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.captcha-orbit::before,.captcha-orbit::after{content:"";position:absolute;inset:3px;border-radius:50%;pointer-events:none}
.captcha-orbit::before{border:1px solid rgba(255,255,255,.18);border-left-color:rgba(255,255,255,.42);border-bottom-color:rgba(6,182,212,.56);opacity:.78}
.captcha-orbit::after{inset:-1px;background:radial-gradient(circle,rgba(255,255,255,.34) 0 12%,transparent 42%);opacity:0;transform:scale(.35)}
.captcha-orbit span{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:#0e1425;border:1px solid rgba(255,255,255,.08);transition:transform .22s ease,background .22s ease,border-color .22s ease}
.captcha-start:hover .captcha-orbit,.captcha-start:focus-visible .captcha-orbit{box-shadow:0 0 28px rgba(6,182,212,.26)}
.captcha-start:active .captcha-orbit,.captcha-start.is-tapped .captcha-orbit{animation:captchaOrbitTap .46s cubic-bezier(.2,.8,.2,1)}
.captcha-start.is-tapped .captcha-orbit::after{animation:captchaOrbitRipple .46s ease-out}
.captcha-start.is-solving .captcha-orbit{animation:captchaOrbitGlow 1.15s ease-in-out infinite;box-shadow:0 0 30px rgba(6,182,212,.3)}
.captcha-start.is-solving .captcha-orbit::before{animation:captchaOrbitRing .78s linear infinite}
.captcha-start.is-solving .captcha-orbit span{animation:captchaOrbitCore 1s ease-in-out infinite}
.captcha-start.is-verified .captcha-orbit{background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.32),transparent 34%),linear-gradient(135deg,#34d399,#06b6d4);box-shadow:0 0 26px rgba(52,211,153,.28);animation:captchaOrbitDone .52s ease both}
.captcha-start.is-verified .captcha-orbit::before{border-color:rgba(255,255,255,.25);border-bottom-color:rgba(52,211,153,.75)}
.captcha-start.is-verified .captcha-orbit span{background:#0b1f1a;border-color:rgba(52,211,153,.3)}
@keyframes captchaOrbitTap{0%{transform:scale(1)}42%{transform:scale(.9);filter:saturate(1.22)}72%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes captchaOrbitRipple{0%{opacity:.42;transform:scale(.18)}100%{opacity:0;transform:scale(1.35)}}
@keyframes captchaOrbitGlow{0%,100%{transform:scale(1);box-shadow:0 0 24px rgba(6,182,212,.2)}50%{transform:scale(1.045);box-shadow:0 0 34px rgba(124,58,237,.3)}}
@keyframes captchaOrbitRing{to{transform:rotate(360deg)}}
@keyframes captchaOrbitCore{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}
@keyframes captchaOrbitDone{0%{transform:scale(.95)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.captcha-start.is-tapped .captcha-orbit,.captcha-start.is-tapped .captcha-orbit::after,.captcha-start.is-solving .captcha-orbit,.captcha-start.is-solving .captcha-orbit::before,.captcha-start.is-solving .captcha-orbit span,.captcha-start.is-verified .captcha-orbit{animation:none}}
.captcha-copy{display:flex;flex-direction:column;gap:3px}
.captcha-copy strong{font-size:14px;font-weight:700}
.captcha-copy small,.captcha-msg{font-size:12px;color:var(--text-dim);line-height:1.45}
.captcha-progress{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:11px 4px 0}
.captcha-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--cyan));border-radius:inherit;transition:width .16s ease}
.captcha-msg{margin:9px 4px 0;text-align:center;min-height:18px}
.captcha-msg.is-error{color:#fb7185}
.captcha-msg.is-ok{color:#34d399}
.form-result{grid-template-columns:minmax(0,1fr) minmax(260px,.95fr);gap:24px;align-items:stretch}
.form-result.form-view--shown{display:grid}
.form-result__left,.form-result__right{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.035);padding:24px;text-align:left;overflow:hidden}
.form-result__right{background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(6,182,212,.07))}
.result-link{display:inline-flex;margin-top:4px;color:var(--cyan);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none}
.result-link:hover{text-decoration:underline}
.download-status{margin-top:12px;color:var(--text-dim);font-size:12px;line-height:1.45}
.download-status.is-error{color:#fb7185}
.promo-label{display:block;margin:16px 0 8px;color:var(--text-dim);font-size:11px;text-transform:uppercase;letter-spacing:1.8px;font-family:var(--mono)}
.promo-box{display:flex;gap:8px;align-items:center}
.promo{width:100%;min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(0,0,0,.28);color:#fff;font:700 16px/1 var(--mono);letter-spacing:1.2px;padding:13px 14px;outline:none}
.click-to-copy{border:0;border-radius:14px;padding:13px 15px;background:#f4f6fa;color:#0b0f1a;font-weight:800;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.click-to-copy:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
@keyframes modalViewIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:720px){.modal-content.is-result{max-width:460px}.form-result.form-view--shown{display:block}.form-result__left{margin-bottom:14px}.promo-box{flex-direction:column;align-items:stretch}.click-to-copy{width:100%}}