/* Brand colors: change these 4 values once the logo colors are final */
:root{
  --bg:#03182C;--bg2:#072640;--ink:#EEF8F4;--muted:#9DB8C9;--line:#18436D;
  --a:#4FBF96;--b:#2F8FD0;--c:#7CF0C4;--bi:#03182C;--lf:drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 1.2px #fff) drop-shadow(0 4px 16px rgba(79,191,150,.55));
  color-scheme:dark;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F2FAF6;--bg2:#FFFFFF;--ink:#04335B;--muted:#46647F;--line:#CCE3DA;
  --a:#1F7A5C;--b:#04335B;--c:#1F7A5C;--bi:#FFFFFF;--lf:drop-shadow(0 6px 12px rgba(4,51,91,.3));color-scheme:light}}
:root[data-theme="light"]{--bg:#F2FAF6;--bg2:#FFFFFF;--ink:#04335B;--muted:#46647F;--line:#CCE3DA;--a:#1F7A5C;--b:#04335B;--c:#1F7A5C;--bi:#FFFFFF;--lf:drop-shadow(0 6px 12px rgba(4,51,91,.3));color-scheme:light}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 "Manrope",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Syne","Arial Narrow",system-ui,sans-serif;line-height:1.02;margin:0;letter-spacing:-.025em}
a{color:inherit}
:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;position:relative;z-index:3}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 20px "Syne",sans-serif}
.logo img{height:48px;width:auto;filter:var(--lf);transition:transform .4s}.logo:hover img{transform:rotateY(180deg)}
nav a{margin-left:24px;text-decoration:none;color:var(--muted);font-weight:500}
nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:999px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font:600 1rem "Manrope",sans-serif;color:var(--bi);background:linear-gradient(110deg,var(--a),var(--b),var(--a));background-size:200% 100%;transition:background-position .6s,transform .2s}
.btn:hover{background-position:100% 0;transform:translateY(-2px)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--c)}
/* hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
#fx{position:absolute;inset:0;width:100%;height:100%}
.hero .wrap{z-index:2;padding-top:40px;padding-bottom:80px}
.hero h1{font-size:clamp(2.9rem,8.5vw,7rem);font-weight:800;max-width:11em}
.rot{display:inline-block;background:linear-gradient(100deg,var(--c),var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;transition:opacity .35s,transform .35s}
.rot.out{opacity:0;transform:translateY(.25em)}
.lead{font-size:1.2rem;color:var(--muted);max-width:32em;margin:26px 0 34px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.glow{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.28;background:var(--a);right:-120px;top:-80px;animation:float 14s ease-in-out infinite alternate}
.glow.two{background:var(--b);left:-160px;top:auto;bottom:-200px;right:auto;animation-duration:18s}
@keyframes float{to{transform:translate(-60px,50px) scale(1.15)}}
/* marquee */
.mq{border-block:1px solid var(--line);overflow:hidden;background:var(--bg2);padding:18px 0}
.mq div{display:flex;gap:56px;width:max-content;animation:slide 28s linear infinite;font:700 1.5rem "Syne",sans-serif;color:var(--muted)}
.mq span::after{content:"✦";margin-left:56px;color:var(--b)}
@keyframes slide{to{transform:translateX(-50%)}}
/* sections */
section{padding:96px 0}
h2{font-size:clamp(2.1rem,5vw,3.8rem);max-width:14em;margin-bottom:44px}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rv.on{opacity:1;transform:none}
.sv{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:8px 48px;padding:30px 12px;border-top:1px solid var(--line);position:relative;overflow:hidden;transition:padding .35s}
.sv:last-of-type{border-bottom:1px solid var(--line)}
.sv::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--a) 28%,transparent),transparent 60%);opacity:0;transition:opacity .3s}
.sv::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--c),var(--b));transition:width .5s}
.sv:hover{padding-left:28px}.sv:hover::before{opacity:1}.sv:hover::after{width:100%}
.sv h3{font-size:1.7rem;position:relative}
.sv p{margin:0;color:var(--muted);max-width:38em;position:relative}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--bg2)}
.steps li::before{content:"Step " counter(s);color:var(--c);font-weight:600}
.steps h3{font-size:1.4rem;margin:8px 0}
.steps p{margin:0;color:var(--muted);font-size:.95rem}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.info p{margin:0 0 14px;color:var(--muted)}
.info b{color:var(--ink);display:block}
.soc{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.soc a{padding:9px 18px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:500;transition:.2s}
.soc a:hover{border-color:var(--c);color:var(--c)}
form{display:grid;gap:14px;background:var(--bg2);padding:28px;border-radius:24px;border:1px solid var(--line)}
input,select,textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:.92rem}
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.45)}
.wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:ping 2s infinite}
@keyframes ping{to{transform:scale(1.6);opacity:0}}
.wa svg{width:30px;height:30px;fill:#fff;position:relative}
@media (max-width:860px){
  nav a:not(.k){display:none}.sv,.contact{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

.pg{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:3px;width:0;background:linear-gradient(90deg,var(--c),var(--b));z-index:10}
.cg{position:fixed;left:-999px;top:-999px;width:380px;height:380px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--a) 20%,transparent),transparent 65%);transform:translate(-50%,-50%);z-index:0}
@media (hover:none){.cg{display:none}}
.grid{position:absolute;left:-50%;right:-50%;bottom:0;height:46%;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;transform:perspective(520px) rotateX(64deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);animation:gm 3s linear infinite;opacity:.8}
@keyframes gm{to{background-position:0 64px}}
.orb{display:none;position:absolute;right:5%;top:50%;width:min(430px,36vw);aspect-ratio:1;z-index:1;transform-style:preserve-3d;transform:translateY(-50%) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .2s}
@media (min-width:1020px){.orb{display:block}}
.ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--a);box-shadow:0 0 34px color-mix(in srgb,var(--a) 45%,transparent);animation:sa 16s linear infinite}
.r2{inset:11%;border:1.5px dashed var(--b);box-shadow:none;animation:sb 11s linear infinite reverse}
.r3{inset:24%;border-color:var(--c);animation:sa 8s linear infinite}
@keyframes sa{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes sb{from{transform:rotateY(68deg) rotateZ(0)}to{transform:rotateY(68deg) rotateZ(360deg)}}
.core{position:absolute;left:50%;top:50%;width:30%;background:#fff;border-radius:24px;padding:16px;transform:translate(-50%,-50%) translateZ(40px);box-shadow:0 0 70px color-mix(in srgb,var(--a) 65%,transparent);animation:bob 4s ease-in-out infinite alternate}
@keyframes bob{to{transform:translate(-50%,-56%) translateZ(40px)}}
.steps li,form{transition:transform .2s,border-color .3s;will-change:transform}
.steps li:hover,form:hover{border-color:var(--c)}
h2{background:linear-gradient(100deg,var(--ink) 55%,var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}

.core{background:none;padding:0;border-radius:0;box-shadow:none;width:27%;transform-style:preserve-3d}
.core .ly{position:absolute;left:0;top:0;width:100%;display:block}
.core .front{position:relative;filter:var(--lf)}
.orb::before{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--a) 45%,transparent),transparent 65%);filter:blur(24px);transform:translateZ(-60px);animation:pl 3s ease-in-out infinite alternate}
@keyframes pl{to{opacity:.5;transform:translateZ(-60px) scale(1.15)}}
.chip{position:absolute;padding:8px 16px;border-radius:999px;background:color-mix(in srgb,var(--bg2) 72%,transparent);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:600;font-size:.88rem;transform:translateZ(90px);animation:fl 4.5s ease-in-out infinite alternate;white-space:nowrap}
.c1{top:4%;left:-6%}.c2{top:20%;right:-16%;animation-delay:-1s}.c3{bottom:16%;left:-18%;animation-delay:-2s}.c4{bottom:2%;right:-2%;animation-delay:-3s}
@keyframes fl{to{translate:0 -14px}}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:sh 3.6s infinite}
.btn.ghost::after{display:none}
@keyframes sh{to{left:140%}}
@media (max-width:1019px){.orb{display:block;right:-60px;top:30%;width:250px;opacity:.55}.chip{display:none}}

