/* ASEE motion + rich look layer. Loaded after site.css. Plain CSS, no build step.
   Everything animated is switched off for people who ask for reduced motion. */

:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --glow-c:rgba(92,203,240,.45); --glow-o:rgba(245,166,35,.45);
}

/* page fade-in */
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main{animation:pageIn .6s var(--ease) both}

/* scroll progress bar */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:60;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--orange));pointer-events:none}

/* header */
.site-header{transition:background .3s,box-shadow .3s}
.site-header .wrap{transition:min-height .3s var(--ease)}
.site-header.scrolled{box-shadow:0 10px 30px rgba(5,12,30,.35);background:rgba(11,26,58,.88)}
.site-header.scrolled .wrap{min-height:58px}
.brand img{transition:transform .5s var(--ease)}
.brand:hover img{transform:rotate(-8deg) scale(1.08)}
.nav a{position:relative;transition:color .2s,background .2s}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--cyan);
  transform:scaleX(0);transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* hero: layered, moving background */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:2}
.hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 80% at 70% 40%,#000,transparent 80%);mask-image:radial-gradient(70% 80% at 70% 40%,#000,transparent 80%);
  animation:gridMove 18s linear infinite}
@keyframes gridMove{to{background-position:56px 56px}}
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.hero-bg i:nth-child(1){width:380px;height:380px;left:-90px;top:-120px;background:rgba(26,86,196,.8);animation:orb1 14s ease-in-out infinite alternate}
.hero-bg i:nth-child(2){width:320px;height:320px;right:8%;top:10%;background:var(--glow-c);animation:orb2 17s ease-in-out infinite alternate}
.hero-bg i:nth-child(3){width:260px;height:260px;right:-60px;bottom:-110px;background:var(--glow-o);animation:orb3 12s ease-in-out infinite alternate}
.accent-orange .hero-bg i:nth-child(2){background:var(--glow-o)}
@keyframes orb1{to{transform:translate(120px,80px) scale(1.2)}}
@keyframes orb2{to{transform:translate(-100px,70px) scale(.85)}}
@keyframes orb3{to{transform:translate(-90px,-60px) scale(1.25)}}
/* soft wave at the bottom of the hero */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:46px;z-index:2;background:var(--bg);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0 60V28C150 0 300 0 450 22s300 36 450 12 225-26 300-12v10z' fill='black'/></svg>") bottom/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0 60V28C150 0 300 0 450 22s300 36 450 12 225-26 300-12v10z' fill='black'/></svg>") bottom/100% 100% no-repeat}

/* hero text: words rise in one by one (JS wraps the words) */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);animation:wordIn .8s var(--ease) forwards;animation-delay:calc(.12s + var(--i)*.07s)}
@keyframes wordIn{to{opacity:1;transform:none}}
.hero .eyebrow,.hero .sub,.hero .hero-actions,.hero .hero-note{opacity:0;animation:fadeUp .8s var(--ease) forwards}
.hero .eyebrow{animation-delay:.05s}
.hero .sub{animation-delay:.55s}
.hero .hero-actions{animation-delay:.7s}
.hero .hero-note{animation-delay:.85s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero h1 em{background:linear-gradient(100deg,var(--accent),#fff 45%,var(--accent) 90%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:-220% 0}}

/* hero art: floating icons, rings, parallax */
.hero-art{position:relative;perspective:800px}
.hero-art::before,.hero-art::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);transform:translate(-50%,-50%);pointer-events:none}
.hero-art::before{width:300px;height:300px;animation:ring 6s ease-out infinite}
.hero-art::after{width:300px;height:300px;animation:ring 6s ease-out 3s infinite}
@keyframes ring{from{opacity:.9;transform:translate(-50%,-50%) scale(.55)}to{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
.hero-art .tile{position:relative;z-index:1;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .25s ease-out}
.hero-art img{border-radius:26%;animation:floaty 6s ease-in-out infinite}
.hero-art .duo img:last-child{animation-delay:-3s;animation-duration:7s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-16px) rotate(1.5deg)}}

/* buttons: lift + shimmer */
.btn{position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,filter .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-primary{box-shadow:0 8px 24px rgba(245,166,35,.32)}
.btn-primary:hover{box-shadow:0 14px 34px rgba(245,166,35,.5)}
.btn::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn:hover::before{left:130%}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.hero .btn-primary,.cta-band .btn-primary{animation:pulse 3.2s ease-in-out 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 24px rgba(245,166,35,.32)}50%{box-shadow:0 8px 24px rgba(245,166,35,.32),0 0 0 10px rgba(245,166,35,.14)}}

/* scroll reveal (only active when JS is running) */
.js .reveal{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.from-left{transform:translateX(-40px)}
.js .reveal.from-right{transform:translateX(40px)}
.js .reveal.from-left.in,.js .reveal.from-right.in{transform:none}

/* section headings: accent underline draws in */
.section h2{position:relative;padding-bottom:14px}
.section h2::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:64px;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--blue));transform-origin:left;transition:transform .9s var(--ease) .2s}
.js .section h2.reveal:not(.in)::after{transform:scaleX(0)}

