/* RAMOS automation demos — explanatory marketing motion */
.marquee-wrap{overflow:hidden;border-block:1px solid rgba(0,0,0,.08);background:#fafafa;padding:18px 0}
.marquee-track{display:flex;gap:40px;width:max-content;animation:marquee 38s linear infinite}
.marquee-track span{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#666;white-space:nowrap}
.marquee-track span::before{content:"·";margin-right:40px;color:#bbb}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.demo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
.demo-panel{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.05)}
.demo-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(0,0,0,.07);background:#f7f7f7}
.demo-panel-head b{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.demo-dot{width:8px;height:8px;border-radius:50%;background:#1a1a1a;animation:dotPulse 1.5s ease-in-out infinite}
.demo-body{padding:22px;min-height:280px;position:relative}

/* Fake Revit chrome */
.rvt-chrome{border:1px solid rgba(0,0,0,.12);border-radius:10px;overflow:hidden;background:#ececec}
.rvt-tabs{display:flex;gap:2px;padding:8px 10px 0;background:#d8d8d8;font-size:.68rem;font-weight:600;color:#555}
.rvt-tabs span{padding:7px 12px;border-radius:6px 6px 0 0}
.rvt-tabs .on{background:#fff;color:#111}
.rvt-ribbon{display:flex;gap:10px;padding:12px;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);flex-wrap:wrap}
.rvt-btn{width:64px;text-align:center;font-size:.62rem;color:#444;cursor:default}
.rvt-btn i{display:flex;align-items:center;justify-content:center;width:40px;height:32px;margin:0 auto 6px;border:1px solid rgba(0,0,0,.12);border-radius:6px;background:#f4f4f4;font-style:normal;font-weight:700;font-size:.7rem}
.rvt-btn.active i{background:#111;color:#fff;border-color:#111;animation:btnPulse 4.5s ease-in-out infinite}
.rvt-canvas{height:148px;background:linear-gradient(180deg,#fafafa,#f0f0f0);position:relative;overflow:hidden}
.rvt-scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#111,transparent);box-shadow:0 0 12px rgba(0,0,0,.25);animation:scanDown 4.5s ease-in-out infinite;top:0}
.rvt-row{position:absolute;left:16px;right:16px;height:22px;border-radius:4px;background:rgba(0,0,0,.05);display:flex;align-items:center;padding:0 10px;font-size:.68rem;color:#666;opacity:0;transform:translateY(8px)}
.rvt-row.ok{animation:rowIn 4.5s ease-in-out infinite}
.rvt-row.ok::after{content:"OK";margin-left:auto;font-weight:700;color:#111;font-size:.62rem;letter-spacing:.08em}
.rvt-row:nth-child(2){top:28px;animation-delay:.35s}
.rvt-row:nth-child(3){top:58px;animation-delay:.7s}
.rvt-row:nth-child(4){top:88px;animation-delay:1.05s}
.rvt-row:nth-child(5){top:118px;animation-delay:1.4s}
@keyframes scanDown{0%,8%{top:8%;opacity:0}15%{opacity:1}55%{top:88%;opacity:1}65%,100%{top:88%;opacity:0}}
@keyframes rowIn{0%,20%{opacity:0;transform:translateY(8px)}35%,70%{opacity:1;transform:translateY(0)}85%,100%{opacity:0}}
@keyframes btnPulse{0%,20%{transform:scale(1)}28%{transform:scale(.92)}36%,100%{transform:scale(1)}}

/* Excel → Revit flow */
.flow{display:grid;grid-template-columns:1fr 40px 1fr;gap:8px;align-items:center;height:100%}
.flow-card{border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:14px;background:#fafafa;min-height:210px}
.flow-card h4{margin:0 0 12px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#888}
.xls-row{height:14px;border-radius:3px;background:#e8e8e8;margin-bottom:8px;position:relative;overflow:hidden}
.xls-row::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#d0d0d0,transparent);transform:translateX(-100%);animation:shimmer 2.4s ease-in-out infinite}
.xls-row:nth-child(2)::after{animation-delay:.15s}
.xls-row:nth-child(3)::after{animation-delay:.3s}
.xls-row:nth-child(4)::after{animation-delay:.45s}
.xls-row:nth-child(5)::after{animation-delay:.6s}
.xls-row.hi{background:#111}
.flow-arrow{display:flex;align-items:center;justify-content:center}
.flow-arrow span{width:28px;height:28px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;animation:arrowBounce 2.4s ease-in-out infinite}
.rvt-table{border:1px solid rgba(0,0,0,.12);border-radius:6px;overflow:hidden}
.rvt-table .tr{display:grid;grid-template-columns:1.2fr 1fr .7fr;gap:0;font-size:.68rem}
.rvt-table .tr > span{padding:8px 8px;border-bottom:1px solid rgba(0,0,0,.06);color:#555}
.rvt-table .tr.head > span{background:#111;color:#fff;font-weight:600;border:0}
.rvt-table .tr{opacity:0;animation:tableRow 3.6s ease-in-out infinite}
.rvt-table .tr:nth-child(1){opacity:1;animation:none}
.rvt-table .tr:nth-child(2){animation-delay:.4s}
.rvt-table .tr:nth-child(3){animation-delay:.75s}
.rvt-table .tr:nth-child(4){animation-delay:1.1s}
.rvt-table .tr:nth-child(5){animation-delay:1.45s}
@keyframes shimmer{0%{transform:translateX(-100%)}50%{transform:translateX(100%)}100%{transform:translateX(100%)}}
@keyframes arrowBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes tableRow{0%,15%{opacity:0;transform:translateY(6px)}30%,75%{opacity:1;transform:translateY(0)}90%,100%{opacity:0}}

/* Sheet cascade */
.sheet-stack{position:relative;height:220px;margin-top:8px}
.sheet{position:absolute;left:50%;width:72%;max-width:260px;height:150px;border:1px solid rgba(0,0,0,.14);border-radius:8px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:14px;transform:translateX(-50%);opacity:0}
.sheet b{display:block;font-size:.72rem;margin-bottom:10px}
.sheet .line{height:8px;background:#eee;border-radius:2px;margin-bottom:8px}
.sheet:nth-child(1){animation:sheetPop 5s ease-in-out infinite;animation-delay:0s}
.sheet:nth-child(2){animation:sheetPop 5s ease-in-out infinite;animation-delay:.55s}
.sheet:nth-child(3){animation:sheetPop 5s ease-in-out infinite;animation-delay:1.1s}
@keyframes sheetPop{
  0%,8%{opacity:0;transform:translateX(-50%) translateY(30px) scale(.92)}
  18%,70%{opacity:1;transform:translateX(-50%) translateY(var(--y,0)) scale(1)}
  85%,100%{opacity:0;transform:translateX(-50%) translateY(var(--y,0)) scale(1)}
}
.sheet:nth-child(1){--y:0px}
.sheet:nth-child(2){--y:18px}
.sheet:nth-child(3){--y:36px}

/* Time saved bars */
.save-list{display:flex;flex-direction:column;gap:18px}
.save-item{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.save-item.visible{opacity:1;transform:none}
.save-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:.88rem}
.save-top span{color:#666}
.save-top b{color:#111;font-weight:700;white-space:nowrap}
.save-bar{height:8px;border-radius:99px;background:#ececec;overflow:hidden}
.save-bar > i{display:block;height:100%;width:0;border-radius:99px;background:#111;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.save-item.visible .save-bar > i{width:var(--w)}

.demo-caption{margin-top:14px;font-size:.84rem;color:#666;line-height:1.55}

/* ── Video slots ── */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.video-slot{display:flex;flex-direction:column;gap:12px}
.video-frame{
  position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  background:#111;border:1px solid rgba(0,0,0,.12);
  box-shadow:0 12px 40px rgba(0,0,0,.08);
}
.video-frame video,.video-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;
}
.video-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%,rgba(255,255,255,.08),transparent 60%),
    linear-gradient(160deg,#171717,#0d0d0d);
}
.video-play{
  width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:transform .2s ease,background .2s,border-color .2s;
  padding-left:3px;
}
.video-play:not(:disabled):hover{transform:scale(1.06);background:rgba(255,255,255,.16);border-color:#fff}
.video-play:disabled{opacity:.45;cursor:default}
.video-slot.is-ready .video-play{opacity:1;cursor:pointer;border-color:rgba(255,255,255,.7)}
.video-placeholder-label{text-align:center;color:#fff}
.video-placeholder-label b{display:block;font-size:.92rem;font-weight:600;margin-bottom:6px}
.video-placeholder-label span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.video-cap{margin:0;font-size:.84rem;color:#666;line-height:1.55;padding:0 4px}
.video-slot.is-playing .video-placeholder{display:none}

@media (max-width:900px){
  .demo-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:14px}
  .flow-arrow{transform:rotate(90deg)}
  .video-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track,.rvt-scan,.rvt-row,.rvt-btn.active i,.xls-row::after,.flow-arrow span,.rvt-table .tr,.sheet{animation:none!important}
  .rvt-row,.rvt-table .tr,.sheet{opacity:1;transform:none}
}