.tag{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg2) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:600;margin-bottom:22px}
.tag i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 var(--c);animation:dot 1.8s infinite}
@keyframes dot{to{box-shadow:0 0 0 12px transparent}}
@keyframes up{from{opacity:0;transform:translateY(34px);filter:blur(12px)}}
.tag{animation:up .8s both}.hero h1{animation:up 1s .15s both}.lead{animation:up 1s .35s both}.cta{animation:up 1s .5s both}
.ab{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.ab h2{margin-bottom:24px}.ap{color:var(--muted);max-width:34em;margin:0 0 28px}
.tcard{position:relative;overflow:hidden;border-radius:30px;padding:56px 36px;background:var(--bg2);border:1px solid var(--line)}
.tcard::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--a);filter:blur(80px);opacity:.3;right:-80px;top:-80px;animation:float 9s ease-in-out infinite alternate}
.tgl{position:relative;display:block;font:800 clamp(2.2rem,4.6vw,3.6rem)/1.05 "Syne",sans-serif;letter-spacing:-.02em;background:linear-gradient(100deg,var(--c),var(--ink),var(--b),var(--c));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gs 7s linear infinite}
@keyframes gs{to{background-position:300% 0}}
.tcard small{position:relative;display:block;margin-top:22px;color:var(--muted)}
.mq2{overflow:hidden;padding:36px 0;border-top:1px solid var(--line)}
.mq2 div{display:flex;gap:64px;width:max-content;animation:slide 40s linear infinite}
.mq2 span{font:800 clamp(3rem,9vw,7rem)/1 "Syne",sans-serif;-webkit-text-stroke:1.5px var(--a);color:transparent;white-space:nowrap}
#services .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#services h2{grid-column:1/-1;margin-bottom:24px}
.sv{display:block;border:1px solid var(--line);border-radius:26px;padding:30px;background:var(--bg2);transition:transform .3s,border-color .3s,opacity .7s}
.sv:last-of-type{border-bottom:1px solid var(--line)}
.sv:hover{padding:30px;transform:translateY(-8px);border-color:var(--c)}
.sv::after{display:none}
.ic{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;margin-bottom:20px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 10px 30px color-mix(in srgb,var(--a) 40%,transparent);transition:transform .4s}
.ic svg{width:28px;height:28px;fill:none;stroke:var(--bi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv:hover .ic{transform:rotate(-8deg) scale(1.12)}
.sv h3{margin-bottom:10px}
@media (max-width:1019px){#services .wrap{grid-template-columns:1fr 1fr}.ab{grid-template-columns:1fr}}
@media (max-width:620px){#services .wrap{grid-template-columns:1fr}}

.menu{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:12px;width:44px;height:44px;font-size:1.3rem;cursor:pointer}
@media (max-width:860px){.menu{display:block}
 nav{display:none;position:absolute;right:0;top:72px;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:10px 22px;z-index:6;min-width:200px}
 nav.open{display:flex}nav a,nav a:not(.k){display:block;margin:0;padding:11px 0}}
footer{padding:56px 0 28px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1.6fr 1fr;gap:32px}
.fg a,.fg b,.fg p{display:block;margin:0 0 9px}.fg b{color:var(--ink)}.fg .fb{font:800 1.3rem "Syne",sans-serif}
.fg a{text-decoration:none}.fg a:hover{color:var(--c)}
.copy{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:860px){.fg{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fg{grid-template-columns:1fr}}

.wipe{position:fixed;inset:0;z-index:60;pointer-events:none;background:linear-gradient(135deg,var(--a),var(--b));transform:translateY(-101%);animation:wout .8s cubic-bezier(.7,0,.2,1) both}
.wipe.go{animation:win .48s cubic-bezier(.7,0,.2,1) both}
@keyframes wout{from{transform:translateY(0)}to{transform:translateY(101%)}}
@keyframes win{from{transform:translateY(-101%)}to{transform:translateY(0)}}
nav a{position:relative}nav a.cur{color:var(--ink)}
nav a.cur::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--c),var(--b))}
a.sv{text-decoration:none;color:inherit}
.more{position:relative;display:inline-block;margin-top:16px;font-weight:600;color:var(--c)}
.more::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:30%;background:var(--c);transition:width .35s}
.sv:hover .more::after{width:100%}
.hero.short{min-height:60vh}.hero.short h1{font-size:clamp(2.6rem,7vw,5.4rem);max-width:12em}
.qj{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.qj a{padding:9px 18px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:500;background:color-mix(in srgb,var(--bg2) 70%,transparent);transition:.2s}
.qj a:hover{border-color:var(--c);color:var(--c)}
.sp{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sp.rev>div:first-child{order:2}
.sp h2{font-size:clamp(2rem,4vw,3rem);margin:0 0 16px}.sp p{color:var(--muted);margin:0 0 20px;max-width:34em}
.ul{list-style:none;padding:0;margin:0 0 28px}
.ul li{position:relative;padding:9px 0 9px 32px;color:var(--muted)}
.ul li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:2px;background:linear-gradient(90deg,var(--c),var(--b))}
.viz{position:relative;aspect-ratio:1.1;border-radius:30px;border:1px solid var(--line);background:var(--bg2);overflow:hidden;display:grid;place-items:center}
.bars{position:absolute;inset:16% 12% 14%;display:flex;align-items:flex-end;gap:5%}
.bars i{flex:1;height:var(--h);border-radius:10px 10px 0 0;background:linear-gradient(var(--c),var(--a));transform-origin:bottom;animation:grow 2.6s var(--d,0s) ease-in-out infinite alternate}
@keyframes grow{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.trend{position:absolute;inset:12% 10% 12%;width:80%;height:76%;fill:none;stroke:var(--b);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.5s ease-in-out infinite alternate}
@keyframes draw{to{stroke-dashoffset:0}}
.win{width:76%;border-radius:18px;border:1px solid var(--line);background:var(--bg);padding:16px;box-shadow:0 24px 60px color-mix(in srgb,var(--a) 30%,transparent);animation:bob2 4s ease-in-out infinite alternate}
@keyframes bob2{to{transform:translateY(-12px)}}
.win .bar{display:flex;gap:6px;margin-bottom:14px}.win .bar b{width:10px;height:10px;border-radius:50%;background:var(--line)}
.ln{height:12px;border-radius:6px;margin:10px 0;background:linear-gradient(90deg,var(--line) 25%,var(--a) 50%,var(--line) 75%);background-size:300% 100%;animation:shim 2.4s linear infinite}
@keyframes shim{to{background-position:-300% 0}}
.w1{width:70%}.w2{width:92%}.w3{width:55%}.w4{width:80%}
.blk{height:76px;border-radius:12px;margin:14px 0;background:linear-gradient(135deg,var(--a),var(--b));animation:bk 2.4s ease-in-out infinite alternate}
@keyframes bk{to{opacity:.45}}
.nn{width:88%}.nn .ed path{stroke:var(--a);stroke-width:1;fill:none;stroke-dasharray:3 5;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-16}}
.nn circle{fill:var(--c);transform-box:fill-box;transform-origin:center;animation:pn 1.8s ease-in-out infinite alternate}
.nn circle:nth-of-type(odd){animation-delay:.7s;fill:var(--b)}
@keyframes pn{to{transform:scale(1.7);opacity:.55}}
.rd{position:relative;width:60%;aspect-ratio:1}
.rd i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--a);animation:rip 3.6s linear infinite}
.rd i:nth-child(2){animation-delay:1.2s}.rd i:nth-child(3){animation-delay:2.4s}
@keyframes rip{from{transform:scale(.1);opacity:1}to{transform:scale(1.2);opacity:0}}
.rd b{position:absolute;inset:41%;border-radius:50%;background:linear-gradient(135deg,var(--b),var(--a));box-shadow:0 0 40px var(--a)}
.viz .chip{transform:none}
.bb span{position:absolute;bottom:-70px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;font-weight:700;background:color-mix(in srgb,var(--b) 28%,transparent);border:1px solid var(--b);animation:rise var(--t) linear infinite;animation-delay:var(--dl,0s)}
@keyframes rise{to{transform:translateY(-440px);opacity:0}}
.phn{width:34%;aspect-ratio:.52;border-radius:26px;border:3px solid var(--line);background:var(--bg);padding:8px;position:relative}
.phn i{display:block;height:100%;border-radius:18px;background:linear-gradient(160deg,var(--a),var(--b),var(--c));background-size:100% 300%;animation:scr 5s ease-in-out infinite alternate}
@keyframes scr{to{background-position:0 100%}}
.reel{width:56%;aspect-ratio:1;border-radius:50%;border:10px solid var(--a);background:radial-gradient(circle,var(--bg2) 22%,transparent 23%),repeating-conic-gradient(var(--a) 0 22deg,transparent 0 60deg);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.play{position:absolute;width:0;height:0;border-left:34px solid var(--c);border-top:22px solid transparent;border-bottom:22px solid transparent;filter:drop-shadow(0 0 14px var(--c));margin-left:8px}
.tl{position:absolute;left:12%;right:12%;bottom:11%;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.tl i{display:block;height:100%;background:linear-gradient(90deg,var(--c),var(--b));animation:tlp 5s linear infinite}
@keyframes tlp{from{width:0}to{width:100%}}
.ft{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:8px;margin-top:20px}
.nd{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;font:800 clamp(1rem,2.4vw,1.7rem)/1.1 "Syne",sans-serif;border:2px dashed var(--b);background:var(--bg2);position:relative}
.nd::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--c);animation:rip 3s linear infinite}
.nd.g{border:2px solid var(--a);box-shadow:0 0 60px color-mix(in srgb,var(--a) 40%,transparent)}
.nd img{height:42%;width:auto;filter:var(--lf)}
.ln2{position:relative;height:4px;background:var(--line);border-radius:2px}
.ln2 i{position:absolute;top:50%;left:0;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--c);box-shadow:0 0 16px var(--c);animation:trav 3s linear infinite}
.ln2 i:nth-child(2){animation-delay:1s}.ln2 i:nth-child(3){animation-delay:2s}
@keyframes trav{from{left:0;opacity:0}10%,90%{opacity:1}to{left:100%;opacity:0}}
.band{text-align:center;background:var(--bg2);border-block:1px solid var(--line)}
.band h2{margin:0 auto 30px}.band .cta{justify-content:center}
.cc{display:flex;gap:18px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:22px;background:var(--bg2);text-decoration:none;margin-bottom:14px;transition:border-color .3s,transform .2s}
.cc:hover{border-color:var(--c)}.cc .ic{margin:0;flex:none}
.cc b{display:block;font:700 1.15rem "Syne",sans-serif}.cc span{color:var(--muted)}
.mapbox{border-radius:28px;overflow:hidden;border:1px solid var(--line);height:400px;margin-bottom:22px}
.mapbox iframe{width:100%;height:100%;border:0}
.soc.big a{font-size:1.05rem;padding:12px 22px}
@media (max-width:860px){.sp{grid-template-columns:1fr}.sp.rev>div:first-child{order:0}}
.hero h1{font-size:clamp(2.6rem,6vw,5.2rem);max-width:9.5em}
@keyframes wout{from{transform:translateY(0);visibility:visible}to{transform:translateY(101%);visibility:hidden}}
@media (max-width:1019px){.orb{opacity:.22;top:24%}}
.trend{stroke-width:1.8}.c2{right:-4%}
.btn{justify-content:center}

