/* Motion is progressive enhancement. Content stays visible without JavaScript. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
html { scroll-padding-top: 104px; }
.mobile-contact-bar { display: none; }
.page-progress { width: 100%; transform: scaleX(var(--reading-fraction,0)); transform-origin: left; }
.hero-visual, .cover-art { perspective: 1100px; }
.hero-photo { transition: box-shadow .5s, rotate .8s var(--motion-ease); }
.hero, .vsl-hero { isolation: isolate; }
.hero:after, .vsl-hero:before {
  content: ''; position: absolute; width: 58vw; height: 58vw; max-width: 850px; max-height: 850px;
  right: -22%; top: -18%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle,#86bdff24 0,#63acff12 40%,transparent 68%);
}
.vsl-hero { position: relative; overflow: clip; }
.vsl-hero:before { background: radial-gradient(circle,#2373da42,transparent 68%); }
.vsl .vsl-hero > .container { position: relative; }
.vsl-player { position: relative; isolation: isolate; }
.vsl-player:before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid #9ccaff52; box-shadow: 0 0 45px #2f81eb12;
}
.video-play-symbol { cursor: default; }
.setup-visual:before {
  content: ''; position: absolute; inset: 12% 5%; border: 1px dashed #78a4de66;
  border-radius: 48%; rotate: -14deg; pointer-events: none;
}
.setup-visual:after {
  content: ''; position: absolute; inset: 22% -3%; border: 1px solid #99bbeb45;
  border-radius: 48%; rotate: 25deg; pointer-events: none; z-index: -1;
}
.step-number, .icon-box, .proof-index, .result-card > .icon { transition: translate .3s var(--motion-ease), box-shadow .3s, background .3s; }
.benefit, .result-card, .faq-card, .faq-item, .review, .journey-card { transition: border-color .3s, box-shadow .3s, translate .4s var(--motion-ease); }
.button:focus-visible, .text-link:focus-visible, .menu-toggle:focus-visible, .wa-launcher:focus-visible {
  outline: 3px solid #51a9ff; outline-offset: 5px;
}
.button:active:not(:disabled) { scale: .98; }
.button { transition: transform .2s, scale .2s, box-shadow .2s, background .2s; }
.contact-backdrop { position: fixed; inset: 0; background: #03142c55; z-index: 89; backdrop-filter: blur(3px); }
.contact-backdrop[hidden] { display: none; }
.wa-panel { z-index: 100; }
.contact-open .wa-launcher { z-index: 88; }
.contact-open { overflow: hidden; }
.wa-panel:not([hidden]) { animation: contact-enter .36s var(--motion-ease) both; }
.contact-backdrop:not([hidden]) { animation: backdrop-enter .25s ease both; }
.site-header nav.open { animation: menu-enter .28s var(--motion-ease) both; }
@keyframes contact-enter { from { opacity: 0; translate: 0 24px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-enter { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .mobile-contact-bar { transition: opacity .25s, translate .35s var(--motion-ease), visibility .25s; translate: 0 12px; }
  .mobile-contact-bar.is-visible { translate: 0 0; }
  .motion-ready .reveal-pending { opacity: 0; translate: 0 24px; }
  .motion-ready [data-reveal] { transition: opacity .75s var(--motion-ease), translate .75s var(--motion-ease); transition-delay: var(--reveal-delay,0ms); }
  .motion-ready [data-reveal].is-revealed { opacity: 1; translate: 0 0; }
  .motion-ready .hero-copy > *, .motion-ready .vsl-hero > .container > h1,
  .motion-ready .vsl-hero > .container > .eyebrow, .motion-ready .vsl-hero .hero-subtitle {
    animation: copy-enter .85s var(--motion-ease) both;
  }
  .motion-ready .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .motion-ready .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .motion-ready .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .motion-ready .hero-copy > :nth-child(5) { animation-delay: .24s; }
  .motion-ready .hero-visual { animation: visual-enter 1.1s var(--motion-ease) both; }
  .motion-ready .hero:after, .motion-ready .vsl-hero:before { animation: ambient-enter 4.8s ease-out both; }
  .motion-ready .floating-badge { animation: badge-arrive 1.1s var(--motion-ease) backwards, badge-float 3.5s ease-in-out 1.1s; }
  .motion-ready .badge-left { animation-delay: .15s,1.25s; }
  .motion-ready .badge-bottom { animation-delay: .3s,1.4s; }
  .motion-ready .cover-art { animation: visual-enter 1.2s var(--motion-ease) .15s both; }
  .motion-ready .cover-bubble { animation: badge-arrive 1s var(--motion-ease) .4s both; }
  .motion-ready .is-revealed .ops-step, .motion-ready .is-revealed .finance-path li { animation: workflow-focus 1.35s ease-out both; }
  .motion-ready .is-revealed .ops-step:nth-child(2), .motion-ready .is-revealed .finance-path li:nth-child(2) { animation-delay: .9s; }
  .motion-ready .is-revealed .ops-step:nth-child(3), .motion-ready .is-revealed .finance-path li:nth-child(3) { animation-delay: 1.8s; }
  .motion-ready .is-revealed .setup-tile { animation: badge-arrive .8s var(--motion-ease) both; }
  .motion-ready .is-revealed .setup-tile.st2 { animation-delay: .12s; }
  .motion-ready .is-revealed .setup-tile.st3 { animation-delay: .24s; }
  .motion-ready .is-revealed .direct-search { animation: copy-enter .7s var(--motion-ease) both; }
  .motion-ready .is-revealed .direct-message { animation: badge-arrive .85s var(--motion-ease) .3s both; }
}
@keyframes copy-enter { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes visual-enter { from { opacity: 0; translate: 0 28px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes badge-arrive { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes badge-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes ambient-enter { from { translate: 6% -4%; scale: .8; opacity: .4; } to { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes workflow-focus { 0%,100% { box-shadow: inset 3px 0 transparent; } 35% { box-shadow: inset 3px 0 #69aaff; } }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .benefit:hover .icon-box, .result-card:hover > .icon { translate: 0 -3px; }
  .benefit:hover .icon-box { box-shadow: 0 6px 18px #0b63ce14; }
  .result-card:hover, .faq-card:hover, .faq-item:hover { translate: 0 -3px; border-color: #9ec2f0; box-shadow: 0 14px 32px #123e700a; }
  .review:hover { border-color: #8ebbf277; }
  .step:hover .step-number { translate: 0 -4px; box-shadow: 0 8px 25px #1655af12; }
  .hero-visual:hover .hero-photo { rotate: -.6deg; box-shadow: 0 35px 80px #254d7c26; }
  .motion-parallax { translate: var(--float-x,0px) var(--float-y,0px); transition: translate .65s var(--motion-ease); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .motion-ready [data-reveal], .motion-ready .reveal-pending { opacity: 1; translate: none; }
  *, *:before, *:after { animation: none!important; transition: none!important; }
}
@media print { .contact-backdrop,.mobile-contact-bar { display:none!important; } [data-reveal] { opacity:1!important; translate:none!important; } }
