/* ===== Cinematic scroll hero ===== */
.cine-hero { padding: 0 !important; position: relative; background: var(--ink); color: #fff; }
.cine-stage { position: relative; min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); overflow: hidden; display: flex; align-items: center; }
.cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cine-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 120%, rgba(46,196,182,.10), transparent 60%),
              linear-gradient(180deg, rgba(10,20,36,0) 70%, var(--ink) 100%); }
.cine-copy { position: relative; z-index: 2; max-width: 560px; }
.cine-copy h1 { font-size: clamp(2.1rem, min(5vw, 7.4vh), 4rem); line-height: 1.04; letter-spacing: -.03em; margin: .6rem 0 1.1rem; }
.cine-copy h1 em { font-style: normal; color: var(--accent); }
.cine-copy .lead { color: var(--muted-d); max-width: 34rem; }
.cine-copy .cta-row { margin-top: 1.8rem; }
.cine-scrollhint { position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%); font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); display: none; }
.cine-scrollhint::after { content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0; background: linear-gradient(var(--accent), transparent); animation: cineHint 1.8s ease-in-out infinite; }
@keyframes cineHint { 0%,100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }

/* Animated mode (JS adds .cine-on; otherwise copy is visible and static) */
.cine-on .cine-hero { height: 300vh; }
.cine-on .cine-stage { position: sticky; top: 68px; height: calc(100vh - 68px); height: calc(100svh - 68px); }
.cine-on .cine-copy { opacity: 0; will-change: opacity, transform; }
.cine-on .cine-scrollhint { display: block; }
@media (max-width: 767px) {
  .cine-on .cine-hero { height: 220vh; }
  .cine-stage { align-items: flex-end; }
  .cine-copy { padding-top: 0; padding-bottom: max(40px, 6svh); }
  .cine-on .cine-scrollhint { display: none; }
  .cine-copy h1 { font-size: clamp(1.85rem, 8.4vw, 2.5rem); margin: .4rem 0 .8rem; }
  .cine-copy .lead { font-size: 1rem; line-height: 1.5; }
  .cine-copy .cta-row { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 10px; }
  .cine-copy .cta-row .btn { flex: 1 1 auto; justify-content: center; text-align: center; padding-top: .75em; padding-bottom: .75em; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .cine-copy .eyebrow { display: none; }
  .cine-copy .lead { font-size: .94rem; }
  .cine-copy { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-on .cine-hero { height: auto; }
  .cine-on .cine-stage { position: relative; top: 0; height: auto; }
  .cine-on .cine-copy { opacity: 1; }
  .cine-scrollhint { display: none !important; }
}
/* standalone preview */
.cine-preview-spacer { height: 100vh; background: var(--ink); color: var(--muted-d); display: grid; place-items: center; font-family: var(--mono); font-size: .8rem; }