/* =====================================================================
   orb2bitpdf.com — LANDING PAGE ONLY (body.lp)
   Rides on styles.css tokens. Everything here is scoped to body.lp so
   the tool pages / about / contact keep their current look.

   Contents
     1. tokens + page chrome (scroll progress bar, aurora)
     2. hero (headline, live app-window demo, floating chips)
     3. tool marquee
     4. stats (count-up)
     5. tool cinema (sticky stage + 18 scroll steps)
     6. demo primitives (paper pages, lines, chips)
     7. the 18 tool demos
     8. Windows app mockup
     9. Android phone mockup
    10. tool grid + why + CTA upgrades
    11. responsive + reduced motion
   ===================================================================== */

body.lp {
  --paper:   #f2f6ff;
  --paper-2: #dce6fa;
  --ink:     #2c3a63;
  --ink-2:   #b9c6e6;
  --red:     #ef4444;
  --red-2:   #fb7185;
  --green:   #34d399;
  --amber:   #fbbf24;
  --violet:  #a78bfa;
  --wordblue:#2b579a;
}

/* ---------- 1. page chrome ---------- */
.lp-scrollbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 300; pointer-events: none;
}
.lp-scrollbar i {
  display: block; height: 100%; width: 0;
  background: var(--grad-blue);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.75);
}

/* Aurora blobs behind the hero */
.lp-aurora { position: absolute; inset: -22% -10% auto; height: 130%; z-index: -1; pointer-events: none; filter: blur(72px); opacity: 0.5; }
.lp-aurora i { position: absolute; border-radius: 50%; will-change: transform; transform: translateZ(0); }
.lp-aurora .a1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -6%; top: -12%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.55), transparent 65%);
  animation: lpDriftA 24s ease-in-out infinite alternate; }
.lp-aurora .a2 { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: -8%; top: 4%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.45), transparent 65%);
  animation: lpDriftB 28s ease-in-out infinite alternate; }
.lp-aurora .a3 { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: 38%; bottom: -10%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.32), transparent 65%);
  animation: lpDriftA 30s ease-in-out infinite alternate-reverse; }
@keyframes lpDriftA { to { transform: translate3d(6vw, 4vh, 0) scale(1.12); } }
@keyframes lpDriftB { to { transform: translate3d(-5vw, 6vh, 0) scale(0.92); } }

