:root {
  --navy: #071723;
  --navy-2: #0b2232;
  --blue: #00a8e8;
  --cyan: #44d5ff;
  --ice: #eaf1f4;
  --steel: #9aaab3;
  --white: #f7fafb;
  --ink: #102330;
  --line: rgba(255,255,255,.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Noto Sans TC", sans-serif; background: var(--ice); color: var(--ink); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.site-header { position: absolute; top: 0; left: 0; width: 100%; height: 94px; padding: 0 4.5vw; display: flex; align-items: center; justify-content: space-between; color: white; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.13); }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-logo { width: 104px; height: 46px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; background: #fff; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-name { display: flex; flex-direction: column; }
.brand-name b { font-size: 16px; letter-spacing: .06em; white-space: nowrap; }
.brand-name small { margin-top: 2px; font-family: "Barlow Condensed", sans-serif; font-size: 8px; letter-spacing: .2em; color: #9fc2d3; }
nav { display: flex; align-items: center; gap: 2.8vw; font-size: 13px; }
nav a { transition: color .2s; }
nav a:hover { color: var(--cyan); }
.header-cta { border: 1px solid rgba(255,255,255,.5); padding: 11px 17px; font-size: 12px; }
.header-cta span { color: var(--cyan); margin-left: 18px; }
.menu-button { display: none; border: 0; background: transparent; }
.hero { min-height: 820px; height: 100vh; position: relative; overflow: hidden; color: white; background: #05131e; padding: 175px 6vw 55px; display: flex; flex-direction: column; justify-content: center; }
.hero-photo { position:absolute; inset:0; z-index:0; background-image:linear-gradient(90deg,rgba(3,14,23,.98) 0%,rgba(4,18,29,.9) 34%,rgba(4,18,29,.3) 67%,rgba(4,18,29,.12) 100%),linear-gradient(0deg,rgba(3,15,24,.8),transparent 45%),url("food-grade-ball-valve-hero.png"); background-size:cover; background-position:center; }
.grid-lines { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg, black, transparent 75%); }
.hero-copy { width: 54%; position: relative; z-index: 3; }
.kicker { color: #9fc2d3; font: 500 12px "Barlow Condensed", sans-serif; letter-spacing: .25em; display: flex; align-items: center; gap: 12px; }
.kicker span { width: 36px; height: 1px; background: var(--blue); }
.hero h1 { font-size: clamp(72px, 9vw, 138px); letter-spacing: -.07em; line-height: .84; margin: 38px 0 46px; font-weight: 700; }
.hero h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px #7bd8f5; }
.hero h1 i { color: var(--blue); font-style: normal; }
.hero-intro { max-width: 580px; line-height: 1.9; color: #b8cbd5; font-size: 15px; }
.hero-actions { display: flex; align-items: center; gap: 35px; margin-top: 40px; }
.button { padding: 16px 21px; font-size: 13px; display: inline-flex; gap: 35px; }
.button-primary { background: var(--blue); color: white; }
.text-link { color: #c9d9e1; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 6px; }
.text-link span { margin-left: 18px; color: var(--cyan); }
.hero-machine { display:none; position: absolute; width: 48vw; height: 48vw; max-width: 710px; max-height: 710px; right: -2vw; top: 50%; transform: translateY(-48%); }
.ring { position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ring-outer { width: 100%; height: 100%; border: 1px solid rgba(68,213,255,.23); box-shadow: 0 0 80px rgba(0,168,232,.12), inset 0 0 80px rgba(0,168,232,.08); animation: rotate 30s linear infinite; }
.ring-outer::before, .ring-outer::after { content: ""; position: absolute; inset: 6%; border: 2px dashed rgba(255,255,255,.08); border-radius: 50%; }
.ring-outer::after { inset: 15%; border-style: solid; border-color: rgba(255,255,255,.08); }
.ring-outer span { position: absolute; width: 10px; height: 10px; background: var(--cyan); border-radius: 50%; left: 14%; top: 16%; box-shadow: 0 0 18px var(--cyan); }
.ring-mid { width: 62%; height: 62%; border: 22px solid #163847; box-shadow: inset 0 0 0 2px #315564, 0 30px 50px rgba(0,0,0,.4); background: radial-gradient(circle, #15384a, #081b28); }
.ring-inner { width: 37%; height: 37%; background: #0b2737; border: 10px solid #8297a1; box-shadow: inset 0 0 0 7px #193e50, 0 0 35px rgba(0,168,232,.55); overflow: hidden; }
.turbine { position: absolute; inset: 13%; animation: rotate 8s linear infinite; }
.turbine i { position: absolute; width: 45%; height: 20%; left: 50%; top: 40%; transform-origin: 0 50%; background: linear-gradient(90deg, #d9e5e8, #637d88); clip-path: polygon(0 35%,100% 0,85% 100%,0 65%); }
.turbine i:nth-child(1) { transform: rotate(0deg); }.turbine i:nth-child(2) { transform: rotate(60deg); }.turbine i:nth-child(3) { transform: rotate(120deg); }.turbine i:nth-child(4) { transform: rotate(180deg); }.turbine i:nth-child(5) { transform: rotate(240deg); }.turbine i:nth-child(6) { transform: rotate(300deg); }
.pipe { position: absolute; background: linear-gradient(#68808b,#162f3b 48%,#8398a1); border: 1px solid #8196a0; z-index: -1; }
.pipe-a { width: 55%; height: 11%; left: -12%; top: 45%; }
.pipe-b { width: 11%; height: 43%; right: 16%; top: -7%; }
.pipe-c { width: 11%; height: 40%; left: 30%; bottom: -6%; }
.tech-label { position: absolute; z-index: 5; font: 500 9px "Barlow Condensed"; letter-spacing: .2em; color: #6fa5bc; }
.label-a { top: 13%; left: 6%; }.label-b { right: 4%; bottom: 19%; }
.flow-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.dot-a { left: 6%; top: 47%; animation: flow-x 3s linear infinite; }.dot-b { right: 19%; top: 0; animation: flow-y 2.5s linear infinite; }
@keyframes rotate { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes flow-x { to { transform: translateX(150px); opacity: 0; } }
@keyframes flow-y { to { transform: translateY(150px); opacity: 0; } }
.hero-stats { position: absolute; right: 6vw; bottom: 46px; display: flex; z-index: 3; }
.hero-stats div { min-width: 118px; border-left: 1px solid var(--line); padding-left: 16px; display: flex; flex-direction: column; }
.hero-stats strong { color: var(--blue); font: 600 18px "Barlow Condensed"; }
.hero-stats span { margin-top: 5px; font-size: 11px; color: #8eacba; }
.scroll-cue { position: absolute; left: 6vw; bottom: 42px; display: flex; align-items: center; gap: 18px; font: 500 9px "Barlow Condensed"; letter-spacing: .24em; color: #7696a5; z-index: 3; }
.scroll-cue i { font-style: normal; font-size: 16px; color: var(--cyan); }
.trust-strip { background: var(--blue); color: white; overflow: hidden; padding: 15px 0; transform: rotate(-.7deg) scale(1.01); }
.trust-track { display: flex; width: max-content; align-items: center; gap: 42px; animation: marquee 26s linear infinite; font-size: 13px; letter-spacing: .16em; }
.trust-track i { width: 5px; height: 5px; border-radius: 50%; background: var(--navy); }
@keyframes marquee { to { transform: translateX(-50%); } }
.section { padding: 130px 6vw; }
.section-tag { font: 600 11px "Barlow Condensed"; color: #607784; letter-spacing: .22em; display: flex; align-items: center; gap: 14px; }
.section-tag span { color: var(--blue); }
.section-tag::after { content: ""; height: 1px; width: 42px; background: #b3c2c9; }
.section-tag.light { color: #7495a6; }.section-tag.light::after { background: #38505e; }
.about-heading { display: grid; grid-template-columns: 1fr 3fr; margin: 60px 0 70px; }
.about-heading > p, .solutions-head > div > p, .industry-copy > p { color: #71838c; font-size: 13px; }
.about h2, .solutions h2, .industries h2 { font-size: clamp(42px, 5.2vw, 76px); line-height: 1.17; letter-spacing: -.055em; margin: 0; font-weight: 600; }
.about h2 span, .industries h2 span { color: var(--blue); }
.about-content { border-top: 1px solid #bdcbd1; padding: 38px 0 80px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 12vw; }
.about-content p { margin: 0; line-height: 1.95; }
.about-content .lead { font-size: 21px; font-weight: 500; }
.about-body { font-size: 14px; color: #536975; }
.about-body a { display: inline-block; margin-top: 25px; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 6px; font-weight: 600; }
.about-body a span { color: var(--blue); margin-left: 22px; }
.value-cards { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #bdcbd1; border-bottom: 1px solid #bdcbd1; }
.value-card { padding: 32px 4vw 40px 0; border-right: 1px solid #bdcbd1; position: relative; }
.value-card + .value-card { padding-left: 4vw; }
.value-card:last-child { border-right: 0; }
.value-card > span { position: absolute; top: 30px; right: 30px; font: 600 12px "Barlow Condensed"; color: #89a0aa; }
.value-card h3 { margin: 25px 0 10px; font-size: 22px; }
.value-card p { color: #687d87; font-size: 13px; line-height: 1.75; max-width: 290px; }
.value-icon { width: 54px; height: 54px; position: relative; }
.target-icon { border: 1px solid var(--blue); border-radius: 50%; box-shadow: inset 0 0 0 9px var(--ice), inset 0 0 0 10px var(--blue); }
.target-icon::after { content: ""; position: absolute; width: 9px; height: 9px; background: var(--blue); border-radius: 50%; left: 21px; top: 21px; }
.shield-icon { border: 2px solid var(--blue); border-radius: 50% 50% 45% 45%; clip-path: polygon(8% 0,92% 0,88% 77%,50% 100%,12% 77%); }
.shield-icon::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--blue); font-size: 20px; }
.link-icon::before, .link-icon::after { content: ""; position: absolute; width: 31px; height: 17px; border: 2px solid var(--blue); border-radius: 20px; transform: rotate(-45deg); }
.link-icon::before { left: 2px; top: 25px; }.link-icon::after { right: 2px; top: 10px; }
.solutions { background: var(--navy); color: white; }
.solutions-head { display: grid; grid-template-columns: 1fr 3fr; margin-bottom: 90px; }
.solutions h2 span { color: #7692a1; }
.solution-list { border-top: 1px solid var(--line); }
.solution-row { display: grid; grid-template-columns: 45px 190px 1fr auto; gap: 30px; align-items: center; padding: 42px 0; border-bottom: 1px solid var(--line); transition: background .25s, padding .25s; }
.solution-row:hover { background: rgba(0,168,232,.06); padding-left: 18px; padding-right: 18px; }
.solution-no { align-self: start; font: 600 12px "Barlow Condensed"; color: var(--blue); }
.solution-symbol { width: 130px; height: 110px; margin: auto; position: relative; opacity: .8; }
.pump-symbol { border: 12px solid #607986; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--navy), inset 0 0 0 6px #607986; }
.pump-symbol::before { content:""; position:absolute; width:55px; height:34px; background:#607986; left:-48px; top:25px; }.pump-symbol::after { content:""; position:absolute; width:28px; height:50px; background:#607986; right:-28px; top:18px; }
.pump-symbol i { position:absolute; width:35px; height:35px; border-radius:50%; background:var(--blue); left:35px; top:25px; }
.valve-symbol::before { content:""; position:absolute; width:55px; height:55px; border:9px solid #607986; transform:rotate(45deg); left:36px; top:34px; }.valve-symbol::after { content:""; position:absolute; width:76px; height:8px; background:#607986; left:27px; top:5px; box-shadow: 32px 30px 0 -1px #607986; }
.system-symbol { background: linear-gradient(90deg,transparent 47%,#607986 48%,#607986 53%,transparent 54%), linear-gradient(transparent 47%,#607986 48%,#607986 53%,transparent 54%); }
.system-symbol::before,.system-symbol::after { content:""; position:absolute; width:30px; height:30px; border:6px solid var(--blue); border-radius:50%; }.system-symbol::before { left:8px; top:8px; }.system-symbol::after { right:8px; bottom:8px; }
.service-symbol { border: 9px solid #607986; border-radius: 50%; width: 95px; height: 95px; margin-top: 8px; }
.service-symbol::after { content:""; position:absolute; width:35px; height:16px; border:7px solid var(--blue); border-top:0; transform:rotate(-45deg); top:34px; left:24px; }
.solution-copy { display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: start; gap: 40px; }
.solution-copy h3 { margin: 0; font-size: 28px; font-weight: 500; }
.solution-copy p { color: #91a6b1; font-size: 13px; line-height: 1.8; margin: 0; }
.solution-copy ul { margin: 0; padding: 0; list-style: none; color: #77909c; font-size: 11px; line-height: 2; }
.solution-copy li::before { content: "—"; margin-right: 9px; color: var(--blue); }
.row-arrow { font-size: 25px; color: var(--blue); }
.industry-layout { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9vw; margin-top: 70px; }
.industry-intro { color: #647984; font-size: 14px; line-height: 1.9; max-width: 470px; margin-top: 40px; }
.industry-grid { display: grid; grid-template-columns: 1fr 1fr; }
.industry-item { padding: 25px 25px 35px; min-height: 240px; border-left: 1px solid #bdcbd1; border-bottom: 1px solid #bdcbd1; position: relative; }
.industry-item:nth-child(-n+2) { border-top: 1px solid #bdcbd1; }
.industry-item b { font: 600 11px "Barlow Condensed"; color: #82969f; position: absolute; right: 20px; top: 18px; }
.industry-item h3 { font-size: 19px; margin: 30px 0 6px; }
.industry-item p { font: 500 11px "Barlow Condensed"; color: #879ba4; letter-spacing: .08em; }
.industry-icon { display: block; width: 65px; height: 65px; margin-top: 20px; position: relative; color: var(--blue); }
.chemical { border: 2px solid currentColor; border-radius: 50% 50% 45% 45%; clip-path: polygon(30% 0,70% 0,70% 35%,100% 85%,90% 100%,10% 100%,0 85%,30% 35%); }
.chemical::after { content:""; position:absolute; left:5px; right:5px; bottom:10px; height:20px; background:var(--blue); opacity:.25; }
.water::before { content:""; position:absolute; width:40px; height:52px; left:12px; background:var(--blue); border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; clip-path: polygon(50% 0,100% 65%,85% 100%,15% 100%,0 65%); }
.factory { border-bottom: 8px solid currentColor; }
.factory::before { content:""; position:absolute; left:3px; bottom:8px; width:58px; height:42px; border:2px solid currentColor; clip-path: polygon(0 40%,35% 10%,35% 40%,70% 10%,70% 40%,100% 15%,100% 100%,0 100%); background:rgba(0,168,232,.12); }
.medical { border: 2px solid currentColor; border-radius: 50%; background: radial-gradient(circle at 25% 28%, rgba(0,168,232,.32) 0 7px, transparent 8px), radial-gradient(circle at 74% 70%, rgba(50,213,164,.32) 0 6px, transparent 7px), rgba(0,168,232,.08); box-shadow: inset 0 0 0 8px rgba(0,168,232,.08); }
.medical::before, .medical::after { content:""; position:absolute; left:50%; top:50%; background:currentColor; border-radius:999px; transform:translate(-50%,-50%); }
.medical::before { width:34px; height:10px; }
.medical::after { width:10px; height:34px; }
.food::before { content:""; position:absolute; left:10px; top:8px; width:18px; height:46px; border-left:4px solid currentColor; border-right:4px solid currentColor; border-radius:10px 10px 14px 14px; box-shadow:8px 0 0 -5px currentColor; }
.food::after { content:""; position:absolute; right:6px; top:15px; width:32px; height:24px; border:2px solid currentColor; border-radius:100% 0 100% 0; transform:rotate(-28deg); background:rgba(50,213,164,.18); box-shadow:-10px 18px 0 -7px rgba(0,168,232,.35); }
.process { background: var(--navy-2); color: white; padding: 100px 6vw; }
.process-head { display: flex; justify-content: space-between; align-items: end; }
.process-head h2 { font-size: clamp(32px,4vw,56px); margin: 0; letter-spacing: -.045em; }
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 70px; }
.process-step { border-top: 1px solid #47606d; padding: 25px 35px 0 0; position: relative; }
.process-step b { font: 600 12px "Barlow Condensed"; color: var(--blue); }
.process-step > span { position: absolute; width: 9px; height: 9px; background: var(--blue); border-radius: 50%; top: -5px; left: 0; box-shadow: 0 0 0 6px rgba(0,168,232,.13); }
.process-step h3 { font-size: 20px; margin: 40px 0 10px; }
.process-step p { font-size: 12px; line-height: 1.7; color: #7f99a6; }
.contact { padding: 130px 6vw 60px; background: #06131c; color: white; text-align: center; min-height: 720px; position: relative; overflow: hidden; }
.contact-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle,rgba(0,168,232,.19),transparent 65%); left:50%; top:45%; transform:translate(-50%,-50%); }
.contact-kicker { color: var(--blue); font: 600 12px "Barlow Condensed"; letter-spacing: .3em; position:relative; }
.contact h2 { font-size: clamp(50px, 7vw, 100px); line-height: 1.08; letter-spacing: -.06em; margin: 35px 0 28px; position: relative; }
.contact h2 span { color: transparent; -webkit-text-stroke: 1px #66a6c0; }
.contact-note { color: #829ba7; font-size: 13px; line-height: 1.8; position:relative; }
.contact-form { width:min(900px,100%); margin:35px auto 70px; position:relative; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; text-align:left; }
.contact-form label { color:#7f99a6; font-size:12px; letter-spacing:.06em; }
.contact-form input, .contact-form textarea { width:100%; margin-top:8px; padding:15px 16px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.045); color:white; font:inherit; outline:none; transition:.25s; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--blue); background:rgba(0,168,232,.08); box-shadow:0 0 0 4px rgba(0,168,232,.08); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:#557382; }
.form-wide { grid-column:1 / -1; }
.contact-button { width: 130px; height: 130px; border-radius: 50%; margin: 34px auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--blue); background:transparent; color: white; gap: 8px; position:relative; transition:.3s; cursor:pointer; font:inherit; }
.contact-button b { color: var(--cyan); font-size:20px; font-weight:400; }
.contact-button:hover { background:var(--blue); transform:rotate(7deg); }
.contact-info { border-top: 1px solid var(--line); padding-top: 30px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.5fr; text-align:left; position:relative; }
.contact-info small { color:#557382; font:500 9px "Barlow Condensed"; letter-spacing:.18em; }
.contact-info p { color:#b2c4cd; font-size:12px; }
footer { background:#030b10; color:#718995; padding:38px 6vw; display:flex; align-items:center; justify-content:space-between; font-size:10px; letter-spacing:.06em; border-top:1px solid rgba(255,255,255,.07); }
.footer-brand { color:white; transform:scale(.85); transform-origin:left center; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width:900px) {
  .site-header { height:76px; padding:0 5vw; }.brand{gap:8px}.brand-logo{width:72px;height:34px}.brand-name b{font-size:12px;letter-spacing:.02em}.brand-name small{font-size:6px;letter-spacing:.08em}nav,.header-cta{display:none}.menu-button{display:block;width:40px;height:40px}.menu-button span{display:block;width:24px;height:1px;background:#fff;margin:7px auto}
  nav.open { display:flex; position:absolute; top:76px; left:0; width:100%; padding:28px 6vw; flex-direction:column; align-items:flex-start; gap:24px; background:#071723; border-top:1px solid rgba(255,255,255,.1); box-shadow:0 20px 35px rgba(0,0,0,.3); }
  .hero { min-height:780px; padding:125px 6vw 60px; justify-content:flex-start; }.hero-photo{background-position:62% center;background-image:linear-gradient(90deg,rgba(3,14,23,.97) 0%,rgba(4,18,29,.82) 60%,rgba(4,18,29,.3) 100%),linear-gradient(0deg,rgba(3,15,24,.88),transparent 45%),url("food-grade-ball-valve-hero.png")}.hero-copy{width:100%}.hero h1{font-size:clamp(60px,18vw,95px);margin:30px 0}.hero-intro{max-width:80%;font-size:13px}.hero-machine{display:none}.hero-stats{display:none}.scroll-cue{bottom:28px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}
  .section{padding:90px 6vw}.about-heading,.solutions-head,.industry-layout{grid-template-columns:1fr;gap:28px}.about-content{grid-template-columns:1fr;gap:30px}.value-cards{grid-template-columns:1fr}.value-card,.value-card+.value-card{padding:30px;border-right:0;border-bottom:1px solid #bdcbd1}
  .solution-row{grid-template-columns:30px 90px 1fr;gap:15px}.solution-symbol{width:75px;height:70px;transform:scale(.6)}.solution-copy{grid-template-columns:1fr}.solution-copy p,.solution-copy ul{grid-column:1}.row-arrow{display:none}
  .industry-layout{gap:60px}.process-head{align-items:flex-start;flex-direction:column;gap:35px}.process-steps{grid-template-columns:1fr 1fr;gap:45px 0}.contact-info{grid-template-columns:1fr 1fr;gap:20px}.contact{padding-top:95px}.form-grid{grid-template-columns:1fr}footer{flex-direction:column;gap:24px;text-align:center}.footer-brand{transform:scale(.8);transform-origin:center}
}
@media (max-width:520px) {
  .industry-grid{grid-template-columns:1fr}.industry-item:nth-child(2){border-top:0}.solution-row{grid-template-columns:28px 1fr}.solution-symbol{display:none}.process-steps{grid-template-columns:1fr}.contact-info{grid-template-columns:1fr;text-align:center}.contact h2{font-size:14vw}.contact-button{margin-bottom:55px}
}
@media (prefers-reduced-motion:reduce) { *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }