/* MARASIPOS — cinematic layer.
 * Loaded after landing.css + demo.css. Adds the opening title sequence,
 * kinetic headlines, scroll depth, light and atmosphere. Driven by
 * cinema.js; every effect is decorative (aria-hidden), transform/opacity
 * first, paused off-screen, and fully off under prefers-reduced-motion.
 * Remove this file + cinema.js to return to the previous motion.
 */

:root {
  --cine-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --cine-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cine-glow: #5eead4;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* soft physical spring for small pops (chips, pill, magnet release) */
    --cine-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
      0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  }
}

/* ============================================================
   1. OPENING TITLE SEQUENCE (first visit per session)
   ============================================================ */
/* instant placeholder painted from the very first frame (class set in
   <head>), replaced by the real curtain as soon as cinema.js runs. Has its
   own fail-safe fade so a blocked script can never hide the page. */
html.cine-intro body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #04070f;
  animation: cineFailsafe 0.5s ease 3.4s forwards;
}
@keyframes cineFailsafe { to { opacity: 0; visibility: hidden; } }

.cine-curtain {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
}
.cine-curtain__half {
  position: absolute;
  inset-inline: 0;
  height: 50.5%;
  background:
    radial-gradient(60% 120% at 50% 100%, rgba(27, 99, 224, 0.1), transparent 70%),
    #04070f;
  transition: transform 1.05s var(--cine-expo);
  will-change: transform;
}
.cine-curtain__half.is-top { top: 0; }
.cine-curtain__half.is-bot {
  bottom: 0;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(20, 184, 166, 0.09), transparent 70%),
    #04070f;
}
.cine-curtain__brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  direction: ltr;
  transition: opacity 0.5s ease, transform 0.9s var(--cine-expo), filter 0.6s ease;
}
.cine-curtain__brand img {
  width: auto;
  height: 58px;
  opacity: 0;
  transform: scale(0.6) rotate(-8deg);
  filter: blur(6px);
  animation: cineMarkIn 0.9s var(--cine-expo) 0.1s forwards;
}
@keyframes cineMarkIn { to { opacity: 1; transform: none; filter: none; } }
.cine-curtain__word {
  display: flex;
  font-family: 'Marasi Brand', 'Segoe UI', Arial, sans-serif;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #ddfff5;
}
.cine-curtain__word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  filter: blur(8px);
  animation: cineLetterIn 0.8s var(--cine-expo) forwards;
  animation-delay: calc(0.28s + var(--li) * 45ms);
}
.cine-curtain__word span.is-accent { color: var(--brand-teal, #61ada0); }
@keyframes cineLetterIn { to { opacity: 1; transform: none; filter: none; } }
.cine-curtain__line {
  position: absolute;
  z-index: 2;
  top: calc(50% + 52px);
  left: 50%;
  width: min(340px, 64vw);
  height: 2px;
  margin-left: calc(min(340px, 64vw) / -2);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #1b63e0 22%, #5eead4 50%, #1b63e0 78%, transparent);
  box-shadow: 0 0 18px rgba(94, 234, 212, 0.7);
  transform: scaleX(0);
  animation: cineLineIn 1s var(--cine-expo) 0.5s forwards;
  transition: transform 1s var(--cine-expo), opacity 0.7s ease;
}
@keyframes cineLineIn { to { transform: scaleX(1); } }

/* the cut: halves part like a lens opening, brand lifts into the light */
.cine-curtain.is-open { pointer-events: none; }
.cine-curtain.is-open .cine-curtain__half.is-top { transform: translateY(-101%); }
.cine-curtain.is-open .cine-curtain__half.is-bot { transform: translateY(101%); }
.cine-curtain.is-open .cine-curtain__brand { opacity: 0; transform: translateY(-26px) scale(1.06); filter: blur(10px); }
.cine-curtain.is-open .cine-curtain__line {
  animation: none;
  transform: scaleX(5);
  opacity: 0;
}

/* ============================================================
   2. HERO ENTRANCE CHOREOGRAPHY
   html.cine-hold keeps the hero still until the curtain opens.
   ============================================================ */
html.cine-hold #hero [data-reveal]:not(.cine-split) {
  opacity: 0 !important;
  translate: 0 34px !important;
}
html.cine-hold #hero .lp-stage[data-reveal] {
  translate: 0 18px !important;
  scale: 0.94 !important;
}
html.cine-hold #hero .cw__i {
  opacity: 0 !important;
  transform: translate3d(0, 0.62em, 0) rotateX(-62deg) !important;
  filter: blur(10px) !important;
}
body.lp .lp-header { transition: translate 1.1s var(--cine-expo) 0.2s; }
html.cine-hold body.lp .lp-header { translate: 0 -105%; }
body.lp .lp-hero__grid { transition: opacity 2.4s ease 0.3s; }
html.cine-hold body.lp .lp-hero__grid { opacity: 0; }