/* ---------- 2. hero ---------- */
.lp .hero { padding-top: clamp(54px, 7vw, 104px); }
.lp .hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.5rem);
  letter-spacing: -0.035em;
  font-weight: 900;
}
.lp .hero h1 .gradient-text {
  background: linear-gradient(90deg, #7dd3fc, #38bdf8, #a78bfa, #38bdf8, #7dd3fc);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: lpShimmer 7s linear infinite;
}
@keyframes lpShimmer { to { background-position: -300% 0; } }

.lp .hero-actions .btn-primary { animation: lpGlowPulse 3.4s ease-in-out infinite; }
@keyframes lpGlowPulse {
  0%, 100% { box-shadow: 0 10px 30px -10px rgba(56, 122, 248, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
  50%      { box-shadow: 0 16px 46px -10px rgba(56, 122, 248, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}

.lp-scrollcue {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: clamp(30px, 5vw, 54px) auto 0;
  color: var(--faint); font-size: 0.88rem; font-weight: 600;
  width: fit-content;
}
.lp-scrollcue:hover { color: var(--brand-2); }
.lp-scrollcue svg { width: 16px; height: 16px; animation: lpCue 1.8s ease-in-out infinite; color: var(--brand-2); }
@keyframes lpCue { 0%, 100% { transform: translateY(-2px); opacity: 0.55; } 50% { transform: translateY(4px); opacity: 1; } }

/* --- hero visual: a live mini web-app playing a Split demo on loop --- */
.lp-hero-stage { position: relative; width: min(480px, 100%); margin-inline: auto; perspective: 1100px; }
.lp-appwin {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border-2);
  background: linear-gradient(180deg, rgba(21, 30, 62, 0.92), rgba(9, 14, 30, 0.96));
  box-shadow: 0 44px 90px -32px rgba(2, 9, 30, 0.95),
              0 0 0 1px rgba(56, 189, 248, 0.07),
              0 0 90px -24px rgba(56, 122, 248, 0.4);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease-out;
  will-change: transform;
}
.lp-win-top {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
}
.lp-win-top i { width: 10px; height: 10px; border-radius: 50%; }
.lp-win-top i:nth-child(1) { background: #ff5f57; }
.lp-win-top i:nth-child(2) { background: #febc2e; }
.lp-win-top i:nth-child(3) { background: #28c840; }
.lp-win-url {
  margin-left: 10px; padding: 4px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--faint);
  background: rgba(7, 11, 24, 0.6); border: 1px solid var(--border);
}
.lp-win-body { display: grid; grid-template-columns: 56px 1fr; min-height: 330px; }
.lp-win-rail { display: flex; flex-direction: column; gap: 8px; padding: 12px 9px; border-right: 1px solid var(--border); }
.rail-chip {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; font-size: 17px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  animation: lpRail 9s ease-in-out infinite;
}
.rail-chip:nth-child(1) { animation-delay: 0s; }
.rail-chip:nth-child(2) { animation-delay: 1.8s; }
.rail-chip:nth-child(3) { animation-delay: 3.6s; }
.rail-chip:nth-child(4) { animation-delay: 5.4s; }
.rail-chip:nth-child(5) { animation-delay: 7.2s; }
@keyframes lpRail {
  0%, 16%, 100% { border-color: var(--border); background: rgba(255, 255, 255, 0.03); box-shadow: none; }
  6% { border-color: rgba(56, 189, 248, 0.6); background: rgba(56, 122, 248, 0.16); box-shadow: 0 0 18px -4px rgba(56, 189, 248, 0.55); }
}
.lp-win-main { position: relative; display: grid; place-items: center; padding: 18px 16px 62px; }

.lp-doc-stack { position: relative; width: 110px; height: 148px; }
.lp-pg {
  position: absolute; inset: 0; border-radius: 9px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: 0 16px 34px -16px rgba(2, 9, 30, 0.85), inset 0 1px 0 #fff;
}
.lp-pg::before {
  content: ""; position: absolute; left: 15%; right: 15%; top: 18%;
  height: 6px; border-radius: 4px; background: var(--ink-2);
  box-shadow: 0 16px 0 var(--ink-2), 0 32px 0 var(--ink-2), 0 48px 0 rgba(185, 198, 230, 0.6);
}
.lp-pg .pnum {
  position: absolute; right: 8px; bottom: 6px;
  font: 700 0.62rem var(--mono); color: #92a5cf; font-style: normal;
}
.lp-pg.p1 { animation: lpHeroP1 9s var(--ease) infinite; }
.lp-pg.p2 { animation: lpHeroP2 9s var(--ease) infinite; z-index: 2; }
.lp-pg.p3 { animation: lpHeroP3 9s var(--ease) infinite; }
@keyframes lpHeroP1 {
  0%, 10%  { transform: translate(-8px, 4px) rotate(-4deg); opacity: 1; }
  22%, 58% { transform: translate(-118px, 0) rotate(-7deg); opacity: 1; }
  70%, 84% { transform: translate(-118px, 130px) rotate(-7deg); opacity: 0; }
  92%, 100% { transform: translate(-8px, 4px) rotate(-4deg); opacity: 1; }
}
@keyframes lpHeroP2 {
  0%, 10%  { transform: none; opacity: 1; }
  22%, 58% { transform: none; opacity: 1; }
  73%, 87% { transform: translateY(130px); opacity: 0; }
  94%, 100% { transform: none; opacity: 1; }
}
@keyframes lpHeroP3 {
  0%, 10%  { transform: translate(8px, 4px) rotate(4deg); opacity: 1; }
  22%, 58% { transform: translate(118px, 0) rotate(7deg); opacity: 1; }
  76%, 90% { transform: translate(118px, 130px) rotate(7deg); opacity: 0; }
  96%, 100% { transform: translate(8px, 4px) rotate(4deg); opacity: 1; }
}
/* selection ring pulses on the middle page while fanned out */
.lp-pg.p2::after {
  content: ""; position: absolute; inset: -3px; border-radius: 11px;
  border: 2px solid var(--brand-2); opacity: 0;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.22);
  animation: lpHeroSel 9s ease-in-out infinite;
}
@keyframes lpHeroSel { 0%, 26% { opacity: 0; } 32%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }

.lp-fakebtn {
  position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%);
  padding: 9px 22px; border-radius: 999px; white-space: nowrap;
  font-weight: 700; font-size: 0.84rem; color: #04122e;
  background: var(--grad-blue);
  box-shadow: 0 10px 26px -10px rgba(56, 122, 248, 0.8);
  animation: lpHeroBtn 9s ease-in-out infinite;
}
@keyframes lpHeroBtn {
  0%, 44%, 60%, 100% { transform: translateX(-50%) scale(1); filter: none; }
  50%, 54% { transform: translateX(-50%) scale(0.93); filter: brightness(1.25); }
}
.lp-toast {
  position: absolute; bottom: 10px; left: 50%;
  transform: translate(-50%, 26px); opacity: 0;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 0.78rem; font-weight: 600; color: #bff5d8;
  background: rgba(9, 26, 20, 0.92); border: 1px solid rgba(52, 211, 153, 0.4);
  animation: lpHeroToast 9s var(--ease) infinite;
}
@keyframes lpHeroToast {
  0%, 62% { transform: translate(-50%, 26px); opacity: 0; }
  68%, 88% { transform: translate(-50%, 0); opacity: 1; }
  94%, 100% { transform: translate(-50%, 26px); opacity: 0; }
}

/* floating proof chips around the window */
.lp-float {
  position: absolute; z-index: 3; padding: 9px 15px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 650; white-space: nowrap; color: var(--text);
  background: rgba(13, 20, 42, 0.86); border: 1px solid var(--border-2);
  box-shadow: 0 18px 40px -18px rgba(2, 9, 30, 0.9);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: lpBob 7s ease-in-out infinite;
}
.lp-float.f1 { top: 6%; left: -26px; animation-delay: -1s; }
.lp-float.f2 { top: 34%; right: -34px; animation-delay: -3s; }
.lp-float.f3 { bottom: 16%; left: -38px; animation-delay: -5s; }
.lp-float.f4 { bottom: -14px; right: 6%; animation-delay: -2s; }
@keyframes lpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- 3. tool marquee ---------- */
.lp-marquee {
  padding: 6px 0 2px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.lp-mq-track { display: flex; width: max-content; animation: lpMq 44s linear infinite; }
.lp-marquee:hover .lp-mq-track { animation-play-state: paused; }
@keyframes lpMq { to { transform: translateX(-50%); } }
.mq-chip {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  margin-right: 12px; padding: 9px 17px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: 0.88rem; font-weight: 600; white-space: nowrap;
}
.mq-chip b { font-weight: 400; font-size: 1rem; }

/* ---------- 4. stats ---------- */
.lp .stat { overflow: hidden; position: relative; }
.lp .stat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 90% at 50% -30%, rgba(56, 189, 248, 0.1), transparent 60%);
}
.lp .stat .num { letter-spacing: -0.03em; }

/* ---------- 5. tool cinema ---------- */
.tc-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.tc-stage-col { position: sticky; top: 88px; }
.tc-stage {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-2);
  /* fully OPAQUE: on mobile the stage is sticky and rides on top of the
     step list — any translucency lets the steps ghost through the demos */
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(56, 122, 248, 0.14), transparent 55%),
    linear-gradient(180deg, #121a34, #0a101f);
  box-shadow: var(--shadow-glow);
}
.tc-screen { position: relative; aspect-ratio: 5 / 4; }
.demo {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(0.95); pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.demo.on { opacity: 1; transform: none; }
.tc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.tc-cur { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -0.01em; min-width: 0; }
.tc-cur b {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  font-size: 18px; font-weight: 400; border-radius: 12px;
  background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.28);
}
.tc-cur span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-try { padding: 10px 18px; font-size: 0.9rem; flex: none; }
.tc-progress { height: 3px; background: rgba(255, 255, 255, 0.06); }
.tc-progress i { display: block; height: 100%; width: 0; background: var(--grad-blue); transition: width 0.4s var(--ease); }

.tc-steps { display: grid; gap: 13px; }
.tc-step {
  display: flex; gap: 15px; padding: 18px 19px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); scroll-margin-top: 110px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
              transform 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.3s;
  opacity: 0.72;
}
.tc-step.is-on {
  opacity: 1; transform: translateX(6px);
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(120deg, rgba(56, 122, 248, 0.1), rgba(255, 255, 255, 0.03));
  box-shadow: 0 22px 50px -30px rgba(56, 122, 248, 0.65);
}
.tc-num { flex: none; padding-top: 3px; font: 700 0.8rem var(--mono); color: var(--faint); }
.tc-step.is-on .tc-num { color: var(--brand-2); }
.tc-step h3 { display: flex; align-items: center; gap: 9px; font-size: 1.1rem; letter-spacing: -0.01em; }
.tc-step h3 .ico { font-size: 1.02rem; }
.tc-step p { color: var(--muted); font-size: 0.92rem; margin-top: 5px; line-height: 1.55; }
.tc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 0.89rem; }
.tc-open { color: var(--brand-2); font-weight: 650; }
.tc-open:hover { text-decoration: underline; }
.tc-more { color: var(--faint); }
.tc-more:hover { color: var(--muted); }

