/* =====================================================================
   YASSU landing — sections
   ===================================================================== */

/* ---------------------------------------------------------------- loader (first visit only, under a second) */
.loader { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; align-content: center; gap: 16px; background: radial-gradient(ellipse at 50% 45%, #ffffff 0%, #f3e8ff 60%, #e8d9ff 100%); transition: opacity .5s var(--ease-out), visibility .5s; animation: loader-failsafe .01s 3.5s forwards; }
.loader__mark img { width: 92px; height: auto; animation: mark-drop .8s var(--ease-spring) both; filter: drop-shadow(0 18px 30px rgba(102, 0, 204, .28)); }
.loader__word { font-weight: 700; font-size: 17px; letter-spacing: .3em; color: var(--plum); opacity: 0; animation: fade-up .5s .25s var(--ease-out) forwards; }
body.is-loaded .loader { opacity: 0; visibility: hidden; }
@keyframes mark-drop { 0% { transform: translateY(-50px) scale(.6); opacity: 0; } 60% { transform: translateY(6px) scale(1.05); opacity: 1; } 100% { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* if a script never arrives, the loader still gets out of the way */
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
.no-js .loader, html.no-loader .loader { display: none; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* ---------------------------------------------------------------- shared layout */
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.center .h-1, .center .h-2 { margin-top: 18px; }
.center-lead { margin: 18px auto 0; text-align: center; }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.split--flip .split__copy { grid-column: 2; grid-row: 1; }
.split--flip .split__phone { grid-column: 1; grid-row: 1; }
.split__copy { position: relative; padding-top: clamp(40px, 16vh, 180px); padding-bottom: 6vh; }
.split__copy > .h-1, .split__copy > .h-2, .split__copy > .h-display { margin-top: 18px; }
.split__copy > .lead { margin-top: 20px; }
.split__phone { position: relative; height: 100%; }
.phone-slot { position: sticky; top: calc(var(--nav-h) + 3vh); height: min(80vh, 800px); }
.phone-slot.phone-slot--ghost { position: absolute; inset: 40% 0 auto; height: 10px; margin: 0; pointer-events: none; }
.chapter { padding-block: 0; }
.chapter, .chapter .split { min-height: 118vh; }
.pain .split, .trust .split, .reveal .split { min-height: 125vh; }
.personal .split { min-height: 110vh; }
/* the copy rides along with the phone for a moment instead of leaving an empty column */
.chapter .split__copy { position: sticky; top: calc(var(--nav-h) + 8vh); padding-top: 6vh; }
.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-inline-start: 34px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .3em; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); box-shadow: 0 6px 14px -6px rgba(244, 3, 129, .6); }
.ticks li::after { content: ""; position: absolute; inset-inline-start: 7px; top: calc(.3em + 6px); width: 8px; height: 5px; border: solid #fff; border-width: 0 0 2.4px 2.4px; transform: rotate(-45deg); }
.ticks b { color: var(--navy); }
/* the personal-gift section's way into the group flow below it */
.personal__more { margin-top: 24px; font-size: 16.5px; font-weight: 600; color: var(--ink-2); }
.personal__more a { color: var(--violet); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .25s; }
.personal__more a::after { content: " \2193"; }
.personal__more a:hover { text-decoration-color: var(--magenta); }
.fine { margin-top: 12px; font-size: 15px; color: var(--ink-3); }

/* dark sections: only the section itself turns white (body[data-tone] is a page state, not a colour) */
section[data-tone="dark"], .footer { color: #fff; }
.eyebrow--dark { color: #f9d6ff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.lead--dark { color: rgba(255, 255, 255, .86); }
/* the signature gradient, lifted so its violet end stays readable on night purple */
section[data-tone="dark"] .grad-text { background-image: linear-gradient(90deg, #b26bff 0%, #e35bd6 45%, #ff4fb0 100%); }

/* ---------------------------------------------------------------- hero */
.hero { min-height: 100vh; min-height: 100svh; padding-block: 0; display: flex; align-items: center; }
.hero .split { align-items: center; min-height: 100vh; min-height: 100svh; }
.hero__copy { padding-top: calc(var(--nav-h) + 4vh); }
.hero__title { margin-top: 22px; }
.hero__title .grad-text { padding-inline-end: .05em; background-image: linear-gradient(90deg, #6600cc 0%, #8a00c8 25%, #f40381 50%, #8a00c8 75%, #6600cc 100%); background-size: 220% 100%; animation: grad-shift 7s ease-in-out 2 alternate; }
@keyframes grad-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.hero__lead b { color: var(--navy); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.hero__ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 20px 0 0; font-size: 15px; color: var(--ink-2); }
.hero__ticks li { display: inline-flex; align-items: center; gap: 7px; }
.hero__ticks li::before { content: "✓"; content: "✓" / ""; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; background: var(--grad); }
.hero .split__phone { height: min(78vh, 800px); margin-top: calc(var(--nav-h) * .7); }
.hero .phone-slot { position: relative; top: 0; height: 100%; }
.float-chip { position: absolute; z-index: 3; transform: translate3d(var(--px, 0), var(--py, 0), 0); opacity: 0; }
body.is-loaded .float-chip { animation: chip-in .9s var(--ease-spring) both; }
.chip--a { top: 16%; inset-inline-start: -4%; animation-delay: 1.1s !important; }
.chip--b { top: 48%; inset-inline-end: -6%; animation-delay: 1.35s !important; }
.chip--c { bottom: 12%; inset-inline-start: 2%; animation-delay: 1.6s !important; }
@keyframes chip-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
.no-js .float-chip, html.motion-off .float-chip { opacity: 1; animation: none; }
/* the hero entrance plays when the loader lifts, not underneath it */
body:not(.is-loaded) .hero [data-reveal].in { opacity: 0; transform: translate3d(0, 34px, 0); }
body:not(.is-loaded) .hero .st.in .w > span { transform: translateY(105%); }
.scroll-hint { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; width: 30px; height: 48px; border-radius: 20px; border: 2px solid rgba(102, 0, 204, .35); }
.scroll-hint span { position: absolute; top: 9px; left: 50%; width: 5px; height: 9px; margin-left: -2.5px; border-radius: 4px; background: var(--magenta); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

.rating { border-radius: 10px; }
.rating:hover b { text-decoration: underline; }
.rating--dark { margin-top: 20px; color: #fff; font-size: 16px; }
.rating--dark b { color: #fff; }

/* ---------------------------------------------------------------- marquee */
.marquee { position: relative; z-index: 2; overflow: hidden; padding: 18px 0; background: var(--grad); transform: rotate(-1.6deg) scale(1.03); box-shadow: 0 20px 50px -20px rgba(244, 3, 129, .55); }
.marquee__track { display: flex; gap: 46px; width: max-content; animation: marquee 34s linear infinite; }
.marquee__track > span { flex: none; font-weight: 700; font-size: clamp(18px, 2vw, 26px); color: #fff; white-space: nowrap; }
.marquee__track > span::after { content: "✦"; content: "✦" / ""; margin-inline-start: 46px; opacity: .7; }
@keyframes marquee { to { transform: translateX(50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---------------------------------------------------------------- pain: chat simulation */
.chat { margin-top: 30px; max-width: 470px; border-radius: 26px; overflow: hidden; background: #efe7de; box-shadow: var(--shadow-2), 0 0 0 1px rgba(4, 16, 58, .06); }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #075e54; color: #fff; }
.chat__head b { display: block; font-size: 16px; }
.chat__head small { font-size: 12.5px; opacity: .85; }
.chat__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 20px; }
.chat__body { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 18px; background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 14px 14px; }
.msg { align-self: flex-start; max-width: 78%; padding: 7px 12px 8px; border-radius: 4px 14px 14px 14px; background: #fff; color: #111b21; font-size: 15.5px; line-height: 1.4; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.msg b { display: block; font-size: 12.5px; font-weight: 600; color: #c2185b; margin-bottom: 1px; }
.msg[data-who="שירה"] b { color: #6a1b9a; } .msg[data-who="מאיה"] b { color: #00838f; }
.msg--me { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: #d9fdd3; }
.msg--yassu { align-self: stretch; max-width: none; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -10px rgba(102, 0, 204, .45), 0 0 0 2px rgba(139, 54, 229, .35); }
.yassu-card { display: flex; gap: 12px; align-items: center; }
.yassu-card img { width: 40px; height: auto; flex: none; }
.yassu-card b { display: block; color: var(--navy); font-size: 16px; }
.yassu-card span { display: block; font-size: 14px; color: var(--ink-2); }
.yassu-card__btn { display: block; margin-top: 10px; padding: 9px; border-radius: 12px; text-align: center; font-weight: 700; font-size: 15px; color: #fff; background: var(--grad); }
/* messages keep their space while hidden, so the page below never jumps */
.chat.is-live .msg:not(.on) { opacity: 0; transform: translateY(10px) scale(.96); }
.chat.is-live .msg { transition: opacity .4s var(--ease-out), transform .5s var(--ease-spring); }
.chat__typing { position: absolute; inset-inline-start: 14px; top: 0; display: none; gap: 4px; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #fff; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa0a6; animation: typing 1s infinite; }
.chat__typing i:nth-child(2) { animation-delay: .15s; } .chat__typing i:nth-child(3) { animation-delay: .3s; }
.chat.is-typing .chat__typing { display: flex; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------------------------------------------------------------- campaign: pinned horizontal posters */
.campaign { padding: 0; }
.campaign__pin { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.campaign__head { padding-top: calc(var(--nav-h) + 2vh); }
.campaign__head .h-1 { margin-top: 14px; }
.campaign__viewport { margin-top: clamp(20px, 4vh, 44px); }
.campaign__track { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); width: max-content; will-change: transform; }
.poster { position: relative; flex: none; margin: 0; height: min(58vh, 620px); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(var(--rot, 0deg)) scale(var(--sc, 1)); transition: transform .6s var(--ease-out); }
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster:nth-child(odd) { --rot: -1.6deg; } .poster:nth-child(even) { --rot: 1.4deg; }
.poster:hover { --rot: 0deg; --sc: 1.03; }
.poster--pain img { filter: saturate(.85); }
.campaign__turn { flex: none; display: grid; place-items: center; gap: 10px; width: min(26vh, 260px); text-align: center; }
.campaign__turn img { width: 92px; height: auto; filter: drop-shadow(0 16px 40px rgba(244, 3, 129, .55)); animation: bob 3.2s ease-in-out infinite; }
.campaign__turn span { font-weight: 800; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.05; background: linear-gradient(90deg, #b26bff, #ff4fb0); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-4deg); } }
.campaign__progress { align-self: center; width: min(320px, 60vw); height: 4px; margin-top: clamp(18px, 3vh, 34px); border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.campaign__progress i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--grad); transform: scaleX(var(--p, 0)); transform-origin: right; }

/* ---------------------------------------------------------------- how it works / chapters */
.how-intro { padding-bottom: 0; }
.how-intro::before { -webkit-mask: none !important; mask: none !important; }
.chapter__num { font-weight: 900; font-size: clamp(64px, 8vw, 120px); line-height: .9; letter-spacing: -.04em; background: linear-gradient(180deg, rgba(139, 54, 229, .45), rgba(244, 3, 129, .08)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.note { display: flex; align-items: center; gap: 16px; margin-top: 26px; max-width: 480px; padding: 16px 18px; border-radius: var(--r-card); background: rgba(255, 255, 255, .85); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.note img { width: 72px; height: 72px; flex: none; object-fit: contain; }
.note p { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.note b { display: block; color: var(--navy); font-size: 16.5px; }
.share-bubble { margin-top: 26px; max-width: 380px; padding: 10px; border-radius: 16px 4px 16px 16px; background: #d9fdd3; box-shadow: var(--shadow-1); }
.share-bubble__msg { padding: 4px 6px 10px; font-size: 15.5px; color: #111b21; }
.share-bubble__card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; }
.share-bubble__card img { width: 34px; height: auto; }
.share-bubble__card b { display: block; color: var(--navy); }
.share-bubble__card small { color: var(--ink-3); font-size: 13px; }
.amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 26px; max-width: 460px; }
.amounts span { display: grid; place-items: center; height: 50px; border-radius: 14px; font-weight: 700; font-size: 17px; color: var(--plum); background: #fff; border: 1.5px solid rgba(138, 12, 187, .18); transition: background .4s, color .4s, transform .4s var(--ease-spring), box-shadow .4s; }
.amounts span.on { color: #fff; background: linear-gradient(135deg, #bc59e2, #8a0cbb); border-color: transparent; transform: scale(1.06); box-shadow: 0 10px 24px -10px rgba(138, 12, 187, .7); }

/* ---------------------------------------------------------------- reveal (dark) */
.reveal { overflow: clip; }
.countdown { position: relative; height: clamp(110px, 14vw, 190px); margin-top: 20px; font-weight: 900; font-size: clamp(110px, 14vw, 190px); line-height: 1; }
.countdown span { position: absolute; inset-inline-start: 0; top: 0; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .6s var(--ease-spring); background: linear-gradient(90deg, #b26bff, #ff4fb0); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(244, 3, 129, .45)); }
.countdown span:last-child { background: none; color: initial; filter: none; }
.countdown span.on { opacity: 1; transform: none; }
.reveal__after { margin-top: 18px; font-weight: 600; color: #f9d6ff; }
.reveal__cta, .compare__cta { margin-top: 30px; }
.notif { position: absolute; z-index: 4; display: flex; gap: 10px; align-items: flex-start; width: min(300px, 80vw); padding: 12px 14px; border-radius: 18px; color: #fff; text-align: start; background: rgba(40, 24, 80, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(16px) scale(.92); transition: opacity .6s var(--ease-out), transform .7s var(--ease-spring); pointer-events: none; }
.notif img { width: 34px; height: auto; flex: none; padding: 4px; border-radius: 9px; background: #fff; }
.notif__wa { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #25d366; font-size: 18px; }
.notif b { font-size: 13px; letter-spacing: .02em; } .notif small { margin-inline-start: 8px; font-size: 12px; opacity: .72; }
.notif p { margin-top: 2px; font-size: 14.5px; line-height: 1.4; }
.notif--a { top: 8%; inset-inline-end: -8%; }
.notif--b { bottom: 14%; inset-inline-start: -10%; }
/* they arrive with the 🎉 — and only while the reveal owns the screen */
.reveal.is-on.is-current .notif { opacity: 1; transform: none; }
.reveal.is-on.is-current .notif--b { transition-delay: .6s; }
.no-js .notif { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- video reel */
.reel__row { display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 34px); margin-top: clamp(36px, 6vh, 64px); padding-inline: var(--gutter); }
.reel__item { margin: 0; flex: 0 1 250px; text-align: center; }
.reel__item--up { translate: 0 -34px; }
.reel__phone { position: relative; aspect-ratio: 9 / 16; border-radius: 30px; padding: 7px; background: linear-gradient(150deg, #9a63f0, #3d0f8a 55%, #f40381); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .12); transition: filter .5s, transform .6s var(--ease-out), box-shadow .6s; }
.reel__item:not(.is-playing) .reel__phone { filter: saturate(.8) brightness(.84); }
.reel__item.is-playing .reel__phone { transform: scale(1.04); box-shadow: 0 34px 80px -24px rgba(244, 3, 129, .55), 0 0 0 2px rgba(255, 255, 255, .28); }
.reel__phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; background: #120a2e; }
.reel__play, .reel__sound { position: absolute; bottom: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 15px; line-height: 1; background: rgba(12, 6, 39, .62); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .3s var(--ease-spring), background .3s; }
.reel__play:hover, .reel__sound:hover { transform: scale(1.08); background: rgba(12, 6, 39, .8); }
.reel__play { inset-inline-end: 16px; }
.reel__sound { inset-inline-start: 16px; }
.reel__play::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.reel__item.is-playing .reel__play::before { width: 12px; height: 14px; margin: 0; border: 0; background: linear-gradient(90deg, #fff 0 34%, transparent 34% 66%, #fff 66%); }
.reel__sound::before { content: "🔇"; content: "🔇" / ""; font-size: 17px; }
.reel__sound[aria-pressed="true"]::before { content: "🔊"; content: "🔊" / ""; }
.reel__item figcaption { margin-top: 16px; font-weight: 600; font-size: 15.5px; line-height: 1.4; color: rgba(255, 255, 255, .92); }

/* ---------------------------------------------------------------- occasions: stories marquee */
.occasions { overflow: hidden; }
.stories { margin-top: clamp(30px, 5vh, 56px); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.stories__track { display: flex; gap: 22px; width: max-content; padding: 24px 0 30px; animation: stories 48s linear infinite; }
.stories:hover .stories__track, .stories:focus-within .stories__track { animation-play-state: paused; }
@keyframes stories { to { transform: translateX(50%); } }
.story { position: relative; flex: none; width: 250px; margin: 0; transition: transform .5s var(--ease-spring); }
.story img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px -22px rgba(76, 8, 150, .55); transition: box-shadow .5s; }
.story figcaption { margin-top: 12px; text-align: center; font-size: 15px; font-weight: 700; color: var(--navy); }
.story:hover { transform: translateY(-10px) rotate(-1.5deg); }
.story:hover img { box-shadow: 0 34px 60px -24px rgba(244, 3, 129, .6); }

/* ---------------------------------------------------------------- app screens: 3D coverflow */
.screens { overflow: hidden; }
.coverflow { position: relative; margin-top: clamp(30px, 5vh, 56px); border-radius: 28px; }
.coverflow:focus-visible { outline: 3px solid var(--magenta); outline-offset: 6px; }
.coverflow__stage { position: relative; height: min(640px, 76vh); perspective: 1600px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.coverflow__stage.is-dragging { cursor: grabbing; }
.coverflow img { -webkit-user-drag: none; pointer-events: none; }
.cf-item { position: absolute; top: 0; left: 50%; width: min(270px, 58vw); margin: 0 0 0 calc(min(270px, 58vw) / -2); transition: transform .8s var(--ease-out), opacity .6s, filter .6s; }
.cf-item figcaption { margin-top: 16px; text-align: center; font-weight: 700; color: var(--navy); opacity: 0; transition: opacity .4s; }
.cf-item.is-active figcaption { opacity: 1; }
.phone-frame { position: relative; aspect-ratio: 750 / 1624; padding: 9px; border-radius: 42px; background: linear-gradient(145deg, #a274f2, #5d1fc4 60%, #8b36e5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 30px 60px -20px rgba(76, 8, 150, .55); }
.phone-frame::before { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 20px; margin-left: -15%; border-radius: 12px; background: #000; z-index: 2; }
.phone-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 34px; background: #fff; }
.coverflow__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.cf-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--violet); background: #fff; box-shadow: var(--shadow-1); transition: transform .3s var(--ease-spring); }
.cf-btn svg { width: 22px; height: 22px; }
.cf-btn:hover { transform: scale(1.08); }
.cf-dots { display: flex; gap: 14px; }
.cf-dots button { position: relative; width: 9px; height: 9px; border-radius: 9px; background: rgba(102, 0, 204, .22); transition: width .4s var(--ease-out), background .4s; }
.cf-dots button::after { content: ""; position: absolute; inset: -10px -6px; }
.cf-dots button.is-on { width: 28px; background: var(--grad); }

/* ---------------------------------------------------------------- trust */
.trust .split__copy { padding-top: 8vh; }
.trust__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.t-card { padding: 20px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .4s var(--ease-spring), box-shadow .4s; }
.t-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(76, 8, 150, .35); }
.t-card img { width: 56px; height: 56px; object-fit: contain; }
.t-card h3 { margin-top: 10px; font-size: 18px; font-weight: 700; color: var(--navy); }
.t-card p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.t-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- compare */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 18px; width: min(920px, 100%); margin-top: 40px; text-align: start; }
.vs__col { padding: 26px 26px 22px; border-radius: 26px; }
.vs__col h3 { display: flex; align-items: center; min-height: 40px; font-size: 22px; font-weight: 800; }
.vs__col h3 img { height: 32px; width: auto; }
.vs__col ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.vs__col li { position: relative; padding-inline-start: 30px; font-size: 16.5px; }
.vs__col--old { background: #f1eef6; color: #57526a; }
.vs__col--old h3 { color: #57526a; }
.vs__col--old li::before { content: "✕"; content: "✕" / ""; position: absolute; inset-inline-start: 0; color: #8e86a3; font-weight: 800; }
.vs__col--new { background: #fff; color: var(--navy); box-shadow: 0 30px 70px -30px rgba(102, 0, 204, .45), 0 0 0 2px rgba(139, 54, 229, .35); }
.vs__col--new li::before { content: "✓"; content: "✓" / ""; position: absolute; inset-inline-start: 0; display: grid; place-items: center; width: 21px; height: 21px; top: .15em; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; background: var(--grad); }
.vs__mid { align-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-weight: 900; color: #fff; background: var(--navy); box-shadow: 0 0 0 8px rgba(102, 0, 204, .08); }

/* ---------------------------------------------------------------- FAQ */
.faq__wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq__head .h-1 { margin-top: 18px; }
.faq__doodle { width: 150px; height: auto; margin-top: 26px; }
.faq__list { display: grid; gap: 12px; }
.faq details { border-radius: 18px; background: var(--lav-100); border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.faq details[open], .faq details.is-open { background: #fff; border-color: var(--line); box-shadow: var(--shadow-1); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 22px; padding-inline-end: 60px; font-weight: 700; font-size: 18px; color: var(--navy); border-radius: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; inset-inline-end: 22px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--grad); }
.faq summary::before { content: "+"; content: "+" / ""; position: absolute; inset-inline-end: 22px; top: 50%; width: 26px; line-height: 26px; margin-top: -13px; text-align: center; font-weight: 700; font-size: 20px; color: #fff; z-index: 1; transition: transform .4s var(--ease-spring); }
.faq details[open] summary::before, .faq details.is-open summary::before { transform: rotate(45deg); }
.faq__a { overflow: hidden; transition: height .38s var(--ease-out); }
.faq__a p { padding: 0 22px 20px; color: var(--ink-2); line-height: 1.65; }
.faq__a .faq__cta { padding-top: 4px; }

/* ---------------------------------------------------------------- final CTA */
.cta { overflow: clip; }
.cta .split { min-height: 96vh; align-items: center; }
.cta__copy { padding-top: 0; }
.cta .eyebrow--dark, .cta .lead--dark { color: #fff; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.cta__qr { display: flex; align-items: center; gap: 16px; margin-top: 24px; max-width: 400px; padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cta__qr p { font-size: 15px; color: #fff; }
.cta__qr b { display: block; }
.qr { flex: none; width: 104px; height: 104px; padding: 10px; border-radius: 16px; background: #fff; }
.qr svg { width: 100%; height: 100%; }
.qr--big { width: 200px; height: 200px; padding: 16px; margin: 18px auto; box-shadow: var(--shadow-1); }
.cta .phone-slot { height: min(82vh, 820px); }
/* on a phone the QR is pointless and only the matching store matters */
html[data-platform="ios"] .cta__qr, html[data-platform="android"] .cta__qr { display: none; }
html[data-platform="ios"] .store-badge[href*="play.google"], html[data-platform="android"] .store-badge[href*="apps.apple"] { display: none; }

/* ---------------------------------------------------------------- footer */
.footer { position: relative; z-index: 2; padding: 50px 0 calc(40px + env(safe-area-inset-bottom)); background: #0c0627; color: rgba(255, 255, 255, .8); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer__brand { display: flex; align-items: center; gap: 16px; }
.footer__brand img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.footer__brand p { font-weight: 600; color: #fff; }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; }
.footer__links a { padding-block: 6px; }
.footer__links a:hover { color: #fff; text-decoration: underline; }
.footer__legal { width: 100%; font-size: 13.5px; color: rgba(255, 255, 255, .64); }
.footer__policies { display: flex; flex-wrap: wrap; gap: 4px 22px; width: 100%; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 15px; }
.footer__policies a { padding-block: 6px; text-decoration: underline; text-underline-offset: 3px; }
.footer__policies a:hover { color: #fff; }
.footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; width: 100%; font-size: 15px; }
.footer__contact > a { padding-block: 6px; }
.footer__contact > a:hover { color: #fff; text-decoration: underline; }
.footer .social-btn { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.footer .social-btn:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.motion-toggle--text { display: inline; width: auto; height: auto; padding: 6px 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.motion-toggle--text[aria-pressed="true"]::after { content: " ✓"; content: " ✓" / ""; }

/* ---------------------------------------------------------------- floating WhatsApp button (bottom left) */
.wa-float { position: fixed; z-index: 59; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; background: #25d366; box-shadow: 0 12px 26px -10px rgba(10, 120, 60, .7), 0 2px 6px rgba(0, 0, 0, .12); transition: transform .35s var(--ease-spring), bottom .45s var(--ease-out); }
.wa-float svg { width: 31px; height: 31px; }
.wa-float:hover { transform: scale(1.07); }
.wa-float:focus-visible { outline-color: var(--navy); }
/* a gentle ring a few times after load, to be noticed */
.wa-float::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #25d366; opacity: 0; animation: wa-ping 2.2s ease-out 2.5s 3; }
@keyframes wa-ping { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; } }
/* phones: rise above the sticky download bar while it shows */
@media (max-width: 900px) {
  .wa-float { width: 54px; height: 54px; left: 14px; }
  body.sticky-on .wa-float { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- sticky mobile CTA */
.sticky-cta { position: fixed; z-index: 60; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 20px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); box-shadow: 0 16px 40px -14px rgba(76, 8, 150, .45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: translateY(140%); visibility: hidden; transition: transform .5s var(--ease-out), visibility 0s linear .5s; }
.sticky-cta img { width: 26px; height: auto; }
.sticky-cta span { flex: 1; font-size: 15px; color: var(--ink-2); }
.sticky-cta b { color: var(--navy); }
.sticky-cta .btn { --h: 44px; padding: 0 18px; font-size: 16px; }
.sticky-cta.show { transform: none; visibility: visible; transition-delay: 0s; }

/* ---------------------------------------------------------------- QR sheet */
.qr-sheet { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; background: rgba(12, 6, 39, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.qr-sheet:not(.open) { pointer-events: none; }
.qr-sheet.open { opacity: 1; }
.qr-sheet__card { position: relative; width: min(420px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 32px 28px 22px; border-radius: 28px; text-align: center; background: #fff; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5); transform: translateY(20px) scale(.96); transition: transform .45s var(--ease-spring); }
.qr-sheet.open .qr-sheet__card { transform: none; }
.qr-sheet__card > img { width: 44px; height: auto; margin: 0 auto; }
.qr-sheet__card h2 { margin-top: 12px; font-size: 26px; font-weight: 800; }
.qr-sheet__card p { margin-top: 6px; color: var(--ink-2); }
.qr-sheet__card .store-badges { justify-content: center; }
.qr-sheet__rating { font-size: 14.5px; }
.qr-sheet__close { position: absolute; top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--ink-2); background: var(--lav-100); }

/* ---------------------------------------------------------------- per-section covers: a section paints its own background
   until it becomes the current one; then it turns transparent so the shared background + 3D phone show through. */
section[data-bg] { --sec-bg: #fcf9ff; }
section[data-bg]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sec-cover, var(--sec-bg)); opacity: 1; transition: opacity .55s var(--ease-out); pointer-events: none;
  /* soft edges: neighbouring sections blend instead of slicing the 3D props with a hard line */
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 min(140px, 14vh), #000 calc(100% - min(140px, 14vh)), transparent 100%);
  mask: linear-gradient(to bottom, transparent 0, #000 min(140px, 14vh), #000 calc(100% - min(140px, 14vh)), transparent 100%); }
section[data-bg].is-current::before { opacity: 0; }
.campaign { --sec-cover: radial-gradient(50% 60% at 50% 70%, rgba(139, 54, 229, .35), transparent 70%), radial-gradient(40% 40% at 85% 15%, rgba(244, 3, 129, .18), transparent 70%), #120a2e; }
.reveal { --sec-cover: radial-gradient(55% 50% at 25% 45%, rgba(244, 3, 129, .26), transparent 70%), radial-gradient(50% 50% at 80% 30%, rgba(102, 0, 204, .42), transparent 70%), #0c0627; }
.reel { --sec-cover: radial-gradient(60% 50% at 50% 60%, rgba(139, 54, 229, .3), transparent 70%), #0c0627; }
.cta { --sec-cover: radial-gradient(70% 70% at 80% 30%, rgba(244, 3, 129, .55), transparent 60%), radial-gradient(60% 70% at 15% 80%, rgba(139, 54, 229, .6), transparent 65%), linear-gradient(135deg, #3d007a, #6600cc 45%, #a1069c 75%, #f40381); }

/* ---------------------------------------------------------------- scenes live in the fixed background (behind the 3D canvas) */
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease-out); }
.scene--campaign { background: radial-gradient(50% 60% at 50% 70%, rgba(139, 54, 229, .35), transparent 70%), radial-gradient(40% 40% at 85% 15%, rgba(244, 3, 129, .18), transparent 70%); }
.scene--reveal { background: radial-gradient(55% 50% at 25% 45%, rgba(244, 3, 129, .26), transparent 70%), radial-gradient(50% 50% at 80% 30%, rgba(102, 0, 204, .42), transparent 70%); }
.scene--reel { background: radial-gradient(60% 50% at 50% 60%, rgba(139, 54, 229, .3), transparent 70%); }
.scene--cta { background: radial-gradient(70% 70% at 80% 30%, rgba(244, 3, 129, .55), transparent 60%), radial-gradient(60% 70% at 15% 80%, rgba(139, 54, 229, .6), transparent 65%), linear-gradient(135deg, #3d007a, #6600cc 45%, #a1069c 75%, #f40381); }
body[data-scene="campaign"] .scene--campaign, body[data-scene="reveal"] .scene--reveal, body[data-scene="reel"] .scene--reel, body[data-scene="download"] .scene--cta { opacity: 1; }

/* ---------------------------------------------------------------- reduced motion: static, fully reachable layouts */
@media (prefers-reduced-motion: reduce) {
  .hero__title .grad-text, .marquee__track, .stories__track, .scroll-hint span, .campaign__turn img { animation: none; }
  .marquee__track { flex-wrap: wrap; justify-content: center; width: auto; padding-inline: var(--gutter); gap: 8px 46px; }
  .stories__track { flex-wrap: wrap; justify-content: center; width: auto; padding-inline: var(--gutter); }
  .marquee__track > [aria-hidden="true"], .stories__track > [aria-hidden="true"] { display: none; }
  .stories { -webkit-mask: none; mask: none; }
  .story { width: min(220px, 42vw); }
  .campaign__pin { position: relative; height: auto; overflow: visible; padding-block: calc(var(--nav-h) + 40px) 80px; }
  .campaign__track { flex-wrap: wrap; justify-content: center; width: auto; transform: none !important; padding-inline: var(--gutter); }
  .poster { height: auto; width: min(300px, 42vw); }
  .campaign__turn { width: 100%; }
  .campaign__progress { display: none; }
  .cf-item { transition: opacity .3s; }
  .float-chip { opacity: 1; animation: none !important; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .notif { width: 240px; } .notif p { font-size: 13px; }
  .notif--a { top: -2%; inset-inline-end: -2%; } .notif--b { bottom: 0; inset-inline-start: -2%; }
  .chip--a { inset-inline-start: 0; } .chip--b { inset-inline-end: 0; }
}
@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  body { font-size: 17px; }
  .split, .split--flip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .split--flip .split__copy, .split--flip .split__phone { grid-column: 1; grid-row: auto; }
  .split__copy, .chapter .split__copy { position: relative; top: auto; padding-top: 0; padding-bottom: 10px; }
  .split__phone { height: auto; }
  .phone-slot:not(.phone-slot--ghost) { position: relative; top: 0; height: min(60vh, 520px); margin-top: 18px; }
  .chapter, .chapter .split, .pain .split, .personal .split, .trust .split, .reveal .split { min-height: 0; }
  .chapter { padding-block: 64px; }
  /* hero: headline, CTA and the phone first; proof and ticks follow it */
  .hero { padding-top: calc(var(--nav-h) + 20px); padding-bottom: 30px; }
  .hero .split { display: flex; flex-direction: column; min-height: 0; }
  .hero__copy { display: contents; }
  .hero__eyebrow { order: 1; align-self: flex-start; }
  .hero__title { order: 2; }
  .hero__lead { order: 3; }
  .hero__actions { order: 4; margin-top: 22px; }
  .hero .split__phone { order: 5; width: 100%; height: min(52vh, 460px); margin-top: 6px; }
  .hero .phone-slot:not(.phone-slot--ghost) { height: 100%; margin-top: 0; }
  .hero__proof { order: 6; margin-top: 18px; }
  .hero__ticks { order: 7; margin-top: 14px; }
  .hero__how { display: none; }
  .float-chip { font-size: 13px; padding: 7px 11px; }
  .chip--c { display: none; }
  .scroll-hint { display: none; }
  .campaign__pin { position: relative; height: auto; padding-block: 70px 50px; }
  .campaign__viewport { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .campaign__viewport::-webkit-scrollbar { display: none; }
  .campaign__track { transform: none !important; padding-block: 20px 30px; }
  .poster { height: auto; width: 78vw; scroll-snap-align: center; }
  .campaign__turn { width: 44vw; scroll-snap-align: center; }
  .campaign__progress { display: none; }
  .notif { position: relative; inset: auto; width: 100%; margin-top: 12px; }
  .reveal .phone-slot:not(.phone-slot--ghost) { display: flex; flex-direction: column; justify-content: flex-end; }
  .lead--dark { text-shadow: 0 1px 2px rgba(12, 6, 39, .9), 0 0 16px rgba(12, 6, 39, .8); }
  .reel__row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-block: 10px 20px; scrollbar-width: none; }
  .reel__row::-webkit-scrollbar { display: none; }
  .reel__item { flex: 0 0 62vw; scroll-snap-align: center; }
  .reel__item--up { translate: none; }
  .story { width: 180px; }
  .trust__grid { grid-template-columns: minmax(0, 1fr); }
  .vs { grid-template-columns: minmax(0, 1fr); }
  .vs__mid { justify-self: center; margin: -6px 0; }
  .faq__wrap { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }
  .faq__doodle { display: none; }
  .cta .split { min-height: 0; }
  .cta { padding-bottom: 60px; }
  .cta .phone-slot:not(.phone-slot--ghost) { height: 46vh; }
  .sticky-cta { display: flex; }
  .footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}
/* portrait tablets: the phone layout, with tablet proportions */
@media (min-width: 600px) and (max-width: 900px) {
  .poster { width: 42vw; } .campaign__turn { width: 26vw; }
  .reel__item { flex-basis: 36vw; }
  .story { width: 210px; }
  .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .vs__mid { margin: 0; }
}
@media (max-width: 480px) {
  .hero__actions .btn { width: 100%; }
  .hero__ticks { font-size: 14px; gap: 6px 14px; }
  .amounts { gap: 7px; }
  .amounts span { height: 44px; font-size: 15px; }
}

/* ---------------------------------------------------------------- lite mode: phones, tablets, data saver, no WebGL
   No live 3D and no full-screen GPU effects (blend modes, blur filters, masks, backdrop blur): everything
   that moves is a transform on a small layer, so scrolling stays smooth on any phone. */
/* the fixed full-screen layers would force the whole page into huge GPU layers stacked above them */
html.lite #stage, html.lite .grain, html.lite .cursor-glow, html.lite .bg-layer { display: none; }
html.lite *, html.lite *::before, html.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lite section[data-bg] { background: var(--sec-cover, var(--sec-bg)); }
html.lite section[data-bg]::before { display: none; }
html.lite .hero { background: radial-gradient(70% 40% at 90% 8%, #f1e2ff, transparent 70%), radial-gradient(60% 35% at 5% 92%, #ffe6f4, transparent 70%), #fcf9ff; }
html.lite .nav.is-scrolled { background: rgba(252, 249, 255, .97); }
html.lite .nav[data-tone="dark"].is-scrolled { background: rgba(12, 6, 39, .96); }
html.lite .eyebrow { background: rgba(255, 255, 255, .92); }
html.lite .eyebrow--dark { background: rgba(255, 255, 255, .1); }
html.lite .notif { background: rgba(40, 24, 80, .95); }
html.lite .stories { -webkit-mask: none; mask: none; }
html.lite .hero__title .grad-text { animation: none; }
html.lite .campaign__track { will-change: auto; }