/* trust chips pop in one by one after their row arrives */
.js body.lp .lp-hero__trust span {
  opacity: 0;
  transform: translateY(10px) scale(0.92);
}
.js body.lp .lp-hero__trust.is-in span {
  animation: cineChipPop 0.8s var(--cine-spring) both;
  animation-delay: calc(var(--rd, 0ms) + 0.35s + var(--ci, 0) * 90ms);
}
html.cine-hold body.lp .lp-hero__trust span { animation: none !important; }
@keyframes cineChipPop { to { opacity: 1; transform: none; } }

/* ============================================================
   3. KINETIC HEADLINES — word-by-word rise from depth into focus
   ============================================================ */
.js body.lp .cine-split[data-reveal] {
  opacity: 1 !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  transform: none !important;
}
.cine-split .cw {
  display: inline-block;
  perspective: 700px;
  /* room for Arabic ascenders/descenders so nothing clips */
  padding-block: 0.08em;
  margin-block: -0.08em;
}
.cine-split .cw__i {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.62em, 0) rotateX(-62deg);
  transform-origin: 50% 100%;
  filter: blur(10px);
  transition: opacity 0.85s var(--lp-ease), transform 1.2s var(--cine-expo), filter 0.9s var(--lp-ease);
  transition-delay: calc(var(--rd, 0ms) + var(--wi, 0) * 70ms);
}
.cine-split.is-in .cw__i { opacity: 1; transform: none; filter: none; }

/* a single light glint travels across the hero + final headlines, in
   reading order (right → left), once the words have landed */
#hero-title .cw__i,
.lp-final h2 .cw__i {
  background: linear-gradient(100deg, #ddfff5 0 41%, #a7fff0 47%, #5eead4 50%, #a7fff0 53%, #ddfff5 59% 100%);
  background-size: 280% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
#hero-title.is-in .cw__i,
.lp-final h2.is-in .cw__i {
  animation: cineGlint 1.5s cubic-bezier(0.45, 0, 0.2, 1) both;
  animation-delay: calc(var(--rd, 0ms) + 1.15s + var(--wi, 0) * 110ms);
}
html.cine-hold #hero-title .cw__i { animation: none !important; }
@keyframes cineGlint { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* ============================================================
   4. ATMOSPHERE — aurora, dust, vignette (hero + final act)
   ============================================================ */
.cine-aurora {
  position: absolute;
  inset: -20% -10% -10%;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2.2s ease 0.2s;
}
.cine-aurora.is-on { opacity: 1; }
.cine-aurora i {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.cine-aurora i:nth-child(1) {
  width: 62vmax; height: 62vmax; top: -18%; right: -8%;
  background: radial-gradient(circle, rgba(27, 99, 224, 0.28), transparent 62%);
  animation: cineAur1 26s ease-in-out infinite alternate;
}
.cine-aurora i:nth-child(2) {
  width: 52vmax; height: 52vmax; bottom: -26%; left: -10%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.22), transparent 62%);
  animation: cineAur2 31s ease-in-out infinite alternate;
}
.cine-aurora i:nth-child(3) {
  width: 38vmax; height: 38vmax; top: 18%; left: 30%;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.1), transparent 64%);
  animation: cineAur3 22s ease-in-out infinite alternate;
}
@keyframes cineAur1 { to { transform: translate3d(-9%, 7%, 0) scale(1.12) rotate(14deg); } }
@keyframes cineAur2 { to { transform: translate3d(12%, -9%, 0) scale(1.18); } }
@keyframes cineAur3 { 0% { transform: translate3d(0, 0, 0) scale(0.9); } 100% { transform: translate3d(-16%, 10%, 0) scale(1.2); } }

.cine-dust {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}
.cine-dust.is-on { opacity: 1; }
.lp-final .cine-dust { z-index: 0; }