/* richer cards */
.section.alt{background:radial-gradient(circle at 1px 1px,rgba(26,86,196,.08) 1px,transparent 0) 0 0/22px 22px,#fff}
.card{position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
  box-shadow:0 2px 10px rgba(11,26,58,.04);overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(92,203,240,.22),transparent 70%)}
.card:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 22px 44px rgba(11,26,58,.14)}
.card:hover::before{opacity:1}
.card > *{position:relative}
.step-n{transition:transform .5s var(--ease),background .3s,color .3s}
.card:hover .step-n{transform:rotate(-8deg) scale(1.12);background:var(--accent);color:var(--navy)}
.accent-orange .card:hover .step-n,.card:hover .step-n.o{background:var(--orange);color:var(--navy)}

/* app cards on home: glass border + glow that follows the pointer */
.appcard{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.appcard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.14),transparent 65%)}
.appcard:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 30px 60px rgba(11,26,58,.38)}
.appcard.cyan:hover{box-shadow:0 30px 60px rgba(31,150,210,.35)}
.appcard.orange:hover{box-shadow:0 30px 60px rgba(201,120,26,.38)}
.appcard:hover::before{opacity:1}
.appcard > *{position:relative}
.appcard li{transition:transform .3s var(--ease)}
.appcard:hover li{transform:translateX(6px)}
.appcard:hover li:nth-child(2){transition-delay:.05s}
.appcard:hover li:nth-child(3){transition-delay:.1s}

/* example box */
.example{position:relative;overflow:hidden;box-shadow:0 24px 50px rgba(11,26,58,.25)}
.example::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(92,203,240,.22) 85%,transparent);
  animation:spin 9s linear infinite;pointer-events:none}
.example::after{content:"";position:absolute;inset:2px;border-radius:22px;background:var(--navy-2);pointer-events:none}
.example > *{position:relative;z-index:1}
@keyframes spin{to{transform:rotate(360deg)}}
.js .example .row{opacity:0;transform:translateX(-18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .example.in .row{opacity:1;transform:none}
.js .example.in .row:nth-of-type(2){transition-delay:.12s}
.js .example.in .row:nth-of-type(3){transition-delay:.24s}
.js .example.in .row:nth-of-type(4){transition-delay:.36s}
.js .example.in .row:nth-of-type(5){transition-delay:.48s}
.example .result{transition:transform .5s var(--ease) .5s}
.js .example:not(.in) .result{transform:scale(.6);opacity:0}

/* steps (install page) + FAQ */
.steps li{transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.steps li:hover{transform:translateX(8px);border-color:var(--accent);box-shadow:0 14px 30px rgba(11,26,58,.1)}
.steps li::before{transition:transform .5s var(--ease),background .3s,color .3s}
.steps li:hover::before{transform:rotate(-8deg) scale(1.1);background:var(--accent);color:var(--navy)}
details.faq{transition:box-shadow .3s,border-color .3s,transform .3s var(--ease)}
details.faq:hover{border-color:var(--accent);transform:translateY(-2px)}
details.faq[open]{box-shadow:0 14px 30px rgba(11,26,58,.1);border-color:var(--accent)}
details.faq summary::after{transition:transform .4s var(--ease);display:inline-block}
details.faq[open] summary::after{transform:rotate(180deg)}
details.faq[open] p{animation:fadeUp .45s var(--ease)}

/* stars twinkle in */
.review .stars{display:inline-block}
.js .review.in .stars{animation:starPop .7s var(--ease) .2s both}
@keyframes starPop{from{opacity:0;letter-spacing:12px}to{opacity:1;letter-spacing:2px}}

/* CTA band: moving light */
.cta-band{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 120% at 15% 0%,rgba(26,86,196,.65),transparent 60%),radial-gradient(60% 120% at 90% 120%,rgba(245,166,35,.4),transparent 60%),var(--navy)}
.cta-band::before{content:"";position:absolute;inset:-40%;z-index:-1;opacity:.5;
  background:conic-gradient(from 0deg at 50% 50%,transparent,rgba(92,203,240,.18),transparent 30%,rgba(245,166,35,.16),transparent 60%);animation:spin 24s linear infinite}

/* footer */
.site-footer a{transition:color .2s,transform .25s var(--ease)}
.site-footer a:hover{transform:translateX(5px);text-decoration:none}
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--orange),transparent);opacity:.6}

