/* Landing choreography only. / Просторові ефекти лише для лендінга. */
.lp-main { --lp-ease: cubic-bezier(.23, 1, .32, 1); }
.lp-hero { gap: clamp(28px, 5vw, 64px); }
.lp-hero-copy { position: relative; z-index: 2; }
.lp-hero-stage { display: grid; gap: clamp(28px, 4vw, 48px); min-width: 0; }
.lp-hero-stage .lp-clip-bar { margin: 0; }
.lp-h1, .lp-h2 { text-wrap: balance; }
.lp-hero .eyebrow { max-width: 68ch; }
.lp-frames { isolation: isolate; }
.lp-frames::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 9% 4% 12%; border: 1px solid var(--line-strong);
  border-radius: 50% 50% 26px 26px;
  background: linear-gradient(160deg, var(--surface), transparent 70%);
}
.lp-clip { --lp-y: 0px; --lp-angle: 0deg; --lp-x: 0px; }
.lp-clip-media { transition: box-shadow .2s; }
.lp-clip-media:hover { transform: none; }
.lp-clip figcaption { font-size: 13px; }
.lp-main .btn-primary, .lp-main .btn-ghost { transition: transform .16s var(--lp-ease), background-color .16s; }
.lp-main .btn-primary:active, .lp-main .btn-ghost:active { transform: scale(.96); }

/* Quiet context, then the demonstration peak. / Спокійний вступ перед головною демонстрацією. */
#problem { padding: clamp(24px, 4vw, 48px); background: var(--surface); border-radius: 24px; }
#problem .lp-loop-step { background: transparent; border-width: 0 0 1px; border-radius: 0; padding-inline: 0; }
#problem .lp-loop-step:last-child { border-color: var(--accent-text); }
#problem .lp-head > .eyebrow, #why > .lp-head > .eyebrow,
#who > .lp-head > .eyebrow, #faq > .lp-head > .eyebrow { display: none; }
#why { position: relative; }
.lp-demo { position: relative; border-radius: 24px; box-shadow: 0 24px 60px -36px rgba(23, 19, 15, .45);
  transform: perspective(1400px) rotateX(var(--lp-demo-angle, 0deg)); transform-origin: center bottom; }
.lp-demo-scenes { padding-block: clamp(28px, 4vw, 48px); }
.lp-demo .lp-scene { border-radius: 12px; box-shadow: none; }
.lp-demo .lp-scene.is-target { border-color: var(--accent-line); background: var(--accent-soft); }
.lp-demo .lp-scene.is-new { box-shadow: 0 8px 20px -16px var(--ink); }
.lp-scene-preview { aspect-ratio: 16 / 11; overflow: hidden; border-radius: 8px; margin-bottom: 16px;
  background: var(--surface-2); }