.cine-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(2, 4, 10, 0.55) 100%),
    linear-gradient(to bottom, transparent 75%, rgba(4, 7, 15, 0.6));
}

/* ============================================================
   5. HERO STORY — lens light on the opening scene
   ============================================================ */
.lp-story__sc.is-light::before,
.lp-story__sc.is-light::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  opacity: 0;
}
/* anamorphic streak */
.lp-story__sc.is-light::before {
  width: 78%;
  height: 2px;
  margin: -1px 0 0 -39%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(27, 99, 224, 0.55) 25%, #dffff9 50%, rgba(27, 99, 224, 0.55) 75%, transparent);
  box-shadow: 0 0 14px rgba(94, 234, 212, 0.6);
  transform: scaleX(0);
}
/* expanding halo ring */
.lp-story__sc.is-light::after {
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 1px solid rgba(94, 234, 212, 0.45);
  transform: scale(0.2);
}
.lp-stage[data-story="light"] .lp-story__sc.is-light::before {
  animation: cineStreak 1.1s var(--cine-expo) 0.15s both;
}
.lp-stage[data-story="light"] .lp-story__sc.is-light::after {
  animation: cineHalo 1.2s var(--cine-expo) 0.3s both;
}
@keyframes cineStreak {
  0% { opacity: 0; transform: scaleX(0); }
  35% { opacity: 1; }
  100% { opacity: 0.25; transform: scaleX(1); }
}
@keyframes cineHalo {
  0% { opacity: 0; transform: scale(0.2); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.6); }
}
/* camera push-in while the QR + phone scenes play */
.lp-stage[data-story="qr"] .lp-story,
.lp-stage[data-story="phone"] .lp-story { animation: cineDolly 3.4s cubic-bezier(0.33, 0, 0.2, 1) both; }
@keyframes cineDolly { from { transform: scale(0.97); } to { transform: scale(1.025); } }

/* ============================================================
   6. SCENE TRANSITIONS — a light beam crosses each act's edge
   ============================================================ */
.cine-beam {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.cine-beam::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 1px;
  background: linear-gradient(to left, transparent, rgba(94, 234, 212, 0.95) 45%, rgba(27, 99, 224, 0.8) 70%, transparent);
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.8);
  transform: translateX(110%);
  opacity: 0;
}
.cine-seen > .cine-beam::before { animation: cineBeam 2.1s var(--cine-expo) 0.1s both; }
@keyframes cineBeam {
  0% { transform: translateX(110%); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateX(-250%); opacity: 0; }
}

/* ============================================================
   7. LIGHT THAT FOLLOWS THE HAND (fine pointer only)
   ============================================================ */
.cine-light {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.055), rgba(27, 99, 224, 0.025) 38%, transparent 64%);
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}
.cine-light.is-on { opacity: 1; }

/* spotlight + lit edge on cards under the pointer */
.lp-card, .lp-plan, .lp-modgroup, .lp-assure__item, .lp-faq__item,
.lp-mode-block, .lp-trackcode, .lp-eco__card { position: relative; }
.cine-spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 234, 212, 0.085), transparent 46%);
}
.cine-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 234, 212, 0.7), rgba(27, 99, 224, 0.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.is-spot > .cine-spot { opacity: 1; }

/* ============================================================
   8. NAVIGATION — a pill that glides to the active chapter
   ============================================================ */
body.lp .nav.has-pill { position: relative; }
body.lp .nav.has-pill a { position: relative; z-index: 1; transition: color 0.3s ease; }
body.lp .nav.has-pill a:hover { background: transparent; }
.cine-navpill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  height: var(--h, 36px);
  width: var(--w, 60px);
  translate: var(--x, 0) var(--y, 0);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
  opacity: 0;
  transition: translate 0.55s var(--cine-spring), width 0.55s var(--cine-spring), opacity 0.3s ease;
}
.cine-navpill.is-on { opacity: 1; }
.cine-navpill::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1b63e0, #5eead4);
  box-shadow: 0 0 8px rgba(94, 234, 212, 0.7);
}

/* magnetic CTAs settle back on a spring */
/* magnet transitions live in the BUTTONS section (11) */

/* ============================================================
   9. FINAL ACT — the order steps light up in sequence
   ============================================================ */