/* back-to-top */
.totop{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;z-index:40;
  background:var(--navy);color:#fff;font-size:22px;box-shadow:0 10px 24px rgba(11,26,58,.35);
  opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .3s,transform .4s var(--ease),background .2s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--blue);transform:translateY(-4px)}

/* mobile: lighter effects */
@media (max-width:860px){
  .hero-bg i{filter:blur(46px)}
  .hero-art::before,.hero-art::after{display:none}
  .card:hover,.appcard:hover{transform:none}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;animation-delay:0s!important}
  .js .reveal,.hero h1 .w,.hero .eyebrow,.hero .sub,.hero .hero-actions,.hero .hero-note{opacity:1!important;transform:none!important}
}

/* no sideways scroll from slide-in effects */
html,body{overflow-x:clip}
.appcard h2{padding-bottom:0}.appcard h2::after{display:none}

/* ===== round 2 ===== */
.particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.cta-band .wrap{position:relative;z-index:2}

/* lighthouse beam turning behind the app icons */
.hero-art .tile::before{content:"";position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 80%,rgba(255,236,170,.32) 88%,transparent 96%);
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
  filter:blur(6px);animation:spin 7s linear infinite}
.hero-art .tile{isolation:auto}

/* eyebrow shimmer */
.eyebrow{background:linear-gradient(90deg,var(--accent) 0 40%,#fff 50%,var(--accent) 60% 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 4s linear infinite}
.appcard .eyebrow{-webkit-text-fill-color:initial;background:none;animation:none;color:inherit}

/* button ripple */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* cursor glow */
.cursor-glow{position:fixed;left:0;top:0;width:400px;height:400px;border-radius:50%;pointer-events:none;z-index:5;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(92,203,240,.18),rgba(26,86,196,.08) 40%,transparent 68%);transition:opacity .4s;will-change:transform}
.cursor-glow.on{opacity:1}

/* flow line behind numbered cards (desktop) */
@media (min-width:901px){
  .grid.flow{position:relative}
  .grid.flow::before{content:"";position:absolute;left:46px;right:46px;top:46px;height:3px;border-radius:3px;z-index:0;
    background:repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 20px);opacity:.7;
    transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease) .3s}
  .grid.flow.flow-go::before{transform:scaleX(1)}
  .grid.flow::after{content:"";position:absolute;top:40px;left:46px;width:15px;height:15px;border-radius:50%;z-index:0;
    background:var(--accent);box-shadow:0 0 0 6px rgba(92,203,240,.25),0 0 18px var(--accent);opacity:0}
  .grid.flow.flow-go::after{animation:travel 4.5s ease-in-out 1.8s infinite}
  .grid.flow > .card{z-index:1}
}
@keyframes travel{0%{left:46px;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 60px);opacity:0}}

/* step number gentle ping */
.step-n{position:relative}
.step-n::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);opacity:0;animation:ping 3.2s ease-out infinite}
.card:nth-child(2) .step-n::after{animation-delay:.5s}.card:nth-child(3) .step-n::after{animation-delay:1s}.card:nth-child(4) .step-n::after{animation-delay:1.5s}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.7);opacity:0}}

/* app cards: breathing glow */
.appcard.cyan{animation:glowC 5s ease-in-out infinite}
.appcard.orange{animation:glowO 5s ease-in-out 2.5s infinite}
@keyframes glowC{0%,100%{box-shadow:0 20px 40px rgba(11,26,58,.2)}50%{box-shadow:0 24px 60px rgba(31,150,210,.4)}}
@keyframes glowO{0%,100%{box-shadow:0 20px 40px rgba(11,26,58,.2)}50%{box-shadow:0 24px 60px rgba(201,120,26,.4)}}

/* hero text sits above particles */
.hero .wrap{z-index:3}

/* page leave */
body{transition:opacity .28s ease,transform .28s ease}
body.leaving{opacity:0;transform:translateY(-8px)}

