:root{--primary:#1a936f;--primary-light:#2fb380;--primary-lighter:#c6f6d5;--primary-dark:#0f6b4f;--accent:#f6ad55;--accent-light:#fbd38d;--bg:#f7faf9;--bg-alt:#ffffff;--bg-card:rgba(255,255,255,.72);--bg-glass:rgba(255,255,255,.55);--text:#1a202c;--text-secondary:#4a5568;--text-muted:#718096;--border:rgba(26,147,111,.15);--shadow-sm:0 2px 8px rgba(26,147,111,.08);--shadow-md:0 8px 24px rgba(26,147,111,.12);--shadow-lg:0 16px 48px rgba(26,147,111,.16);--shadow-glow:0 0 32px rgba(26,147,111,.25);--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--transition:.3s cubic-bezier(.4,0,.2,1);--header-h:140px;--gradient-primary:linear-gradient(135deg,#1a936f 0%,#2fb380 50%,#48d1a0 100%);--gradient-hero:linear-gradient(160deg,#0f6b4f 0%,#1a936f 35%,#2fb380 70%,#48d1a0 100%);--gradient-accent:linear-gradient(135deg,#f6ad55 0%,#fbd38d 100%);--gradient-glass:linear-gradient(135deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.6) 100%)}
[data-theme=dark]{--primary:#2fb380;--primary-light:#48d1a0;--primary-lighter:#1a3d30;--primary-dark:#0a4a36;--accent:#f6ad55;--accent-light:#fbd38d;--bg:#0d1512;--bg-alt:#131f1a;--bg-card:rgba(19,31,26,.78);--bg-glass:rgba(19,31,26,.6);--text:#e6f4ee;--text-secondary:#b8d4c8;--text-muted:#7a9e8e;--border:rgba(47,179,128,.2);--shadow-sm:0 2px 8px rgba(0,0,0,.3);--shadow-md:0 8px 24px rgba(0,0,0,.4);--shadow-lg:0 16px 48px rgba(0,0,0,.5);--shadow-glow:0 0 32px rgba(47,179,128,.2);--gradient-primary:linear-gradient(135deg,#0a4a36 0%,#1a936f 50%,#2fb380 100%);--gradient-hero:linear-gradient(160deg,#061f18 0%,#0a4a36 35%,#1a936f 70%,#2fb380 100%);--gradient-glass:linear-gradient(135deg,rgba(19,31,26,.85) 0%,rgba(19,31,26,.6) 100%)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 20px)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.75;font-size:16px;overflow-x:hidden;transition:background var(--transition),color var(--transition)}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 20%,rgba(26,147,111,.06) 0,transparent 50%),radial-gradient(circle at 85% 80%,rgba(246,173,85,.05) 0,transparent 50%);pointer-events:none;z-index:0}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color var(--transition),opacity var(--transition)}
a:hover{color:var(--primary-light);opacity:.9}
ul,ol{list-style:none}
h1,h2,h3,h4{line-height:1.35;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,3.5vw,2.6rem)}
h2{font-size:clamp(1.35rem,2.5vw,2rem);margin-bottom:1rem;position:relative;padding-bottom:.6rem}
h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:4px;background:var(--gradient-primary)}
h3{font-size:clamp(1.1rem,1.8vw,1.35rem);margin:1.6rem 0 .7rem;color:var(--text)}
p{margin-bottom:1rem;color:var(--text-secondary)}
::selection{background:var(--primary);color:#fff}
#site-header{position:sticky;top:0;z-index:1000;background:var(--bg-glass);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid var(--border);transition:background var(--transition),box-shadow var(--transition)}
#site-header.scrolled{box-shadow:var(--shadow-md)}
.top-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem clamp(1rem,4vw,3rem);background:var(--gradient-primary);color:#fff;font-size:.8rem;flex-wrap:wrap}
.top-bar span{opacity:.95}
nav[aria-label=主导航]{display:flex;align-items:center;gap:1.2rem;padding:.75rem clamp(1rem,4vw,3rem);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.brand svg{filter:drop-shadow(0 2px 6px rgba(26,147,111,.35));transition:transform var(--transition)}
.brand:hover svg{transform:rotate(-8deg) scale(1.08)}
.brand strong{font-size:1.15rem;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
nav[aria-label=主导航]>ul{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;flex:1;justify-content:center}
nav[aria-label=主导航]>ul li a{display:block;padding:.4rem .7rem;border-radius:var(--radius-sm);font-size:.88rem;color:var(--text-secondary);position:relative;white-space:nowrap;transition:color var(--transition),background var(--transition),transform var(--transition)}
nav[aria-label=主导航]>ul li a::after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:2px;background:var(--gradient-primary);border-radius:2px;transform:translateX(-50%);transition:width var(--transition)}
nav[aria-label=主导航]>ul li a:hover{color:var(--primary);background:rgba(26,147,111,.08);transform:translateY(-2px)}
nav[aria-label=主导航]>ul li a:hover::after{width:60%}
.nav-tools{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.nav-tools form{display:flex;align-items:center;gap:.3rem;position:relative}
.nav-tools label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.nav-tools input[type=search]{width:170px;padding:.45rem .9rem;border:1px solid var(--border);border-radius:50px;background:var(--bg-card);color:var(--text);font-size:.85rem;outline:none;transition:width var(--transition),border-color var(--transition),box-shadow var(--transition)}
.nav-tools input[type=search]:focus{width:230px;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,147,111,.15)}
.nav-tools input[type=search]::placeholder{color:var(--text-muted)}
.nav-tools button{padding:.45rem .9rem;border:1px solid var(--border);border-radius:50px;background:var(--bg-card);color:var(--text-secondary);font-size:.82rem;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.nav-tools button:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
#menu-toggle{display:none}
main{position:relative;z-index:1}
main>section{padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,3rem);max-width:1240px;margin:0 auto;animation:fadeUp .7s ease both}
main>section:nth-child(even){background:var(--bg-alt);border-radius:var(--radius-xl);margin-top:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
#hero{background:var(--gradient-hero);border-radius:var(--radius-xl);color:#fff;margin-top:1.5rem;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);max-width:1240px}
#hero::before{content:"";position:absolute;top:-50%;right:-20%;width:60%;height:200%;background:radial-gradient(circle,rgba(198,246,213,.18) 0,transparent 70%);animation:float 12s ease-in-out infinite}
#hero::after{content:"";position:absolute;bottom:-40%;left:-10%;width:50%;height:160%;background:radial-gradient(circle,rgba(246,173,85,.12) 0,transparent 70%);animation:float 15s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,20px) scale(1.08)}}
#hero h1{color:#fff;margin-bottom:1rem;text-shadow:0 2px 16px rgba(0,0,0,.2);position:relative;z-index:1}
#hero>p{color:rgba(255,255,255,.92);max-width:900px;position:relative;z-index:1;font-size:1.02rem}
#hero figure{position:relative;z-index:1;margin:1.8rem 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.5rem}
#hero figure svg{border-radius:var(--radius-md)}
#hero figcaption{text-align:center;font-size:.85rem;color:rgba(255,255,255,.85);padding:.6rem .5rem .2rem}
.banner-carousel{display:flex;gap:1rem;overflow-x:auto;padding:1rem 0;scroll-snap-type:x mandatory;position:relative;z-index:1;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.banner-carousel::-webkit-scrollbar{display:none}
.banner-carousel .slide{flex:0 0 auto;min-width:min(320px,80%);padding:1rem 1.6rem;border-radius:var(--radius-lg);background:rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:600;font-size:.95rem;scroll-snap-align:start;transition:transform var(--transition),background var(--transition);cursor:default}
.banner-carousel .slide:hover{transform:translateY(-4px) scale(1.02);background:rgba(255,255,255,.26)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;z-index:1;margin-top:.5rem}
.stats li{text-align:center;padding:1.2rem .6rem;border-radius:var(--radius-lg);background:rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.22);transition:transform var(--transition),background var(--transition),box-shadow var(--transition)}
.stats li:hover{transform:translateY(-6px);background:rgba(255,255,255,.24);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.stats strong{display:block;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#fff;line-height:1.1}
.stats span{font-size:.8rem;color:rgba(255,255,255,.88);display:block;margin-top:.3rem}
nav[aria-label=面包屑导航]{max-width:1240px;margin:0 auto;padding:1rem clamp(1rem,4vw,3rem) 0;animation:fadeUp .7s ease both}
nav[aria-label=面包屑导航] ol{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted);flex-wrap:wrap}
nav[aria-label=面包屑导航] ol li:not(:last-child)::after{content:"›";margin-left:.5rem;color:var(--text-muted);opacity:.6}
nav[aria-label=面包屑导航] ol li a{color:var(--primary)}
#brand-intro h3,#products h3,#solutions h3,#cases h3,#articles h3,#news h3,#faq h3,#howto h3,#contact h3,#legal h3{margin-top:1.8rem;padding-left:1rem;border-left:4px solid var(--primary);border-radius:2px}
#cases blockquote{background:var(--bg-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius-md);padding:1.2rem 1.5rem;margin:1.2rem 0;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}
#cases blockquote:hover{transform:translateX(6px);box-shadow:var(--shadow-md)}
#cases blockquote p{font-style:italic;color:var(--text);margin-bottom:.5rem}
#cases blockquote footer{font-size:.85rem;color:var(--text-muted);text-align:right}
#news article,#articles article{background:var(--bg-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.2rem;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);position:relative;overflow:hidden}
#news article::before,#articles article::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--gradient-primary);transform:scaleY(0);transform-origin:top;transition:transform var(--transition)}
#news article:hover,#articles article:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
#news article:hover::before,#articles article:hover::before{transform:scaleY(1)}
#news article h3,#articles article h3{margin-top:0;padding-left:0;border-left:none;color:var(--text);transition:color var(--transition)}
#news article:hover h3,#articles article:hover h3{color:var(--primary)}
#news article time,#articles article time{display:inline-block;font-size:.78rem;color:var(--text-muted);background:rgba(26,147,111,.08);padding:.2rem .7rem;border-radius:50px;margin-bottom:.7rem}
#news article a,#articles article a{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.9rem;margin-top:.5rem}
#news article a::after,#articles article a::after{content:"→";transition:transform var(--transition)}
#news article a:hover::after,#articles article a:hover::after{transform:translateX(4px)}
#faq details{background:var(--bg-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:.9rem;overflow:hidden;transition:box-shadow var(--transition),border-color var(--transition)}
#faq details:hover{box-shadow:var(--shadow-md);border-color:var(--primary)}
#faq details[open]{border-color:var(--primary);box-shadow:var(--shadow-md)}
#faq summary{padding:1rem 1.3rem;cursor:pointer;font-weight:600;color:var(--text);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:color var(--transition),background var(--transition);position:relative}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--primary);flex-shrink:0;transition:transform var(--transition);line-height:1}
#faq details[open] summary::after{transform:rotate(45deg)}
#faq summary:hover{color:var(--primary);background:rgba(26,147,111,.05)}
#faq details p{padding:0 1.3rem 1.1rem;margin:0;animation:fadeUp .35s ease both;font-size:.95rem}
#howto ol{counter-reset:step;display:grid;gap:.8rem;margin:1.2rem 0}
#howto ol li{counter-increment:step;position:relative;padding:1rem 1.2rem 1rem 3.4rem;background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-md);transition:transform var(--transition),box-shadow var(--transition);color:var(--text-secondary)}
#howto ol li::before{content:counter(step);position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1.9rem;height:1.9rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gradient-primary);color:#fff;font-weight:700;font-size:.85rem;box-shadow:var(--shadow-sm)}
#howto ol li:hover{transform:translateX(6px);box-shadow:var(--shadow-md)}
#contact address{font-style:normal}
#contact address ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.8rem;margin:1.2rem 0}
#contact address ul li{padding:1rem 1.2rem;background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.92rem;color:var(--text-secondary);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
#contact address ul li:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary)}
#sitemap ul,#links ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem;margin-top:1rem}
#sitemap ul li a,#links ul li a{display:block;padding:.7rem 1rem;background:var(--bg-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.9rem;transition:all var(--transition)}
#sitemap ul li a:hover,#links ul li a:hover{background:var(--gradient-primary);color:#fff;transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:transparent}
#author-info ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem;margin-top:1rem}
#author-info ul li{padding:.7rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.88rem;color:var(--text-secondary)}
#legal h3{margin-top:1.5rem}
footer{background:var(--gradient-hero);color:#fff;padding:2.5rem clamp(1rem,4vw,3rem) 2rem;text-align:center;margin-top:3rem;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-accent)}
footer p{color:rgba(255,255,255,.88);font-size:.85rem;margin-bottom:.5rem}
footer a{color:#c6f6d5;text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:#fff}
#back-to-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);width:48px;height:48px;border-radius:50%;border:none;background:var(--gradient-primary);color:#fff;font-size:.7rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(20px) scale(.8);transition:all var(--transition);z-index:999;display:flex;align-items:center;justify-content:center;line-height:1.1;text-align:center;padding:0}
#back-to-top.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
#back-to-top:hover{transform:translateY(-4px) scale(1.08);box-shadow:var(--shadow-glow)}
@media(max-width:1024px){nav[aria-label=主导航]>ul{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;padding:.4rem 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav[aria-label=主导航]>ul::-webkit-scrollbar{display:none}
nav[aria-label=主导航]>ul li a{font-size:.82rem;padding:.35rem .55rem}
.nav-tools input[type=search]{width:140px}
.nav-tools input[type=search]:focus{width:180px}
.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){:root{--header-h:120px}
.top-bar{flex-direction:column;gap:.25rem;text-align:center;font-size:.72rem;padding:.5rem 1rem}
nav[aria-label=主导航]{padding:.6rem 1rem;gap:.6rem}
.brand strong{font-size:1rem}
#menu-toggle{display:block}
nav[aria-label=主导航]>ul{display:none;flex-direction:column;align-items:stretch;gap:.15rem;padding:.5rem 0;order:4;flex-basis:100%}
nav[aria-label=主导航]>ul.open{display:flex;animation:fadeUp .3s ease both}
nav[aria-label=主导航]>ul li a{padding:.6rem .8rem;font-size:.9rem;border-radius:var(--radius-sm)}
.nav-tools{flex-wrap:wrap;gap:.4rem}
.nav-tools form{flex:1;min-width:140px}
.nav-tools input[type=search]{width:100%}
.nav-tools input[type=search]:focus{width:100%}
#hero{padding:1.5rem 1rem}
#hero>p{font-size:.92rem}
.banner-carousel .slide{min-width:75%;font-size:.88rem;padding:.85rem 1.2rem}
.stats{grid-template-columns:repeat(2,1fr);gap:.7rem}
.stats strong{font-size:1.5rem}
.stats span{font-size:.72rem}
main>section{padding:1.8rem 1rem}
main>section:nth-child(even){border-radius:var(--radius-lg)}
#news article,#articles article{padding:1.2rem}
#contact address ul{grid-template-columns:1fr}
#sitemap ul,#links ul{grid-template-columns:repeat(2,1fr)}
#author-info ul{grid-template-columns:1fr}
#back-to-top{width:42px;height:42px;font-size:.62rem}}
@media(max-width:480px){h2::after{width:40px}
.stats{grid-template-columns:repeat(2,1fr)}
.stats li{padding:.9rem .4rem}
#sitemap ul,#links ul{grid-template-columns:1fr}
#howto ol li{padding:1rem 1rem 1rem 3rem}
#faq summary{padding:.85rem 1rem;font-size:.92rem}
#faq details p{padding:0 1rem .9rem;font-size:.88rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{#site-header,#back-to-top,.banner-carousel,nav[aria-label=面包屑导航]{display:none}
body{background:#fff;color:#000}
main>section{box-shadow:none;border:none;padding:1rem 0}
footer{background:#fff;color:#000}}