.js body.lp .lp-final__steps span { opacity: 0; transform: translateY(8px) scale(0.9); }
.js body.lp .lp-final__steps i { transform: scaleX(0); transform-origin: 100% 50%; }
.js body.lp .lp-final__steps.is-in span { animation: cineChipPop 0.75s var(--cine-spring) both; }
.js body.lp .lp-final__steps.is-in i { transition: transform 0.6s var(--cine-expo); transform: scaleX(1); }
.js body.lp .lp-final__steps.is-in span:nth-of-type(1) { animation-delay: 0.15s; }
.js body.lp .lp-final__steps.is-in i:nth-of-type(1) { transition-delay: 0.45s; }
.js body.lp .lp-final__steps.is-in span:nth-of-type(2) { animation-delay: 0.7s; }
.js body.lp .lp-final__steps.is-in i:nth-of-type(2) { transition-delay: 1s; }
.js body.lp .lp-final__steps.is-in span:nth-of-type(3) { animation-delay: 1.25s; }

/* ============================================================
   11. BUTTONS — premium, tactile, alive
   Primary: living gradient, glass gloss, light sweep, glow ring,
   arrow that leans toward the reading direction, click ripple.
   Secondary: glass with a gradient edge that lights up on hover
   and a glow that follows the pointer. Hover effects only on
   devices that can hover; everything is transform/opacity.
   ============================================================ */
body.lp .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.005em;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s var(--cine-spring), box-shadow 0.45s var(--cine-expo),
    background-position 0.9s var(--cine-expo), color 0.3s ease, translate 0.6s var(--cine-spring);
}
body.lp .btn.cine-mag.is-pulling { transition-property: transform, box-shadow, background-position, color; }
body.lp .btn.btn-block { display: flex; }

/* ---------- primary ---------- */
body.lp .btn-primary {
  color: #fff;
  background: linear-gradient(115deg, #1b63e0 0%, #2b7ff0 28%, #14b8a6 62%, #1b63e0 100%);
  background-size: 230% 100%;
  background-position: 0% 50%;
  text-shadow: 0 1px 1px rgba(4, 16, 40, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 0 rgba(4, 16, 40, 0.22),
    0 0 0 1px rgba(94, 234, 212, 0.2),
    0 12px 28px -12px rgba(27, 99, 224, 0.85),
    0 2px 6px rgba(2, 6, 20, 0.35);
  filter: none;
}
/* glass gloss on the upper half */
body.lp .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0 0 48% 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* light sweep — travels right to left, with the Arabic reading direction */
body.lp .btn-primary::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  right: 0;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(170%) skewX(-18deg);
  pointer-events: none;
}
/* hero + final CTAs: an idle glint every few seconds invites the click */
body.lp .btn-glow::after { animation: cineBtnGlint 5.5s ease-in-out 2.4s infinite; }
@keyframes cineBtnGlint {
  0%, 72% { transform: translateX(170%) skewX(-18deg); }
  100% { transform: translateX(-420%) skewX(-18deg); }
}
@media (hover: hover) {
  body.lp .btn-primary:hover {
    transform: translateY(-3px);
    background-position: 100% 50%;
    filter: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 0 rgba(4, 16, 40, 0.22),
      0 0 0 1px rgba(94, 234, 212, 0.55),
      0 0 0 6px rgba(94, 234, 212, 0.12),
      0 20px 40px -14px rgba(20, 184, 166, 0.85),
      0 4px 10px rgba(2, 6, 20, 0.35);
  }
  body.lp .btn-primary:hover::after {
    animation: none;
    transform: translateX(-420%) skewX(-18deg);
    transition: transform 0.85s var(--cine-expo);
  }
}
body.lp .btn-primary:active {
  transform: translateY(0) scale(0.965);
  transition-duration: 0.12s;
  box-shadow:
    inset 0 2px 6px rgba(4, 16, 40, 0.35),
    0 0 0 1px rgba(94, 234, 212, 0.4),
    0 6px 14px -8px rgba(27, 99, 224, 0.8);
}

/* arrow chip inside primary CTAs */
.btn-arrow {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-inline-end: -8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  flex: none;
  transition: transform 0.5s var(--cine-spring), background-color 0.3s ease;
}
.btn-arrow svg { width: 15px; height: 15px; }
.btn-header .btn-arrow { width: 22px; height: 22px; margin-inline-end: -6px; }
.btn-header .btn-arrow svg { width: 12px; height: 12px; }
@media (hover: hover) {
  body.lp .btn:hover .btn-arrow { transform: translateX(-5px); background-color: rgba(255, 255, 255, 0.3); }
}

/* ---------- secondary (quiet) ---------- */
body.lp .btn-quiet {
  color: var(--lp-on-dark);
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(9, 16, 36, 0.78), rgba(9, 16, 36, 0.78)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(94, 234, 212, 0.26) 50%, rgba(27, 99, 224, 0.34)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px -10px rgba(2, 6, 20, 0.7);
}
/* pointer-following glow inside */
body.lp .btn-quiet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(90px circle at var(--bx, 50%) var(--by, 50%), rgba(94, 234, 212, 0.26), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
/* bright gradient edge, faded in on hover */
body.lp .btn-quiet::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #5eead4, #1b63e0 55%, #5eead4);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
@media (hover: hover) {
  body.lp .btn-quiet:hover {
    transform: translateY(-2px);
    border-color: transparent;
    background:
      linear-gradient(rgba(12, 24, 52, 0.86), rgba(12, 24, 52, 0.86)) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(94, 234, 212, 0.26) 50%, rgba(27, 99, 224, 0.34)) border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 5px rgba(94, 234, 212, 0.07),
      0 16px 32px -14px rgba(20, 184, 166, 0.6);
  }
  body.lp .btn-quiet:hover::before,
  body.lp .btn-quiet:hover::after { opacity: 1; }
}
body.lp .btn-quiet:active { transform: scale(0.97); transition-duration: 0.12s; }

/* play badge on the "watch how it works" button */
.btn-play {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-inline-start: -8px;
  border-radius: 50%;
  background: rgba(94, 234, 212, 0.14);
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.45);
  flex: none;
  transition: transform 0.5s var(--cine-spring), background-color 0.3s ease;
}
.btn-play i {
  width: 9px;
  height: 10px;
  margin-inline-start: -2px;
  background: #5eead4;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);  /* points left = RTL forward */
}
.btn-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.6);
  animation: cinePlayPing 2.2s var(--cine-expo) infinite;
}
@keyframes cinePlayPing {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(1.8); opacity: 0; }
}
@media (hover: hover) {
  body.lp .btn:hover .btn-play { transform: scale(1.12); background-color: rgba(94, 234, 212, 0.26); }
}

