:root{--navy:#0A2540;--navy2:#06182c;--teal:#14B8A6;--teal2:#0B7F73;--ink:#0A2540;--bg:#f4f9f9;--card:#fff;--mut:#46606f;--line:#d5e5e5;box-sizing:border-box;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:#06182c;--card:#0d2a47;--ink:#eaf6f5;--mut:#a9c3c8;--line:#1c4163;--teal2:#2ed3bf}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font:16px/1.65 "Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden}
h1,h2,h3{font-family:"Trebuchet MS","Segoe UI",sans-serif;line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
a{color:inherit}.w{max-width:1120px;margin:auto;padding:0 20px}
section{padding:84px 0}h2{font-size:clamp(1.8rem,4vw,2.6rem)}.lead{color:var(--mut);max-width:60ch}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.btn{display:inline-block;padding:13px 24px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font:inherit;font-weight:700;transition:transform .25s,box-shadow .25s,background .25s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-3px)}.btn.p{background:var(--teal);color:var(--navy);box-shadow:0 8px 24px #14b8a655}
.btn.p:hover{box-shadow:0 12px 32px #14b8a699}.btn.g{border-color:#ffffff66;color:#fff}.btn.g:hover{background:#ffffff18}
.btn.d{background:var(--navy);color:#fff}
header{position:fixed;top:0;left:0;right:0;z-index:50;background:#0a2540e6;backdrop-filter:blur(10px);padding-top:env(safe-area-inset-top,0px)}
nav{display:flex;align-items:center;justify-content:space-between;height:68px}
nav img{height:40px;display:block;background:#fff;border-radius:8px;padding:2px 8px}
.links{display:flex;gap:22px;align-items:center}.links a{color:#e6f4f3;text-decoration:none;font-weight:600;font-size:.95rem;position:relative}
.links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--teal);transition:width .3s}.links a:hover::after{width:100%}
.burger{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
@media(max-width:860px){.burger{display:block}.links{position:fixed;inset:68px 0 auto 0;background:var(--navy);flex-direction:column;padding:24px;gap:18px;transform:translateY(-130%);transition:transform .4s;visibility:hidden}.links.o{transform:none;visibility:visible}}
.hero{background:radial-gradient(1200px 600px at 80% -10%,#14b8a640,transparent),linear-gradient(135deg,var(--navy2),var(--navy) 55%,#0b3a4a);color:#fff;padding:150px 0 100px;position:relative;overflow:hidden;background-size:200% 200%;animation:bg 16s ease infinite}
@keyframes bg{50%{background-position:100% 50%}}
.hero h1{font-size:clamp(2.3rem,6vw,4.2rem);max-width:15ch}.hero .lead{color:#cfe4e6;font-size:1.15rem}
.hero .w{position:relative;z-index:2}.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.orb{position:absolute;border-radius:50%;filter:blur(2px);background:radial-gradient(circle at 30% 30%,#5eead4,#14B8A6 45%,#0B7F73);opacity:.5;animation:fl 9s ease-in-out infinite;will-change:transform}
.o1{width:220px;height:220px;right:6%;top:18%}.o2{width:90px;height:90px;right:30%;bottom:12%;animation-delay:-3s;opacity:.35}.o3{width:140px;height:140px;right:2%;bottom:6%;animation-delay:-6s;background:radial-gradient(circle at 30% 30%,#2b5a82,#0A2540);opacity:.8}
@keyframes fl{50%{transform:translateY(-26px) rotate(8deg)}}
#glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(#14b8a638,transparent 65%);pointer-events:none;left:0;top:0;transform:translate(-50%,-50%)}
.st{opacity:0;transform:translateY(26px);animation:in .8s forwards}@keyframes in{to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}.rv.v{opacity:1;transform:none}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;transition:transform .35s,box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-8px) rotateX(2deg);border-color:var(--teal);box-shadow:0 18px 40px #14b8a633}
.card h3{font-size:1.25rem}.card ul{padding-left:18px;margin:10px 0 0;color:var(--mut);font-size:.95rem}
.ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--navy));display:grid;place-items:center;color:#fff;font-size:22px;margin-bottom:14px}
.dark{background:var(--navy);color:#fff}.dark .lead{color:#c0d8da}.dark .card{background:#0d2f50;border-color:#1c4163}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.tags span{border:1px solid var(--line);background:var(--card);padding:8px 16px;border-radius:999px;font-weight:600;transition:.3s}.tags span:hover{background:var(--teal);color:var(--navy);transform:scale(1.06)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;position:relative;counter-reset:s}
.steps .card{counter-increment:s;position:relative}.steps .card::before{content:counter(s);position:absolute;top:-16px;left:22px;width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--navy);display:grid;place-items:center;font-weight:800}
.line{height:3px;background:linear-gradient(90deg,var(--teal),transparent);transform-origin:left;transform:scaleX(0);transition:transform 1.4s;margin-bottom:34px}.line.v{transform:scaleX(1)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.filters button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 18px;border-radius:999px;cursor:pointer;font:inherit;font-weight:600}.filters button.a{background:var(--teal);color:var(--navy);border-color:var(--teal)}
.pf{border-radius:18px;overflow:hidden;position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,var(--navy),#0f5560);color:#fff;display:flex;align-items:flex-end}
.pf .bg{position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,#14b8a688,transparent 55%);transition:transform .7s}.pf:hover .bg{transform:scale(1.25)}
.pf div.t{position:relative;padding:18px;width:100%;background:linear-gradient(transparent,#06182cdd)}.pf small{opacity:.8}
.pf.h{display:none}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:12px;transition:border-color .3s}details[open]{border-color:var(--teal)}
summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between}summary::after{content:"+";color:var(--teal2);font-size:1.4rem;transition:transform .3s}details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 16px;color:var(--mut);animation:in .4s forwards}
form{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);padding:26px;border-radius:18px}
label{font-weight:600;font-size:.92rem;display:grid;gap:5px}
input,select,textarea{font:inherit;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px #14b8a644}
.er{color:#c0392b;font-size:.82rem;min-height:1em;font-weight:500}@media(prefers-color-scheme:dark){.er{color:#ff8f80}}
#msg{padding:12px 14px;border-radius:10px;display:none;font-weight:600}#msg.ok{display:block;background:#d9f7f2;color:#064e44}#msg.bad{display:block;background:#fde4e0;color:#8a1f12}
.two{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}@media(max-width:860px){.two{grid-template-columns:1fr}}
.fin{background:linear-gradient(135deg,var(--teal),#0f8f95);color:var(--navy);text-align:center;border-radius:28px;padding:56px 24px}
footer{background:var(--navy2);color:#bcd3d6;padding:60px 0 110px}footer a{text-decoration:none}footer a:hover{color:var(--teal)}footer .grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}footer h3{color:#fff;font-size:1rem}
footer img{height:44px;background:#fff;border-radius:8px;padding:2px 8px;margin-bottom:12px}
.wa{position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;z-index:60;box-shadow:0 8px 24px #0006;animation:pulse 2.5s infinite;text-decoration:none;font-size:30px}
@keyframes pulse{50%{box-shadow:0 0 0 14px #25d36633}}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;background:var(--navy);padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));gap:8px}
.bar a{flex:1;text-align:center;padding:12px;border-radius:12px;font-weight:700;text-decoration:none;color:#fff;background:#14b8a6;color:#06182c}.bar a+a{background:#25D366}
@media(min-width:861px){.bar{display:none}.wa{bottom:24px}footer{padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.st,.rv,.line{opacity:1;transform:none}}

.ph{padding:140px 0 70px}.ph h1{font-size:clamp(2rem,5vw,3.2rem);max-width:20ch}.links a.on{color:var(--teal)}
.ck{color:var(--teal2);font-weight:800;margin-right:8px}.card.s{padding:18px 22px}.card.s h3{font-size:1.05rem;margin:0}
.card a.more{color:var(--teal2);font-weight:700;text-decoration:none;display:inline-block;margin-top:12px}
.sm{display:none}
/* ===== full animation system ===== */
main{animation:pagein .6s both}@keyframes pagein{from{opacity:0}}
body.leave main{opacity:0;transition:opacity .25s}
#pb{position:fixed;top:0;left:0;right:0;height:3px;z-index:101;background:linear-gradient(90deg,var(--teal),#5eead4);transform:scaleX(0);transform-origin:left;pointer-events:none}
#ld{position:fixed;inset:0;background:var(--navy2);z-index:100;display:grid;place-items:center;transition:opacity .5s,visibility .5s}#ld.x{opacity:0;visibility:hidden}
.lg{display:grid;gap:18px;justify-items:center}.lg img{width:min(260px,70vw);height:auto;background:#fff;border-radius:14px;padding:8px 14px;animation:lgin .8s cubic-bezier(.2,.8,.2,1) both}
.lg b{width:min(260px,70vw);height:4px;border-radius:4px;background:#ffffff22;position:relative;overflow:hidden}.lg b::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--teal),#5eead4);transform:scaleX(0);transform-origin:left;animation:ldb 1s ease forwards}
@keyframes lgin{from{opacity:0;transform:scale(.8)}}@keyframes ldb{to{transform:scaleX(1)}}
.cur{position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid var(--teal);border-radius:50%;pointer-events:none;z-index:99;opacity:0;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s}
.cur.on{opacity:.9}.cur.big{width:56px;height:56px;margin:-28px 0 0 -28px;background:#14b8a622}
header nav{transition:height .3s}header.sc nav{height:56px}header.sc{box-shadow:0 6px 24px #0006}
.wd{display:inline-block;opacity:0;transform:translateY(46px) rotateX(-70deg);transform-origin:50% 100%;animation:wd .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*90ms + 250ms)}
@keyframes wd{to{opacity:1;transform:none}}
.pc{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ring{position:absolute;right:8%;top:50%;width:300px;height:300px;margin-top:-150px;perspective:900px;transform-style:preserve-3d;z-index:1;pointer-events:none;translate:calc(var(--px,0)*28px) calc(var(--py,0)*28px);transition:translate .4s}
.ring i{position:absolute;inset:0;border:2px solid #14b8a6aa;border-radius:50%;animation:sp 14s linear infinite;box-shadow:0 0 30px #14b8a655}
.ring i:nth-child(2){inset:38px;border-color:#5eead4aa;animation:sp2 10s linear infinite}.ring i:nth-child(3){inset:76px;border-style:dashed;animation-duration:18s;animation-direction:reverse}
@keyframes sp{from{transform:rotateX(65deg) rotateZ(0)}to{transform:rotateX(65deg) rotateZ(360deg)}}@keyframes sp2{from{transform:rotateY(65deg) rotateZ(0)}to{transform:rotateY(65deg) rotateZ(360deg)}}
@media(max-width:860px){.ring{width:180px;height:180px;margin-top:-90px;right:-30px;opacity:.55}.ring i:nth-child(2){inset:24px}.ring i:nth-child(3){inset:48px}}
.mq{background:var(--navy);overflow:hidden;border-block:1px solid #1c4163;padding:16px 0;white-space:nowrap}
.mq div{display:inline-flex;gap:0;animation:mq 32s linear infinite}.mq span{color:#cfe4e6;font-weight:700;font-size:1.05rem;padding:0 26px;position:relative}.mq span::after{content:"\2726";color:var(--teal);position:absolute;right:-6px}
@keyframes mq{to{transform:translateX(-50%)}}.mq:hover div{animation-play-state:paused}
h2.rv::after{content:"";display:block;height:4px;width:0;border-radius:4px;margin-top:10px;background:linear-gradient(90deg,var(--teal),transparent);transition:width 1s .3s}h2.rv.v::after{width:96px}
.grid>.rv:nth-child(3n+1){translate:-36px 24px}.grid>.rv:nth-child(3n+2){translate:0 44px;scale:.94}.grid>.rv:nth-child(3n){translate:36px 24px}
.grid>.rv.v{translate:0 0;scale:1}
.card.rv{transition:opacity .8s,translate .8s,scale .8s,transform .35s,box-shadow .35s,border-color .35s}
.card{position:relative}.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),#14b8a630,transparent 70%)}.card:hover::after{opacity:1}
.ic{transition:transform .4s}.card:hover .ic{transform:rotate(-8deg) scale(1.14)}
.pf{transition:transform .3s,box-shadow .3s}.pf:hover{box-shadow:0 18px 40px #14b8a644}.pf .t{transform:translateY(10px);transition:transform .4s}.pf:hover .t{transform:none}
.btn.p::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,#ffffff88,transparent);transform:skewX(-20deg);transition:left .6s}.btn.p:hover::after{left:130%}
.steps .card::before{animation:pls 2.4s infinite}@keyframes pls{0%{box-shadow:0 0 0 0 #14b8a688}70%,100%{box-shadow:0 0 0 12px #14b8a600}}
.fin{background-size:200% 200%;animation:bg 10s ease infinite}
@media(max-width:860px){.links a{opacity:0;transform:translateX(-24px);transition:opacity .4s,transform .4s}.links.o a{opacity:1;transform:none}.links.o a:nth-child(2){transition-delay:.05s}.links.o a:nth-child(3){transition-delay:.1s}.links.o a:nth-child(4){transition-delay:.15s}.links.o a:nth-child(5){transition-delay:.2s}.links.o a:nth-child(6){transition-delay:.25s}}
@media(prefers-reduced-motion:reduce){.ring,.pc,#ld,.cur{display:none!important}.wd{opacity:1!important;transform:none!important}.rv{translate:none!important;scale:none!important}.mq div{transform:none}}

.pf .bg svg{position:absolute;inset:0;width:100%;height:100%}
.pf .bg{background:radial-gradient(circle at 70% 25%,#14b8a655,transparent 60%),linear-gradient(135deg,#0A2540,#0f4a5a)}

/* x2 */
.dark,.fin{position:relative;overflow:hidden}.dark>.w,.fin>*{position:relative}
.blob{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,#14b8a644,transparent 70%);pointer-events:none;animation:bob 9s ease-in-out infinite;top:-90px;right:-70px}.blob+.blob{top:auto;right:auto;bottom:-110px;left:-90px;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-18px)}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;text-align:center}
.stat b{display:block;font:800 clamp(2.4rem,6vw,3.6rem)/1.1 "Trebuchet MS",sans-serif;background:linear-gradient(90deg,#14B8A6,#9ff5e8,#14B8A6);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bg 5s linear infinite}
.stat span{color:#c0d8da}
.rot{font-size:1.3rem;font-weight:700;margin:18px 0 0;color:#fff}.rw{display:inline-block;color:var(--teal);min-width:7ch}.rw b{display:inline-block}.rw b.in{animation:rwi .6s cubic-bezier(.2,.8,.2,1)}@keyframes rwi{from{opacity:0;transform:translateY(60%) rotateX(-80deg)}}
.chip{position:absolute;z-index:1;width:56px;height:56px;border-radius:16px;background:#ffffff18;border:1px solid #ffffff33;backdrop-filter:blur(6px);display:grid;place-items:center;font-size:26px;pointer-events:none;animation:bob 5s ease-in-out infinite;translate:calc(var(--px,0)*var(--k,1)*44px) calc(var(--py,0)*var(--k,1)*44px);transition:translate .5s}
@media(max-width:760px){.chip{display:none}}
.mouse{position:absolute;bottom:22px;left:50%;margin-left:-13px;width:26px;height:42px;border:2px solid #ffffff88;border-radius:14px;z-index:2}.mouse::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--teal);animation:wh 1.6s infinite}
@keyframes wh{to{transform:translateY(14px);opacity:0}}
.wd2{display:inline-block;opacity:0;transform:translateY(34px) rotate(3deg);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}h2.v .wd2{opacity:1;transform:none}
.rp{position:absolute;border-radius:50%;background:#ffffff77;transform:scale(0);animation:rp .6s ease-out forwards;pointer-events:none}@keyframes rp{to{transform:scale(2.6);opacity:0}}
.tags span{animation:bob 4s ease-in-out infinite}.tags span:nth-child(2n){animation-delay:-1.3s}.tags span:nth-child(3n){animation-delay:-2.6s}.tags a{text-decoration:none}
.ic{animation:glw 3s ease-in-out infinite}@keyframes glw{50%{box-shadow:0 0 22px #14b8a699}}
.pf svg{animation:bob 6s ease-in-out infinite}
.wa{animation:pulse 2.5s infinite,wig 7s infinite}@keyframes wig{0%,90%,100%{rotate:0deg}92%{rotate:-12deg}94%{rotate:10deg}96%{rotate:-8deg}98%{rotate:6deg}}
footer a{background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 2px no-repeat;transition:background-size .3s,color .3s}footer a:hover{background-size:100% 2px}
.card h3 a{text-decoration:none}.card .go{color:var(--teal2);font-weight:700;text-decoration:none;display:inline-block;margin-top:10px;transition:letter-spacing .3s}.card .go:hover{letter-spacing:.04em}
@media(prefers-reduced-motion:reduce){.chip,.mouse,.blob{display:none!important}.wd2{opacity:1;transform:none}}

/* x3 */
.hv{position:absolute;right:5%;top:50%;width:min(420px,36vw);margin-top:-170px;z-index:2;pointer-events:none;translate:calc(var(--px,0)*-26px) calc(var(--py,0)*-26px);transition:translate .4s}
.hv svg{display:block;width:100%;height:auto;animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 20px 40px #0009)}.hv.sm2{width:min(330px,30vw);margin-top:-120px}
@media(max-width:1000px){.hv{display:none}}
.gb{transform-box:fill-box;transform-origin:bottom;animation:grow 2.6s ease-in-out infinite alternate}@keyframes grow{from{transform:scaleY(.3)}}
.dl{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 4s ease-in-out infinite}@keyframes draw{60%,100%{stroke-dashoffset:0}}
.fl{animation:bob 5s ease-in-out infinite;animation-delay:-2s}
.hub{width:100%;max-width:720px;height:auto;display:block;margin:20px auto 0}
.hub line{stroke:#14B8A6;stroke-width:2;stroke-dasharray:6 8;animation:dsh 1.2s linear infinite}@keyframes dsh{to{stroke-dashoffset:-14}}
.hub .pl{transform-origin:320px 170px;animation:pl 2.4s ease-out infinite}@keyframes pl{from{transform:scale(1);opacity:.6}to{transform:scale(1.9);opacity:0}}
.hub .nd{animation:bob 5s ease-in-out infinite}.hub .nd:nth-of-type(2n){animation-delay:-1.7s}.hub .nd:nth-of-type(3n){animation-delay:-3.2s}
.frame{overflow:hidden;border-radius:20px;background:radial-gradient(circle at 70% 25%,#14b8a655,transparent 60%),linear-gradient(135deg,#0A2540,#0f4a5a);box-shadow:0 14px 34px #0a254044}
.frame svg{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.frame:hover svg{transform:scale(1.1)}
.cap{margin:12px 4px 0;font-weight:700}.cap small{display:block;color:var(--mut);font-weight:400}
.wv{position:absolute;left:0;bottom:-1px;width:200%;height:46px;z-index:1;pointer-events:none;animation:wvm 14s linear infinite}.wv+.wv{height:62px;opacity:.45;animation-duration:22s;animation-direction:reverse}
@keyframes wvm{to{transform:translateX(-50%)}}.wv path{fill:var(--bg)}
@media(prefers-reduced-motion:reduce){.wv{display:none}.dl{stroke-dashoffset:0}}