:root{--bg:#f7f8fc;--bg-soft:#eef1f8;--card:#ffffff;--card-glass:rgba(255,255,255,.72);--text:#1f2937;--text-soft:#5b6472;--muted:#8b93a1;--primary:#6d5efc;--primary-2:#00c2ff;--primary-3:#ff5ea8;--accent:#ffb020;--border:rgba(31,41,55,.08);--shadow:0 10px 30px rgba(31,41,55,.10);--shadow-hover:0 18px 44px rgba(109,94,252,.22);--radius:20px;--radius-sm:14px;--radius-lg:28px;--max:1180px;--gap:clamp(16px,3vw,32px);--font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0f1220;--bg-soft:#161a2c;--card:#1a1f33;--card-glass:rgba(26,31,51,.66);--text:#eef1f8;--text-soft:#b9c0d0;--muted:#8b93a8;--border:rgba(255,255,255,.10);--shadow:0 10px 30px rgba(0,0,0,.45);--shadow-hover:0 18px 44px rgba(0,194,255,.22)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.75;color:var(--text);background:var(--bg);background-image:radial-gradient(1200px 600px at 10% -10%,rgba(109,94,252,.16),transparent 60%),radial-gradient(1000px 500px at 100% 0%,rgba(0,194,255,.14),transparent 55%),radial-gradient(900px 500px at 50% 110%,rgba(255,94,168,.12),transparent 60%);background-attachment:fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color .25s ease,opacity .25s ease}
a:hover{color:var(--primary-2)}
h1,h2,h3,h4{line-height:1.3;margin:0 0 .6em;font-weight:800;letter-spacing:.2px;color:var(--text)}
h1{font-size:clamp(1.75rem,4.4vw,3rem);letter-spacing:-.5px}
h2{font-size:clamp(1.4rem,3vw,2.15rem)}
h3{font-size:clamp(1.1rem,2vw,1.4rem)}
p{margin:0 0 1em;color:var(--text-soft)}
ul{margin:0 0 1em;padding-left:1.2em}
li{color:var(--text-soft);margin-bottom:.35em}
strong{color:var(--text)}
::selection{background:rgba(109,94,252,.28)}
:focus-visible{outline:2px solid var(--primary-2);outline-offset:3px;border-radius:8px}
header{position:sticky;top:0;z-index:100;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);background:var(--card-glass);border-bottom:1px solid var(--border);box-shadow:0 4px 24px rgba(31,41,55,.06)}
header nav{max-width:var(--max);margin:0 auto;padding:12px clamp(14px,3vw,28px);display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}
header nav a{position:relative;display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font-size:.92rem;font-weight:600;color:var(--text-soft);white-space:nowrap;transition:color .25s ease,background .25s ease,transform .25s ease}
header nav a::after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--primary-2));transform:translateX(-50%);transition:width .3s ease}
header nav a:hover{color:var(--text);background:rgba(109,94,252,.10);transform:translateY(-1px)}
header nav a:hover::after{width:60%}
main{max-width:var(--max);margin:0 auto;padding:clamp(20px,4vw,48px) clamp(14px,3vw,28px) 64px;display:flex;flex-direction:column;gap:var(--gap)}
section{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(20px,3.4vw,44px);box-shadow:var(--shadow);overflow:hidden;animation:fadeUp .7s cubic-bezier(.22,.9,.3,1) both;animation-timeline:view();animation-range:entry 0% cover 26%}
@supports not (animation-timeline:view()){section{animation:none}}
section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 240px at 100% 0,rgba(0,194,255,.08),transparent 60%);opacity:0;transition:opacity .4s ease}
section:hover::before{opacity:1}
section>h2{position:relative;padding-bottom:14px;margin-bottom:22px}
section>h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--primary-3));background-size:200% 100%;animation:shimmer 4s linear infinite}
section>h3{margin-top:1.4em;color:var(--text)}
section>h3:first-of-type{margin-top:0}
section p{max-width:78ch}
#hero{position:relative;background:linear-gradient(125deg,#6d5efc 0%,#00c2ff 45%,#ff5ea8 100%);background-size:220% 220%;animation:gradientMove 14s ease infinite;border:none;color:#fff;text-align:center;padding:clamp(36px,7vw,84px) clamp(20px,4vw,56px);box-shadow:0 24px 60px rgba(109,94,252,.34)}
#hero::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 20% 0,rgba(255,255,255,.28),transparent 60%),radial-gradient(600px 300px at 90% 100%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
#hero h1{position:relative;z-index:1;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.22);margin-bottom:.5em}
#hero p{position:relative;z-index:1;color:rgba(255,255,255,.94);max-width:72ch;margin-left:auto;margin-right:auto;font-size:clamp(.98rem,1.6vw,1.12rem)}
#hero p:first-of-type{font-weight:600}
#brand p,#products p,#solutions p,#cases p,#news p,#articles p,#faq p,#howto p,#contact p{color:var(--text-soft)}
#products,#cases,#articles,#howto{background:linear-gradient(180deg,var(--card) 0%,var(--bg-soft) 100%)}
#solutions,#news,#faq,#contact{background:var(--card)}
#brand h3,#products h3,#solutions h3,#cases h3,#news h3,#faq h3,#howto h3,#contact h3{display:flex;align-items:center;gap:10px}
#brand h3::before,#products h3::before,#solutions h3::before,#cases h3::before,#news h3::before,#faq h3::before,#howto h3::before,#contact h3::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 0 0 4px rgba(109,94,252,.14)}
#articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,2.4vw,24px);align-items:start}
#articles>h2{grid-column:1/-1}
#articles article{position:relative;display:flex;flex-direction:column;background:var(--card-glass);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,2.4vw,26px);box-shadow:0 6px 20px rgba(31,41,55,.07);transition:transform .35s cubic-bezier(.22,.9,.3,1),box-shadow .35s ease,border-color .35s ease}
#articles article::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--primary-3));opacity:0;transition:opacity .35s ease}
#articles article:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:rgba(109,94,252,.35)}
#articles article:hover::before{opacity:1}
#articles article h3{margin-bottom:.5em;font-size:1.12rem}
#articles article p{font-size:.94rem;margin-bottom:1em}
#articles article a{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,rgba(109,94,252,.14),rgba(0,194,255,.14));color:var(--primary);transition:transform .3s ease,background .3s ease,color .3s ease}
#articles article a::after{content:"→";transition:transform .3s ease}
#articles article a:hover{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;transform:translateX(3px)}
#articles article a:hover::after{transform:translateX(3px)}
#cases p:last-of-type,#cases p:nth-last-of-type(2){position:relative;padding:14px 18px;border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(109,94,252,.08),rgba(0,194,255,.08));border-left:4px solid var(--primary);font-style:italic}
#faq h3{font-size:1.06rem;margin-top:1.2em;padding:14px 18px;border-radius:var(--radius-sm);background:var(--bg-soft);border:1px solid var(--border);transition:background .3s ease,transform .3s ease,box-shadow .3s ease}
#faq h3:hover{background:linear-gradient(135deg,rgba(109,94,252,.10),rgba(0,194,255,.10));transform:translateX(4px);box-shadow:0 6px 18px rgba(109,94,252,.14)}
#faq h3+p{margin-top:-.4em;padding:0 18px 4px}
#howto p:first-of-type,#howto p:nth-of-type(2){font-weight:600;color:var(--text)}
#howto h3+p{padding-left:14px;border-left:3px solid rgba(0,194,255,.5)}
#contact p{margin-bottom:.45em}
#contact a{font-weight:600;border-bottom:1px dashed rgba(109,94,252,.5)}
#contact a:hover{border-bottom-color:var(--primary-2)}
#sitemap ul,#links ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
#sitemap li,#links li{margin:0}
#sitemap a,#links a{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--radius-sm);background:var(--bg-soft);border:1px solid var(--border);font-weight:600;font-size:.94rem;color:var(--text-soft);transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease}
#sitemap a::before,#links a::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2));flex:0 0 auto}
#sitemap a:hover,#links a:hover{transform:translateY(-3px);background:linear-gradient(135deg,rgba(109,94,252,.12),rgba(0,194,255,.12));color:var(--text);box-shadow:0 10px 24px rgba(109,94,252,.16)}
footer{position:relative;margin-top:24px;padding:clamp(28px,4vw,56px) clamp(14px,3vw,28px);background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%);border-top:1px solid var(--border)}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--primary-3));background-size:200% 100%;animation:shimmer 6s linear infinite}
footer>section{max-width:var(--max);margin:0 auto 18px;background:var(--card-glass);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,2.4vw,28px);box-shadow:0 6px 20px rgba(31,41,55,.07);transition:transform .35s ease,box-shadow .35s ease}
footer>section:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
footer h2{font-size:1.1rem;margin-bottom:.5em;display:flex;align-items:center;gap:10px}
footer h2::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--primary-3),var(--primary));box-shadow:0 0 0 4px rgba(255,94,168,.14)}
footer p{font-size:.92rem;margin:0}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:900px){header nav{gap:4px 2px;padding:10px 12px}header nav a{padding:7px 10px;font-size:.86rem}#articles{grid-template-columns:1fr}}
@media (max-width:600px){body{font-size:15px}header nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}header nav::-webkit-scrollbar{display:none}header nav a{flex:0 0 auto}section{border-radius:var(--radius);padding:20px 16px}#hero{border-radius:var(--radius);padding:36px 18px}#articles article{padding:18px 16px}#sitemap ul,#links ul{grid-template-columns:1fr 1fr}#sitemap a,#links a{padding:10px 12px;font-size:.88rem}footer>section{padding:18px 16px}}
@media (max-width:380px){#sitemap ul,#links ul{grid-template-columns:1fr}}
@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{display:none}body{background:#fff;color:#000}section{box-shadow:none;border:1px solid #ddd;break-inside:avoid}}