/* click ripple (both kinds) */
.btn-ripple {
  position: absolute;
  z-index: -1;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  transform: scale(0);
  pointer-events: none;
  animation: cineRipple 0.7s var(--cine-expo) forwards;
}
.btn-quiet .btn-ripple { background: radial-gradient(circle, rgba(94, 234, 212, 0.5), rgba(94, 234, 212, 0) 70%); }
@keyframes cineRipple { to { transform: scale(var(--rs, 18)); opacity: 0; } }

/* ---------- segmented track switch: a thumb that glides ---------- */
.lp-seg.has-thumb button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.cine-seg-thumb {
  position: absolute;
  top: 5px;
  left: 0;
  z-index: 0;
  height: calc(100% - 10px);
  width: var(--tw, 0px);
  translate: var(--tx, 0px) 0;
  border-radius: var(--lp-r-pill, 999px);
  background: linear-gradient(115deg, #1b63e0, #14b8a6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(94, 234, 212, 0.3),
    0 8px 20px -8px rgba(20, 184, 166, 0.75);
  transition: translate 0.6s var(--cine-spring), width 0.6s var(--cine-spring);
  pointer-events: none;
}
.cine-seg-thumb.is-snap { transition: none; }

/* ============================================================
   10. RESPONSIVE + REDUCED MOTION
   ============================================================ */
@media (max-width: 767px) {
  .cine-curtain__brand img { width: 44px; height: 44px; }
  .cine-curtain__line { top: calc(50% + 44px); }
  .cine-aurora i:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.cine-intro body::before,
  .cine-curtain, .cine-aurora, .cine-dust, .cine-light, .cine-beam, .cine-spot { display: none !important; }
  html.cine-hold body.lp .lp-header { translate: none !important; }
  .js body.lp .lp-hero__trust span,
  .js body.lp .lp-final__steps span { opacity: 1 !important; transform: none !important; }
  .js body.lp .lp-final__steps i { transform: none !important; }
  .cine-split .cw__i { opacity: 1 !important; transform: none !important; filter: none !important; }
  body.lp .btn-glow::after, .btn-play::after { animation: none !important; }
  .btn-ripple { display: none !important; }
  .cine-seg-thumb { transition: none !important; }
}