@media (max-width:860px){.cursor-glow{display:none}.hero-art .tile::before{width:340px;height:340px;margin:-170px 0 0 -170px}}
@media (prefers-reduced-motion:reduce){.particles,.cursor-glow{display:none}}

/* ===== round 3: QR, sticky download bar, WhatsApp ===== */
.qr-block{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;margin:0 0 44px;max-width:780px;box-shadow:0 2px 10px rgba(11,26,58,.04)}
.qr-block h3{font-size:22px;margin-bottom:6px}
.qr-block > p{color:var(--muted);margin-bottom:20px}
.qr-grid{display:flex;gap:28px;flex-wrap:wrap}
.qr-item{margin:0;text-align:center}
.qr-box{width:176px;height:176px;padding:10px;border-radius:20px;background:#fff;border:2px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.qr-item.reseller .qr-box:hover{border-color:var(--cyan)}
.qr-item.hub .qr-box:hover{border-color:var(--orange)}
.qr-box:hover{transform:translateY(-6px) rotate(-1.5deg);box-shadow:0 18px 36px rgba(11,26,58,.16)}
.qr-svg,.qr-box svg{width:100%;height:100%;display:block}
.qr-box svg path{fill:var(--navy)}
.qr-item figcaption{margin-top:10px;font-weight:700;font-family:var(--display);font-size:15px}
@media (max-width:860px){.qr-block{display:none}}   /* phones cannot scan their own screen */

/* sticky download bar (phones only, shows after the hero) */
.sticky-dl{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:10px;justify-content:center;align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(11,26,58,.94);backdrop-filter:blur(10px);color:#fff;
  border-top:1px solid rgba(255,255,255,.14);transform:translateY(110%);transition:transform .5s var(--ease)}
.sticky-dl .btn{flex:1;max-width:240px}
@media (max-width:860px){
  .sticky-dl{display:flex}
  .sticky-dl.show{transform:none}
  body.has-sticky .totop{bottom:86px}
  body.has-sticky .wa-float{bottom:86px}
  body.has-sticky .site-footer{padding-bottom:96px}
}

/* WhatsApp floating button */
.wa-float{position:fixed;left:18px;bottom:18px;z-index:44;height:56px;min-width:56px;border-radius:99px;padding:0 15px;display:flex;align-items:center;gap:0;
  background:#25D366;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 12px 28px rgba(37,211,102,.45);
  animation:waIn .7s var(--ease) 1.2s both;transition:transform .35s var(--ease),box-shadow .3s,gap .35s var(--ease),padding .35s var(--ease)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #25D366;animation:ping 2.6s ease-out infinite;pointer-events:none}
.wa-float:hover{transform:translateY(-4px);gap:10px;padding:0 20px 0 15px;box-shadow:0 18px 36px rgba(37,211,102,.55)}
.wa-tip{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .4s var(--ease),opacity .3s}
.wa-float:hover .wa-tip,.wa-float:focus-visible .wa-tip{max-width:140px;opacity:1}
@keyframes waIn{from{opacity:0;transform:translateY(30px) scale(.7)}to{opacity:1;transform:none}}
body.leaving .wa-float{opacity:0}

/* social icons in the footer */
.socials{display:flex;gap:10px;margin-top:14px}
.site-footer .social{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);transition:transform .35s var(--ease),background .25s,border-color .25s,box-shadow .25s}
.site-footer .social:hover{transform:translateY(-5px) scale(1.08);text-decoration:none;color:#fff;border-color:transparent}
.site-footer .social.facebook:hover{background:#1877F2;box-shadow:0 10px 22px rgba(24,119,242,.5)}
.site-footer .social.instagram:hover{background:linear-gradient(45deg,#F9A03F,#E1306C,#833AB4);box-shadow:0 10px 22px rgba(225,48,108,.5)}
.site-footer .social.youtube:hover{background:#FF0000;box-shadow:0 10px 22px rgba(255,0,0,.5)}

body:has(.wa-float) .site-footer{padding-bottom:92px}

/* footer logo */
.site-footer .footer-brand{display:inline-flex;align-items:center;gap:14px;padding:0;margin-bottom:4px;color:#fff;font-family:var(--display);font-weight:800;font-size:24px}
.site-footer .footer-brand img{width:56px;height:56px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .5s var(--ease)}
.site-footer .footer-brand:hover{transform:none;text-decoration:none}
.site-footer .footer-brand:hover img{transform:rotate(-8deg) scale(1.08)}