:root{--bg:#faf5ff;--ink:#1e1040;--muted:#5b4b84;--card:#fff;--purple:#7c3aed;--deep:#3b0f8c;--pink:#ec4899;--orange:#f97316;--yellow:#facc15;--green:#16a34a;--blue:#2563eb;--teal:#0d9488;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#150b2e;--ink:#f5efff;--muted:#c4b5ee;--card:#221347}}
:root[data-theme="dark"]{--bg:#150b2e;--ink:#f5efff;--muted:#c4b5ee;--card:#221347}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Poppins,system-ui,sans-serif;line-height:1.6}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.top{background:var(--deep);color:#fff;font-size:13px;padding:8px 0}
.top .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px}
nav{background:#fff}
nav .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px}
nav img{height:62px;display:block}
.btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:600;text-decoration:none;color:#fff;border:0;cursor:pointer;font-family:inherit;font-size:15px}
.b-purple{background:linear-gradient(90deg,var(--purple),var(--pink))}.b-orange{background:linear-gradient(90deg,var(--orange),var(--pink))}.b-green{background:var(--green)}
.hero{background:linear-gradient(135deg,#2e0b73,#7c3aed 55%,#ec4899);color:#fff;padding:70px 0 130px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:var(--yellow);opacity:.3;left:-100px;bottom:-120px}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hero h1{font-size:clamp(32px,5.5vw,54px);font-weight:800;line-height:1.15}
.hero h2{font-size:18px;font-weight:600;margin:14px 0 8px;color:var(--yellow)}
.hero p{max-width:560px;opacity:.95}
.ticks{margin:18px 0 26px;display:flex;flex-wrap:wrap;gap:10px}
.ticks span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:6px 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--yellow)}
.heroimg{width:100%;max-width:380px;justify-self:center;border-radius:28px;border:6px solid #fff;box-shadow:14px 14px 0 var(--yellow);transform:rotate(2deg)}
.cb{background:var(--card);border-radius:20px;box-shadow:0 20px 50px rgba(124,58,237,.3);padding:28px;margin-top:-70px;position:relative;z-index:2;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:6px solid var(--orange)}
.cb small{color:var(--pink);font-weight:700}.cb h3{font-size:26px}
.cb form{display:flex;gap:10px;flex-wrap:wrap;flex:1;justify-content:flex-end}
input{padding:13px 16px;border:2px solid #e3d5ff;border-radius:12px;font:inherit;background:var(--bg);color:var(--ink);min-width:180px;flex:1;max-width:260px}
input:focus{outline:3px solid var(--yellow);border-color:var(--purple)}
section{padding:80px 0}
.tag{color:var(--pink);font-weight:700}
h2.t{font-size:clamp(28px,4vw,40px);font-weight:800;margin:4px 0 16px;line-height:1.2}
.about{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.collage{position:relative;height:430px}
.collage img{position:absolute;border-radius:22px;object-fit:cover}
.collage .i1{left:0;top:0;width:58%;aspect-ratio:1;box-shadow:12px 12px 0 var(--pink);z-index:1}
.collage .i2{right:0;bottom:0;width:62%;aspect-ratio:1.2;box-shadow:-12px -12px 0 var(--yellow)}
.about ul{list-style:none;padding:0;margin:14px 0 24px;display:grid;gap:8px}
.about li:before{content:"★";color:var(--orange);margin-right:10px}
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-radius:20px;overflow:hidden;margin-top:-10px}
.tr{padding:30px 18px;text-align:center;color:#fff}
.tr b{display:block;font-size:34px}.tr h3{font-size:19px}.tr p{font-size:13px;opacity:.95}
.t1{background:var(--purple)}.t2{background:var(--pink)}.t3{background:var(--orange)}.t4{background:var(--teal)}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-top:30px}
.sc{background:var(--card);border-radius:22px;padding:26px 22px;border-bottom:6px solid var(--c);box-shadow:0 10px 30px rgba(124,58,237,.12)}
.sc .ic{width:56px;height:56px;border-radius:16px;background:var(--c);display:grid;place-items:center;font-size:28px;margin-bottom:14px}
.sc h3{font-size:18px;margin-bottom:4px}.sc p{font-size:14px;color:var(--muted)}
.why{background:linear-gradient(135deg,#1e0b4d,#5b21b6);color:#fff}
.why .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.chips{display:grid;gap:12px;margin-top:20px}
.chips div{background:rgba(255,255,255,.1);border-left:5px solid var(--yellow);padding:12px 18px;border-radius:12px;font-weight:500}
.chips div:nth-child(2){border-color:var(--pink)}.chips div:nth-child(3){border-color:#38bdf8}.chips div:nth-child(4){border-color:#4ade80}.chips div:nth-child(5){border-color:var(--orange)}.chips div:nth-child(6){border-color:#c084fc}
.whyimg{width:100%;border-radius:28px;border:6px solid var(--yellow);box-shadow:16px 16px 0 var(--pink)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{border-radius:24px;padding:40px;color:#fff;text-align:center}
.c1{background:linear-gradient(135deg,var(--blue),var(--purple))}.c2{background:linear-gradient(135deg,var(--orange),var(--pink))}
.card h2{font-size:28px;margin-bottom:10px}.card .btn{margin-top:18px;background:#fff;color:var(--deep)}
.cta{background:linear-gradient(135deg,#0d9488,#7c3aed);color:#fff;text-align:center}
.cta h2{font-size:clamp(28px,4vw,42px);font-weight:800;margin-bottom:10px}.cta p{margin-bottom:24px}
.cta .btn{margin:4px}
footer{background:#12082b;color:#d8c9ff;padding:50px 0 30px;font-size:14px}
footer h4{font-size:20px;color:#fff;margin-bottom:12px}
footer .bar{border-top:1px solid #35216b;margin-top:26px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:#22c55e;color:#fff;display:grid;place-items:center;font-size:28px;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.3)}
@media(max-width:820px){.hero .wrap,.about,.why .grid,.duo{grid-template-columns:1fr}.trust{grid-template-columns:1fr 1fr}.cb form{justify-content:stretch}input{max-width:none}.collage{height:340px}.heroimg{max-width:300px}}

/* ===== 3D & ANIMATION ===== */
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--yellow),var(--pink),var(--purple));z-index:100}
.hero{background-size:220% 220%;animation:grad 12s ease infinite}
@keyframes grad{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.shapes{position:absolute;inset:0;perspective:900px;pointer-events:none;overflow:hidden}
.cube{position:absolute;width:var(--s);height:var(--s);transform-style:preserve-3d;animation:spin var(--d) linear infinite}
.cube b{position:absolute;inset:0;border:2px solid rgba(255,255,255,.65);background:rgba(255,255,255,.12)}
.cube b:nth-child(1){transform:translateZ(calc(var(--s)/2))}
.cube b:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cube b:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.cube b:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cube b:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.cube b:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.cb1{--s:70px;--d:14s;left:6%;top:14%}.cb2{--s:46px;--d:9s;left:44%;top:68%}.cb3{--s:90px;--d:20s;right:6%;bottom:18%}.cb4{--s:34px;--d:11s;right:38%;top:10%}
.cb2 b{background:rgba(250,204,21,.25)}.cb3 b{background:rgba(236,72,153,.22)}
@keyframes spin{from{transform:rotateX(0) rotateY(0)}to{transform:rotateX(360deg) rotateY(360deg)}}
.float{animation:float 5s ease-in-out infinite;justify-self:center;width:100%;max-width:380px}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -18px}}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform}
.heroimg{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,-8deg))}
.w{display:inline-block;perspective:600px}
.wi{display:inline-block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.09s)}
@keyframes rise{from{opacity:0;transform:translateY(40px) rotateX(-80deg)}}
.js .reveal{opacity:0;translate:0 50px;scale:.92;transition:opacity .8s,translate .8s cubic-bezier(.2,.8,.2,1),scale .8s,transform .18s ease-out}
.js .reveal.in{opacity:1;translate:0 0;scale:1}
.btn{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 24px rgba(124,58,237,.4)}
.btn:after{content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.5s infinite}
@keyframes shine{0%,60%{left:-80%}100%{left:140%}}
.tr b{animation:bob 2.6s ease-in-out infinite}.tr:nth-child(2) b{animation-delay:.3s}.tr:nth-child(3) b{animation-delay:.6s}.tr:nth-child(4) b{animation-delay:.9s}
@keyframes bob{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-8px) rotateY(180deg)}}
.sc{transform-style:preserve-3d}
.sc .ic{transition:transform .4s;transform:translateZ(30px)}
.sc:hover .ic{transform:translateZ(50px) rotate(-12deg) scale(1.15)}
.sc:hover,.card:hover{box-shadow:0 24px 50px rgba(124,58,237,.35)}
.collage .i1{animation:drift 6s ease-in-out infinite}.collage .i2{animation:drift 7s ease-in-out -3s infinite reverse}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1.5deg)}}
.marquee{overflow:hidden;background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange));color:#fff;margin-top:60px;padding:14px 0;transform:rotate(-1.2deg)}
.track{display:flex;gap:46px;width:max-content;animation:scroll 28s linear infinite;font-weight:700;font-size:18px}
@keyframes scroll{to{transform:translateX(-50%)}}
.wa{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}100%{box-shadow:0 0 0 22px rgba(34,197,94,0)}}
.whyimg{animation:glow 4s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:16px 16px 0 var(--pink)}50%{box-shadow:22px 22px 0 var(--orange)}}
.chips div{transition:transform .3s}.chips div:hover{transform:translateX(12px) scale(1.02)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;translate:none;scale:1}}

/* ===== IMAGES ===== */
.sci{display:block;width:calc(100% + 44px);height:160px;object-fit:cover;margin:-26px -22px 18px;border-radius:22px 22px 0 0;transition:transform .5s}
.sc{overflow:hidden}.sc:hover .sci{transform:scale(1.08)}
.sc .ic{margin-top:-46px;position:relative;border:4px solid var(--card)}
.gg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.gg figure{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1.1;box-shadow:0 14px 34px rgba(124,58,237,.3);border:4px solid var(--card)}
.gg img{width:100%;height:100%;object-fit:cover;transition:transform .6s;display:block}
.gg figure:hover img{transform:scale(1.12)}
.gg figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(30,16,64,.92))}
.cta{background:linear-gradient(135deg,rgba(13,148,136,.88),rgba(91,33,182,.9)),url(images/why.jpg) center/cover}
@media(max-width:820px){.gg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gg{grid-template-columns:1fr}}