:root{--tx-primary:#ff5a5f;--tx-primary-dark:#e04348;--tx-primary-light:#ff8a8d;--tx-secondary:#ffb347;--tx-accent:#7c5cff;--tx-gradient:linear-gradient(135deg,#ff5a5f 0%,#ff8a5c 45%,#ffb347 100%);--tx-gradient-soft:linear-gradient(135deg,rgba(255,90,95,.12),rgba(255,179,71,.12));--tx-bg:#fff8f7;--tx-bg-alt:#ffffff;--tx-surface:rgba(255,255,255,.72);--tx-surface-solid:#ffffff;--tx-border:rgba(255,90,95,.16);--tx-text:#2b2024;--tx-text-soft:#6b5a60;--tx-text-mute:#9a8a90;--tx-shadow-sm:0 2px 8px rgba(255,90,95,.08);--tx-shadow:0 8px 28px rgba(255,90,95,.12);--tx-shadow-lg:0 18px 48px rgba(255,90,95,.18);--tx-radius-sm:10px;--tx-radius:18px;--tx-radius-lg:28px;--tx-blur:blur(16px) saturate(160%);--tx-speed:.35s;--tx-ease:cubic-bezier(.22,.68,.35,1);--tx-max:1200px}

@media (prefers-color-scheme:dark){
:root{--tx-bg:#141013;--tx-bg-alt:#1c1619;--tx-surface:rgba(38,30,34,.66);--tx-surface-solid:#241c20;--tx-border:rgba(255,138,141,.18);--tx-text:#f6eef0;--tx-text-soft:#c9b8bd;--tx-text-mute:#8f7d83;--tx-shadow-sm:0 2px 8px rgba(0,0,0,.4);--tx-shadow:0 8px 28px rgba(0,0,0,.5);--tx-shadow-lg:0 18px 48px rgba(0,0,0,.6);--tx-gradient-soft:linear-gradient(135deg,rgba(255,90,95,.18),rgba(124,92,255,.16))}
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
background:var(--tx-bg);
color:var(--tx-text);
line-height:1.75;
font-size:16px;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
background-image:radial-gradient(circle at 12% 8%,rgba(255,90,95,.10),transparent 42%),radial-gradient(circle at 88% 12%,rgba(124,92,255,.10),transparent 40%),radial-gradient(circle at 50% 100%,rgba(255,179,71,.08),transparent 45%);
background-attachment:fixed;
transition:background-color var(--tx-speed) var(--tx-ease),color var(--tx-speed) var(--tx-ease)}

img,svg,video{max-width:100%;height:auto;display:block}

a{color:var(--tx-primary);text-decoration:none;transition:color var(--tx-speed) var(--tx-ease),opacity var(--tx-speed) var(--tx-ease)}
a:hover{color:var(--tx-primary-dark)}

ul,ol{list-style:none}

h1,h2,h3,h4,h5,h6{line-height:1.3;font-weight:800;color:var(--tx-text);letter-spacing:.2px}

h1{font-size:clamp(1.75rem,4.4vw,3rem)}
h2{font-size:clamp(1.4rem,3vw,2.15rem)}
h3{font-size:clamp(1.12rem,2.1vw,1.5rem)}
h4{font-size:clamp(1rem,1.7vw,1.2rem)}

p{color:var(--tx-text-soft)}

::selection{background:rgba(255,90,95,.28);color:var(--tx-text)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--tx-primary),var(--tx-secondary));border-radius:20px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--tx-primary-dark);background-clip:padding-box}

header{
position:sticky;
top:0;
z-index:1000;
background:var(--tx-surface);
-webkit-backdrop-filter:var(--tx-blur);
backdrop-filter:var(--tx-blur);
border-bottom:1px solid var(--tx-border);
box-shadow:var(--tx-shadow-sm);
transition:background var(--tx-speed) var(--tx-ease),box-shadow var(--tx-speed) var(--tx-ease)}

header nav{
max-width:var(--tx-max);
margin:0 auto;
padding:12px 22px;
display:flex;
align-items:center;
gap:20px;
flex-wrap:wrap}

header nav>p{margin:0;flex:0 0 auto}

