/* LeadSnap website motion layer: loaded after site.css. Everything here is progressive: without JS or with reduced motion the page is the plain site. */
:root { --grad:linear-gradient(120deg,#6ff0e8,#4d8dff 45%,#6ff0e8); }


/* header: compacts and glows once you scroll */
.sh { transition:background .3s, box-shadow .3s; } .sh .wrap { transition:height .3s; }
.sh.scrolled { background:rgba(6,18,44,.97); box-shadow:0 10px 30px rgba(3,12,32,.35); } .sh.scrolled .wrap { height:64px; }
.sh nav a { position:relative; border-bottom:0; }
.sh nav a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.sh nav a:hover::after, .sh nav a.on::after { transform:scaleX(1); } .sh nav a.on { color:#fff; }

/* hero: drifting colour, grid, animated headline accent */
.hero .blob { animation:drift 14s ease-in-out infinite alternate; will-change:transform; transition:translate .4s ease-out; }
.hero .b2 { animation-duration:18s; animation-delay:-4s; } .hero .b3 { animation-duration:16s; animation-delay:-8s; }
@keyframes drift { to { transform:translate(60px,40px) scale(1.15); } }
.hero h1 span { background:var(--grad); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:flow 6s linear infinite; }
@keyframes flow { to { background-position:-220% 0; } }
.hero-tag::before { content:""; display:inline-block; width:8px; height:8px; margin-right:9px; border-radius:50%; background:#6ff0e8; box-shadow:0 0 0 0 rgba(111,240,232,.7); animation:ping 2s infinite; }
@keyframes ping { to { box-shadow:0 0 0 12px rgba(111,240,232,0); } }
.fx .hero-copy > * { opacity:0; transform:translateY(26px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.fx .hero-copy > :nth-child(2) { animation-delay:.08s; } .fx .hero-copy > :nth-child(3) { animation-delay:.16s; } .fx .hero-copy > :nth-child(4) { animation-delay:.24s; } .fx .hero-copy > :nth-child(5) { animation-delay:.32s; } .fx .hero-copy > :nth-child(6) { animation-delay:.4s; }
@keyframes rise { to { opacity:1; transform:none; } }
.channels .ch { transition:transform .2s, background .2s; } .channels .ch:hover { transform:translateY(-4px); background:rgba(255,255,255,.22); }
.channels .ch svg { transition:transform .3s; } .channels .ch:hover svg { transform:scale(1.2) rotate(-6deg); }

/* buttons: shine sweep */
.sbtn { position:relative; overflow:hidden; }
.sbtn::after { content:""; position:absolute; top:0; left:-80%; width:50%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); transition:left .6s; }
.sbtn:hover::after { left:130%; }

/* scroll reveal */
.fx .rv { opacity:0; transform:translateY(34px) scale(.98); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); }
.fx .rv.in { opacity:1; transform:none; }

/* cards: 3D tilt with a light that follows the cursor */
.fc, .plan, .ind, .step { position:relative; transition:transform .25s ease-out, box-shadow .25s, border-color .25s; transform-style:preserve-3d; }
.fx .rv.in.tilt, .tilt { will-change:transform; }
.fc::before, .plan::before, .ind::before, .step::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(0,181,173,.16),transparent 60%); }
.fc:hover::before, .plan:hover::before, .ind:hover::before, .step:hover::before { opacity:1; }
.fc:hover, .plan:hover, .ind:hover { box-shadow:0 22px 44px rgba(7,31,84,.14); border-color:rgba(0,181,173,.45); }
.fc .ic, .ind .ic { transition:transform .35s cubic-bezier(.3,1.6,.5,1); } .fc:hover .ic, .ind:hover .ic { transform:scale(1.15) rotate(-6deg); }
.chips span { transition:transform .2s, background .2s, color .2s; } .chips span:hover { transform:translateY(-2px); background:var(--teal-d); color:#fff; }

/* headings underline draws in */
.eyebrow { position:relative; } .fx .rv .eyebrow::after, .fx .eyebrow.rv::after { content:""; }

/* faq opens smoothly */
details > summary { transition:color .2s; } details[open] > summary { color:var(--teal-d); }
details[open] > :not(summary) { animation:rise .4s ease both; }

/* back to top */
#fxtop { position:fixed; right:22px; bottom:22px; z-index:70; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer; background:var(--teal-d); color:#fff; font-size:20px; box-shadow:0 10px 24px rgba(0,130,124,.4); opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .25s, transform .25s; }
#fxtop.show { opacity:1; transform:none; pointer-events:auto; } #fxtop:hover { background:#007069; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .fx .rv, .fx .hero-copy > * { opacity:1 !important; transform:none !important; }
}
@media (hover:none) { .fc::before, .plan::before, .ind::before, .step::before { display:none; } }