.wipe{display:none}
html.hold .tag,html.hold .hero h1,html.hold .lead,html.hold .cta{animation-play-state:paused}
.intro{display:none;position:fixed;inset:0;z-index:100;cursor:pointer}
html.intro-on .intro{display:block;animation:fb 0s 7s forwards}
@keyframes fb{to{visibility:hidden;pointer-events:none}}
html.intro-on body{overflow:hidden}
.ih{position:absolute;left:0;right:0;height:50.3%;background:#03182C;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.ih.t{top:0}.ih.b{bottom:0}
.ic0{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;transition:opacity .45s,transform .7s}
.intro.out .ih.t{transform:translateY(-101%)}.intro.out .ih.b{transform:translateY(101%)}
.intro.out .ic0{opacity:0;transform:scale(1.3)}
.stg{position:relative;width:min(52vw,290px);aspect-ratio:1}
.disk{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#D6F5E8);box-shadow:0 0 100px rgba(79,191,150,.55);transform:scale(0);animation:dk .9s .1s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes dk{to{transform:scale(1)}}
.rg{position:absolute;inset:0;border-radius:50%;border:3px solid #7CF0C4;opacity:0;animation:rg 1.1s 1.7s ease-out forwards}
@keyframes rg{from{transform:scale(1);opacity:.9}to{transform:scale(2.8);opacity:0}}
.lg{position:absolute;left:50%;top:50%;height:58%;aspect-ratio:283/400;transform:translate(-50%,-50%)}
.lg img{position:absolute;inset:0;width:100%;height:100%}
.lg .g{animation:ig .8s .55s cubic-bezier(.2,.9,.3,1.15) both}
.lg .n{animation:in .8s .6s cubic-bezier(.2,.9,.3,1.15) both}
.lg .d{animation:id .75s 1.2s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ig{from{transform:translateX(-110px) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes in{from{transform:translateX(110px) rotate(12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes id{from{transform:translateY(-260px) scale(.3) rotate(-200deg);opacity:0}to{transform:none;opacity:1}}
.nm{font:800 clamp(1.7rem,6vw,2.6rem)/1 "Syne","Arial Narrow",sans-serif;color:#EEF8F4;letter-spacing:-.01em;text-align:center}
.nm span{display:inline-block;opacity:0;transform:translateY(26px);animation:lt .5s calc(1.95s + var(--i)*.04s) cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes lt{to{opacity:1;transform:none}}
.tg2{color:#7CF0C4;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;opacity:0;animation:fi .7s 2.8s forwards}
@keyframes fi{to{opacity:1}}
.sk{position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom,0px));text-align:center;color:#9DB8C9;font-size:.8rem;opacity:.7}
.tr{position:fixed;inset:0;z-index:90;pointer-events:none;visibility:hidden;background:linear-gradient(135deg,#0F6B55,#0B4F85 60%,#03182C);clip-path:circle(0 at var(--x,50%) var(--y,50%))}
.tr.go{visibility:visible;animation:tin .6s cubic-bezier(.6,0,.3,1) forwards}
@keyframes tin{to{clip-path:circle(150vmax at var(--x,50%) var(--y,50%))}}
html.tr-on .tr{visibility:visible;clip-path:circle(150vmax at 50% 50%)}
.tr.open{visibility:visible;animation:tout .85s cubic-bezier(.7,0,.3,1) forwards}
@keyframes tout{from{clip-path:circle(150vmax at 50% 50%)}to{clip-path:circle(0 at 50% 50%)}}
.tri{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;color:#fff;transition:opacity .3s}
.trd{width:112px;height:112px;border-radius:50%;background:#fff;display:grid;place-items:center;transform:scale(.5);opacity:0;transition:transform .5s .3s cubic-bezier(.2,1.4,.4,1),opacity .3s .3s}
.trd img{height:60%;width:auto}
.trl{font:800 clamp(2rem,7vw,4rem)/1 "Syne","Arial Narrow",sans-serif;opacity:0;transform:translateY(18px);transition:opacity .4s .5s,transform .4s .5s}
.tr.go .trd,html.tr-on .trd{transform:none;opacity:1}
.tr.go .trl,html.tr-on .trl{opacity:1;transform:none}
.tr.open .tri{opacity:0}
.trd img{height:66px;width:auto;max-width:none}
/* ===== motion upgrade ===== */
.hero h1.ks{animation:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .16em;margin-bottom:-.16em}
.wi{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:left bottom;animation:wup .95s calc(.12s + var(--i)*.1s) cubic-bezier(.2,.9,.2,1) forwards}
@keyframes wup{to{transform:none}}
html.hold .wi{animation-play-state:paused}
.crs{position:fixed;left:0;top:0;width:34px;height:34px;border:1.5px solid var(--c);border-radius:50%;pointer-events:none;z-index:95;transition:width .25s,height .25s,background .25s}
.crs.big{width:68px;height:68px;background:color-mix(in srgb,var(--a) 20%,transparent)}
@media (hover:none){.crs{display:none}}
html{scroll-padding-top:76px}
.orb{transform:translateY(-50%) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg)) scale(var(--sc,1))}
.mq.two div{animation-direction:reverse;animation-duration:36s;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase}
/* inner page hero visuals */
.vis{display:none;position:absolute;right:6%;top:50%;width:min(430px,34vw);aspect-ratio:1;transform:translateY(-50%);z-index:1;--R:calc(min(430px,34vw)*.42)}
@media (min-width:1020px){.vis{display:block}.hero.short h1{max-width:9.6em;font-size:clamp(2.4rem,5vw,4.6rem)}}
.vis .dsk{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#D6F5E8);box-shadow:0 0 90px color-mix(in srgb,var(--a) 55%,transparent);opacity:calc(.08 + var(--t,0)*.92)}
.xl{position:absolute;left:50%;top:50%;height:56%;aspect-ratio:283/400;transform:translate(-50%,-50%)}
.xl img{position:absolute;inset:0;width:100%;height:100%;filter:var(--lf)}
.xl .g{transform:translate(calc((1 - var(--t,0))*-105px + var(--mx,0)*12px),calc((1 - var(--t,0))*50px + var(--my,0)*12px)) rotate(calc((1 - var(--t,0))*-18deg))}
.xl .n{transform:translate(calc((1 - var(--t,0))*105px + var(--mx,0)*22px),calc((1 - var(--t,0))*40px + var(--my,0)*22px)) rotate(calc((1 - var(--t,0))*16deg))}
.xl .d{transform:translate(calc(var(--mx,0)*34px),calc((1 - var(--t,0))*-120px + var(--my,0)*34px)) rotate(calc((1 - var(--t,0))*-140deg)) scale(calc(.7 + var(--t,0)*.3))}
.mid{position:absolute;left:33%;top:33%;width:34%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 60px color-mix(in srgb,var(--a) 55%,transparent)}
.mid img{height:62%;width:auto}
.orbit{position:absolute;inset:0;animation:spin 36s linear infinite}
.vis:hover .orbit,.vis:hover .ob span{animation-play-state:paused}
.ob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;transform:rotate(var(--g)) translateY(calc(var(--R)*-1)) rotate(calc(var(--g)*-1))}
.ob span{display:grid;place-items:center;width:100%;height:100%;border-radius:17px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 8px 26px color-mix(in srgb,var(--a) 45%,transparent);animation:spin 36s linear infinite reverse;transition:filter .2s}
.ob:hover span{filter:brightness(1.2)}
.ob svg{width:26px;height:26px;fill:none;stroke:var(--bi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vis .rd{position:absolute;left:20%;top:20%;width:60%}
.plane{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plane path.tr2{fill:none;stroke:var(--a);stroke-width:1.5;stroke-dasharray:3 7;opacity:.7}
.plane .pl{fill:var(--c);filter:drop-shadow(0 0 6px var(--c))}
/* services sticky bar */
.spy{position:sticky;top:env(safe-area-inset-top,0px);z-index:8;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.spy .wrap{display:flex;gap:8px;overflow-x:auto;padding:12px 24px;scrollbar-width:none}
.spy a{white-space:nowrap;padding:8px 16px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:500;border:1px solid transparent;transition:.25s}
.spy a.on{color:var(--ink);border-color:var(--c);background:color-mix(in srgb,var(--a) 18%,transparent)}
/* about timeline */
.tl2{position:relative;max-width:760px;margin:0 auto}
.tl2::before{content:"";position:absolute;left:23px;top:0;bottom:0;width:3px;background:var(--line);border-radius:2px}
.tl2 .fill{position:absolute;left:23px;top:0;width:3px;height:calc(var(--p,0)*100%);background:linear-gradient(var(--c),var(--b));box-shadow:0 0 18px var(--c);border-radius:2px}
.tl2 .st{position:relative;padding:0 0 60px 76px;opacity:.35;transform:translateX(18px);transition:opacity .6s,transform .6s}
.tl2 .st:last-child{padding-bottom:0}
.tl2 .st::before{content:"";position:absolute;left:12px;top:4px;width:25px;height:25px;border-radius:50%;background:var(--bg);border:3px solid var(--line);transition:.5s}
.tl2 .st.on{opacity:1;transform:none}
.tl2 .st.on::before{border-color:var(--c);background:var(--c);box-shadow:0 0 24px var(--c)}
.tl2 h3{font-size:1.7rem;margin-bottom:6px}.tl2 p{margin:0;color:var(--muted);max-width:32em}
@media (prefers-reduced-motion:reduce){.wi{transform:none}.tl2 .st{opacity:1;transform:none}}
.hero>.wrap{width:100%}
.mid{height:34%;aspect-ratio:auto;overflow:hidden}.mid img{height:60%;width:auto;max-width:none}
.vis .c1{top:14%;left:-2%}
/* ===== intro: mobile-safe version ===== */
html.intro-on{overflow:hidden;height:100%}
.intro{touch-action:none;overscroll-behavior:contain;-webkit-tap-highlight-color:transparent}
.disk{box-shadow:none;will-change:transform}
.stg::before{content:"";position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(circle,rgba(79,191,150,.5) 0,rgba(79,191,150,.18) 38%,transparent 66%);opacity:0;animation:fi .9s .35s forwards}
.lg img{will-change:transform,opacity;backface-visibility:hidden}
.ic0{padding:0 16px}
.nm{max-width:100%;font-size:clamp(1.45rem,7.4vw,2.6rem)}
.tg2{text-align:center;font-size:clamp(.66rem,2.9vw,.85rem);letter-spacing:.14em;padding:0 12px}
.sk{font-size:.9rem;padding:14px}
@media (max-width:600px){.stg{width:min(60vw,250px)}.ic0{gap:24px}}
@media (prefers-reduced-motion:reduce){
  html.intro-lite .disk{transform:none}
  html.intro-lite .nm span,html.intro-lite .tg2,html.intro-lite .stg::before{opacity:1;transform:none}
  html.intro-lite .rg{display:none}
}
/* ===== Hoopy the mascot ===== */
.mascot{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
.mascot>*{pointer-events:auto}
.mbt{position:relative;background:none;border:0;padding:0;cursor:pointer;width:62px;height:74px;-webkit-tap-highlight-color:transparent}
.mc{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));animation:mbob 2.6s ease-in-out infinite alternate}
@keyframes mbob{to{transform:translateY(-4px)}}
.mascot.hop .mc{animation:mhop .65s cubic-bezier(.3,1.4,.5,1)}
@keyframes mhop{0%{transform:none}30%{transform:translateY(-28px) scale(.92,1.1)}62%{transform:translateY(0) scale(1.1,.9)}100%{transform:none}}
.mc .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.mc .pup{transition:transform .15s}
.mc .dia{transform-box:fill-box;transform-origin:center bottom;animation:wob 2.2s ease-in-out infinite alternate}
@keyframes wob{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.mc .m2{opacity:0}
.mascot.happy .m1{opacity:0}.mascot.happy .m2{opacity:1}
.mascot.mute .mc{opacity:.6;animation:none;filter:grayscale(.7)}
.mascot.mute .eyes{animation:none;transform:scaleY(.12)}
.zz{display:none}
.mascot.mute .zz{display:block;position:absolute;right:-10px;top:0;font-size:.72rem;font-weight:700;color:var(--c);animation:zz 2s infinite}
@keyframes zz{50%{transform:translateY(-6px);opacity:.4}}
.mb{position:relative;max-width:min(250px,calc(100vw - 96px));padding:14px 16px 12px;border-radius:18px 18px 18px 4px;background:var(--bg2);border:1px solid var(--c);box-shadow:0 10px 34px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:scale(.6) translateY(10px);transform-origin:bottom left;transition:transform .35s cubic-bezier(.2,1.5,.4,1),opacity .25s,visibility .25s}
.mb.on{opacity:1;visibility:visible;transform:none}
.mt{margin:0 16px 10px 0;font-size:.95rem;line-height:1.45;color:var(--ink)}
.ma{display:flex;flex-wrap:wrap;gap:8px}
.mcta{padding:8px 14px;border-radius:999px;background:linear-gradient(110deg,var(--a),var(--b));color:var(--bi);font-weight:600;font-size:.85rem;text-decoration:none}
.mx{position:absolute;right:8px;top:4px;border:0;background:none;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer}
.mm{margin-top:8px;padding:0;border:0;background:none;color:var(--muted);font-size:.75rem;text-decoration:underline;cursor:pointer}
.spk{position:fixed;left:0;top:0;width:8px;height:8px;pointer-events:none;z-index:96;background:var(--c);transform:translate(var(--x),var(--y)) rotate(45deg);animation:spk .7s ease-out forwards}
@keyframes spk{to{transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) rotate(225deg) scale(.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.mc,.mc .eyes,.mc .dia{animation:none}.mb{transition:none}}

/* ===== service scenes ===== */
.viz{--D:8s;font-size:clamp(10px,calc(.45vw + 8.2px),14.5px);background-color:var(--bg2);background-image:radial-gradient(color-mix(in srgb,var(--line) 75%,transparent) 1px,transparent 1px);background-size:22px 22px}
.viz::before{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;background:var(--a);filter:blur(70px);opacity:.16;right:-15%;top:-20%;pointer-events:none}
.zf{width:84%;height:auto;overflow:visible}
.zl{fill:var(--ink);font:700 8px "Manrope",system-ui,sans-serif}
.dt{fill:var(--c);filter:drop-shadow(0 0 3px var(--c));opacity:0;animation:zfall 4.2s linear infinite;animation-delay:var(--d)}
@keyframes zfall{0%{transform:translate(var(--x),-6px);opacity:0}8%{opacity:1}55%{transform:translate(calc(var(--x)*.32),84px)}82%{transform:translate(0,130px);opacity:1}100%{transform:translate(0,150px);opacity:0}}
.zck{transform-box:fill-box;transform-origin:center;animation:zpulse 1.4s ease-in-out infinite}
@keyframes zpulse{50%{transform:scale(1.18)}}
.zw{position:relative;width:82%;border-radius:1.2em;background:var(--bg);border:1px solid var(--line);box-shadow:0 2em 4em color-mix(in srgb,var(--a) 25%,transparent);overflow:hidden}
.zwb{display:flex;align-items:center;gap:.4em;padding:.8em 1em;border-bottom:1px solid var(--line)}
.zwb b{width:.7em;height:.7em;border-radius:50%;background:var(--line)}
.zwb span{margin-left:.8em;flex:1;background:var(--bg2);border-radius:99px;padding:.25em .9em;font-size:.8em;color:var(--muted)}
.zwm{padding:1.2em}
.znv{display:flex;gap:.6em;margin-bottom:1.4em}.znv i{height:.7em;width:3em;border-radius:99px;background:var(--line)}.znv i:first-child{width:4.5em;background:var(--a)}
.zh1{height:1.5em;width:75%;border-radius:.4em;background:var(--ink);margin-bottom:.6em}
.zh2{height:.8em;width:55%;border-radius:.4em;background:var(--line);margin-bottom:1.1em}
.zbt{display:inline-block;padding:.55em 1.3em;border-radius:99px;background:linear-gradient(110deg,var(--a),var(--b));color:var(--bi);font-weight:700;font-size:.85em;margin-bottom:1.3em}
@keyframes zbtn{0%,66%{box-shadow:0 0 0 0 transparent}72%{box-shadow:0 0 0 .7em color-mix(in srgb,var(--c) 40%,transparent)}80%,100%{box-shadow:0 0 0 0 transparent}}
.zcd{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.zcd i{display:block;height:4.4em;border-radius:.8em;background:linear-gradient(160deg,color-mix(in srgb,var(--a) 35%,var(--bg2)),var(--bg2));border:1px solid var(--line)}
.zcur{position:absolute;left:16%;top:56%;width:1.8em;height:1.8em;pointer-events:none;animation:zcur var(--D) ease-in-out infinite}
@keyframes zcur{0%,58%{opacity:0;transform:translate(7em,5em)}66%{opacity:1;transform:translate(0,0)}71%{transform:scale(.8)}75%{transform:scale(1)}90%{opacity:1}96%,100%{opacity:0}}
.zc{position:relative;width:78%;height:84%;border-radius:1.4em;background:var(--bg);border:1px solid var(--line);overflow:hidden;box-shadow:0 2em 4em color-mix(in srgb,var(--a) 25%,transparent);--D:9s}
.zch{display:flex;align-items:center;gap:.6em;padding:.9em 1.1em;border-bottom:1px solid var(--line);font-weight:700}
.zch i{width:1.8em;height:1.8em;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b))}
.zch u{margin-left:auto;font-size:.75em;font-weight:600;text-decoration:none;color:var(--c)}
.cb{position:absolute;max-width:74%;padding:.7em 1em;border-radius:1.1em;font-size:.95em;line-height:1.35}
.cb.u{right:1em;background:linear-gradient(110deg,var(--a),var(--b));color:var(--bi);border-bottom-right-radius:.3em;font-weight:600}
.cb.a{left:1em;background:var(--bg2);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:.3em}
.y1{top:19%}.y2{top:36%}.y4{top:62%}
.ztyp{animation:ztp var(--D) infinite}
@keyframes ztp{0%,20%{opacity:0}24%,34%{opacity:1}38%,100%{opacity:0}}
.zd{display:flex;gap:.3em;padding:.25em 0}.zd i{width:.6em;height:.6em;border-radius:50%;background:var(--muted);animation:zdb 1s ease-in-out infinite}
.zd i:nth-child(2){animation-delay:.15s}.zd i:nth-child(3){animation-delay:.3s}
@keyframes zdb{50%{transform:translateY(-.4em);opacity:.4}}
.zok{position:absolute;left:1em;right:1em;bottom:1em;display:flex;align-items:center;gap:.6em;padding:.8em 1em;border-radius:1em;background:color-mix(in srgb,var(--c) 16%,var(--bg));border:1px solid var(--c);font-weight:700;font-size:.9em}
.zsa{position:absolute;left:6%;top:8%;width:56%;border-radius:1.2em;background:var(--bg);border:1px solid var(--line);padding:.9em;box-shadow:0 1.4em 3em color-mix(in srgb,var(--a) 22%,transparent);--D:9s}
.zsa .hd{display:flex;gap:.6em;align-items:center;font-size:.9em;font-weight:700}
.zsa .hd i{width:2em;height:2em;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b))}
.zsa .hd small{display:block;font-weight:400;color:var(--muted);font-size:.8em}
.zsa .im{height:6.4em;border-radius:.8em;margin:.8em 0;background:linear-gradient(135deg,var(--a),var(--b),var(--c))}
.zsa .ft{display:flex;justify-content:space-between;align-items:center}
.zsa .shop{padding:.4em 1em;border-radius:99px;background:var(--ink);color:var(--bg);font-size:.8em;font-weight:700}
.zhrt{width:1.5em;height:1.5em;fill:var(--b);display:block}
.zga{position:absolute;right:6%;bottom:10%;width:60%;border-radius:1.2em;background:var(--bg);border:1px solid var(--line);padding:.9em 1em;box-shadow:0 1.4em 3em color-mix(in srgb,var(--b) 22%,transparent);--D:9s}
.zga .ad{font-size:.7em;font-weight:700;border:1px solid var(--muted);border-radius:.3em;padding:0 .4em;margin-right:.5em}
.zga small{color:var(--muted)}.zga .t{color:var(--c);font-weight:700;margin:.4em 0 .2em;font-size:1.05em}
.zga .l{height:.6em;border-radius:99px;background:var(--line);margin-top:.5em;width:92%}
.zn{position:absolute;padding:.6em 1em;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:700;font-size:.88em;box-shadow:0 .8em 2em rgba(0,0,0,.3);white-space:nowrap;--D:9s}
.zn1{right:5%;top:7%}.zn2{left:6%;bottom:30%}.zn3{right:8%;top:24%}
.zph{position:relative;width:44%;border-radius:2.2em;border:.4em solid var(--line);background:var(--bg);padding:1.1em .9em;box-shadow:0 2em 4em color-mix(in srgb,var(--a) 25%,transparent)}
.zst{display:flex;gap:.5em;margin-bottom:.9em}
.zst i{width:2.3em;height:2.3em;border-radius:50%;background:conic-gradient(var(--c),var(--b),var(--a),var(--c));animation:spin 6s linear infinite;position:relative}
.zst i::after{content:"";position:absolute;inset:.2em;border-radius:50%;background:var(--bg)}
.zgr{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.zgr i{display:block;aspect-ratio:1;border-radius:.6em;--D:8s}
.zhp{position:absolute;right:-.9em;top:38%;--D:8s}
.zhp .zhrt{width:2.6em;height:2.6em;filter:drop-shadow(0 .3em .8em rgba(0,0,0,.35))}
.zv{position:relative;width:84%}
.zpv{position:relative;aspect-ratio:16/9;border-radius:1em;border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--bg),color-mix(in srgb,var(--a) 30%,var(--bg)))}
.zpv::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--c) 40%,transparent),transparent 60%);animation:zsh 6s ease-in-out infinite alternate}
@keyframes zsh{to{transform:translate(30%,20%)}}
.zpl{position:relative;width:3.6em;height:3.6em;border-radius:50%;background:var(--c);animation:zpp 1.8s infinite}
.zpl::after{content:"";position:absolute;left:1.35em;top:1em;border-left:1.1em solid var(--bi);border-top:.8em solid transparent;border-bottom:.8em solid transparent}
@keyframes zpp{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}100%{box-shadow:0 0 0 1.6em transparent}}
.zrc{position:absolute;left:.9em;top:.8em;font-size:.75em;font-weight:700;display:flex;gap:.4em;align-items:center}
.zrc i{width:.8em;height:.8em;border-radius:50%;background:#ff4d6d;animation:zbl 1s steps(2) infinite}
@keyframes zbl{50%{opacity:.2}}
.ztr{position:relative;margin-top:1em;display:grid;gap:.5em}
.zt{display:flex;gap:.3em;height:1.7em}.zt i{display:block;flex:var(--f);border-radius:.4em}
.zwv{display:flex;align-items:center;gap:.2em;height:2.2em}
.zwv i{flex:1;height:var(--h);border-radius:2px;background:var(--c);animation:zwa 1s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes zwa{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.zhd{position:absolute;top:-.4em;bottom:-.4em;left:0;width:2px;background:#fff;box-shadow:0 0 .8em var(--c);animation:zhd 6s linear infinite}
.zhd::before{content:"";position:absolute;top:-.2em;left:-.4em;width:.9em;height:.9em;background:var(--c);transform:rotate(45deg)}
@keyframes zhd{from{left:0}to{left:100%}}
@keyframes kf-down-6{0%,6%{opacity:0;transform:translateY(-14px)}11%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-14px)}}.kf-down-6{animation:kf-down-6 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-left-6{0%,6%{opacity:0;transform:translateX(-22px)}11%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-22px)}}.kf-left-6{animation:kf-left-6 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-left-14{0%,14%{opacity:0;transform:translateX(-22px)}19%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-22px)}}.kf-left-14{animation:kf-left-14 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-left-20{0%,20%{opacity:0;transform:translateX(-22px)}25%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-22px)}}.kf-left-20{animation:kf-left-20 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-8{0%,8%{opacity:0;transform:scale(.5)}13%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-8{animation:kf-pop-8 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-15{0%,15%{opacity:0;transform:scale(.5)}20%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-15{animation:kf-pop-15 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-22{0%,22%{opacity:0;transform:scale(.5)}27%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-22{animation:kf-pop-22 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-29{0%,29%{opacity:0;transform:scale(.5)}34%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-29{animation:kf-pop-29 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-34{0%,34%{opacity:0;transform:scale(.5)}39%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-34{animation:kf-pop-34 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-36{0%,36%{opacity:0;transform:scale(.5)}41%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-36{animation:kf-pop-36 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-43{0%,43%{opacity:0;transform:scale(.5)}48%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-43{animation:kf-pop-43 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-44{0%,44%{opacity:0;transform:scale(.5)}49%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-44{animation:kf-pop-44 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-50{0%,50%{opacity:0;transform:scale(.5)}55%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-50{animation:kf-pop-50 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-56{0%,56%{opacity:0;transform:scale(.5)}61%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-56{animation:kf-pop-56 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-57{0%,57%{opacity:0;transform:scale(.5)}62%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-57{animation:kf-pop-57 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-64{0%,64%{opacity:0;transform:scale(.5)}69%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-64{animation:kf-pop-64 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-68{0%,68%{opacity:0;transform:scale(.5)}73%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-68{animation:kf-pop-68 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-70{0%,70%{opacity:0;transform:scale(.5)}75%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-70{animation:kf-pop-70 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-72{0%,72%{opacity:0;transform:scale(.5)}77%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-72{animation:kf-pop-72 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-right-18{0%,18%{opacity:0;transform:translateX(22px)}23%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(22px)}}.kf-right-18{animation:kf-right-18 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-up-8{0%,8%{opacity:0;transform:translateY(14px)}13%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(14px)}}.kf-up-8{animation:kf-up-8 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-up-36{0%,36%{opacity:0;transform:translateY(14px)}41%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(14px)}}.kf-up-36{animation:kf-up-36 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-up-38{0%,38%{opacity:0;transform:translateY(14px)}43%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(14px)}}.kf-up-38{animation:kf-up-38 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-up-46{0%,46%{opacity:0;transform:translateY(14px)}51%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(14px)}}.kf-up-46{animation:kf-up-46 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-up-54{0%,54%{opacity:0;transform:translateY(14px)}59%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(14px)}}.kf-up-54{animation:kf-up-54 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
@keyframes kf-pop-28{0%,28%{opacity:0;transform:scale(.5)}33%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.5)}}.kf-pop-28{animation:kf-pop-28 var(--D,8s) cubic-bezier(.2,.9,.3,1.15) infinite both}
.bb{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.zpv::before{inset:-30%}
@keyframes zsh{to{transform:translate(12%,8%)}}

/* ===== smoother scrolling ===== */
.pz *,.pz{animation-play-state:paused!important}
.viz::before{filter:none;background:radial-gradient(circle,color-mix(in srgb,var(--a) 22%,transparent),transparent 65%);opacity:1}
.glow{filter:none;background:radial-gradient(circle,color-mix(in srgb,var(--a) 55%,transparent),transparent 65%);opacity:.5}
.glow.two{background:radial-gradient(circle,color-mix(in srgb,var(--b) 55%,transparent),transparent 65%)}
.spy{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--bg) 94%,transparent)}
.tl2 .st,.rv,.sv{will-change:auto}