:root{--bg:#f4f7fb;--bg-soft:#e9eef6;--card:#ffffff;--card-soft:rgba(255,255,255,.72);--text:#1d2b3a;--text-soft:#4a5b6e;--muted:#7b8a9c;--line:rgba(47,79,111,.14);--brand:#2f4f6f;--brand-2:#5b8bb8;--brand-3:#8fb8d8;--accent:#c98a8a;--accent-2:#e8c3a0;--glow:rgba(91,139,184,.28);--shadow-sm:0 4px 14px rgba(31,53,79,.08);--shadow-md:0 12px 34px rgba(31,53,79,.12);--shadow-lg:0 24px 60px rgba(31,53,79,.18);--radius-sm:12px;--radius:20px;--radius-lg:28px;--radius-pill:999px;--maxw:1180px;--ease:cubic-bezier(.22,.61,.36,1)}
@media (prefers-color-scheme:dark){:root{--bg:#0f1720;--bg-soft:#151f2b;--card:#18232f;--card-soft:rgba(24,35,47,.72);--text:#e8eef5;--text-soft:#b9c7d6;--muted:#8b9aab;--line:rgba(143,184,216,.18);--brand:#8fb8d8;--brand-2:#5b8bb8;--brand-3:#2f4f6f;--accent:#e0a3a3;--accent-2:#e8c3a0;--glow:rgba(143,184,216,.22);--shadow-sm:0 4px 14px rgba(0,0,0,.35);--shadow-md:0 12px 34px rgba(0,0,0,.45);--shadow-lg:0 24px 60px rgba(0,0,0,.55)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.85;color:var(--text);background:var(--bg);background-image:radial-gradient(1200px 600px at 12% -10%,var(--glow),transparent 60%),radial-gradient(900px 500px at 100% 0%,rgba(232,195,160,.18),transparent 55%);background-attachment:fixed;overflow-x:hidden;transition:background-color .4s var(--ease),color .4s var(--ease)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-2);text-decoration:none;transition:color .25s var(--ease),opacity .25s var(--ease)}
a:hover,a:focus-visible{color:var(--accent)}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px}
::selection{background:var(--brand-2);color:#fff}
header{position:sticky;top:0;z-index:100;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.62));border-bottom:1px solid var(--line);box-shadow:0 2px 18px rgba(31,53,79,.06)}
@media (prefers-color-scheme:dark){header{background:linear-gradient(180deg,rgba(15,23,32,.85),rgba(15,23,32,.62))}}
header nav{max-width:var(--maxw);margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
header nav>a{font-size:1.12rem;font-weight:800;letter-spacing:.4px;color:var(--brand);display:inline-flex;align-items:center;gap:8px}
header nav>a::before{content:"";width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--brand-2),var(--accent));box-shadow:0 0 0 5px var(--glow);transition:transform .4s var(--ease)}
header nav>a:hover::before{transform:scale(1.25) rotate(20deg)}
header nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
header nav ul li a{display:inline-block;padding:7px 14px;border-radius:var(--radius-pill);font-size:.92rem;font-weight:600;color:var(--text-soft);position:relative;transition:color .28s var(--ease),background-color .28s var(--ease),transform .28s var(--ease)}
header nav ul li a:hover,header nav ul li a:focus-visible{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));transform:translateY(-2px);box-shadow:0 8px 20px var(--glow)}
main{max-width:var(--maxw);margin:0 auto;padding:0 22px 72px}
main>section{margin:44px 0;scroll-margin-top:96px}
#hero{position:relative;margin-top:34px;padding:72px 44px;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(135deg,#2f4f6f 0%,#4d7ba3 42%,#8fb8d8 72%,#e8c3a0 100%);color:#fff;box-shadow:var(--shadow-lg);isolation:isolate}
#hero::before{content:"";position:absolute;inset:-40% -20% auto auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.42),transparent 62%);filter:blur(6px);animation:floatSlow 14s ease-in-out infinite;z-index:-1}
#hero::after{content:"";position:absolute;left:-12%;bottom:-55%;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),transparent 65%);animation:floatSlow 18s ease-in-out infinite reverse;z-index:-1}
#hero h1{margin:0 0 20px;font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.35;font-weight:800;letter-spacing:.5px;text-shadow:0 4px 22px rgba(0,0,0,.22);animation:riseIn .9s var(--ease) both}
#hero p{margin:0;max-width:62ch;font-size:clamp(.98rem,1.6vw,1.08rem);line-height:1.95;color:rgba(255,255,255,.94);text-shadow:0 2px 12px rgba(0,0,0,.18);animation:riseIn .9s .12s var(--ease) both}
@keyframes floatSlow{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-26px,32px,0) scale(1.08)}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
nav[aria-label="面包屑"]{margin:22px 0 0}
nav[aria-label="面包屑"] ol{list-style:none;margin:0;padding:10px 18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.88rem;color:var(--muted);background:var(--card-soft);border:1px solid var(--line);border-radius:var(--radius-pill);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-sm)}
nav[aria-label="面包屑"] ol li+li::before{content:"/";margin-right:8px;color:var(--muted);opacity:.6}
nav[aria-label="面包屑"] ol li a{font-weight:600}
main>section>h2{margin:0 0 22px;font-size:clamp(1.3rem,2.6vw,1.72rem);font-weight:800;line-height:1.4;color:var(--text);position:relative;padding-left:20px}
main>section>h2::before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:6px;border-radius:var(--radius-pill);background:linear-gradient(180deg,var(--brand-2),var(--accent));box-shadow:0 0 18px var(--glow)}
h3{margin:26px 0 12px;font-size:1.12rem;font-weight:700;color:var(--text);letter-spacing:.2px}
h4{margin:16px 0 8px;font-size:1rem;font-weight:700;color:var(--brand-2)}
p{margin:0 0 14px;color:var(--text-soft)}
main>section{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
main>section.is-visible{opacity:1;transform:translateY(0)}
#intro,#concept,#products,#solutions,#cases,#news,#faq,#howto,#contact,#sitemap,#links,#author,#legal{background:var(--card-soft);border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px;backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:var(--shadow-md);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),background-color .45s var(--ease)}
#intro:hover,#concept:hover,#products:hover,#solutions:hover,#cases:hover,#news:hover,#faq:hover,#howto:hover,#contact:hover,#sitemap:hover,#links:hover,#author:hover,#legal:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--glow)}
#products,#solutions,#cases,#contact,#links{background:linear-gradient(160deg,var(--card-soft),rgba(143,184,216,.14))}
#articles{background:transparent;border:none;padding:0;box-shadow:none;backdrop-filter:none}
#articles article{position:relative;margin:0 0 18px;padding:26px 28px;background:var(--card-soft);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
#articles article::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--brand-2),var(--accent));transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
#articles article:hover{transform:translateY(-6px) scale(1.006);box-shadow:var(--shadow-md);border-color:var(--glow)}
#articles article:hover::after{transform:scaleY(1)}
#articles article h3{margin-top:0}
#articles article p:first-of-type{font-size:.84rem;color:var(--muted);font-weight:600;letter-spacing:.3px;margin-bottom:10px}
#articles article a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:8px 18px;border-radius:var(--radius-pill);font-size:.88rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 20px var(--glow);transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease)}
#articles article a::after{content:"→";transition:transform .3s var(--ease)}
#articles article a:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 28px var(--glow)}
#articles article a:hover::after{transform:translateX(4px)}
#faq h3{padding:14px 18px;margin:14px 0 8px;border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(91,139,184,.14),rgba(232,195,160,.14));border:1px solid var(--line);font-size:1.02rem;transition:background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
#faq h3:hover{transform:translateX(6px);box-shadow:var(--shadow-sm)}
#faq h3+p{margin:0 0 18px;padding-left:18px;border-left:3px solid var(--line)}
#howto h4{display:inline-block;padding:6px 16px;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:.9rem;box-shadow:0 6px 16px var(--glow)}
#howto h4+p{margin-top:10px}
#contact p{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:10px 16px;margin:0 0 10px;border-radius:var(--radius-sm);background:rgba(143,184,216,.12);border:1px solid var(--line);transition:transform .3s var(--ease),background-color .3s var(--ease)}
#contact p:hover{transform:translateX(6px);background:rgba(143,184,216,.2)}
#sitemap ul,#links ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
#sitemap ul li a,#links ul li a{display:block;padding:12px 18px;border-radius:var(--radius-sm);font-size:.94rem;font-weight:600;color:var(--text-soft);background:rgba(143,184,216,.12);border:1px solid var(--line);transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
#sitemap ul li a:hover,#links ul li a:hover{transform:translateY(-4px);color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 10px 24px var(--glow)}
#author p{margin:0 0 8px;font-size:.92rem;color:var(--muted)}
#author p:first-of-type{font-weight:700;color:var(--text)}
#legal h3{margin-top:20px;padding-bottom:6px;border-bottom:1px dashed var(--line)}
footer{margin-top:40px;padding:38px 22px;text-align:center;background:linear-gradient(180deg,transparent,rgba(47,79,111,.08));border-top:1px solid var(--line)}
footer p{margin:6px 0;font-size:.88rem;color:var(--muted)}
footer p a{font-weight:700;display:inline-block;padding:8px 20px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--card-soft);transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease)}
footer p a:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);color:var(--accent)}
@media (max-width:900px){#hero{padding:56px 30px}#intro,#concept,#products,#solutions,#cases,#news,#faq,#howto,#contact,#sitemap,#links,#author,#legal{padding:28px 24px}}
@media (max-width:720px){html{scroll-padding-top:76px}header nav{padding:12px 16px;gap:10px}header nav ul{gap:4px;width:100%}header nav ul li a{padding:6px 11px;font-size:.84rem}main{padding:0 16px 56px}main>section{margin:32px 0}#hero{margin-top:22px;padding:46px 22px;border-radius:var(--radius)}#hero h1{font-size:1.5rem}#hero p{font-size:.95rem}main>section>h2{font-size:1.22rem;padding-left:16px}main>section>h2::before{width:5px}#intro,#concept,#products,#solutions,#cases,#news,#faq,#howto,#contact,#sitemap,#links,#author,#legal{padding:24px 18px;border-radius:var(--radius-sm)}#articles article{padding:20px 18px}#sitemap ul,#links ul{grid-template-columns:1fr 1fr}#faq h3{font-size:.96rem;padding:12px 14px}}
@media (max-width:420px){#sitemap ul,#links ul{grid-template-columns:1fr}header nav ul li a{padding:5px 9px;font-size:.8rem}#hero{padding:38px 18px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}main>section{opacity:1;transform:none}}
@media print{header,footer,#hero::before,#hero::after{display:none}body{background:#fff;color:#000}main>section{opacity:1;transform:none;box-shadow:none;border:1px solid #ccc}}