/* generated from the design canvas */
.sx a{color:#22d3ee}.sx a:hover{color:#a5f3fc}
.sx *{box-sizing:border-box}
.sx{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;color:#eaf6ff;background:#04121f;overflow-x:clip}
.en{font-family:"Anton","Zen Kaku Gothic New",sans-serif;letter-spacing:.02em}

/* ---- hero ---- */
@keyframes caustic{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,3%) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
.caustic{position:absolute;inset:-20%;background:
 radial-gradient(40% 30% at 20% 30%,rgba(34,211,238,.22),transparent 70%),
 radial-gradient(35% 25% at 75% 20%,rgba(56,189,248,.18),transparent 70%),
 radial-gradient(45% 35% at 60% 80%,rgba(14,165,233,.16),transparent 70%);
 animation:caustic 14s ease-in-out infinite}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wave{position:absolute;left:0;bottom:0;width:200%;height:160px;animation:wave 12s linear infinite}
.wave.w2{animation-duration:18s;opacity:.55;bottom:12px}
.wave.w3{animation-duration:26s;opacity:.3;bottom:28px}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.8}100%{transform:translateY(-110vh) scale(1.1);opacity:0}}
.bub{position:absolute;bottom:-30px;border-radius:50%;border:1.5px solid rgba(165,243,252,.6);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),rgba(34,211,238,.08) 60%);animation:rise linear infinite}
@keyframes up{from{transform:translateY(110%)}to{transform:translateY(0)}}
.ln{display:block;overflow:hidden}
.ln>span{display:inline-block;transform:translateY(110%);animation:up 1.1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fu{opacity:0;animation:fadeup 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes scrolldot{0%{transform:translateY(0);opacity:1}80%{transform:translateY(46px);opacity:0}100%{opacity:0}}
.sdot{animation:scrolldot 1.8s ease-in infinite}
@keyframes shine{from{background-position:-200% 0}to{background-position:200% 0}}
.shine{background:linear-gradient(100deg,#eaf6ff 40%,#22d3ee 50%,#eaf6ff 60%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}

/* ---- marquee ---- */
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq{display:flex;width:max-content;animation:mq 30s linear infinite}
.mq.rev{animation-direction:reverse;animation-duration:40s}
.outline{color:transparent;-webkit-text-stroke:1.5px rgba(165,243,252,.55)}

/* ---- pipe draw ---- */
@keyframes draw{to{stroke-dashoffset:0}}
.pipe{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 3.5s cubic-bezier(.6,0,.2,1) .4s forwards}
@keyframes flow{to{stroke-dashoffset:-120}}
.flow{stroke-dasharray:14 106;animation:flow 1.6s linear infinite}

/* ---- scroll reveal (Chrome / Edge / Safari 26+) ---- */
@supports (animation-timeline: view()){
 .rv{animation:fadeup linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
 .rvl{animation:slidel linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
 .grow{animation:growx linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
}
@keyframes slidel{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- service cards ---- */
.card{position:relative;overflow:hidden;transition:translate .5s cubic-bezier(.2,.8,.2,1),border-color .4s}
.card::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,rgba(34,211,238,.0),rgba(34,211,238,.22));transition:height .6s cubic-bezier(.2,.8,.2,1)}
.card:hover{translate:0 -10px;border-color:#22d3ee}
.card:hover::before{height:100%}
.card:hover .ic{transform:rotate(-8deg) scale(1.12)}
.ic{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card>*{position:relative}

.btn{transition:transform .3s,box-shadow .3s,background .3s}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(34,211,238,.45)}
.btn.ghost:hover{background:rgba(34,211,238,.12)}
.sx .nav a{position:relative;color:#eaf6ff;text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:#22d3ee;transform:scaleX(0);transform-origin:right;transition:transform .4s}
.nav a:hover::after,.nav a.cur::after{transform:scaleX(1);transform-origin:left}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,211,238,.6)}100%{box-shadow:0 0 0 22px rgba(34,211,238,0)}}
.pulse{animation:pulse 2s ease-out infinite}

/* ---- MV pipe machine ---- */
@keyframes show{from{opacity:0}to{opacity:1}}
.flow2{stroke-dasharray:14 46;animation:flow 1.2s linear infinite,show .8s ease 2.6s both}
.flow2.slow{animation:flow 2.4s linear infinite,show .8s ease 3s both}
.pipe.d2{animation-delay:1s}.pipe.d3{animation-delay:1.6s}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 5s linear infinite}
.spin.rev{animation-direction:reverse;animation-duration:3s}
@keyframes needle{0%{transform:rotate(-70deg)}20%{transform:rotate(40deg)}35%{transform:rotate(15deg)}60%{transform:rotate(55deg)}80%{transform:rotate(-10deg)}100%{transform:rotate(-70deg)}}
.needle{transform-box:view-box;animation:needle 4.5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes drop{0%{transform:translateY(0) scale(.4);opacity:0}15%{transform:translateY(0) scale(1);opacity:1}85%{opacity:1}100%{transform:translateY(96px) scale(1,1.3);opacity:0}}
.drop{transform-box:fill-box;transform-origin:center top;animation:drop 1.4s cubic-bezier(.55,0,1,.45) infinite}
@keyframes ripple{0%{transform:scale(.1);opacity:0}10%{opacity:.9}100%{transform:scale(1.6);opacity:0}}
.ripple{transform-box:fill-box;transform-origin:center;animation:ripple 1.4s ease-out infinite;animation-delay:1.2s}
@keyframes tank{0%{transform:scaleY(.18)}50%{transform:scaleY(.88)}100%{transform:scaleY(.18)}}
.tank{transform-box:fill-box;transform-origin:center bottom;animation:tank 9s ease-in-out infinite}
@keyframes slosh{from{transform:translateX(0)}to{transform:translateX(-60px)}}
.slosh{animation:slosh 1.6s linear infinite}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:1}}
.glow{animation:glow 1.6s ease-in-out infinite}
@keyframes fillup{0%{background-position:0 100%}100%{background-position:0 0}}
.fillt{background:linear-gradient(180deg,transparent 50%,var(--ac) 50%);background-size:100% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px var(--ac);animation:fillup 3.5s cubic-bezier(.6,0,.3,1) infinite alternate}
.sx .flink{color:#c4d6e4;text-decoration:none;transition:color .3s,padding-left .3s}
.sx .flink:hover{color:#22d3ee;padding-left:8px}

/* ---- MV fit + background ---- */
.mvflow{filter:drop-shadow(0 0 6px rgba(34,211,238,.9))}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(2400px)}}
.sweep{animation:sweep 7s cubic-bezier(.5,0,.5,1) 3s infinite}
.mvshade{background:linear-gradient(90deg,rgba(4,18,31,.92) 0%,rgba(4,18,31,.7) 38%,rgba(4,18,31,.15) 75%,rgba(4,18,31,.05) 100%)}
.mvwave{height:min(120px,14svh)}
.mbtn{display:none}
@media (max-width:760px){
 .mvshade{background:linear-gradient(180deg,rgba(4,18,31,.35) 0%,rgba(4,18,31,.75) 45%,rgba(4,18,31,.9) 100%)}
 .nav .btn{padding:10px 16px!important;font-size:12px}
 .mvscroll{display:none!important}
}
@media (max-width:1000px){.nav a:not(.btn){display:none}.mbtn{display:inline-flex}}
@media (max-width:1100px){.svgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:600px){.svgrid{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}.svgrid .card{min-height:0!important}}
@media (max-height:520px){.mvlead{display:none}.mvscroll{display:none!important}}


@media (prefers-reduced-motion: reduce){.sx *,.sx *::before{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}