header nav>p a{
display:inline-flex;
align-items:center;
gap:9px;
font-size:1.22rem;
font-weight:900;
letter-spacing:.5px;
background:var(--tx-gradient);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
transition:filter var(--tx-speed) var(--tx-ease),transform var(--tx-speed) var(--tx-ease)}

header nav>p a::before{
content:"";
width:13px;
height:13px;
border-radius:50%;
background:var(--tx-gradient);
box-shadow:0 0 0 4px rgba(255,90,95,.18);
flex:0 0 auto}

header nav>p a:hover{filter:brightness(1.12);transform:translateY(-1px)}

header nav ul{
display:flex;
align-items:center;
gap:4px;
flex:1 1 auto;
flex-wrap:wrap;
justify-content:flex-end}

header nav ul li a{
display:inline-block;
padding:8px 13px;
border-radius:999px;
font-size:.92rem;
font-weight:600;
color:var(--tx-text-soft);
position:relative;
transition:color var(--tx-speed) var(--tx-ease),background var(--tx-speed) var(--tx-ease),transform var(--tx-speed) var(--tx-ease)}

header nav ul li a::after{
content:"";
position:absolute;
left:50%;
bottom:3px;
width:0;
height:2px;
border-radius:2px;
background:var(--tx-gradient);
transform:translateX(-50%);
transition:width var(--tx-speed) var(--tx-ease)}

header nav ul li a:hover{
color:var(--tx-primary);
background:var(--tx-gradient-soft);
transform:translateY(-2px)}

header nav ul li a:hover::after{width:52%}

main{
max-width:var(--tx-max);
margin:0 auto;
padding:0 22px 70px;
display:flex;
flex-direction:column;
gap:30px}

main>section{
position:relative;
background:var(--tx-surface);
-webkit-backdrop-filter:var(--tx-blur);
backdrop-filter:var(--tx-blur);
border:1px solid var(--tx-border);
border-radius:var(--tx-radius-lg);
padding:clamp(24px,4vw,46px);
box-shadow:var(--tx-shadow);
transition:transform var(--tx-speed) var(--tx-ease),box-shadow var(--tx-speed) var(--tx-ease),border-color var(--tx-speed) var(--tx-ease);
animation:tx-rise .7s var(--tx-ease) both}

@keyframes tx-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

main>section:nth-child(1){animation-delay:.02s}
main>section:nth-child(2){animation-delay:.06s}
main>section:nth-child(3){animation-delay:.1s}
main>section:nth-child(4){animation-delay:.14s}
main>section:nth-child(5){animation-delay:.18s}
main>section:nth-child(6){animation-delay:.22s}
main>section:nth-child(7){animation-delay:.26s}
main>section:nth-child(8){animation-delay:.3s}
main>section:nth-child(9){animation-delay:.34s}
main>section:nth-child(10){animation-delay:.38s}
main>section:nth-child(n+11){animation-delay:.42s}

main>section:hover{
transform:translateY(-4px);
box-shadow:var(--tx-shadow-lg);
border-color:rgba(255,90,95,.34)}

main>section h2{
position:relative;
display:inline-block;
margin-bottom:22px;
padding-left:20px;
font-size:clamp(1.4rem,3vw,2.1rem)}

main>section h2::before{
content:"";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:8px;
height:1.1em;
border-radius:6px;
background:var(--tx-gradient);
box-shadow:0 0 14px rgba(255,90,95,.5)}

main>section h2::after{
content:"";
position:absolute;
left:20px;
bottom:-9px;
width:64px;
height:3px;
border-radius:3px;
background:var(--tx-gradient);
opacity:.85}

main>section h3{
margin:26px 0 12px;
color:var(--tx-text)}

main>section h3:first-of-type{margin-top:6px}

main>section p{margin-bottom:14px;color:var(--tx-text-soft)}

main>section p:last-child{margin-bottom:0}

main>section ul,main>section ol{margin:12px 0 16px;display:flex;flex-direction:column;gap:9px}

main>section ul li{
position:relative;
padding-left:26px;
color:var(--tx-text-soft);
transition:transform var(--tx-speed) var(--tx-ease),color var(--tx-speed) var(--tx-ease)}

