@font-face{font-family:Nunito;src:url("assets/Nunito.ttf") format("truetype");font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:#fffaf7;color:#342b32;font-family:Nunito,"Microsoft YaHei",system-ui,sans-serif;line-height:1.75}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,summary:focus-visible{outline:3px solid #9b365c;outline-offset:6px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.23}
h1{font-size:clamp(42px,5.7vw,76px);letter-spacing:-.045em;font-weight:800}
h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.035em}
h3{font-size:22px}
p{color:#6e5e67}
.wrap{width:min(1120px,calc(100% - 64px));margin:auto}
.skip{position:absolute;left:16px;top:-80px;background:white;padding:10px;z-index:9}
.skip:focus{top:12px}
header{height:104px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:900;text-decoration:none;letter-spacing:-1px}
.brand img{width:44px;height:44px;border-radius:13px}
nav{display:flex;gap:27px;align-items:center;font-size:14px;font-weight:800}
nav a{text-decoration:none}
.lang{border:1px solid #ddcfcf;border-radius:30px;padding:5px 15px}
.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;padding:55px 0 90px}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.15em;color:#a24966;margin-bottom:24px;text-transform:uppercase}
.hero h1 em{font-style:normal;color:#ab486c}
.lead{font-size:18px;max-width:470px;margin:28px 0 30px}
.actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#342b32;color:#fffaf7;border:1px solid #342b32;padding:14px 25px;border-radius:100px;font-weight:800;transition:transform .2s,background .2s}
.button:hover{background:#5f3e50;transform:translateY(-2px)}
.text-link{font-size:14px;font-weight:800}
.fine{font-size:12px;line-height:1.7}
.hero .fine{margin-top:17px}
.hero-art{position:relative;min-height:610px;display:flex;justify-content:center;align-items:center}
.halo{position:absolute;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f3cfcd 0%,#f7e4dc 53%,#fffaf7 71%)}
.phone{position:relative;width:252px;padding:7px;border:1px solid #e0d2cf;border-radius:34px;background:#fff;box-shadow:0 30px 70px #684c5625;transform:rotate(5deg)}
.phone img{border-radius:28px}
.label{position:absolute;z-index:1;background:#fffdf9;border:1px solid #ead8d7;padding:13px 20px;border-radius:18px;box-shadow:0 12px 30px #684c5610;font-size:14px;font-weight:800}
.label-top{top:58px;left:0;transform:rotate(-6deg)}
.label-bottom{bottom:65px;right:0;transform:rotate(-5deg)}
.label span{color:#ab486c}
.principles{border-top:1px solid #e9ded9;border-bottom:1px solid #e9ded9;display:flex;justify-content:space-around;gap:20px;padding:21px 0;font-size:14px;font-weight:800;flex-wrap:wrap}
.section{padding:104px 0}
.section-head{max-width:600px;margin-bottom:45px}
.section-head p{margin-top:20px;font-size:17px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step{border-top:1px solid #d8c6c6;padding-top:21px}
.number{display:block;color:#a24966;font-size:14px;margin-bottom:25px;font-weight:900}
.step p{margin-top:14px;font-size:15px}
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px;margin-top:90px}
.feature-copy p{margin-top:22px;font-size:17px}
.feature-copy .eyebrow{margin:0 0 20px}
.image-panel{background:#f6e9e1;border-radius:40px;min-height:470px;display:flex;align-items:center;justify-content:center;padding:35px;position:relative}
.entry-img{width:210px;border:6px solid #fff;border-radius:25px;box-shadow:0 12px 35px #684c5618}
.widget-img{width:240px;filter:drop-shadow(0 16px 18px #684c5620)}
.caption{font-size:12px;text-align:center;margin-top:15px}
.privacy{display:grid;grid-template-columns:1fr 1fr;gap:80px;background:#efece3;border-radius:36px;padding:55px}
.privacy p{margin-top:20px}
.privacy ul{margin:0;padding-left:22px;color:#5e5956}
.privacy li+li{margin-top:16px}
.faq{max-width:800px;margin:auto}
.faq h2{margin-bottom:35px}
details{border-bottom:1px solid #e1d3d1;padding:22px 0}
summary{cursor:pointer;font-size:17px;font-weight:800}
details p{margin-top:15px;font-size:15px}
.download{background:#f4d8d9;border-radius:40px;padding:60px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;position:relative}
.download p{margin:20px 0 25px;max-width:540px}
.download img{width:180px}
.download .fine{margin-bottom:0}
footer{border-top:1px solid #e9ded9;padding:30px 0 40px;display:flex;justify-content:space-between;gap:24px;font-size:12px;color:#6e5e67}
footer div{display:flex;gap:20px;flex-wrap:wrap}
footer a{text-decoration:none}
.bottom-space{padding-bottom:90px}
@media(max-width:850px){.wrap{width:calc(100% - 40px)}
nav{gap:16px}
.hero{gap:20px}
.hero-art{min-height:520px}
.phone{width:220px}
.label{font-size:12px;padding:10px 13px}
.label-top{top:24px}
.label-bottom{bottom:26px}
.feature{gap:40px}
.privacy{gap:35px;padding:35px}
.download{padding:40px}
.download img{width:130px}
}
@media(max-width:620px){header{height:85px}
.brand{font-size:22px}
.brand img{width:36px;height:36px}
nav .desktop{display:none}
nav{gap:12px}
.hero{grid-template-columns:1fr;padding:35px 0 45px;gap:30px}
.hero-art{min-height:535px;max-width:370px;width:100%;margin:auto}
.phone{width:226px}
.label-top{top:25px;left:0}
.label-bottom{bottom:30px;right:0}
.lead{font-size:17px;margin:23px 0}
.eyebrow{margin-bottom:20px}
.principles{font-size:12px;gap:12px}
.section{padding:65px 0}
.steps{grid-template-columns:1fr;gap:30px}
.number{margin-bottom:12px}
.feature{grid-template-columns:1fr;gap:30px;margin-top:60px}
.feature-copy{order:-1}
.image-panel{min-height:370px;border-radius:28px;padding:25px}
.entry-img{width:180px}
.privacy{grid-template-columns:1fr;gap:25px;padding:30px;border-radius:28px}
.download{grid-template-columns:1fr;padding:32px;border-radius:28px}
.download img{display:none}
.download .actions{gap:15px}
.download .button{width:100%;font-size:14px}
footer{flex-direction:column}
.bottom-space{padding-bottom:60px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.button{transition:none}
.button:hover{transform:none}
}

/* Review round 1: preserve the existing palette, type and page composition. */
.hero-pig{position:absolute;z-index:2;left:-24px;bottom:10px;width:242px;pointer-events:none}
.hero-art .label-bottom{bottom:45px;right:-5px}
.film-link{color:#93415e}
.film{display:grid;grid-template-columns:1fr 1.55fr;gap:56px;align-items:center;padding-top:65px}
.film-copy h2{font-size:36px}
.film-copy>p:not(.eyebrow){margin-top:18px;font-size:16px}
.film-copy .eyebrow{margin-bottom:18px}
.film-description{padding:16px 0 0;border:0}
.film-description summary{font-size:13px;color:#6e5e67}
.film-description p{font-size:13px}
.film-player{position:relative;border-radius:24px;overflow:hidden;background:#f6e9e1;border:1px solid #e8d8d3}
.film-player video{width:100%;height:auto;aspect-ratio:16/9;display:block}
.play-film{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #342b32;border-radius:50px;background:#342b32;color:#fffaf7;padding:15px 23px;white-space:nowrap;font:800 14px Nunito,"Microsoft YaHei",system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 25px #342b3230}
.play-film[hidden]{display:none}
.play-film span{margin-right:8px}
button:focus-visible,video:focus-visible{outline:3px solid #9b365c;outline-offset:5px}
.film-status{margin-top:14px;min-height:21px}
.film-file{color:#6e5e67}
@media(max-width:850px){.hero-pig{left:-25px;bottom:0;width:210px}.hero-art .label-bottom{bottom:8px;right:0}.film{gap:30px;grid-template-columns:1fr 1.35fr}.film-copy h2{font-size:30px}}
@media(max-width:620px){.hero-pig{left:-25px;bottom:-14px;width:210px}.hero-art .label-bottom{bottom:8px;right:0}.film{grid-template-columns:1fr;padding-top:50px;gap:24px}.film-player{border-radius:20px}.film-copy h2{font-size:30px}.film-status{font-size:12px}.hero .actions{gap:16px}}

.film-player:focus-within{outline:3px solid #9b365c;outline-offset:5px}
@media(max-width:620px){.download h2{font-size:clamp(24px,6.7vw,28px)}}

/* Final QA: readable supporting text and touch targets; locked composition retained. */
@media(max-width:620px){
.fine,.caption,footer,.film-status,.film-description summary,.film-description p{font-size:14px}
.brand,.lang,.text-link,.film-file,.download .fine a,footer a{min-height:44px;display:inline-flex;align-items:center}
.faq summary,.film-description summary{min-height:44px;padding:7px 0}
}

/* Keep the existing character position and animate only its image. */
.hero-pig{line-height:0}
.pig-touch{position:absolute;left:18%;top:18%;width:64%;height:72%;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;touch-action:manipulation;border-radius:42%}
.hero-pig img{width:100%;height:auto;pointer-events:none}
.pig-touch:focus-visible{outline:3px solid #9b365c;outline-offset:4px}
.hero-pig:active img{filter:brightness(.97)}

/* Focused postlaunch copy, install help and external feedback. */
.positioning{display:block;color:#342b32;font-size:21px;line-height:1.5;font-weight:800;margin-bottom:10px}
.installation{margin-top:27px;border-top:1px solid #d4b4b8;padding-top:23px}
.installation h3{font-size:17px}
.installation ol{padding-left:23px;margin:14px 0 0;color:#57464f;font-size:15px}
.installation li+li{margin-top:8px}
.download .installation .fine{margin:14px 0 0}
.download-visual{display:flex;flex-direction:column;align-items:center;gap:25px;width:180px}
.qr-link{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12px;line-height:1.6;color:#57464f}
.download .site-qr{width:148px;height:148px;border-radius:10px;border:8px solid white;background:white}
.feedback{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding:0 0 80px}
.feedback h2{font-size:clamp(27px,3vw,35px)}
.feedback p{margin-top:18px;max-width:520px;font-size:16px}
.feedback .fine{font-size:13px}
@media(max-width:620px){.positioning{font-size:19px}.download-visual{display:none}.feedback{grid-template-columns:1fr;gap:24px;padding-bottom:60px}.feedback h2{font-size:27px}.feedback .fine{font-size:14px}.feedback .fine a{display:inline-flex;align-items:center;min-height:44px}.installation ol{font-size:15px}}