:root{
 --bg:#f7f8fc;--surface:#fff;--surface2:#f1f3f9;--text:#151525;--muted:#687084;
 --primary:#6d3df2;--primary2:#a66bff;--border:#e5e7ef;--shadow:0 22px 70px rgba(35,30,65,.12);
 --nav:rgba(255,255,255,.78);--green:#16a36a;
}
[data-theme="dark"]{
 --bg:#0d0d14;--surface:#151520;--surface2:#1d1d2a;--text:#f6f5fb;--muted:#a9a9ba;
 --primary:#8b63ff;--primary2:#bd8cff;--border:#2a2a3a;--shadow:0 25px 80px rgba(0,0,0,.35);
 --nav:rgba(13,13,20,.78);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Manrope,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;transition:.35s}
a{text-decoration:none;color:inherit}.container{width:min(1160px,92%);margin:auto}
section{padding:100px 0}.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--primary);font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.eyebrow:before{content:"";width:20px;height:2px;background:currentColor}.title{font-family:Outfit,sans-serif;font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-1.5px;margin:13px 0 18px}.desc{color:var(--muted);max-width:650px;font-size:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 23px;border-radius:14px;font-weight:800;font-size:14px;transition:.25s;border:1px solid transparent}
.btn:hover{transform:translateY(-3px)}.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 14px 35px rgba(109,61,242,.25)}.ghost{border-color:var(--border);background:var(--surface);color:var(--text)}
/* nav */
header{position:sticky;top:0;z-index:20;background:var(--nav);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
nav{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{font-family:Outfit;font-size:25px;font-weight:800}.brand b{color:var(--primary)}
.logo-qr{color:#935CFA}.navlinks{display:flex;gap:25px;align-items:center;font-size:14px;font-weight:700}.navlinks a:hover{color:var(--primary)}
.theme{width:42px;height:42px;border:1px solid var(--border);background:var(--surface);border-radius:12px;cursor:pointer;font-size:17px}
/* hero */
.hero{padding:80px 0 65px;overflow:hidden;position:relative;background:radial-gradient(circle at 78% 20%,rgba(126,77,255,.16),transparent 25%),radial-gradient(circle at 20% 70%,rgba(91,174,255,.10),transparent 25%)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.pill{display:inline-flex;padding:8px 13px;border-radius:30px;background:color-mix(in srgb,var(--primary) 10%,transparent);border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));color:var(--primary);font-size:12px;font-weight:800;margin-bottom:18px}.hero h1{font-family:Outfit;font-size:clamp(48px,6vw,76px);line-height:.98;letter-spacing:-2.8px}.gradient{background:linear-gradient(135deg,var(--primary),var(--primary2));-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{font-size:17px;color:var(--muted);max-width:600px;margin:23px 0 28px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.mini-proof{display:flex;align-items:center;gap:12px;margin-top:25px;color:var(--muted);font-size:13px;font-weight:700}.avatars{display:flex}.avatars span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ffbd80,#ff7a95);border:2px solid var(--bg);margin-right:-8px;color:#fff;font-size:10px}.hero-card{position:relative;margin:auto;width:330px;padding:10px;border-radius:40px;background:#11131c;box-shadow:var(--shadow)}.notch{width:95px;height:22px;background:#11131c;border-radius:0 0 16px 16px;position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:2}.screen{min-height:575px;border-radius:32px;padding:38px 20px 22px;background:linear-gradient(160deg,#7440f4,#a168ff 58%,#5630d2);color:#fff;text-align:center}.screen small{opacity:.75}.screen h3{font-family:Outfit;font-size:25px;margin:8px 0 18px}.qr{width:170px;height:170px;background:#fff;border-radius:18px;margin:18px auto;padding:12px;display:grid;place-items:center}.fakeqr{width:100%;height:100%;background:repeating-linear-gradient(90deg,#17171b 0 8px,#fff 8px 13px),repeating-linear-gradient(0deg,transparent 0 9px,#222 9px 13px);mix-blend-mode:multiply;opacity:.9}.screen-actions{display:grid;gap:9px;margin-top:15px}.screen-actions div{background:rgba(255,255,255,.97);color:#292536;padding:12px;border-radius:13px;font-weight:800;font-size:13px}.float-tag{position:absolute;background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow);padding:10px 14px;border-radius:14px;font-size:12px;font-weight:800}.tag1{right:-35px;top:90px}.tag2{left:-55px;bottom:85px}
/* video */
.video-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.checks{display:grid;gap:13px;margin-top:28px}.checks div{font-weight:700;display:flex;gap:10px;align-items:center}.check{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}.video{aspect-ratio:16/9;border-radius:26px;background:linear-gradient(135deg,#22184a,#7744f0);position:relative;overflow:hidden;box-shadow:var(--shadow);display:grid;place-items:center}.video:before,.video:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}.video:before{width:360px;height:360px;top:-140px;right:-80px}.video:after{width:250px;height:250px;bottom:-120px;left:-60px}.play{position:relative;z-index:2;width:82px;height:82px;border-radius:50%;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:25px;box-shadow:0 12px 40px rgba(0,0,0,.25);cursor:pointer}.video-label{position:absolute;bottom:22px;left:25px;color:#fff;z-index:2;font-weight:800;font-family:Outfit;font-size:22px}
/* steps/features */
.soft{background:var(--surface2)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}.card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:29px;transition:.25s}.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.num{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:18px}.card h3{font-family:Outfit;font-size:21px;margin-bottom:8px}.card p{color:var(--muted);font-size:14px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}.icon{font-size:25px;width:52px;height:52px;border-radius:16px;background:var(--surface2);display:grid;place-items:center;margin-bottom:17px}
/* product */
.product{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.standee-area{display:grid;place-items:center;padding:30px}.standee{width:285px;background:linear-gradient(160deg,#5d2de0,#a269ff);color:#fff;border-radius:24px 24px 10px 10px;text-align:center;padding:34px 24px 28px;box-shadow:0 30px 60px rgba(85,44,210,.28)}.standee h3{font-family:Outfit;font-size:32px;line-height:1;margin:12px 0}.standee p{font-size:13px;opacity:.88}.standee .qr{margin:23px auto;width:175px;height:175px}.base{width:335px;height:24px;border-radius:50%;background:#2c1765;opacity:.9;margin:-3px auto 0}.benefits{display:grid;gap:0;margin-top:25px}.benefits div{padding:13px 0;border-bottom:1px solid var(--border);font-weight:700;color:var(--muted)}.benefits b{color:var(--primary);margin-right:8px}
/* reviews */
.review-head{display:flex;justify-content:space-between;align-items:end;gap:30px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}.stars{color:#f3ad32;letter-spacing:2px;margin-bottom:16px}.quote{font-size:15px;color:var(--muted);min-height:130px}.person{border-top:1px solid var(--border);padding-top:17px;margin-top:18px;display:flex;align-items:center;gap:11px}.avatar{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-size:12px;font-weight:800}.person small{color:var(--muted)}
/* industries CTA */
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}.industry{padding:23px 12px;border:1px solid var(--border);border-radius:18px;background:var(--surface);text-align:center;font-weight:800;transition:.25s}.industry:hover{border-color:var(--primary);transform:translateY(-4px)}.industry span{font-size:28px;display:block;margin-bottom:7px}.cta{padding:70px 0}.cta-box{padding:72px 8%;border-radius:30px;text-align:center;color:#fff;background:radial-gradient(circle at 20% 0,rgba(255,255,255,.18),transparent 28%),linear-gradient(135deg,#5524d3,#a263ff);box-shadow:var(--shadow)}.cta-box h2{font-family:Outfit;font-size:clamp(36px,5vw,60px);line-height:1.05}.cta-box p{opacity:.88;max-width:620px;margin:16px auto 27px}.cta-box .btn{background:#fff;color:#5e30d9}
footer{border-top:1px solid var(--border);padding:30px 0;color:var(--muted);font-size:13px}.foot{display:flex;justify-content:space-between;gap:15px}
@media(max-width:900px){.navlinks{display:none}.hero-grid,.video-wrap,.product{grid-template-columns:1fr;gap:45px}.hero-copy{text-align:center}.hero-copy p{margin-left:auto;margin-right:auto}.hero-actions,.mini-proof{justify-content:center}.hero-card{margin-top:10px}.steps,.feature-grid,.review-grid{grid-template-columns:repeat(2,1fr)}.industry-grid{grid-template-columns:repeat(2,1fr)}.review-head{display:block}.review-head .desc{margin-top:18px}.video-text{order:0}}
@media(max-width:560px){section{padding:70px 0}.hero{padding-top:55px}.hero h1{font-size:51px}.hero-card{width:292px}.screen{min-height:535px}.tag1{right:-18px}.tag2{left:-15px}.steps,.feature-grid,.review-grid{grid-template-columns:1fr}.standee{width:260px}.base{width:300px}.foot{display:block;text-align:center}.foot div+div{margin-top:8px}}

/* =========================================
   PRICING
========================================= */
.pricing{background:var(--bg)}
.pricing-top{text-align:center;max-width:760px;margin:0 auto}
.pricing-top .desc{margin:0 auto}
.billing{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:6px;background:var(--surface2);border:1px solid var(--border);border-radius:16px;font-size:13px;font-weight:800}
.billing button{border:0;background:transparent;color:var(--muted);padding:10px 16px;border-radius:11px;font:inherit;cursor:pointer}
.billing button.active{background:var(--surface);color:var(--primary);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.save{background:#dff8eb;color:#108652;padding:4px 8px;border-radius:20px;font-size:11px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:45px;align-items:stretch}
.price-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:32px;display:flex;flex-direction:column;transition:.25s}
.price-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.price-card.featured{border:2px solid var(--primary);box-shadow:0 20px 60px rgba(109,61,242,.16); z-index:5; overflow: visible;}
.popular{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;padding:6px 14px;border-radius:30px;font-size:11px;font-weight:800;white-space:nowrap}
.plan{font-family:Outfit;font-size:25px;font-weight:800}.plan-desc{color:var(--muted);font-size:13px;margin:8px 0 22px;min-height:42px}
.price{font-family:Outfit;font-size:48px;font-weight:800;letter-spacing:-2px;line-height:1}.price small{font-family:Manrope;font-size:13px;color:var(--muted);letter-spacing:0;font-weight:700}
.price-note{font-size:12px;color:var(--muted);margin:9px 0 24px}
.price-line{height:1px;background:var(--border);margin:0 0 20px}
.plan-features{list-style:none;display:grid;gap:13px;flex:1;margin-bottom:25px}.plan-features li{font-size:13px;color:var(--muted);font-weight:600}.plan-features li:before{content:"✓";color:var(--primary);font-weight:900;margin-right:9px}
.plan-features li.off{opacity:.45}.plan-features li.off:before{content:"—"}
.pricing .btn{width:100%}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}

/* =========================================
   UNIQUE FLOATING WHATSAPP BUTTON
========================================= */
.whatsapp-float{
  position:fixed;right:24px;bottom:24px;z-index:999;
  display:flex;align-items:center;gap:11px;
  color:#fff;background:#25D366;border-radius:18px;
  padding:9px 14px 9px 10px;
  box-shadow:0 16px 40px rgba(37,211,102,.32);
  transition:.28s ease;
}
.whatsapp-float:hover{transform:translateY(-5px) scale(1.02)}
.whatsapp-icon{
  width:48px;height:48px;border-radius:14px;background:#fff;
  color:#25D366;display:grid;place-items:center;
  font-size:25px;font-weight:900;
}
.whatsapp-text{display:grid;line-height:1.15}
.whatsapp-text small{font-size:10px;opacity:.85;font-weight:700;letter-spacing:.4px}
.whatsapp-text strong{font-size:13px;margin-top:3px}
.whatsapp-pulse{
  position:absolute;width:58px;height:58px;border-radius:18px;
  border:2px solid #25D366;right:-5px;bottom:-5px;
  animation:waPulse 2s infinite;pointer-events:none;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.8}
  70%{transform:scale(1.35);opacity:0}
  100%{opacity:0}
}
@media(max-width:560px){
  .whatsapp-float{right:16px;bottom:16px;padding:8px;border-radius:16px}
  .whatsapp-text{display:none}
  .whatsapp-icon{width:52px;height:52px}
}

/* =========================================
   CREATIVE MOTION / ANIMATIONS
========================================= */
body{overflow-x:hidden}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.65,.3,1),transform .8s cubic-bezier(.2,.65,.3,1)}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}.delay-4{transition-delay:.32s}
.hero:after{content:"";position:absolute;inset:auto -10% -180px;height:420px;pointer-events:none;
background:radial-gradient(circle at 30% 50%,rgba(147,92,250,.14),transparent 44%),radial-gradient(circle at 75% 30%,rgba(92,122,255,.10),transparent 40%);
filter:blur(20px);animation:aurora 10s ease-in-out infinite alternate}
@keyframes aurora{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,-12px,0) scale(1.05)}}
.hero-card{animation:floatCard 5s ease-in-out infinite}
@keyframes floatCard{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(.5deg)}}
.float-tag{animation:tagFloat 4.2s ease-in-out infinite}
.tag2{animation-delay:1s}
@keyframes tagFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.screen:after{content:"";position:absolute;left:8%;right:8%;top:92px;height:3px;border-radius:20px;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.6;transform:translateX(-120%);animation:screenSweep 4s infinite}
.hero-card .screen{position:relative;overflow:hidden}
@keyframes screenSweep{0%,55%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
.qr{position:relative;overflow:hidden}
.qr:after{content:"";position:absolute;left:8%;right:8%;height:3px;top:18%;background:linear-gradient(90deg,transparent,#935CFA,#fff,#935CFA,transparent);box-shadow:0 0 18px rgba(147,92,250,.65);animation:qrScan 2.6s ease-in-out infinite}
@keyframes qrScan{0%{transform:translateY(0);opacity:.2}50%{opacity:1}100%{transform:translateY(108px);opacity:.2}}
.fakeqr{animation:qrPulse 3.5s ease-in-out infinite alternate}
@keyframes qrPulse{from{opacity:.72;transform:scale(.99)}to{opacity:1;transform:scale(1.01)}}
.card,.price-card,.industry{position:relative;overflow:hidden}
.card:before,.price-card:before,.industry:before{content:"";position:absolute;inset:-100% 35% auto auto;width:140px;height:260px;background:linear-gradient(120deg,transparent,rgba(255,255,255,.14),transparent);transform:rotate(18deg) translateX(-160px);transition:transform .7s ease}
.card:hover:before,.price-card:hover:before,.industry:hover:before{transform:rotate(18deg) translateX(360px)}
.icon{transition:transform .3s ease}
.card:hover .icon{transform:rotate(-6deg) scale(1.08)}
.standee{animation:standeeFloat 6s ease-in-out infinite}
@keyframes standeeFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-1deg)}}
.base{animation:baseShadow 6s ease-in-out infinite}
@keyframes baseShadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.93);opacity:.7}}
.video{background-size:160% 160%;animation:videoGlow 8s ease infinite}
@keyframes videoGlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.play{transition:transform .25s ease}
.play:hover{transform:scale(1.08)}
.whatsapp-float{animation:waFloat 4.2s ease-in-out infinite}
@keyframes waFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.whatsapp-float:hover{animation-play-state:paused}
.theme{transition:transform .25s ease}
.theme:hover{transform:rotate(15deg) scale(1.05)}
.pricing-top .billing{animation:softPulse 4s ease-in-out infinite}
@keyframes softPulse{0%,100%{box-shadow:0 0 0 rgba(147,92,250,0)}50%{box-shadow:0 0 0 7px rgba(147,92,250,.05)}}
.section-title{position:relative}
.section-title:after{content:"";display:block;width:64px;height:3px;margin-top:18px;border-radius:99px;background:linear-gradient(90deg,var(--primary),#935CFA,transparent);transform-origin:left;animation:lineIn 1.4s ease both}
@keyframes lineIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.hero-copy .pill{animation:pillIn .9s ease both}
@keyframes pillIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.motion-dots{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motion-dots i{position:absolute;width:7px;height:7px;border-radius:50%;background:#935CFA;opacity:.18;animation:dotDrift linear infinite}
.motion-dots i:nth-child(1){left:8%;top:22%;animation-duration:12s}.motion-dots i:nth-child(2){left:18%;top:70%;width:5px;height:5px;animation-duration:9s}.motion-dots i:nth-child(3){left:80%;top:25%;animation-duration:11s}.motion-dots i:nth-child(4){left:90%;top:68%;width:5px;height:5px;animation-duration:8s}
@keyframes dotDrift{0%{transform:translate3d(0,30px,0);opacity:0}20%{opacity:.22}80%{opacity:.16}100%{transform:translate3d(0,-150px,0);opacity:0}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}