main>section ul li::before{
content:"";
position:absolute;
left:6px;
top:.72em;
width:9px;
height:9px;
border-radius:50%;
background:var(--tx-gradient);
box-shadow:0 0 0 3px rgba(255,90,95,.14);
transition:transform var(--tx-speed) var(--tx-ease)}

main>section ul li:hover{transform:translateX(5px);color:var(--tx-text)}
main>section ul li:hover::before{transform:scale(1.35)}

main>section ol{counter-reset:tx-step;list-style:none}

main>section ol>li{
position:relative;
padding:16px 18px 16px 60px;
border-radius:var(--tx-radius);
background:var(--tx-gradient-soft);
border:1px solid var(--tx-border);
color:var(--tx-text-soft);
counter-increment:tx-step;
transition:transform var(--tx-speed) var(--tx-ease),box-shadow var(--tx-speed) var(--tx-ease),background var(--tx-speed) var(--tx-ease)}

main>section ol>li::before{
content:counter(tx-step);
position:absolute;
left:16px;
top:15px;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--tx-gradient);
color:#fff;
font-size:.9rem;
font-weight:800;
box-shadow:0 4px 12px rgba(255,90,95,.35)}

main>section ol>li:hover{transform:translateX(6px);box-shadow:var(--tx-shadow)}

main>section ol>li h4{margin:0 0 6px;color:var(--tx-text)}
main>section ol>li p{margin:0}

#hero{
position:relative;
overflow:hidden;
background:var(--tx-gradient);
border:none;
color:#fff;
text-align:center;
padding:clamp(38px,7vw,80px) clamp(22px,5vw,60px)}

#hero::before{
content:"";
position:absolute;
inset:-40% -20% auto -20%;
height:120%;
background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.32),transparent 45%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.22),transparent 42%),radial-gradient(circle at 50% 90%,rgba(255,255,255,.16),transparent 50%);
pointer-events:none;
animation:tx-float 14s ease-in-out infinite alternate}

@keyframes tx-float{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.06)}}

#hero::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.18) 100%);
pointer-events:none}

#hero h1{
position:relative;
z-index:2;
color:#fff;
margin-bottom:18px;
text-shadow:0 4px 22px rgba(0,0,0,.22);
letter-spacing:.5px}

#hero p{
position:relative;
z-index:2;
color:rgba(255,255,255,.94);
max-width:820px;
margin:0 auto 14px;
font-size:clamp(.98rem,1.6vw,1.1rem);
text-shadow:0 2px 12px rgba(0,0,0,.16)}

#hero p:last-of-type{margin-bottom:30px}

#hero img{
position:relative;
z-index:2;
width:100%;
max-width:1000px;
margin:26px auto 0;
border-radius:var(--tx-radius-lg);
box-shadow:0 22px 56px rgba(0,0,0,.3);
border:1px solid rgba(255,255,255,.28);
transition:transform .5s var(--tx-ease),box-shadow .5s var(--tx-ease)}

#hero img:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 30px 70px rgba(0,0,0,.38)}

nav[aria-label="面包屑导航"]{
max-width:var(--tx-max);
margin:0 auto;
padding:0 22px;
width:100%}

nav[aria-label="面包屑导航"] ol{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
font-size:.9rem;
color:var(--tx-text-mute)}

nav[aria-label="面包屑导航"] ol li{
display:inline-flex;
align-items:center;
gap:10px;
color:var(--tx-text-mute)}

nav[aria-label="面包屑导航"] ol li+li::before{
content:"›";
color:var(--tx-primary);
font-weight:800;
font-size:1.05rem}

nav[aria-label="面包屑导航"] ol li a{
color:var(--tx-text-soft);
padding:4px 10px;
border-radius:999px;
transition:all var(--tx-speed) var(--tx-ease)}

nav[aria-label="面包屑导航"] ol li a:hover{
color:var(--tx-primary);
background:var(--tx-gradient-soft)}

#brand,#about,#products,#advantages,#solutions,#applications,#cases,#reviews,#news,#articles,#knowledge,#faq,#howto,#contact,#sitemap,#links{scroll-margin-top:90px}