/* ---------- 6. demo primitives ---------- */
.dwrap { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; }
.pgbig, .mini, .docw {
  position: relative; border-radius: 10px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: 0 20px 44px -18px rgba(2, 9, 30, 0.85), inset 0 1px 0 #fff;
}
.pgbig { width: 152px; height: 198px; }
.mini { width: 78px; height: 104px; border-radius: 8px; }
.pgbig .ln, .mini .ln, .docw .ln {
  position: absolute; left: 14%; height: 7px; border-radius: 4px;
  background: var(--ink-2);
}
.pgbig .ln:nth-of-type(1) { top: 17%; width: 62%; }
.pgbig .ln:nth-of-type(2) { top: 31%; width: 70%; }
.pgbig .ln:nth-of-type(3) { top: 45%; width: 55%; }
.pgbig .ln:nth-of-type(4) { top: 59%; width: 66%; }
.mini .ln:nth-of-type(1) { top: 22%; width: 60%; height: 5px; }
.mini .ln:nth-of-type(2) { top: 42%; width: 48%; height: 5px; }
.ln.s { width: 40% !important; }
.tagbadge {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  font: 800 0.6rem/1 var(--mono); letter-spacing: 0.05em; color: #fff;
  padding: 4px 6px; border-radius: 6px;
}
.tagbadge.red { background: var(--red); }
.tagbadge.blue { background: var(--wordblue); }
.dchip {
  position: absolute; z-index: 3; padding: 7px 13px; border-radius: 999px;
  font: 600 0.76rem var(--mono); white-space: nowrap; color: var(--brand-3);
  background: rgba(8, 13, 28, 0.92); border: 1px solid var(--border-2);
  box-shadow: 0 12px 30px -14px rgba(2, 9, 30, 0.95);
}
.docw { width: 152px; height: 198px; }
.docw::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30px;
  border-radius: 10px 10px 0 0; background: linear-gradient(90deg, #2b579a, #3a6ec2);
}
.docw .ln:nth-of-type(1) { top: 28%; width: 66%; }
.docw .ln:nth-of-type(2) { top: 42%; width: 58%; }
.docw .ln:nth-of-type(3) { top: 56%; width: 62%; }

/* ---------- 7. the 18 tool demos ---------- */

