/* Scroll-synced HTML stages layered over the scroll-driven video (video = motion background only). */
#scroll-video{ height:640vh; height:640svh; background:#f6f9ff; }
#scroll-video .sv-sticky{ background:#f6f9ff; }
#scroll-video .sv-frame::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); }
.sv-stages{ position:absolute; inset:0; z-index:4; perspective:1200px; color:#0b1736; }
.sv-stage{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:clamp(10px,1.8vh,18px); padding:calc(var(--nav-h,66px) + 12px) clamp(20px,6vw,96px) 28px; opacity:0; pointer-events:none; will-change:transform,opacity; }
.sv-stage.is-active{ pointer-events:auto; }
.sv-stage.center{ align-items:center; text-align:center; }
.sv-eyebrow{ font:600 12px/1 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:#2563eb; }
.sv-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; line-height:1.08; letter-spacing:-.02em; font-size:clamp(1.7rem,4.4vw,3.6rem); max-width:18em; }
.sv-title em{ font-style:normal; background:linear-gradient(90deg,#06b6d4,#2563eb,#8b5cf6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sv-desc{ font-size:clamp(.95rem,1.5vw,1.15rem); line-height:1.6; max-width:38em; color:#33425f; }
.sv-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:clamp(.9rem,1.3vw,1.05rem); color:#1c2a47; }
.sv-list li::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%; background:linear-gradient(135deg,#06b6d4,#8b5cf6); }
.sv-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.sv-btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; min-height:44px; border-radius:999px; font-weight:600; font-size:.95rem; border:1px solid rgba(11,23,54,.14);
  background:rgba(255,255,255,.85); color:#0b1736; cursor:pointer; text-decoration:none; transition:transform .2s, box-shadow .2s, border-color .2s; backdrop-filter:blur(6px); }
.sv-btn.primary{ background:linear-gradient(90deg,#2563eb,#8b5cf6); color:#fff; border-color:transparent; box-shadow:0 10px 28px -10px rgba(37,99,235,.6); }
.sv-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(37,99,235,.5); border-color:#2563eb; }
.sv-btn:active{ transform:translateY(0) scale(.98); }
.sv-btn:focus-visible, .sv-card:focus-visible{ outline:3px solid #06b6d4; outline-offset:3px; }
.sv-note{ font:500 11px/1.4 'IBM Plex Mono',monospace; color:#5b6b8c; }
/* staggered reveal when a stage becomes active */
.sv-in{ opacity:0; transform:translate3d(0,22px,0); filter:blur(6px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.is-active .sv-in{ opacity:1; transform:none; filter:none; }
.is-active .sv-in:nth-child(2){ transition-delay:.08s } .is-active .sv-in:nth-child(3){ transition-delay:.16s }
.is-active .sv-in:nth-child(4){ transition-delay:.24s } .is-active .sv-in:nth-child(5){ transition-delay:.32s } .is-active .sv-in:nth-child(6){ transition-delay:.4s }
/* website cards (real links) */
.sv-cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; width:min(920px,100%); transform-style:preserve-3d; }
.sv-card{ display:block; padding:12px; border-radius:14px; background:rgba(255,255,255,.9); border:1px solid rgba(11,23,54,.08); text-decoration:none; color:#0b1736;
  box-shadow:0 18px 40px -18px rgba(37,99,235,.35); transform:rotateY(calc((.5 - var(--t,.5)) * 22deg)) translateZ(calc(var(--i,0) * 6px)); transition:box-shadow .2s, border-color .2s; }
.sv-card:hover{ border-color:#2563eb; box-shadow:0 24px 50px -16px rgba(37,99,235,.55); }
.sv-card i{ display:block; height:clamp(44px,9vh,92px); border-radius:8px; margin-bottom:10px; background:linear-gradient(135deg,#a5f3fc,#c7d2fe); }
.sv-card:nth-child(2) i{ background:linear-gradient(135deg,#bae6fd,#ddd6fe); } .sv-card:nth-child(3) i{ background:linear-gradient(135deg,#c7d2fe,#fbcfe8); } .sv-card:nth-child(4) i{ background:linear-gradient(135deg,#99f6e4,#bfdbfe); }
.sv-card b{ font-size:.85rem; font-weight:600; }
/* chat mockup (real HTML) */
.sv-chat{ width:min(520px,100%); border-radius:18px; background:#fff; border:1px solid rgba(11,23,54,.08); box-shadow:0 30px 60px -24px rgba(37,99,235,.45);
  transform:rotateX(calc((.5 - var(--t,.5)) * 8deg)) rotateY(calc((var(--t,.5) - .5) * -10deg)); transform-style:preserve-3d; overflow:hidden; }
.sv-chat-h{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid rgba(11,23,54,.06); font-weight:600; font-size:.9rem; }
.sv-av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:.7rem; font-weight:700; background:linear-gradient(135deg,#06b6d4,#2563eb); flex:none; }
.sv-av.u{ background:#cbd5e1; color:#334155; }
.sv-msgs{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; min-height:clamp(150px,26vh,230px); }
.sv-m{ display:flex; align-items:flex-end; gap:8px; max-width:88%; opacity:0; transform:translateY(8px); transition:opacity .35s, transform .35s; }
.sv-m.show{ opacity:1; transform:none; }
.sv-m span.b{ padding:9px 13px; border-radius:16px; font-size:.85rem; line-height:1.45; }
.sv-m.cu{ align-self:flex-end; flex-direction:row-reverse; } .sv-m.cu .b{ background:#2563eb; color:#fff; border-bottom-right-radius:4px; }
.sv-m.ai .b{ background:#eef2fb; color:#0b1736; border-bottom-left-radius:4px; }
.sv-typing{ display:none; align-self:flex-start; gap:4px; padding:10px 14px; border-radius:16px; background:#eef2fb; }
.sv-typing.on{ display:flex; } .sv-typing s{ width:6px; height:6px; border-radius:50%; background:#94a3b8; animation:svDot 1s infinite; } .sv-typing s:nth-child(2){ animation-delay:.15s } .sv-typing s:nth-child(3){ animation-delay:.3s }
@keyframes svDot{ 0%,80%,100%{ opacity:.3; transform:none } 40%{ opacity:1; transform:translateY(-3px) } }
.sv-input{ display:flex; align-items:center; gap:8px; margin:0 14px 14px; padding:8px 8px 8px 14px; border-radius:999px; border:1px solid rgba(11,23,54,.1); font-size:.8rem; color:#94a3b8; }
.sv-input .send{ margin-left:auto; width:30px; height:30px; border-radius:50%; background:#2563eb; color:#fff; display:grid; place-items:center; font-size:.7rem; }
/* automation flow */
.sv-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.sv-node{ padding:12px 16px; border-radius:14px; background:rgba(255,255,255,.9); border:1px solid rgba(11,23,54,.08); font-weight:600; font-size:.88rem; opacity:.45; transform:scale(.96); transition:all .45s; }
.sv-node.lit{ opacity:1; transform:none; border-color:#2563eb; box-shadow:0 12px 30px -12px rgba(37,99,235,.55); }
.sv-arrow{ color:#2563eb; opacity:.4; transition:opacity .45s; } .sv-arrow.lit{ opacity:1; }
.sv-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,64px); align-items:center; width:100%; }
@media (max-width:767px), (orientation:portrait){
  #scroll-video{ height:600vh; height:600svh; margin-top:calc(-1 * var(--nav-h,62px)); background:#f6f9ff; }
  #scroll-video .sv-sticky{ top:0; height:100vh; height:100svh; z-index:3; display:block; overflow:hidden; background:#f6f9ff; }
  #scroll-video .sv-frame{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
  #scroll-video video{ object-fit:cover; }
  #scroll-video .sv-hint{ display:none; }
  #scroll-video + header{ margin-top:0; }
  .sv-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .sv-card i{ height:34px; margin-bottom:6px; }
  .sv-split{ grid-template-columns:1fr; gap:14px; }
  .sv-flow{ flex-direction:column; align-items:flex-start; gap:4px; } .sv-arrow{ transform:rotate(90deg); margin-left:14px; }
  .sv-stage{ gap:9px; }
}
@media (prefers-reduced-motion: reduce){
  #scroll-video{ height:100svh; } .sv-stage[data-stage="1"]{ opacity:1 !important; pointer-events:auto; transform:none !important; }
  .sv-in{ opacity:1; transform:none; filter:none; transition:none; }
}
@media (max-width:767px){
  .sv-msgs{ min-height:0; gap:8px; padding:10px 12px; } .sv-m span.b{ font-size:.8rem; padding:7px 11px; }
  .sv-input{ margin:0 12px 12px; } .sv-note{ display:none; } .sv-stage[data-stage="3"] .sv-split > div:first-child{ gap:10px !important; }
}
/* keep the navbar above the stages even if the Tailwind CDN is slow/unavailable */
#main-content > nav{ position:sticky; top:0; z-index:50; }
#mobile-menu{ position:relative; z-index:49; }