#cases article,#news article,#articles article{
position:relative;
background:var(--tx-surface-solid);
border:1px solid var(--tx-border);
border-radius:var(--tx-radius);
padding:22px 24px;
margin-bottom:18px;
box-shadow:var(--tx-shadow-sm);
transition:transform var(--tx-speed) var(--tx-ease),box-shadow var(--tx-speed) var(--tx-ease),border-color var(--tx-speed) var(--tx-ease)}

#cases article::before,#news article::before,#articles article::before{
content:"";
position:absolute;
left:0;
top:18px;
bottom:18px;
width:4px;
border-radius:4px;
background:var(--tx-gradient);
opacity:0;
transition:opacity var(--tx-speed) var(--tx-ease)}

#cases article:hover,#news article:hover,#articles article:hover{
transform:translateY(-5px);
box-shadow:var(--tx-shadow);
border-color:rgba(255,90,95,.36)}

#cases article:hover::before,#news article:hover::before,#articles article:hover::before{opacity:1}

#cases article h3,#news article h3,#articles article h3{
margin:0 0 8px;
font-size:clamp(1.05rem,2vw,1.32rem);
color:var(--tx-text)}

#news article time,#articles article time{
display:inline-block;
font-size:.82rem;
font-weight:700;
color:var(--tx-primary);
background:var(--tx-gradient-soft);
padding:3px 12px;
border-radius:999px;
margin-bottom:10px;
letter-spacing:.4px}

#articles article a{
display:inline-flex;
align-items:center;
gap:7px;
margin-top:6px;
font-weight:700;
font-size:.92rem;
color:var(--tx-primary);
padding:7px 16px;
border-radius:999px;
border:1px solid var(--tx-border);
background:var(--tx-gradient-soft);
transition:all var(--tx-speed) var(--tx-ease)}

#articles article a::after{
content:"→";
transition:transform var(--tx-speed) var(--tx-ease)}

#articles article a:hover{
color:#fff;
background:var(--tx-gradient);
border-color:transparent;
box-shadow:0 8px 22px rgba(255,90,95,.32);
transform:translateY(-2px)}

#articles article a:hover::after{transform:translateX(4px)}

#reviews blockquote{
position:relative;
background:var(--tx-surface-solid);
border:1px solid var(--tx-border);
border-radius:var(--tx-radius);
padding:22px 24px 20px 58px;
margin-bottom:16px;
box-shadow:var(--tx-shadow-sm);
transition:transform var(--tx-speed) var(--tx-ease),box-shadow var(--tx-speed) var(--tx-ease)}

#reviews blockquote::before{
content:"“";
position:absolute;
left:18px;
top:8px;
font-size:3.4rem;
line-height:1;
font-family:Georgia,"Songti SC",serif;
background:var(--tx-gradient);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
opacity:.85}

#reviews blockquote p{
margin:0;
font-style:normal;
color:var(--tx-text-soft)}

#reviews blockquote:hover{
transform:translateY(-5px);
box-shadow:var(--tx-shadow)}

#knowledge h3{
padding-left:14px;
border-left:4px solid var(--tx-primary);
border-radius:2px}

#faq details{
background:var(--tx-surface-solid);
border:1px solid var(--tx-border);
border-radius:var(--tx-radius);
margin-bottom:12px;
overflow:hidden;
box-shadow:var(--tx-shadow-sm);
transition:box-shadow var(--tx-speed) var(--tx-ease),border-color var(--tx-speed) var(--tx-ease),transform var(--tx-speed) var(--tx-ease)}

#faq details:hover{
border-color:rgba(255,90,95,.34);
box-shadow:var(--tx-shadow);
transform:translateY(-2px)}

#faq details[open]{
border-color:rgba(255,90,95,.42);
box-shadow:var(--tx-shadow);
background:var(--tx-surface)}

#faq summary{
position:relative;
cursor:pointer;
list-style:none;
padding:16px 52px 16px 20px;
font-weight:700;
font-size:1rem;
color:var(--tx-text);
border-radius:var(--tx-radius);
transition:color var(--tx-speed) var(--tx-ease),background var(--tx-speed) var(--tx-ease);
user-select:none}