/* SPLIT — one document becomes two files */
.demo-split .cutline {
  position: absolute; top: 8%; bottom: 8%; left: calc(50% - 48px);
  width: 0; border-left: 2px dashed var(--brand-2); opacity: 0;
}
.demo-split .cutter { position: absolute; top: -12%; left: calc(50% - 62px); font-size: 21px; opacity: 0; }
.demo-split .fchip { bottom: -34px; opacity: 0; }
.demo-split .fchip.f1 { left: 6%; }
.demo-split .fchip.f2 { right: 6%; }
.demo.on.demo-split .cutline { animation: dCutline 4.6s ease-in-out infinite; }
.demo.on.demo-split .cutter { animation: dCutter 4.6s ease-in-out infinite; }
.demo.on.demo-split .m1 { animation: dSplitL 4.6s var(--ease) infinite; }
.demo.on.demo-split .m2 { animation: dSplitR 4.6s var(--ease) infinite; }
.demo.on.demo-split .m3 { animation: dSplitR 4.6s var(--ease) infinite; }
.demo.on.demo-split .fchip { animation: dChipUp 4.6s var(--ease) infinite; }
.demo.on.demo-split .fchip.f2 { animation-name: dChipUp2; }
@keyframes dCutline { 0%, 8% { opacity: 0; } 14%, 34% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes dCutter {
  0%, 8% { transform: translateY(0); opacity: 0; }
  14% { opacity: 1; }
  30% { transform: translateY(150px); opacity: 1; }
  36%, 100% { transform: translateY(150px); opacity: 0; }
}
@keyframes dSplitL { 0%, 34% { transform: none; } 46%, 86% { transform: translateX(-22px); } 96%, 100% { transform: none; } }
@keyframes dSplitR { 0%, 34% { transform: none; } 46%, 86% { transform: translateX(22px); } 96%, 100% { transform: none; } }
@keyframes dChipUp {
  0%, 48% { opacity: 0; transform: translateY(8px); }
  56%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes dChipUp2 {
  0%, 52% { opacity: 0; transform: translateY(8px); }
  60%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(8px); }
}

/* MERGE — two pages become one */
.demo-merge .ma, .demo-merge .mb { z-index: 2; }
.demo-merge .result {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 128px;
  opacity: 0; transform: translate(-50%, -50%) scale(0.7);
}
.demo-merge .plus { font-size: 20px; color: var(--brand-2); font-weight: 700; }
.demo-merge .mchip { bottom: -38px; opacity: 0; }
.demo.on.demo-merge .ma { animation: dMergeA 4.6s var(--ease) infinite; }
.demo.on.demo-merge .mb { animation: dMergeB 4.6s var(--ease) infinite; }
.demo.on.demo-merge .plus { animation: dMergePlus 4.6s ease infinite; }
.demo.on.demo-merge .result { animation: dMergeRes 4.6s var(--ease) infinite; }
.demo.on.demo-merge .mchip { animation: dChipUp 4.6s var(--ease) infinite; }
@keyframes dMergeA {
  0%, 20% { transform: none; opacity: 1; }
  40%, 88% { transform: translateX(47px) rotate(-4deg); opacity: 0; }
  97%, 100% { transform: none; opacity: 1; }
}
@keyframes dMergeB {
  0%, 20% { transform: none; opacity: 1; }
  40%, 88% { transform: translateX(-47px) rotate(4deg); opacity: 0; }
  97%, 100% { transform: none; opacity: 1; }
}
@keyframes dMergePlus { 0%, 20% { opacity: 1; } 34%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dMergeRes {
  0%, 30% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  44%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  97%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

/* COMPRESS — the page gets squeezed, the size chip shrinks */
.demo-compress .pressbar {
  width: 7px; height: 150px; border-radius: 6px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand-deep));
  box-shadow: 0 0 18px -4px rgba(56, 189, 248, 0.7);
}
.demo-compress .size { bottom: -36px; left: 50%; transform: translateX(-50%); }
.demo-compress .s-after { color: #86efac; border-color: rgba(52, 211, 153, 0.45); opacity: 0; }
.demo.on.demo-compress .pl { animation: dPressL 4.4s var(--ease) infinite; }
.demo.on.demo-compress .pr { animation: dPressR 4.4s var(--ease) infinite; }
.demo.on.demo-compress .cpage { animation: dSquish 4.4s var(--ease) infinite; }
.demo.on.demo-compress .s-before { animation: dSizeBefore 4.4s ease infinite; }
.demo.on.demo-compress .s-after { animation: dSizeAfter 4.4s ease infinite; }
@keyframes dPressL { 0%, 16% { transform: none; } 38%, 80% { transform: translateX(17px); } 94%, 100% { transform: none; } }
@keyframes dPressR { 0%, 16% { transform: none; } 38%, 80% { transform: translateX(-17px); } 94%, 100% { transform: none; } }
@keyframes dSquish {
  0%, 16% { transform: none; }
  38%, 80% { transform: scaleX(0.82) scaleY(0.94); }
  94%, 100% { transform: none; }
}
@keyframes dSizeBefore { 0%, 30% { opacity: 1; transform: translateX(-50%); } 42%, 88% { opacity: 0; transform: translateX(-50%) translateY(-6px); } 98%, 100% { opacity: 1; transform: translateX(-50%); } }
@keyframes dSizeAfter { 0%, 36% { opacity: 0; transform: translateX(-50%) translateY(6px); } 48%, 88% { opacity: 1; transform: translateX(-50%); } 98%, 100% { opacity: 0; } }

/* EDIT — a line types itself, one gets highlighted, a shape pops in */
.demo-edit .typed { width: 0 !important; background: var(--ink); height: 7px; }
.demo-edit .caret { position: absolute; top: 44%; left: 14%; width: 2px; height: 12px; background: var(--ink); animation: dBlink 1s steps(1) infinite; }
.demo-edit .hl { overflow: visible; }
.demo-edit .hl::after {
  content: ""; position: absolute; inset: -3px -4px; border-radius: 5px;
  background: rgba(251, 191, 36, 0.4); transform: scaleX(0); transform-origin: left;
}
.demo-edit .shape {
  position: absolute; right: 15%; bottom: 13%; width: 38px; height: 38px;
  border-radius: 50%; border: 3px solid var(--brand); opacity: 0;
}
.demo-edit .shape::after { content: ""; position: absolute; inset: -7px; border: 1.5px dashed rgba(56, 189, 248, 0.65); border-radius: 4px; }
.demo-edit .echip { bottom: -36px; opacity: 0; }
.demo.on.demo-edit .typed { animation: dType 4.8s linear infinite; }
.demo.on.demo-edit .hl::after { animation: dHl 4.8s var(--ease) infinite; }
.demo.on.demo-edit .shape { animation: dShapePop 4.8s var(--ease) infinite; }
.demo.on.demo-edit .caret { animation: dCaret 4.8s linear infinite; }
.demo.on.demo-edit .echip { animation: dChipUp 4.8s var(--ease) infinite; }
@keyframes dBlink { 50% { opacity: 0; } }
@keyframes dType { 0%, 8% { width: 0; } 34%, 92% { width: 52%; } 100% { width: 0; } }
@keyframes dCaret {
  0%, 8% { left: 14%; opacity: 1; }
  34% { left: 60%; opacity: 1; }
  35%, 92% { left: 60%; opacity: 0; }
  100% { left: 14%; opacity: 0; }
}
@keyframes dHl { 0%, 40% { transform: scaleX(0); } 58%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes dShapePop {
  0%, 62% { opacity: 0; transform: scale(0.5); }
  72%, 94% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

/* CROP — frame draws, outside dims, page trims to the frame */
.demo-crop .cropbox {
  position: absolute; inset: 16% 14% 20% 14%; z-index: 2;
  border: 2px dashed var(--brand-2); border-radius: 6px; opacity: 0;
}
.demo-crop .cropbox .h {
  position: absolute; width: 10px; height: 10px; border-radius: 3px;
  background: var(--brand-2); box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
}
.demo-crop .cropbox .h1 { top: -6px; left: -6px; }
.demo-crop .cropbox .h2 { top: -6px; right: -6px; }
.demo-crop .cropbox .h3 { bottom: -6px; left: -6px; }
.demo-crop .cropbox .h4 { bottom: -6px; right: -6px; }
.demo.on.demo-crop .cropbox { animation: dCropBox 4.8s var(--ease) infinite; }
.demo.on.demo-crop .cr { animation: dCropPage 4.8s var(--ease) infinite; }
@keyframes dCropBox { 0%, 6% { opacity: 0; } 14%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes dCropPage {
  0%, 52% { clip-path: inset(0 round 10px); }
  66%, 90% { clip-path: inset(16% 14% 20% 14% round 8px); }
  100% { clip-path: inset(0 round 10px); }
}

/* WATERMARK — DRAFT stamps settle across the page */
.demo-wm .stamp {
  position: absolute; left: 50%; z-index: 2;
  font: 800 1rem var(--mono); letter-spacing: 0.2em; color: rgba(59, 130, 246, 0.5);
  transform: translateX(-50%) rotate(-28deg) scale(1.7); opacity: 0;
}
.demo-wm .st1 { top: 18%; }
.demo-wm .st2 { top: 44%; }
.demo-wm .st3 { top: 70%; }
.demo.on.demo-wm .st1 { animation: dStamp 4.6s var(--ease) infinite; }
.demo.on.demo-wm .st2 { animation: dStamp 4.6s var(--ease) 0.35s infinite; }
.demo.on.demo-wm .st3 { animation: dStamp 4.6s var(--ease) 0.7s infinite; }
@keyframes dStamp {
  0%, 12% { opacity: 0; transform: translateX(-50%) rotate(-28deg) scale(1.7); }
  26%, 82% { opacity: 1; transform: translateX(-50%) rotate(-28deg) scale(1); }
  94%, 100% { opacity: 0; transform: translateX(-50%) rotate(-28deg) scale(1.7); }
}

/* ORGANIZE — pages swap places, one rotates upright */
.demo-org .onum {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 800 1.1rem var(--mono); color: #8fa3cf; font-style: normal;
}
.demo-org .okchip { bottom: -36px; opacity: 0; }
.demo-org .o2 { transform: rotate(90deg); }
.demo.on.demo-org .o1 { animation: dOrgA 4.8s var(--ease) infinite; z-index: 2; }
.demo.on.demo-org .o3 { animation: dOrgB 4.8s var(--ease) infinite; }
.demo.on.demo-org .o2 { animation: dOrgRot 4.8s var(--ease) infinite; }
.demo.on.demo-org .okchip { animation: dChipUp 4.8s var(--ease) infinite; }
@keyframes dOrgA {
  0%, 18% { transform: none; }
  26% { transform: translate(94px, -52px); }
  34%, 88% { transform: translateX(188px); }
  98%, 100% { transform: none; }
}
@keyframes dOrgB {
  0%, 18% { transform: none; }
  26% { transform: translate(-94px, 52px); }
  34%, 88% { transform: translateX(-188px); }
  98%, 100% { transform: none; }
}
@keyframes dOrgRot { 0%, 44% { transform: rotate(90deg); } 60%, 92% { transform: rotate(0); } 100% { transform: rotate(90deg); } }

/* CREATE — photos fly in and become PDF pages */
.demo-create .photo {
  position: absolute; z-index: 3; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 12px; font-size: 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 14px 30px -12px rgba(2, 9, 30, 0.9);
}
.demo-create .ph1 { top: -10%; left: 2%; background: linear-gradient(135deg, #34d399, #0ea5e9); }
.demo-create .ph2 { top: -14%; right: 2%; background: linear-gradient(135deg, #fbbf24, #fb7185); }
.demo-create .slot {
  position: absolute; left: 16%; right: 16%; height: 32%;
  border: 1.5px dashed rgba(59, 130, 246, 0.5); border-radius: 6px;
}
.demo-create .slot.s1 { top: 12%; }
.demo-create .slot.s2 { bottom: 14%; }
.demo-create .crchip { bottom: -36px; opacity: 0; }
.demo.on.demo-create .ph1 { animation: dFly1 4.8s var(--ease) infinite; }
.demo.on.demo-create .ph2 { animation: dFly2 4.8s var(--ease) infinite; }
.demo.on.demo-create .crchip { animation: dChipUp 4.8s var(--ease) infinite; }
@keyframes dFly1 {
  0%, 14% { transform: none; opacity: 1; }
  34%, 90% { transform: translate(52px, 74px) scale(1.35); border-radius: 6px; opacity: 0.94; }
  99%, 100% { transform: none; opacity: 1; }
}
@keyframes dFly2 {
  0%, 22% { transform: none; opacity: 1; }
  44%, 90% { transform: translate(-50px, 146px) scale(1.35); border-radius: 6px; opacity: 0.94; }
  99%, 100% { transform: none; opacity: 1; }
}

/* PAGE NUMBERS — 1 2 3 stamp onto the corners */
.demo-num .pnum {
  position: absolute; right: 7px; bottom: 5px;
  font: 800 0.78rem var(--mono); color: var(--brand-deep); font-style: normal;
  opacity: 0; transform: scale(2.4);
}
.demo.on.demo-num .n1 .pnum { animation: dNumPop 4.4s var(--ease) infinite; }
.demo.on.demo-num .n2 .pnum { animation: dNumPop 4.4s var(--ease) 0.4s infinite; }
.demo.on.demo-num .n3 .pnum { animation: dNumPop 4.4s var(--ease) 0.8s infinite; }
@keyframes dNumPop {
  0%, 16% { opacity: 0; transform: scale(2.4); }
  28%, 80% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(2.4); }
}

/* REDACT — black bars wipe over the found text, for real */
.demo-censor .t1, .demo-censor .t2 { background: #f0a8b4; }
.demo-censor .bar {
  position: absolute; left: 14%; height: 11px; border-radius: 4px;
  background: #0b0f1c; transform: scaleX(0); transform-origin: left; z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.demo-censor .b1 { top: 29.5%; width: 70%; }
.demo-censor .b2 { top: 57.5%; width: 66%; }
.demo-censor .cnchip { bottom: -36px; opacity: 0; }
.demo.on.demo-censor .t1 { animation: dFound 4.8s ease infinite; }
.demo.on.demo-censor .t2 { animation: dFound 4.8s ease 0.5s infinite; }
.demo.on.demo-censor .b1 { animation: dBar1 4.8s var(--ease) infinite; }
.demo.on.demo-censor .b2 { animation: dBar2 4.8s var(--ease) infinite; }
.demo.on.demo-censor .cnchip { animation: dChipUp 4.8s var(--ease) infinite; }
@keyframes dFound { 0%, 6% { background: var(--ink-2); } 12%, 30% { background: #f0a8b4; } 60%, 100% { background: #f0a8b4; } }
@keyframes dBar1 { 0%, 22% { transform: scaleX(0); } 38%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes dBar2 { 0%, 40% { transform: scaleX(0); } 56%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* GET TEXT — a scanline sweeps, the text lifts out */
.demo-extract .scanline {
  position: absolute; left: 4%; right: 4%; top: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-2), transparent);
  box-shadow: 0 0 16px 2px rgba(56, 189, 248, 0.55); opacity: 0;
}
.demo-extract .txtcard {
  position: absolute; right: -58px; top: 22%;
  width: 74px; padding: 9px 10px 11px; border-radius: 10px;
  background: rgba(8, 13, 28, 0.94); border: 1px solid var(--border-2);
  opacity: 0; transform: translateX(-14px);
}
.demo-extract .txtcard b { display: block; font: 800 0.62rem var(--mono); color: var(--brand-3); margin-bottom: 7px; }
.demo-extract .txtcard i { display: block; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.4); margin-top: 4px; }
.demo-extract .txtcard i:nth-of-type(2) { width: 72%; }
.demo-extract .txtcard i:nth-of-type(3) { width: 85%; }
.demo.on.demo-extract .scanline { animation: dScan 4.6s ease-in-out infinite; }
.demo.on.demo-extract .txtcard { animation: dTxtCard 4.6s var(--ease) infinite; }
@keyframes dScan {
  0%, 6% { top: 4%; opacity: 0; }
  10% { opacity: 1; }
  44% { top: 92%; opacity: 1; }
  50%, 100% { top: 92%; opacity: 0; }
}
@keyframes dTxtCard {
  0%, 40% { opacity: 0; transform: translateX(-14px); }
  54%, 88% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateX(-14px); }
}

/* VIEWER — night mode flips the page */
.demo-view .vw { transition: none; }
.demo-view .vchip { top: -40px; right: 0; }
.demo-view .vchip .moon, .demo-view .vchip .sun { display: inline-block; }
.demo.on.demo-view .vw { animation: dNightPg 5s ease-in-out infinite; }
.demo.on.demo-view .vw .ln { animation: dNightLn 5s ease-in-out infinite; }
@keyframes dNightPg {
  0%, 30% { background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
  44%, 82% { background: linear-gradient(180deg, #182036, #101627); }
  96%, 100% { background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
}
@keyframes dNightLn {
  0%, 30% { background: var(--ink-2); }
  44%, 82% { background: #5d719f; }
  96%, 100% { background: var(--ink-2); }
}

/* PDF → OFFICE — the page flips into a Word doc */
.demo-convert .flip, .demo-w2p .flip { position: relative; width: 152px; height: 198px; transform-style: preserve-3d; }
.demo-convert .face, .demo-w2p .face { position: absolute; inset: 0; width: auto; height: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.demo-convert .face.back, .demo-w2p .face.back { transform: rotateY(180deg); }
.demo-convert .cvchip { bottom: -36px; opacity: 0; }
.demo-w2p .w2chip { bottom: -36px; opacity: 0; }
.demo.on.demo-convert .flip { animation: dFlip 5s var(--ease) infinite; }
.demo.on.demo-convert .cvchip { animation: dChipUp 5s var(--ease) infinite; }
.demo.on.demo-w2p .flip { animation: dFlip 5s var(--ease) infinite; }
.demo.on.demo-w2p .w2chip { animation: dChipUp 5s var(--ease) infinite; }
@keyframes dFlip {
  0%, 18% { transform: rotateY(0); }
  40%, 84% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

/* TRANSLATE — lines swap language */
.demo-translate .en.e1 { top: 24%; width: 64%; }
.demo-translate .en.e2 { top: 40%; width: 56%; }
.demo-translate .es { background: var(--brand); opacity: 0; }
.demo-translate .es.x1 { top: 24%; width: 52%; }
.demo-translate .es.x2 { top: 40%; width: 68%; }
.demo-translate .trchip { top: -40px; left: 50%; transform: translateX(-50%); }
.demo.on.demo-translate .en { animation: dLangOut 4.6s var(--ease) infinite; }
.demo.on.demo-translate .es { animation: dLangIn 4.6s var(--ease) infinite; }
@keyframes dLangOut {
  0%, 22% { opacity: 1; transform: none; }
  38%, 86% { opacity: 0; transform: translateX(-26px); }
  96%, 100% { opacity: 1; transform: none; }
}
@keyframes dLangIn {
  0%, 30% { opacity: 0; transform: translateX(26px); }
  46%, 86% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateX(26px); }
}

/* PROTECT — the lock closes, the password fills */
.demo-protect .lock { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 2; }
.demo-protect .lockbody {
  display: block; width: 44px; height: 34px; border-radius: 8px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: 0 12px 26px -10px rgba(29, 78, 216, 0.8);
}
.demo-protect .lockbody::after {
  content: ""; position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  width: 7px; height: 11px; border-radius: 4px; background: #04122e;
}
.demo-protect .shackle {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%) rotate(24deg);
  width: 28px; height: 26px; border: 6px solid #93c5fd; border-bottom: 0;
  border-radius: 14px 14px 0 0; transform-origin: 80% 100%;
}
.demo-protect .pwrow { position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.demo-protect .pw { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--brand-2); background: transparent; }
.demo-protect .prot { transition: none; }
.demo.on.demo-protect .shackle { animation: dShackle 4.8s var(--ease) infinite; }
.demo.on.demo-protect .pw.p1 { animation: dPw 4.8s ease 0s infinite; }
.demo.on.demo-protect .pw.p2 { animation: dPw 4.8s ease 0.18s infinite; }
.demo.on.demo-protect .pw.p3 { animation: dPw 4.8s ease 0.36s infinite; }
.demo.on.demo-protect .pw.p4 { animation: dPw 4.8s ease 0.54s infinite; }
.demo.on.demo-protect .prot { animation: dProtGlow 4.8s ease infinite; }
@keyframes dShackle { 0%, 18% { transform: translateX(-50%) rotate(24deg); } 32%, 90% { transform: translateX(-50%) rotate(0); } 100% { transform: translateX(-50%) rotate(24deg); } }
@keyframes dPw { 0%, 38% { background: transparent; } 50%, 88% { background: var(--brand-2); } 96%, 100% { background: transparent; } }
@keyframes dProtGlow {
  0%, 30% { box-shadow: 0 20px 44px -18px rgba(2, 9, 30, 0.85), inset 0 1px 0 #fff; }
  52%, 86% { box-shadow: 0 20px 44px -18px rgba(2, 9, 30, 0.85), 0 0 0 3px rgba(56, 189, 248, 0.4), 0 0 34px -4px rgba(56, 189, 248, 0.55); }
  100% { box-shadow: 0 20px 44px -18px rgba(2, 9, 30, 0.85), inset 0 1px 0 #fff; }
}

/* REPAIR — a torn page snaps back together */
.demo-repair .pgstack { position: relative; width: 152px; height: 198px; }
.demo-repair .rhalf { position: absolute; inset: 0; width: auto; height: auto; }
.demo-repair .rleft { clip-path: polygon(0 0, 58% 0, 42% 25%, 60% 50%, 44% 75%, 58% 100%, 0 100%); }
.demo-repair .rright { clip-path: polygon(58% 0, 100% 0, 100% 100%, 58% 100%, 44% 75%, 60% 50%, 42% 25%); }
.demo-repair .fixchip { bottom: -36px; opacity: 0; }
.demo.on.demo-repair .rleft { animation: dTearL 4.8s var(--ease) infinite; }
.demo.on.demo-repair .rright { animation: dTearR 4.8s var(--ease) infinite; }
.demo.on.demo-repair .fixchip { animation: dChipUp 4.8s var(--ease) infinite; }
@keyframes dTearL {
  0%, 24% { transform: translate(-15px, 3px) rotate(-4deg); }
  42%, 90% { transform: none; }
  100% { transform: translate(-15px, 3px) rotate(-4deg); }
}
@keyframes dTearR {
  0%, 24% { transform: translate(15px, -3px) rotate(3deg); }
  42%, 90% { transform: none; }
  100% { transform: translate(15px, -3px) rotate(3deg); }
}

/* SIGN — the signature draws itself, then the stamp lands */
.demo-sign .sig { position: absolute; left: 12%; right: 12%; bottom: 14%; height: 44px; width: 76%; }
.demo-sign .sig path {
  stroke: #1e3a8a; stroke-width: 2.6; stroke-linecap: round; fill: none;
  stroke-dasharray: 240; stroke-dashoffset: 240;
}
.demo-sign .sgchip { top: -40px; right: 4%; color: #86efac; border-color: rgba(52, 211, 153, 0.45); opacity: 0; }
.demo.on.demo-sign .sig path { animation: dSig 5s ease-in-out infinite; }
.demo.on.demo-sign .sgchip { animation: dSgChip 5s var(--ease) infinite; }
@keyframes dSig {
  0%, 8% { stroke-dashoffset: 240; }
  52%, 90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 240; }
}
@keyframes dSgChip {
  0%, 56% { opacity: 0; transform: scale(1.6) rotate(-9deg); }
  66%, 90% { opacity: 1; transform: scale(1) rotate(-6deg); }
  98%, 100% { opacity: 0; }
}

/* ---------- 8. Windows app mockup ---------- */
.appshow-grid {
  display: grid; grid-template-columns: 1fr 1.08fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.appshow-grid.rev { grid-template-columns: 1.08fr 1fr; }
.appshow-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin: 14px 0 14px; }
.appshow-copy > p { color: var(--muted); margin-bottom: 22px; }
.appshow-copy .feature-list { margin: 0 0 26px; padding: 0; }
.appshow-actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.appshow-actions .aux { font-size: 0.9rem; color: var(--faint); }
.appshow-actions .aux a { color: var(--brand-2); }
.appshow-actions .aux a:hover { text-decoration: underline; }

.wm {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-2);
  background: linear-gradient(180deg, rgba(19, 27, 56, 0.95), rgba(9, 14, 30, 0.97));
  box-shadow: 0 50px 100px -40px rgba(2, 9, 30, 0.95), 0 0 80px -30px rgba(56, 122, 248, 0.35);
  font-size: 0.8rem;
}
.wm-tb { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--muted); }
.wm-tb img { width: 18px; height: 18px; }
.wm-tb b { font-weight: 650; font-size: 0.8rem; }
.wm-caps { margin-left: auto; font-family: var(--mono); color: var(--faint); letter-spacing: 0.2em; }
.wm-tabs { display: flex; gap: 6px; padding: 8px 12px 0; border-bottom: 1px solid var(--border); }
.wm-tab {
  padding: 7px 14px; border-radius: 9px 9px 0 0; color: var(--faint);
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-bottom: 0;
  font-family: var(--mono); font-size: 0.72rem;
}
.wm-tab.on { color: var(--text); background: rgba(56, 122, 248, 0.14); border-color: var(--border-2); }
.wm-plus { align-self: center; padding: 0 8px 6px; color: var(--faint); }
.wm-cols { display: grid; grid-template-columns: 118px 1fr; }
.wm-side { display: flex; flex-direction: column; gap: 7px; padding: 12px 10px; border-right: 1px solid var(--border); }
.wm-chip {
  padding: 8px 11px; border-radius: 9px; color: var(--muted); white-space: nowrap;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); font-size: 0.74rem;
}
.wm.in .wm-chip { animation: lpRail 12s ease-in-out infinite; }
.wm.in .wm-chip.c1 { animation-delay: 0s; }
.wm.in .wm-chip.c2 { animation-delay: 2s; }
.wm.in .wm-chip.c3 { animation-delay: 4s; }
.wm.in .wm-chip.c4 { animation-delay: 6s; }
.wm.in .wm-chip.c5 { animation-delay: 8s; }
.wm.in .wm-chip.c6 { animation-delay: 10s; }
.wm-canvas { position: relative; display: grid; place-items: center; padding: 20px 16px 14px; }
.wm-page {
  position: relative; width: 132px; height: 172px; border-radius: 8px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: 0 18px 38px -16px rgba(2, 9, 30, 0.9), inset 0 1px 0 #fff;
}
.wm-page .ln { position: absolute; left: 14%; height: 6px; border-radius: 4px; background: var(--ink-2); }
.wm-page .ln:nth-of-type(1) { top: 16%; width: 62%; }
.wm-page .ln:nth-of-type(2) { top: 30%; width: 70%; }
.wm-page .ln:nth-of-type(3) { top: 44%; width: 54%; }
.wm-page .ln:nth-of-type(4) { top: 58%; width: 64%; }
.wm-crop { position: absolute; inset: 12% 10%; border: 1.5px dashed var(--brand-2); border-radius: 5px; opacity: 0; }
.wm-stamp {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-24deg) scale(1.6);
  font: 800 0.85rem var(--mono); letter-spacing: 0.18em; color: rgba(59, 130, 246, 0.55); opacity: 0;
}
.wm-pnum { position: absolute; right: 8px; bottom: 6px; font: 800 0.66rem var(--mono); color: var(--brand-deep); opacity: 0; }
.wm.in .wm-crop { animation: wmCrop 12s ease-in-out infinite; }
.wm.in .wm-stamp { animation: wmStamp 12s ease-in-out infinite; }
.wm.in .wm-pnum { animation: wmPnum 12s ease-in-out infinite; }
@keyframes wmCrop { 0%, 4% { opacity: 0; } 8%, 22% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes wmStamp {
  0%, 28% { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scale(1.6); }
  34%, 48% { opacity: 1; transform: translate(-50%, -50%) rotate(-24deg) scale(1); }
  54%, 100% { opacity: 0; }
}
@keyframes wmPnum { 0%, 56% { opacity: 0; transform: scale(2); } 62%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; } }
.wm-film { display: flex; gap: 7px; margin-top: 14px; }
.wm-film i { width: 26px; height: 34px; border-radius: 4px; background: rgba(255, 255, 255, 0.09); border: 1px solid var(--border); }
.wm-film i.on { border-color: var(--brand-2); background: rgba(56, 122, 248, 0.22); }
.wm-status { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); }
.wm-prog { flex: 1; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.wm-prog i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--grad-blue); }
.wm.in .wm-prog i { animation: wmProg 12s ease-in-out infinite; }
@keyframes wmProg { 0%, 64% { width: 0; } 78%, 96% { width: 100%; } 100% { width: 100%; } }
.wm-savemsg { font-size: 0.72rem; color: var(--faint); font-family: var(--mono); opacity: 0; white-space: nowrap; }
.wm.in .wm-savemsg { animation: wmSaved 12s ease-in-out infinite; }
@keyframes wmSaved { 0%, 78% { opacity: 0; } 84%, 98% { opacity: 1; } 100% { opacity: 1; } }

/* ---------- 9. Android phone mockup ---------- */
.dm-wrap { display: grid; place-items: center; }
.dm-phone {
  position: relative; width: min(272px, 74vw); aspect-ratio: 9 / 18.6;
  border-radius: 42px; padding: 11px;
  background: linear-gradient(180deg, #10162c, #05070f);
  border: 1px solid var(--border-2);
  box-shadow: 0 50px 110px -40px rgba(2, 9, 30, 0.95), 0 0 90px -34px rgba(56, 122, 248, 0.45),
              inset 0 0 0 2px rgba(255, 255, 255, 0.04);
}
.dm-screen { position: absolute; inset: 11px; border-radius: 32px; overflow: hidden; background: #070b18; }
.dm-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6;
  width: 74px; height: 20px; border-radius: 999px; background: #01030a;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.dm-view { position: absolute; inset: 0; background: radial-gradient(130% 90% at 50% 12%, #223250, #0a0f20 70%); }
.dm-hud {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 5;
  padding: 5px 13px; border-radius: 999px; white-space: nowrap;
  font: 600 0.62rem var(--mono); color: var(--brand-3);
  background: rgba(5, 8, 18, 0.72); border: 1px solid var(--border);
}
.dm-paper {
  position: absolute; left: 50%; top: 45%; width: 60%; aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%) rotate(-4.5deg);
  border-radius: 5px; background: linear-gradient(180deg, #f5f8ff, #dde7fa);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.85);
}
.dm-paper i { position: absolute; left: 12%; height: 4px; border-radius: 3px; background: #b9c6e6; }
.dm-paper i:nth-child(1) { top: 16%; width: 64%; }
.dm-paper i:nth-child(2) { top: 30%; width: 72%; }
.dm-paper i:nth-child(3) { top: 44%; width: 50%; }
.dm-paper i:nth-child(4) { top: 58%; width: 66%; }
.dm-quad {
  position: absolute; left: 50%; top: 45%; width: 63%; aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%) rotate(-4.5deg);
  border: 2px solid rgba(56, 189, 248, 0.85); border-radius: 6px;
  box-shadow: 0 0 24px -4px rgba(56, 189, 248, 0.55), inset 0 0 30px -12px rgba(56, 189, 248, 0.4);
}
.dm-quad b { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 10px rgba(56, 189, 248, 0.9); }
.dm-quad b:nth-child(1) { top: -6px; left: -6px; }
.dm-quad b:nth-child(2) { top: -6px; right: -6px; }
.dm-quad b:nth-child(3) { bottom: -6px; left: -6px; }
.dm-quad b:nth-child(4) { bottom: -6px; right: -6px; }
.dm.in .dm-quad { animation: dmTrack 10s ease-in-out infinite; }
@keyframes dmTrack {
  0%, 10% { transform: translate(-50%, -50%) rotate(-4.5deg) scale(1.06); opacity: 0.55; }
  22%, 44% { transform: translate(-50%, -50%) rotate(-4.5deg) scale(1); opacity: 1; }
  46%, 100% { transform: translate(-50%, -50%) rotate(-4.5deg) scale(1); opacity: 1; }
}
.dm-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 4; }
.dm.in .dm-flash { animation: dmFlash 10s linear infinite; }
@keyframes dmFlash { 0%, 45.5% { opacity: 0; } 47% { opacity: 0.85; } 49%, 100% { opacity: 0; } }
.dm-shutter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 56px; height: 56px; border-radius: 50%;
  border: 4px solid #fff; background: rgba(255, 255, 255, 0.16);
}
.dm-shutter::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; opacity: 0.9; }
.dm.in .dm-shutter { animation: dmShutter 10s ease-in-out infinite; }
@keyframes dmShutter {
  0%, 40% { transform: translateX(-50%) scale(1); }
  44%, 46% { transform: translateX(-50%) scale(0.82); }
  50%, 100% { transform: translateX(-50%) scale(1); }
}
.dm-thumb { position: absolute; bottom: 30px; left: 26px; z-index: 5; width: 34px; height: 42px; border-radius: 7px;
  background: linear-gradient(180deg, #f5f8ff, #dde7fa); border: 1px solid rgba(255, 255, 255, 0.4); opacity: 0.85; }
.dm-result {
  position: absolute; left: 7%; right: 7%; bottom: 16px; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(8, 13, 28, 0.96); border: 1px solid var(--border-2);
  transform: translateY(140%); box-shadow: 0 18px 40px -16px rgba(2, 9, 30, 0.9);
}
.dm-result .rp { flex: none; width: 26px; height: 34px; border-radius: 4px; background: linear-gradient(180deg, #f5f8ff, #dde7fa); position: relative; }
.dm-result .rp::after { content: "PDF"; position: absolute; left: 2px; top: 2px; font: 800 0.42rem var(--mono); color: #fff; background: var(--red); padding: 1.5px 3px; border-radius: 3px; }
.dm-result .rt { min-width: 0; }
.dm-result .rt b { display: block; font-size: 0.7rem; color: var(--text); font-family: var(--mono); }
.dm-result .rt span { display: block; font-size: 0.62rem; color: var(--green); margin-top: 2px; }
.dm.in .dm-result { animation: dmResult 10s var(--ease) infinite; }
@keyframes dmResult {
  0%, 50% { transform: translateY(140%); }
  57%, 90% { transform: translateY(0); }
  97%, 100% { transform: translateY(140%); }
}

/* ---------- 10. tool grid / why / CTA upgrades ---------- */
.lp .tool-card { position: relative; }
.lp .tool-card .tool-ico { transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s; }
.lp .tool-card:hover .tool-ico {
  transform: scale(1.14) rotate(-7deg);
  background: rgba(56, 122, 248, 0.24); border-color: rgba(56, 189, 248, 0.5);
}
.lp .tool-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 90% at 50% -30%, rgba(56, 189, 248, 0.14), transparent 55%);
  opacity: 0; transition: opacity 0.3s;
}
.lp .tool-card:hover::after { opacity: 1; }

.lp #why .card.in .icon { animation: lpIconPulse 3.6s ease-in-out infinite; }
@keyframes lpIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }

.lp .cta-band { isolation: isolate; }
.lp .cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.06) 45%, transparent 60%);
  background-size: 240% 100%;
  animation: lpSheen 6s ease-in-out infinite;
}
@keyframes lpSheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }

/* ---------- 11. responsive + reduced motion ---------- */
@media (max-width: 920px) {
  /* single column: the wrap becomes a plain block so the sticky stage can
     travel the WHOLE section (as a 1-col grid each row would pin it) */
  .tc-wrap { display: block; }
  .tc-steps { margin-top: 18px; }
  .tc-stage-col { position: sticky; top: 70px; z-index: 20; }
  .tc-stage { border-radius: 0 0 var(--radius) var(--radius); border-top: 0; margin-inline: -22px; }
  .tc-screen { aspect-ratio: auto; height: min(58vw, 320px); }
  .tc-screen .dwrap { transform: scale(0.85); }
  .tc-step, .tc-step.is-on { transform: none; }
  .appshow-grid, .appshow-grid.rev { grid-template-columns: 1fr; gap: 34px; }
  .appshow-grid.rev .dm-wrap { order: -1; }
  .lp-hero-stage { width: min(400px, 92%); }
  .lp-win-body { min-height: 280px; }
  .lp-float.f1 { left: -6px; }
  .lp-float.f3 { left: -8px; }
  .lp-float.f2 { right: -8px; }
}
@media (max-width: 560px) {
  .demo-extract .txtcard { right: -34px; }
  .lp-doc-stack { transform: scale(0.85); }
  .lp-float { font-size: 0.72rem; padding: 7px 11px; }
  .tc-bar { padding: 11px 12px; }
  .tc-try { padding: 9px 14px; font-size: 0.84rem; }
  .mq-chip { font-size: 0.82rem; padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-scrollcue svg { animation: none; }
  .lp-mq-track { animation: none; transform: none; }
  .demo { transition: none; }
  .tc-step { opacity: 1; }
}