:root{--bg:#f7f6fd;--card:#fff;--ink:#1e1b2e;--mute:#615d78;--line:#e5e2f3;--acc:#5b46d6;--accd:#4735b8;--soft:#edeafc;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"]{--bg:#13121b;--card:#1c1a28;--ink:#f1effa;--mute:#a7a3be;--line:#2f2c44;--acc:#a898ff;--accd:#c3b8ff;--soft:#2a2552}
.theme-icon-dark{display:none}
:root[data-theme="dark"] .theme-icon-light{display:none}
:root[data-theme="dark"] .theme-icon-dark{display:inline}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:.7rem 1.25rem;font-weight:600;font-size:.95rem;transition:all .15s}
.btn-p{background:var(--acc);color:#fff}.btn-p:hover{background:var(--accd)}
.btn-s{border:1px solid var(--line);background:var(--card)}.btn-s:hover{border-color:var(--acc)}
.sh{border-radius:6px;padding:3px 6px;font-size:10px;font-weight:600;line-height:1.2}
.s1{background:#dbeafe;color:#1e40af}.s2{background:#dcfce7;color:#166534}.s3{background:#fef3c7;color:#92400e}.s4{background:#fce7f3;color:#9d174d}
.open{border:1.5px dashed #f97316;color:#c2410c;background:#fff7ed}
details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(180deg)}

.lb[aria-pressed=true]{background:var(--acc);color:#fff}.at[aria-selected=true]{background:var(--acc);color:#fff}.at{border-radius:10px;padding:.5rem 1rem;font-size:.875rem;font-weight:600}.rl{background:rgba(239,68,68,.14)}.yl{background:rgba(250,204,21,.25)}.cb{background:var(--bg);border:1px dashed var(--line);color:var(--mute);transition:all .15s}.cb:hover{border-color:var(--acc);color:var(--ink)}/* Hand character pointing at the WhatsApp button */
#wa-hand{animation:hand-in .35s ease-out both}
#wa-hand .hand{animation:hand-point 1s ease-in-out infinite}
.wa-attn{animation:wa-pulse 1.2s ease-out infinite}
@keyframes hand-in{from{opacity:0;transform:translateY(10px) scale(.8)}}
@keyframes hand-point{50%{transform:translate(10px,8px)}}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.7)}100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){#wa-hand,#wa-hand .hand,.wa-attn{animation:none}}
/* Guided tour: dim every section except the one being explained; panel text slides in from the right. */
body.touring section{opacity:.28;transition:opacity .5s ease}
body.touring section.tour-focus{opacity:1}
.tour-in{animation:tour-in .45s cubic-bezier(.2,.8,.2,1) both}
.tour-out{animation:tour-out .18s ease-in both}
.btn:disabled{opacity:.4;cursor:not-allowed}
@keyframes tour-in{from{opacity:0;transform:translateX(28px)}}
@keyframes tour-out{to{opacity:0;transform:translateX(-18px)}}
@media (prefers-reduced-motion:reduce){.tour-in,.tour-out{animation:none}body.touring section{transition:none}}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq-left var(--d,30s) linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-group{display:flex;gap:12px;padding-right:12px}
@keyframes mq-left{to{transform:translateX(calc(var(--w,0px)*-1))}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
/* Benefit flow: a connected, auto-playing 4-step timeline. Scenes animate only while their step is active. */
.flow-line{position:absolute;left:12.5%;right:12.5%;top:0;height:3px;border-radius:3px;background:var(--line)}
.flow-line::after{content:"";position:absolute;inset:0;border-radius:3px;background:var(--acc);transform-origin:left;transform:scaleX(calc(var(--p,0) / 3));transition:transform .9s ease}
.flow-step{transition:transform .3s,border-color .3s,box-shadow .3s}
.flow-step.on{border-color:var(--acc);box-shadow:0 18px 40px -22px rgba(91,70,214,.6);transform:translateY(-4px)}
.flow-step:not(.on) .scene{opacity:.6}
.flow-node{transition:background .3s,border-color .3s}
.flow-step.done .flow-node{background:var(--soft);border-color:var(--acc)}
.flow-step.on .flow-node{background:var(--acc);border-color:var(--acc);animation:pulse-ring 1.6s ease-out infinite}
.flow-step.on .a-pop{animation:pop .4s ease-out both;animation-delay:calc(var(--i,0) * 110ms)}
.flow-step.on .a-fade{animation:fade-in .5s ease-out both;animation-delay:calc(var(--i,0) * 110ms)}
.flow-step.on .a-slide{animation:slide-chip 1.4s ease-in-out both}
.flow-step.on .a-dot{animation:dot-from .4s ease-out both;animation-delay:calc(var(--i,0) * 450ms)}
.flow-step.on .a-grow{animation:grow .6s ease-out both;animation-delay:calc(var(--i,0) * 110ms)}
.flow-step.on .a-bob{animation:bob 1.3s ease-in-out infinite}
.flow-step.on .a-wave{animation:wave 1.1s ease-in-out 2}
.flow-step.on .a-present{animation:present-from .45s ease-out both;animation-delay:calc(var(--i,0) * 450ms)}
.a-wave{transform-origin:50% 100%}
@keyframes bob{50%{transform:translateY(-3px)}}
@keyframes wave{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes present-from{from{filter:grayscale(1);opacity:.4}}
.a-grow{transform-origin:bottom}
@keyframes pop{from{opacity:0;transform:scale(.4)}}
@keyframes fade-in{from{opacity:0;transform:translateY(5px)}}
@keyframes slide-chip{from{left:12%}}
@keyframes dot-from{from{background:var(--line);color:var(--mute)}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(91,70,214,.5)}100%{box-shadow:0 0 0 14px rgba(91,70,214,0)}}
@media (prefers-reduced-motion:reduce){.flow-step.on *{animation:none!important}.flow-step{transition:none}}