*{box-sizing:border-box}
    html,body{margin:0;min-height:100%;background:#061923;color:#f8fbfc}
    body{font-family:MotionNoto,"Noto Sans CJK SC","Microsoft YaHei",sans-serif}
    button{font:inherit}
    .hero{position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:560px;aspect-ratio:1920/800;background:#071b28}
    .scene,.camera,.scene-art{position:absolute;inset:0;pointer-events:none}
    .scene{z-index:-1;overflow:hidden}
    .scene::after{content:"";position:absolute;inset:0 0 0 57%;background:linear-gradient(90deg,transparent,rgba(3,20,30,.12) 24%,rgba(3,20,30,.16));pointer-events:none}
    .camera{transform-origin:40% 45%}
    .hero.is-loading .camera{transform:scale(1.005)}
    .hero.is-loading .brand,.hero.is-loading .eyebrow,.hero.is-loading .title-top,.hero.is-loading .title-bottom,.hero.is-loading .accent,.hero.is-loading .supporting,.hero.is-loading .trust-points,.hero.is-loading .footer{opacity:0}
    .art-desktop{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
    .factory-backdrop,.mobile-photo{display:none}
    .scene-art{transform:translate3d(var(--px,0px),var(--py,0px),0);will-change:transform}
    .factory-light{position:absolute;z-index:1;inset:0 0 0 58%;overflow:hidden;pointer-events:none;opacity:0}
    .factory-light::before{content:"";position:absolute;width:78%;height:135%;left:-16%;top:-24%;background:radial-gradient(ellipse at center,rgba(181,213,224,.075) 0%,rgba(181,213,224,.021) 40%,transparent 70%);transform:translateX(-35%)}
    .brand{position:absolute;top:5.85%;left:3.02%;display:flex;align-items:center;gap:25px;white-space:nowrap}
    .logo{display:block;width:clamp(136px,11.2vw,215px);height:auto}
    .brand-divider{display:block;width:1px;height:29px;background:rgba(244,249,250,.72)}
    .brand-name{font-size:clamp(13px,1.06vw,21px);letter-spacing:.035em;color:#f5f8f9}
    .headline{position:absolute;inset:0;margin:0;pointer-events:none}
    .headline img{position:absolute;display:block;height:auto;max-width:none}
    .eyebrow{position:absolute;left:60%;top:16.25%;margin:0;color:#d0e1e9;font-size:clamp(14px,.84vw,16px);line-height:1.5;letter-spacing:.16em;text-shadow:0 1px 6px #031723}
    .title-top{left:60%;top:21.5%;width:25.63%}
    .title-bottom{left:60%;top:37.3%;width:35.65%}
    .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .accent{position:absolute;left:60%;top:57%;width:59px;height:4px;background:#ed1c28;transform-origin:left center}
    .supporting{position:absolute;left:60%;right:3.8%;top:60.6%;margin:0;color:#edf5f8;font-size:clamp(16px,1.09vw,21px);line-height:1.6;letter-spacing:.015em;text-wrap:pretty;text-shadow:0 2px 7px #031723,0 0 12px rgba(3,23,35,.8)}
    .supporting span{display:block}
    .trust-points{position:absolute;left:60%;right:3.8%;top:79%;display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:20px 0 0;border-top:1px solid rgba(210,229,239,.28);list-style:none;text-shadow:0 1px 8px #031723}
    .trust-points li{padding-right:20px}
    .trust-points li+li{padding-left:23px;border-left:1px solid rgba(210,229,239,.24)}
    .trust-points strong{display:block;font-size:clamp(16px,1.13vw,22px);font-weight:700;line-height:1.45;letter-spacing:.045em;color:#f6fafc;white-space:nowrap}
    .trust-points small{display:block;margin-top:6px;font-size:clamp(14px,.83vw,16px);line-height:1.45;letter-spacing:.02em;color:#c4d5df;white-space:nowrap}
    .footer{position:absolute;right:3.15%;bottom:5.75%;display:flex;align-items:center;gap:24px;color:#dae5e9;opacity:.92;font:400 clamp(10px,.77vw,15px)/1 MotionNoto,sans-serif;letter-spacing:.23em;white-space:nowrap}
    .footer::before{content:"";display:block;width:38px;height:1px;background:#e2edf0;opacity:.65}
    .motion-controls{position:absolute;left:3%;bottom:5.15%;z-index:5;display:flex;gap:8px}
    .motion-control{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:87px;height:38px;padding:0 14px;border:1px solid rgba(244,249,251,.34);border-radius:999px;background:rgba(5,23,33,.52);color:#f4f9fb;font-size:12px;letter-spacing:.08em;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,border-color .2s,transform .2s}
    .motion-control.replay-control{min-width:38px;padding:0 11px}
    .motion-control:hover{background:rgba(17,45,60,.82);border-color:rgba(255,255,255,.7);transform:translateY(-2px)}
    .motion-control:focus-visible{outline:2px solid #fff;outline-offset:4px}
    .motion-icon{font-family:Arial,sans-serif;font-size:11px;letter-spacing:-2px;line-height:1;transform:translateX(-1px)}
    .hero.is-playing .camera{animation:camera-in 3s cubic-bezier(.23,.72,.22,1) both}
    .hero.is-playing .brand{animation:fade-in .45s ease-out both}
    .hero.is-playing .eyebrow{animation:fade-in .6s ease-out .25s both}
    .hero.is-playing .title-top{animation:title-in .75s cubic-bezier(.18,.76,.22,1) .45s both}
    .hero.is-playing .title-bottom{animation:title-in .85s cubic-bezier(.18,.76,.22,1) .7s both}
    .hero.is-playing .accent{animation:rule-in .55s cubic-bezier(.18,.76,.22,1) 1.35s both}
    .hero.is-playing .supporting{animation:copy-in .65s ease-out 1.75s both}
    .hero.is-playing .trust-points{animation:copy-in .75s ease-out 2.15s both}
    .hero.is-playing .footer{animation:fade-in .6s ease-out 2s both}
    .hero.is-playing .factory-light{animation:light-reveal 3.6s linear 2s both}
    .hero.is-playing .factory-light::before{animation:light-pass 3.6s ease-in-out 2s both}
    .hero.is-paused *, .hero.is-paused *::before{animation-play-state:paused!important}
    @keyframes camera-in{from{transform:scale(1.005)}to{transform:scale(1.03)}}
    @keyframes title-in{from{opacity:0;transform:translateY(24px);clip-path:inset(0 0 88% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
    @keyframes rule-in{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
    @keyframes copy-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fade-in{from{opacity:0}to{opacity:1}}
    @keyframes light-reveal{0%,100%{opacity:0}22%,65%{opacity:1}}
    @keyframes light-pass{from{transform:translateX(-35%)}to{transform:translateX(45%)}}
    @media(max-width:1199px) and (min-width:641px){
      .hero{min-height:560px}
      .eyebrow{left:52%;top:21.5%;font-size:14px;letter-spacing:.06em}
      .title-top{left:52%;top:27.4%;width:29%;max-width:260px}.title-bottom{left:52%;top:38.5%;width:42.2%;max-width:390px}
      .accent{left:52%;top:52%;width:44px;height:3px}
      .supporting{left:52%;right:3.8%;top:56%;line-height:1.6;font-size:16px}
      .supporting span{display:inline}
      .trust-points{left:52%;right:3.8%;top:81%;padding-top:15px}
      .trust-points li{padding-right:8px}.trust-points li+li{padding-left:10px}
      .trust-points strong{font-size:clamp(14px,1.45vw,16px);letter-spacing:0}.trust-points small{font-size:14px;margin-top:4px}
      .brand{gap:15px}.brand-divider{height:22px}
    }
    @media(min-width:900px) and (max-width:1199px){
      .eyebrow,.title-top,.title-bottom,.accent,.supporting,.trust-points{left:60%}
      .title-bottom{width:36.2%}
    }
    @media(max-width:640px){
      .hero{height:100svh;min-height:880px;max-height:1100px;aspect-ratio:auto}
      .art-desktop{display:none}
      .factory-backdrop{display:block;position:absolute;right:0;top:0;height:100%;width:auto;max-width:none;opacity:.64;filter:brightness(.60);mask-image:linear-gradient(to bottom,#000 0%,#000 57%,transparent 75%)}
      .mobile-photo{display:block;position:absolute;left:calc(clamp(814px,210vw,900px) * -.092);bottom:0;width:clamp(814px,210vw,900px);height:auto;max-width:none;mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 100%)}
      .scene::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,21,31,.45) 0%,rgba(4,21,31,.58) 50%,transparent 69%);pointer-events:none}
      .factory-light{display:none}
      .brand{top:29px;left:24px;gap:0}
      .logo{width:145px}
      .brand-divider,.brand-name{display:none}
      .eyebrow{left:24px;top:118px;font-size:14px;letter-spacing:.10em}
      .title-top{left:22px;top:150px;width:68%}
      .title-bottom{left:22px;top:221px;width:calc(100% - 44px)}
      .accent{left:25px;top:303px;width:48px;height:3px}
      .supporting{left:24px;top:328px;right:24px;width:auto;font-size:16px;line-height:1.6;letter-spacing:0}
      .supporting span{display:inline}
      .trust-points{left:24px;right:24px;top:481px;padding-top:16px}
      .trust-points li{padding-right:5px}.trust-points li+li{padding-left:10px}
      .trust-points strong{font-size:clamp(14px,4.1vw,16px);letter-spacing:0}
      .trust-points small{font-size:14px;line-height:1.5;margin-top:5px}
      .footer{left:24px;right:auto;top:579px;bottom:auto;gap:13px;font-size:12px;letter-spacing:.12em;text-shadow:0 1px 4px #00111a}
      .footer::before{width:21px}
      .motion-controls{left:auto;right:20px;top:23px;bottom:auto;gap:8px}
      .motion-control,.motion-control.replay-control{width:44px;min-width:44px;height:44px;padding:0;font-size:11px}
      .motion-label{display:none}
    }
    @media(min-width:440px) and (max-width:640px){
      .hero{min-height:1000px}
      .title-top{width:59%;top:153px}
      .title-bottom{width:calc(100% - 48px);top:260px}
      .accent{top:383px}.supporting{top:409px;font-size:18px}
      .trust-points{top:571px}.footer{top:664px}
    }
    @media(max-width:380px){
      .title-top{top:150px}.title-bottom{top:215px}.accent{top:283px}.supporting{top:309px}
      .trust-points{top:498px}.footer{top:596px}
    }
    @media(prefers-reduced-motion:reduce){
      .hero *, .hero *::before{animation:none!important;transition:none!important}
      .camera{transform:scale(1.03)!important}
      .brand,.eyebrow,.title-top,.title-bottom,.accent,.supporting,.trust-points,.footer{opacity:1!important;transform:none!important;clip-path:none!important}
      .factory-light,.motion-controls{display:none!important}
      .scene-art{transform:none!important}
    }