#faq summary::-webkit-details-marker{display:none}
#faq summary::marker{content:""}

#faq summary::after{
content:"+";
position:absolute;
right:18px;
top:50%;
transform:translateY(-50%);
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--tx-gradient);
color:#fff;
font-size:1.1rem;
font-weight:700;
line-height:1;
box-shadow:0 4px 12px rgba(255,90,95,.3);
transition:transform var(--tx-speed) var(--tx-ease),background var(--tx-speed) var(--tx-ease)}

#faq summary:hover{color:var(--tx-primary);background:var(--tx-gradient-soft)}

#faq details[open] summary{color:var(--tx-primary)}

#faq details[open] summary::after{
content:"−";
transform:translateY(-50%) rotate(180deg)}

#faq details p{
padding:0 20px 18px;
margin:0;
color:var(--tx-text-soft);
animation:tx-fade .4s var(--tx-ease) both}

@keyframes tx-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

#howto ol{
counter-reset:tx-step;
gap:14px}

#howto ol>li{
padding:18px 20px 18px 64px}

#howto ol>li::before{
top:18px;
left:18px;
width:32px;
height:32px}

#howto h3{
background:var(--tx-gradient);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
font-size:clamp(1.15rem,2.2vw,1.5rem)}

#howto ul li strong{color:var(--tx-text)}

#contact ul{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:12px}

#contact ul li{
padding:14px 16px 14px 42px;
border-radius:var(--tx-radius-sm);
background:var(--tx-gradient-soft);
border:1px solid var(--tx-border);
transition:transform var(--tx-speed) var(--tx-ease),box-shadow var(--tx-speed) var(--tx-ease)}

#contact ul li::before{
left:16px;
top:1.35em;
width:8px;
height:8px}

#contact ul li:hover{
transform:translateY(-4px);
box-shadow:var(--tx-shadow)}

#contact ul li strong{color:var(--tx-text)}

#sitemap ul{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:10px}

#sitemap ul li{padding-left:0}
#sitemap ul li::before{display:none}

#sitemap ul li a{
display:block;
padding:10px 14px;
border-radius:var(--tx-radius-sm);
background:var(--tx-gradient-soft);
border:1px solid var(--tx-border);
color:var(--tx-text-soft);
font-weight:600;
font-size:.92rem;
text-align:center;
transition:all var(--tx-speed) var(--tx-ease)}

#sitemap ul li a:hover{
color:#fff;
background:var(--tx-gradient);
border-color:transparent;
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(255,90,95,.3)}

#links ul{
display:flex;
flex-wrap:wrap;
gap:12px}

#links ul li{padding-left:0}
#links ul li::before{display:none}

#links ul li a{
display:inline-block;
padding:9px 20px;
border-radius:999px;
border:1px dashed rgba(255,90,95,.4);
color:var(--tx-text-soft);
font-size:.9rem;
font-weight:600;
transition:all var(--tx-speed) var(--tx-ease)}

#links ul li a:hover{
color:var(--tx-primary);
border-style:solid;
border-color:var(--tx-primary);
background:var(--tx-gradient-soft);
transform:translateY(-3px)}

footer{
position:relative;
margin-top:20px;
background:linear-gradient(180deg,rgba(255,90,95,.06),rgba(124,92,255,.05));
border-top:1px solid var(--tx-border);
padding:clamp(34px,5vw,60px) 22px 90px;
-webkit-backdrop-filter:var(--tx-blur);
backdrop-filter:var(--tx-blur)}

footer>section{
max-width:var(--tx-max);
margin:0 auto 26px;
background:var(--tx-surface);
border:1px solid var(--tx-border);
border-radius:var(--tx-radius);
padding:clamp(20px,3vw,30px);
box-shadow:var(--tx-shadow-sm);
transition:transform var(--tx-speed) var(--tx-ease),box-shadow var(--tx-speed) var(--tx-ease)}

footer>section:hover{
transform:translateY(-4px);
box-shadow:var(--tx-shadow)}

