@font-face{font-family:Outfit;src:url(/fonts/outfit.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#0b1020;--ink2:#141b33;--tx:#1d2433;--mu:#5b6478;--li:#eef1f7;--ac:#ff5a1f;--ac2:#ff8a3d;--ok:#16a34a;--r:18px;--sh:0 20px 50px -20px rgba(11,16,32,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--tx);background:#fff;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}a{color:inherit}
h1,h2,h3{font-family:Outfit,Inter,sans-serif;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,6.4vw,4.6rem);font-weight:800}h2{font-size:clamp(1.8rem,4.2vw,3rem);font-weight:800}h3{font-size:1.25rem;font-weight:700}
.wrap{width:min(1180px,100% - 40px);margin:0 auto}
section{padding:clamp(64px,10vw,120px) 0;position:relative}
.eb{display:inline-block;font:600 .78rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin-bottom:14px}
.sub{font-size:1.12rem;color:var(--mu);max-width:640px;margin:0 0 36px}
.dark{background:var(--ink);color:#e8ecf6}.dark .sub{color:#a9b2c8}.soft{background:var(--li)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font:700 1rem/1 Outfit,Inter,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;will-change:transform}
.btn.p{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;box-shadow:0 10px 30px -10px rgba(255,90,31,.7)}
.btn.p:hover{box-shadow:0 16px 40px -10px rgba(255,90,31,.85)}
.btn.g{background:rgba(255,255,255,.08);color:inherit;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.btn.o{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #d5dae6}
.btn:active{transform:scale(.97)}
.tag{display:inline-flex;align-items:center;gap:6px;font:700 .68rem/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:#111827;color:#fff}
.tag.v{background:#fde68a;color:#111}
/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s}
.hd.s{background:rgba(11,16,32,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.hd .wrap{display:flex;align-items:center;gap:22px;height:68px}
.lg{display:flex;align-items:center;gap:10px;font:800 1.15rem Outfit,sans-serif;color:#fff;text-decoration:none}
.lg i{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--ac),var(--ac2));display:grid;place-items:center;font:800 .8rem Outfit;color:#fff;font-style:normal}
.nv{display:flex;gap:22px;margin-left:auto}.nv a{color:#cfd6e6;text-decoration:none;font-weight:500;font-size:.95rem}.nv a:hover{color:#fff}
.hd .btn{padding:11px 18px;font-size:.92rem}
@media(max-width:860px){.nv{display:none}.hd .btn{margin-left:auto}}@media(max-width:560px){.hd .btn{display:none}}
/* hero */
.hero{background:radial-gradient(1200px 600px at 80% -10%,#2a1a52 0,transparent 60%),radial-gradient(900px 500px at -10% 110%,#3b1a0e 0,transparent 55%),var(--ink);color:#fff;padding:130px 0 90px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero p.l{font-size:1.2rem;color:#b9c2d8;max-width:560px}
.hero .ct{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 22px}
.hero .fine{font-size:.9rem;color:#8e98b2}
.rot{display:inline-block;background:linear-gradient(90deg,var(--ac),#ffc46b);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:5ch}
.stage{position:relative;aspect-ratio:1/0.82;perspective:1200px}
.dev{position:absolute;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);background:#111;transition:opacity .6s}
.dev.d{inset:4% 0 auto 6%;width:94%}.dev.m{width:29%;right:-2%;bottom:0;border-radius:22px;border:5px solid #1b2133}
.dev img{width:100%}.dev .bar{height:22px;background:#1b2133;display:flex;gap:5px;align-items:center;padding:0 10px}.dev .bar i{width:7px;height:7px;border-radius:50%;background:#3a4463}
.stage .tag{position:absolute;left:10%;top:0;z-index:3}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);color:#cfd6e6;font-size:.88rem;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background .2s,color .2s,transform .2s;font-family:inherit}
.chip:hover,.chip.on{background:#fff;color:var(--ink)}
@media(max-width:900px){.hero{padding:104px 0 64px}.hero .wrap{grid-template-columns:1fr}.stage{max-width:560px}}
/* preview form */
.pf{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:start}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:28px;color:var(--tx)}
.fm label{display:block;font-weight:600;font-size:.9rem;margin:0 0 14px}
.fm input,.fm select{display:block;width:100%;margin-top:6px;padding:14px 14px;border-radius:12px;border:1.5px solid #d5dae6;font:inherit;background:#fff;color:var(--tx);transition:border-color .2s,box-shadow .2s}
.fm input:focus,.fm select:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 4px rgba(255,90,31,.15)}
.fm .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fm .btn{width:100%;justify-content:center;margin-top:6px}
.fm .nt{font-size:.82rem;color:var(--mu);margin:12px 0 0}
.msg{display:none;margin-top:12px;padding:12px 14px;border-radius:12px;font-size:.92rem}.msg.on{display:block}
.msg.ok{background:#e8f8ee;color:#14532d}.msg.er{background:#fff1ec;color:#7c2d12}
.hp{position:absolute;left:-9999px}
.pvw{min-height:420px;border-radius:var(--r);background:repeating-linear-gradient(45deg,#f5f7fb 0 12px,#eef1f7 12px 24px);display:grid;place-items:center;text-align:center;color:var(--mu);padding:24px}
.pvw.on{display:block;background:none;padding:0}
@media(max-width:900px){.pf{grid-template-columns:1fr}.fm .two{grid-template-columns:1fr}}
/* instant preview frame */
.bf{border-radius:16px;overflow:hidden;box-shadow:var(--sh);background:#fff;position:relative;animation:pop .6s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.bf .bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#eef1f7}.bf .bar i{width:9px;height:9px;border-radius:50%;background:#cfd5e2}
.bf .url{margin-left:10px;flex:1;background:#fff;border-radius:999px;padding:5px 12px;font-size:.78rem;color:#4b5563;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf .tag{position:absolute;right:12px;top:48px;z-index:2}
.ms{font-family:var(--hf,Outfit),sans-serif}
.ms .mh{position:relative;color:#fff;padding:22px 22px 30px;background:var(--a) center/cover no-repeat}
.ms .mh:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--ov,rgba(0,0,0,.75)) 20%,rgba(0,0,0,.15))}
.ms .mh>*{position:relative}
.ms .mn{display:flex;align-items:center;gap:10px;margin-bottom:46px;font-weight:700}.ms .mn span{margin-left:auto;font:600 .78rem Inter;background:var(--b);color:var(--bt);padding:8px 12px;border-radius:999px}
.ms .k{font:600 .72rem Inter;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ms h4{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:.3em 0;line-height:1.05;font-weight:var(--hw,800)}
.ms p{font:400 .92rem/1.5 Inter;opacity:.9;max-width:420px;margin:0 0 16px}
.ms .cb{display:inline-block;background:var(--b);color:var(--bt);font:700 .85rem Inter;padding:11px 16px;border-radius:var(--br,999px)}
.ms .ml{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px;background:var(--bg,#fff);color:var(--fg,#111)}
.ms .ml div{font:500 .84rem Inter;padding:10px 12px;border-radius:10px;background:var(--cbg,#f3f4f6);display:flex;justify-content:space-between;gap:8px}
.ms .ml b{color:var(--a2,#111)}
.ms .mf{padding:10px 16px 16px;background:var(--bg,#fff);color:var(--fg,#111);font:400 .78rem Inter;opacity:.75}
.pva{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* gallery cards */
.gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.gc{position:relative;display:block;text-decoration:none;color:inherit;border-radius:var(--r);background:#fff;box-shadow:0 1px 0 #e5e8f0,0 14px 30px -18px rgba(11,16,32,.35);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform-style:preserve-3d}
.gc:hover{box-shadow:0 30px 60px -24px rgba(11,16,32,.45)}
.gc .im{position:relative;overflow:hidden;aspect-ratio:16/10;background:#e5e8f0}
.gc .im img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.gc:hover .im img{transform:scale(1.05)}
.gc .ph{position:absolute;right:14px;bottom:-12px;width:24%;border-radius:12px;border:3px solid #111;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.gc:hover .ph{transform:translateY(-16px) rotate(-2deg)}
.gc .tag{position:absolute;left:12px;top:12px;z-index:2}
.gc .tx{padding:18px 20px 22px}.gc .tx h3{margin:0 0 4px}.gc .tx p{margin:0;color:var(--mu);font-size:.93rem}
.gc .go{display:inline-block;margin-top:10px;font-weight:700;color:var(--ac);transition:transform .25s}.gc:hover .go{transform:translateX(6px)}
.sp{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:3}
.sp:before{content:"";position:absolute;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);opacity:0;transform:translate3d(var(--x,0),var(--y,0),0);transition:opacity .3s}
.gc:hover .sp:before,.pl:hover .sp:before{opacity:1}
.flt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.flt .chip{background:#fff;color:var(--tx);border-color:#d5dae6}.flt .chip.on,.flt .chip:hover{background:var(--ink);color:#fff}
.gc.hid{display:none}
/* before/after */
.ba{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);user-select:none;touch-action:pan-y;background:#ddd;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ba .af{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.ba .hn{position:absolute;top:0;bottom:0;left:0;width:0;transform:translateX(var(--px,0));z-index:2}
.ba .hn:before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.4)}
.ba .hn b{position:absolute;top:50%;left:-24px;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.35);display:grid;place-items:center;font:800 1rem Outfit;color:var(--ink)}
.ba .lb{position:absolute;bottom:14px;z-index:2;padding:7px 12px;border-radius:999px;font:700 .78rem Inter;background:rgba(17,24,39,.85);color:#fff}
.ba .lb.l{left:14px}.ba .lb.r{right:14px}.ba .lb.l{background:var(--ac)}
.ba input{position:absolute;inset:auto 0 0 0;width:100%;opacity:0;height:100%;cursor:ew-resize;z-index:4;margin:0}
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}.tabs .chip{background:#fff;color:var(--tx);border-color:#d5dae6}.tabs .chip.on{background:var(--ink);color:#fff}
.bal{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}.bal div{padding:18px;border-radius:14px;background:#fff;box-shadow:0 1px 0 #e5e8f0}
.bal h3{font-size:1rem;margin-bottom:8px}.bal ul{margin:0;padding-left:18px;color:var(--mu);font-size:.93rem}
@media(max-width:700px){.bal{grid-template-columns:1fr}.ba{aspect-ratio:4/5}}
/* features */
.fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.ft{padding:26px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.ft:hover{border-color:rgba(255,138,61,.5)}
.ft .ic{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--ac),var(--ac2));display:grid;place-items:center;margin-bottom:14px;color:#fff}
.ft p{margin:0;color:#a9b2c8;font-size:.95rem}
.st{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.st div{padding:24px;border-radius:var(--r);background:#fff;box-shadow:0 1px 0 #e5e8f0;position:relative}
.st div:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font:800 1rem Outfit;margin-bottom:12px}
.st p{margin:0;color:var(--mu);font-size:.95rem}
@media(max-width:900px){.st{grid-template-columns:1fr 1fr}}@media(max-width:560px){.st{grid-template-columns:1fr}}
/* pricing */
.pr{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:980px}
.pl{position:relative;border-radius:24px;padding:34px;background:#fff;color:var(--tx);box-shadow:var(--sh);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pl.hl{background:linear-gradient(160deg,#1a2240,#0b1020);color:#fff;box-shadow:0 0 0 2px rgba(255,138,61,.6),var(--sh)}
.pl .nm{font:800 1.3rem Outfit;margin:0 0 6px}.pl .ds{color:var(--mu);margin:0 0 20px;font-size:.95rem}.pl.hl .ds{color:#a9b2c8}
.pl .am{font:800 clamp(2.4rem,5vw,3.2rem)/1 Outfit;letter-spacing:-.03em}.pl .am small{font:600 1rem Inter;letter-spacing:0;opacity:.75}
.pl .pl2{font:700 1.15rem Outfit;margin:8px 0 2px}.pl .vat{font-size:.85rem;opacity:.7;margin:0 0 18px}
.pl ul{list-style:none;padding:0;margin:0 0 26px}.pl li{padding:7px 0 7px 28px;position:relative;font-size:.96rem}
.pl li:before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.pl .btn{width:100%;justify-content:center}.pl .gu{font-size:.86rem;opacity:.8;margin:14px 0 0}
.prn{max-width:980px;color:var(--mu);font-size:.9rem;margin-top:22px}
@media(max-width:820px){.pr{grid-template-columns:1fr}}
/* faq */
.fq{max-width:820px}.fq details{border-bottom:1px solid #e5e8f0;padding:18px 0}.fq summary{font:700 1.08rem Outfit;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.fq summary:after{content:"+";font-size:1.4rem;line-height:1;transition:transform .3s}.fq details[open] summary:after{transform:rotate(45deg)}
.fq p{color:var(--mu);margin:12px 0 0}
/* contact + footer */
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.ci{display:block;padding:22px;border-radius:var(--r);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-decoration:none;transition:transform .3s,border-color .3s}.ci:hover{border-color:var(--ac)}
.ci b{display:block;font:800 1.1rem Outfit;color:#fff;margin:4px 0}.ci span{font-size:.9rem;color:#a9b2c8}.ci small{font:600 .74rem Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--ac2)}
footer{background:#070a15;color:#8e98b2;font-size:.86rem;padding:40px 0 90px}footer a{color:#cfd6e6}
.pvb{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fde68a;color:#111;font:600 .8rem Inter;text-align:center;padding:6px 10px}
/* sticky mobile cta */
.mcta{display:none}
@media(max-width:700px){.mcta{display:flex;position:fixed;left:12px;right:12px;bottom:36px;z-index:55;justify-content:center;transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}.mcta.on{transform:none}.mcta .btn{width:100%;justify-content:center}}
/* motion */
.js [data-r]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js [data-r].in{opacity:1;transform:none}
.glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(closest-side,rgba(255,110,50,.16),rgba(120,80,255,.07) 55%,transparent);opacity:0;transition:opacity .4s;will-change:transform}
.glow.on{opacity:1}
.dot{position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ac);pointer-events:none;z-index:90;opacity:0;transition:opacity .3s;will-change:transform;mix-blend-mode:difference}
.dot.on{opacity:.9}
.tr{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--ac2);pointer-events:none;z-index:89;will-change:transform,opacity;opacity:0}
.rip{position:absolute;border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:rgba(255,255,255,.5);pointer-events:none;animation:rp .6s ease-out forwards}
@keyframes rp{to{transform:scale(18);opacity:0}}
.hero>*{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js [data-r]{opacity:1;transform:none}.glow,.dot,.tr{display:none}}