.lp-scene-preview img { display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%; clip-path: inset(0 0 var(--lp-reveal, 0%) 0); }
.lp-scene:first-child .lp-scene-preview img { object-position: center 48%; }
.lp-scene.is-target .lp-scene-preview img { object-position: center 70%; }
.lp-edit-track { height: 28px; margin: 0 var(--space-5) 20px; position: relative; display: flex; gap: 6px; }
.lp-edit-track > span { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; }
.lp-edit-track > span:nth-child(3) { background: var(--accent-soft); border-color: var(--accent-line); }
.lp-edit-track::after {
  content: ""; position: absolute; inset: -5px auto -5px 0; width: 2px;
  background: var(--accent-text); transform: translateX(var(--lp-playhead, 0px));
}
.lp-demo[data-edit-scope="other"] .lp-edit-track > span { background: var(--accent-soft); border-color: var(--accent-line); }
.lp-steps { position: relative; }
.lp-steps::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -16px;
  width: 2px; background: var(--accent-text); transform-origin: top;
  transform: scaleY(var(--lp-line, 1));
}
.lp-step-n { color: var(--accent-text); }
.lp-price-tiles { gap: 0; border-block: 1px solid var(--line-strong); }
.lp-tile { background: transparent; border: 0; border-radius: 0; padding: 24px 18px; }
.lp-tile + .lp-tile { border-left: 1px solid var(--line); }
.lp-tile:first-child { padding-left: 0; }
.lp-final { position: relative; padding: clamp(28px, 5vw, 64px); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.lp-final > :first-child { grid-column: 1 / -1; }
.lp-final > .eyebrow { grid-column: 1 / -1; margin: 0; }
.lp-final .lp-h2 { grid-column: 1; }
.lp-final .lp-sub { grid-column: 1; }
.lp-final > :last-child { grid-column: 2; grid-row: 3 / 5; }
.lp-final .lp-strip i { width: 20px; height: 34px; }
.lp-final .lp-strip i.on { background: var(--accent); border-color: var(--accent); }

@media (min-width: 940px) {
  .lp-main { max-width: 1240px; padding-top: 56px; }
  .lp-hero-copy { max-width: none; display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 48px; align-items: start; }
  .lp-hero-copy > .eyebrow { grid-column: 1 / -1; margin-bottom: 20px; }
  .lp-hero-copy > .lp-h1 { grid-column: 1; grid-row: 2 / 4; font-size: clamp(40px, 3.5vw, 48px); margin-block: 0; }
  .lp-hero-copy > .lp-lead { grid-column: 2; grid-row: 2; margin-bottom: 20px; }
  .lp-hero-copy > .lp-cta-row { grid-column: 2; grid-row: 3; }
  .lp-hero-copy > .lp-hero-points { grid-column: 1; grid-row: 4; margin-top: 24px; gap: 8px 20px; }
  .lp-hero-copy > .lp-hero-note { grid-column: 2; grid-row: 4; margin-top: 24px; }
}
@media (min-width: 720px) {
  .lp-frames { padding: 24px 6% 88px; gap: 4%; align-items: center; }
  .lp-clip-1, .lp-clip-3 { margin-top: 0; }
  .lp-clip-1 { --lp-angle: -5deg; }
  .lp-clip-3 { --lp-angle: 5deg; }
  .lp-clip { transform: perspective(1000px) translate(var(--lp-x), var(--lp-y)) rotate(var(--lp-angle)) scale(var(--lp-scale, 1)); }
  .lp-clip-2 { z-index: 1; }
  .lp-clip-1, .lp-clip-3 { width: 94%; justify-self: center; }
  .lp-frames::before { transform: translateY(var(--lp-back, 0px)); }
  #why .lp-head { max-width: 760px; }
  #why .lp-h2 { font-size: clamp(36px, 4.2vw, 52px); }
  .lp-demo .lp-scene.is-target { transform: translateY(var(--lp-lift, 0px)); }
}
@media (max-width: 819px) {
  .lp-final > :last-child { grid-column: 1; grid-row: auto; }
}
@media (max-width: 719px) {
  .lp-hero-stage { gap: 24px; }
  .lp-frames::before { display: none; }
  .lp-hero { gap: 24px; }
  .lp-hero-points { margin-top: 20px; }
  #problem { padding: 24px 20px; }
  .lp-demo-bar, .lp-demo-foot { padding-inline: 16px; }
  .lp-demo-scenes { padding: 24px 16px; gap: 10px; }
  .lp-demo .lp-scene { padding: 12px; }
  .lp-scene-preview { aspect-ratio: 4 / 3; margin-bottom: 12px; }
  .lp-edit-track { margin-inline: 16px; }
  .lp-steps::before { left: -8px; }
  .lp-final { padding: 28px 20px; gap: 16px; }
}
@media (max-width: 640px) {
  .lp-tile { padding: 18px 0; }
  .lp-tile + .lp-tile { border-left: 0; border-top: 1px solid var(--line); }
}
/* Content is visible without JS; only offscreen elements opt into entry. /
   Без сценаріїв усе видно; поява застосовується лише до елементів за екраном. */
@media (prefers-reduced-motion: no-preference) {
  .lp-motion-on .lp-enter { transition: opacity .7s var(--lp-ease), translate .7s var(--lp-ease);
    transition-delay: var(--lp-delay, 0ms); }
  .lp-motion-on .lp-enter.is-pending { opacity: 0; translate: 0 48px; }
  .lp-motion-on .lp-enter:focus-within { opacity: 1; translate: none; }
  .lp-motion-on .lp-card:hover .lp-card-tag { translate: 8px 0; }
  .lp-card-tag { transition: translate .25s var(--lp-ease); }
}
/* A brief held opening only where copy and footage have room. /
   Коротка зупинка вступу лише там, де вистачає місця тексту й відео. */
@media (min-width: 1024px) {
  .lp-deck { max-width: 1400px; padding-top: 36px; }
  .lp-deck .lp-hero-stage { grid-template-columns: minmax(0,.9fr) minmax(0,1.25fr);
    gap: 18px 36px; align-items: center; }
  .lp-deck .lp-hero-copy { display: block; grid-column: 1; grid-row: 1 / 3; padding-block: 24px; }
  .lp-deck .lp-hero-copy > .eyebrow { max-width: 42ch; margin-bottom: 28px; }
  .lp-deck .lp-h1 { font-size: clamp(46px,4.8vw,68px); line-height: 1.03; letter-spacing: -.055em; }
  .lp-deck .lp-lead { max-width: 43ch; font-size: 17px; margin-top: 28px; }
  .lp-deck .lp-cta-row { margin-top: 26px; flex-wrap: wrap; gap: 12px; }
  .lp-deck .lp-hero-points { margin-top: 28px; flex-wrap: wrap; gap: 10px 18px; }
  .lp-deck .lp-hero-note { max-width: 44ch; margin-top: 20px; }
  .lp-deck .lp-frames { grid-column: 2; grid-row: 1; grid-template-columns: 1fr;
    padding: 28px 0 30px; gap: 0; isolation: isolate; }
  .lp-deck .lp-frames::before { display: none; }
  .lp-deck .lp-clip { grid-area: 1 / 1; justify-self: center; width: min(370px,28vw,38.25svh);
    z-index: var(--lp-layer,1);
    transform: perspective(1400px) translate(var(--lp-x),var(--lp-y)) rotate(var(--lp-angle)) rotateY(var(--lp-turn,0deg)) scale(var(--lp-scale,1)); }
  .lp-deck .lp-clip-media { width: 100%; max-height: none; border-radius: 26px;
    box-shadow: 0 30px 60px -26px rgba(0,0,0,.45), 0 8px 16px -10px rgba(0,0,0,.2); }
  .lp-deck .lp-clip figcaption { text-align: center; opacity: var(--lp-label,0);
    transition: opacity .2s; margin-top: 14px; }
  .lp-deck .lp-clip-bar { grid-column: 2; grid-row: 2; padding-inline: 20px; align-self: start; }
  .lp-deck .lp-clip-bar .lp-loop-cap { max-width: 42ch; font-size: 12px; }
  .lp-held .lp-hero { min-height: 200svh; display: block; }
  .lp-held .lp-hero-stage { position: sticky; top: 100px; }
}
/* Fit laptop screens before pinning; keep the final card fully visible. /
   Вміщуємо блок на ноутбуках до утримання, щоб останню карту було видно повністю. */
@media (min-width: 1024px) and (max-height: 850px) {
  .lp-deck .lp-hero-stage { row-gap: 12px; }
  .lp-deck .lp-hero-copy { padding-block: 8px; }
  .lp-deck .lp-hero-copy > .eyebrow { margin-bottom: 16px; }
  .lp-deck .lp-h1 { font-size: clamp(40px,4vw,56px); }
  .lp-deck .lp-lead { font-size: 16px; line-height: 1.5; margin-top: 18px; margin-bottom: 16px; }
  .lp-deck .lp-cta-row { margin-top: 18px; }
  .lp-deck .lp-hero-points { margin-top: 18px; gap: 8px 16px; }
  .lp-deck .lp-hero-note { margin-top: 14px; }
  .lp-deck .lp-frames { padding-block: 20px; }
  .lp-deck .lp-clip { width: min(370px,28vw,calc((100svh - 250px) * .5625)); }
}
@media (min-width: 1024px) and (max-height: 680px) {
  .lp-deck .lp-h1 { font-size: 36px; }
  .lp-deck .lp-lead { font-size: 14px; margin-block: 12px; }
  .lp-deck .lp-hero-copy > .eyebrow { margin-bottom: 12px; }
  .lp-deck .lp-cta-row, .lp-deck .lp-hero-points, .lp-deck .lp-hero-note { margin-top: 12px; }
  .lp-deck .lp-hero-note { font-size: 12px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-main .btn-primary:active, .lp-main .btn-ghost:active { transform: none; }
  .lp-clip, .lp-demo, .lp-demo .lp-scene.is-target, .lp-frames::before { transform: none; }
  .lp-steps::before { transform: none; }
  .lp-scene-preview img { clip-path: none; }
}