footer h2{
position:relative;
font-size:clamp(1.05rem,2vw,1.3rem);
margin-bottom:14px;
padding-left:16px}

footer h2::before{
content:"";
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:6px;
height:1.05em;
border-radius:4px;
background:var(--tx-gradient)}

footer p{
color:var(--tx-text-soft);
font-size:.94rem;
margin-bottom:10px}

footer p:last-child{margin-bottom:0}

footer time{color:var(--tx-primary);font-weight:700}

footer nav[aria-label="底部导航"]{
max-width:var(--tx-max);
margin:0 auto 22px;
padding:0}

footer nav[aria-label="底部导航"] ul{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px}

footer nav[aria-label="底部导航"] ul li a{
display:inline-block;
padding:8px 16px;
border-radius:999px;
font-size:.88rem;
font-weight:600;
color:var(--tx-text-soft);
border:1px solid transparent;
transition:all var(--tx-speed) var(--tx-ease)}

footer nav[aria-label="底部导航"] ul li a:hover{
color:var(--tx-primary);
background:var(--tx-gradient-soft);
border-color:var(--tx-border);
transform:translateY(-2px)}

footer>p{
max-width:var(--tx-max);
margin:0 auto;
text-align:center;
font-size:.86rem;
color:var(--tx-text-mute);
letter-spacing:.6px}

footer>p small{font-size:.86rem}

#copyright p:last-child{
font-weight:800;
background:var(--tx-gradient);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
font-size:1rem;
letter-spacing:.5px}

#author p strong{color:var(--tx-text)}

a:focus-visible,summary:focus-visible,button:focus-visible{
outline:3px solid rgba(255,90,95,.5);
outline-offset:3px;
border-radius:6px}

@media (max-width:900px){
header nav{padding:10px 16px;gap:12px}
header nav ul{justify-content:flex-start;gap:2px}
header nav ul li a{padding:7px 11px;font-size:.86rem}
main{padding:0 16px 56px;gap:22px}
main>section{border-radius:22px}
#contact ul{grid-template-columns:1fr}
}

@media (max-width:640px){
html{scroll-padding-top:76px}
body{font-size:15px}
header nav{flex-direction:column;align-items:stretch;gap:10px}
header nav>p{text-align:center}
header nav>p a{justify-content:center;font-size:1.15rem}
header nav ul{
justify-content:center;
overflow-x:auto;
flex-wrap:nowrap;
padding-bottom:4px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none}
header nav ul::-webkit-scrollbar{display:none}
header nav ul li{flex:0 0 auto}
header nav ul li a{white-space:nowrap;font-size:.84rem;padding:7px 12px}
main{padding:0 12px 46px;gap:18px}
main>section{padding:22px 18px;border-radius:20px}
main>section:hover{transform:none}
main>section h2{padding-left:16px;margin-bottom:18px}
main>section h2::before{width:6px}
#hero{padding:34px 18px 40px;border-radius:20px}
#hero img{border-radius:18px}
#hero img:hover{transform:none}
#cases article,#news article,#articles article{padding:18px 16px}
#reviews blockquote{padding:20px 18px 18px 48px}
#reviews blockquote::before{left:12px;font-size:2.8rem}
#faq summary{padding:14px 46px 14px 16px;font-size:.95rem}
#faq details p{padding:0 16px 16px}
#howto ol>li{padding:16px 16px 16px 58px}
#howto ol>li::before{left:14px;width:30px;height:30px}
#sitemap ul{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
#links ul{justify-content:center}
footer{padding:30px 14px 70px}
footer>section{padding:20px 16px}
footer nav[aria-label="底部导航"] ul{gap:6px}
footer nav[aria-label="底部导航"] ul li a{padding:7px 13px;font-size:.82rem}
main>section ol>li:hover,main>section ul li:hover{transform:none}
}

@media (max-width:380px){
header nav ul li a{font-size:.78rem;padding:6px 10px}
main>section{padding:18px 14px}
#hero h1{font-size:1.5rem}
}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
scroll-behavior:auto!important}
}

@media print{
header,footer,nav{display:none}
body{background:#fff;color:#000}
main>section{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
}