:root{--primary:#e94560;--primary-dark:#c73650;--primary-light:#ff6b81;--bg:#f5f6fa;--bg-alt:#ffffff;--bg-card:#ffffff;--text:#1a1a2e;--text-secondary:#4a4a6a;--text-muted:#8888a0;--border:#e2e4eb;--shadow:0 4px 20px rgba(26,26,46,.08);--shadow-lg:0 12px 40px rgba(26,26,46,.14);--radius:16px;--radius-sm:10px;--radius-lg:24px;--glass-bg:rgba(255,255,255,.72);--glass-border:rgba(255,255,255,.5);--glass-blur:blur(18px);--header-h:72px;--transition:.3s cubic-bezier(.4,0,.2,1);--grad-1:linear-gradient(135deg,#0f3460 0%,#16213e 50%,#1a1a2e 100%);--grad-2:linear-gradient(135deg,#e94560 0%,#ff6b81 100%);--grad-3:linear-gradient(135deg,#1a1a2e 0%,#0f3460 100%)}
[data-theme="dark"]{--bg:#0d0d1a;--bg-alt:#14142a;--bg-card:#1a1a33;--text:#eaeaf5;--text-secondary:#b0b0cc;--text-muted:#7a7a9a;--border:#2a2a45;--shadow:0 4px 20px rgba(0,0,0,.4);--shadow-lg:0 12px 40px rgba(0,0,0,.55);--glass-bg:rgba(26,26,51,.72);--glass-border:rgba(255,255,255,.08)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.75;font-size:16px;transition:background var(--transition),color var(--transition);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--primary-light)}
ul,ol{list-style:none}
button,input{font-family:inherit;font-size:inherit;border:none;outline:none;background:none;cursor:pointer}
h1,h2,h3,h4{line-height:1.35;color:var(--text);font-weight:700}
h1{font-size:clamp(1.5rem,3.5vw,2.25rem);margin-bottom:1rem}
h2{font-size:clamp(1.3rem,2.8vw,1.85rem);margin-bottom:.85rem;position:relative;padding-bottom:.5rem}
h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;background:var(--grad-2)}
h3{font-size:clamp(1.1rem,2.2vw,1.4rem);margin:1.25rem 0 .6rem}
h4{font-size:clamp(1rem,1.8vw,1.15rem);margin:1rem 0 .5rem}
p{margin-bottom:.9rem;color:var(--text-secondary)}
strong{color:var(--text);font-weight:600}
blockquote{border-left:4px solid var(--primary);background:var(--bg-alt);padding:1rem 1.25rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:1rem 0;font-style:italic;color:var(--text-secondary)}
blockquote p{margin-bottom:0}
time{display:inline-block;font-size:.85rem;color:var(--text-muted);margin-bottom:.35rem}
address{font-style:normal}
#site-header{position:sticky;top:0;z-index:1000;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);transition:background var(--transition),box-shadow var(--transition)}
#site-header.scrolled{box-shadow:var(--shadow)}
.header-inner{max-width:1280px;margin:0 auto;padding:0 20px;height:var(--header-h);display:flex;align-items:center;gap:20px}
.logo-area{flex-shrink:0}
.logo-area a{display:flex;align-items:center;gap:10px;color:var(--text)}
.logo-area svg{border-radius:12px;transition:transform var(--transition)}
.logo-area a:hover svg{transform:rotate(-6deg) scale(1.05)}
.site-name{font-size:1.15rem;font-weight:800;letter-spacing:.5px;background:var(--grad-2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#main-nav{flex:1;display:flex;justify-content:center}
#main-nav ul{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
#main-nav a{display:block;padding:8px 12px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;color:var(--text-secondary);transition:all var(--transition);position:relative}
#main-nav a:hover{color:var(--primary);background:rgba(233,69,96,.08)}
#main-nav a::after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:2px;background:var(--grad-2);border-radius:2px;transition:all var(--transition);transform:translateX(-50%)}
#main-nav a:hover::after{width:60%}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
#site-search{display:flex;align-items:center;background:var(--bg-alt);border:1px solid var(--border);border-radius:50px;overflow:hidden;transition:all var(--transition)}
#site-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(233,69,96,.12)}
#site-search input{padding:8px 14px;width:170px;font-size:.85rem;color:var(--text);background:transparent}
#site-search input::placeholder{color:var(--text-muted)}
#site-search button{padding:8px 16px;background:var(--grad-2);color:#fff;font-size:.85rem;font-weight:600;border-radius:50px;transition:opacity var(--transition)}
#site-search button:hover{opacity:.88}
#dark-mode-toggle,#mobile-menu-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--bg-alt);border:1px solid var(--border);transition:all var(--transition)}
#dark-mode-toggle:hover,#mobile-menu-btn:hover{background:var(--primary);color:#fff;transform:scale(1.08);border-color:var(--primary)}
#mobile-menu-btn{display:none}
main{max-width:1280px;margin:0 auto;padding:0 20px}
section{margin:48px 0;animation:fadeUp .7s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
section.reveal{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s ease}
section.reveal.visible{opacity:1;transform:translateY(0)}
#banner{margin:24px 0;position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.banner-slider{position:relative;min-height:300px}
.banner-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.banner-slide.active{opacity:1;pointer-events:auto;position:relative}
.banner-slide svg{border-radius:var(--radius-lg);width:100%}
.banner-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:5}
.banner-dots button{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.45);font-size:0;color:transparent;transition:all var(--transition);border:2px solid transparent}
.banner-dots button[aria-selected="true"]{background:var(--primary);width:32px;border-radius:6px}
.banner-dots button:hover{background:rgba(255,255,255,.8)}
#breadcrumb{margin:16px 0;font-size:.85rem}
#breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#breadcrumb li{display:flex;align-items:center;gap:6px;color:var(--text-muted)}
#breadcrumb li:not(:last-child)::after{content:"›";color:var(--text-muted);margin-left:2px}
#breadcrumb a{color:var(--text-secondary)}
#breadcrumb a:hover{color:var(--primary)}
#breadcrumb [aria-current="page"]{color:var(--primary);font-weight:600}
.brand-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:32px 0}
.stat-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 16px;text-align:center;box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition);position:relative;overflow:hidden}
.stat-item::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-2);transform:scaleX(0);transition:transform var(--transition);transform-origin:left}
.stat-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.stat-item:hover::before{transform:scaleX(1)}
.stat-number{display:block;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;background:var(--grad-2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}
.stat-label{display:block;font-size:.85rem;color:var(--text-muted);margin-top:6px}
#company-profile,#products,#solutions,#cases,#news,#articles,#faq,#howto,#contact,#sitemap,#links,#privacy,#disclaimer,#copyright,#author-info{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(20px,4vw,40px);box-shadow:var(--shadow);transition:box-shadow var(--transition)}
#company-profile:hover,#products:hover,#solutions:hover,#cases:hover,#news:hover,#articles:hover,#faq:hover,#howto:hover,#contact:hover{box-shadow:var(--shadow-lg)}
#products ul,#solutions ul,#howto ul,#contact ul,#author-info ul{display:grid;gap:10px;margin:1rem 0}
#products ul li,#solutions ul li,#howto ul li,#contact ul li,#author-info ul li{padding:10px 14px 10px 38px;position:relative;background:var(--bg-alt);border-radius:var(--radius-sm);border:1px solid var(--border);font-size:.92rem;color:var(--text-secondary);transition:all var(--transition)}
#products ul li::before,#solutions ul li::before,#howto ul li::before,#contact ul li::before,#author-info ul li::before{content:"✓";position:absolute;left:14px;top:10px;color:var(--primary);font-weight:700}
#products ul li:hover,#solutions ul li:hover,#howto ul li:hover,#contact ul li:hover,#author-info ul li:hover{transform:translateX(6px);border-color:var(--primary);background:rgba(233,69,96,.05)}
#news article,#articles article{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
#news article:hover,#articles article:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--primary)}
#news article h3,#articles article h3{margin-top:0;font-size:1.1rem}
#articles article h3 a{color:var(--text)}
#articles article h3 a:hover{color:var(--primary)}
#articles article > a{display:inline-block;margin-top:6px;font-weight:600;font-size:.9rem;transition:transform var(--transition)}
#articles article > a:hover{transform:translateX(5px)}
#cases blockquote{background:var(--bg-alt);border-left:4px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:16px 20px;margin:12px 0;font-style:normal;color:var(--text-secondary);position:relative;transition:all var(--transition)}
#cases blockquote::before{content:"❝";position:absolute;top:-6px;left:10px;font-size:2.4rem;color:var(--primary);opacity:.18;line-height:1}
#cases blockquote:hover{transform:translateX(6px);box-shadow:var(--shadow)}
#faq details{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:border-color var(--transition),box-shadow var(--transition)}
#faq details[open]{border-color:var(--primary);box-shadow:var(--shadow)}
#faq summary{padding:16px 20px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text);transition:background var(--transition);list-style:none}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--primary);transition:transform var(--transition);flex-shrink:0}
#faq details[open] summary::after{transform:rotate(45deg)}
#faq summary:hover{background:rgba(233,69,96,.06)}
#faq details p{padding:0 20px 18px;margin:0;font-size:.92rem;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
#howto h4{color:var(--primary);position:relative;padding-left:18px}
#howto h4::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--grad-2)}
#contact address{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;margin:16px 0}
#contact address p{margin-bottom:.6rem}
#sitemap ul,#links ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:1rem}
#sitemap ul li a,#links ul li a{display:block;padding:10px 16px;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;color:var(--text-secondary);transition:all var(--transition)}
#sitemap ul li a:hover,#links ul li a:hover{background:var(--grad-2);color:#fff;border-color:transparent;transform:translateY(-3px);box-shadow:var(--shadow)}
#privacy,#disclaimer,#copyright{font-size:.9rem}
#author-info h3{color:var(--primary)}
#site-footer{background:var(--grad-3);color:#c8c8dc;margin-top:56px;padding:48px 20px 0;position:relative;overflow:hidden}
#site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-2)}
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;padding-bottom:36px}
.footer-section h3{color:#fff;font-size:1.05rem;margin-bottom:14px;position:relative;padding-bottom:10px}
.footer-section h3::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--grad-2);border-radius:2px}
.footer-section p{color:#a0a0c0;font-size:.88rem;margin-bottom:.5rem}
.footer-section ul{display:grid;gap:8px}
.footer-section ul li a{color:#a0a0c0;font-size:.88rem;transition:all var(--transition);display:inline-block}
.footer-section ul li a:hover{color:var(--primary-light);transform:translateX(5px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px;text-align:center}
.footer-bottom p{color:#8888a8;font-size:.82rem;margin:0}
#back-to-top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;background:var(--grad-2);color:#fff;font-size:1.3rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(20px);transition:all var(--transition);z-index:900}
#back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
#back-to-top:hover{transform:translateY(-5px) scale(1.08);box-shadow:0 16px 40px rgba(233,69,96,.4)}
@media (max-width:1024px){
#main-nav a{padding:8px 9px;font-size:.82rem}
#site-search input{width:130px}
}
@media (max-width:860px){
#mobile-menu-btn{display:flex}
#main-nav{position:fixed;top:var(--header-h);left:0;right:0;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;box-shadow:var(--shadow);padding:0 20px}
#main-nav.open{max-height:520px;padding:16px 20px}
#main-nav ul{flex-direction:column;gap:4px;width:100%}
#main-nav a{padding:12px 16px;font-size:.95rem;border-radius:var(--radius-sm)}
#site-search{display:none}
.brand-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
:root{--header-h:64px}
main{padding:0 14px}
.header-inner{padding:0 14px;gap:12px}
.site-name{font-size:1rem}
section{margin:32px 0}
#banner{margin:16px 0;border-radius:var(--radius)}
.banner-slider{min-height:220px}
.banner-slide svg{border-radius:var(--radius)}
.brand-stats{gap:12px}
.stat-item{padding:18px 12px}
#company-profile,#products,#solutions,#cases,#news,#articles,#faq,#howto,#contact,#sitemap,#links,#privacy,#disclaimer,#copyright,#author-info{padding:20px 16px;border-radius:var(--radius)}
#sitemap ul,#links ul{grid-template-columns:1fr}
.footer-inner{grid-template-columns:1fr;gap:24px}
#back-to-top{right:16px;bottom:16px;width:42px;height:42px;font-size:1.1rem}
#faq summary{padding:14px 16px;font-size:.92rem}
#faq details p{padding:0 16px 14px}
}
@media (max-width:380px){
.site-name{display:none}
h1{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
html{scroll-behavior:auto}
}
@media print{
#site-header,#back-to-top,#banner,#site-footer,#links,#sitemap{display:none}
body{background:#fff;color:#000}
section{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid}
}
::selection{background:var(--primary);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-alt)}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:6px;border:2px solid var(--bg-alt)}
::-webkit-scrollbar-thumb:hover{background:var(--primary-dark)}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px}