/* ============================================================
   鑱旂Η绉戞妧瀹樼綉涓绘牱寮?- Part 1: 鍙橀噺/閲嶇疆/宸ュ叿/鎸夐挳/鍖哄煙鏍囬
   ============================================================ */
:root {
  --primary:#0058d6; --primary-light:#3b82f6; --primary-dark:#003fa3;
  --accent:#06b6d4; --accent2:#8b5cf6;
  --dark:#040d1e; --dark-2:#0a1628; --dark-3:#0f2040;
  --dark-card:rgba(255,255,255,.04); --dark-border:rgba(255,255,255,.08);
  --text-primary:#1a1a2e; --text-muted:#64748b; --text-light:#e2e8f0;
  --white:#ffffff; --bg-light:#f8faff; --bg-card:#ffffff;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 16px rgba(0,88,214,.10);
  --shadow-lg:0 12px 40px rgba(0,88,214,.15);
  --shadow-xl:0 24px 64px rgba(0,88,214,.20);
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-xl:32px;
  --gradient:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  --gradient-dark:linear-gradient(135deg,#040d1e 0%,#0f2040 100%);
  --t:.3s cubic-bezier(.4,0,.2,1);
  --font:'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); color:var(--text-primary); background:var(--white); line-height:1.7; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:50px; font-size:15px; font-weight:600; letter-spacing:.3px; transition:var(--t); cursor:pointer; white-space:nowrap; border:none; }
.btn-primary { background:var(--gradient); color:var(--white); box-shadow:0 4px 20px rgba(0,88,214,.35); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,88,214,.45); }
.btn-outline { background:transparent; color:var(--white); border:2px solid rgba(255,255,255,.5); }
.btn-outline:hover { background:rgba(255,255,255,.12); border-color:var(--white); }
.btn-outline-dark { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.btn-outline-dark:hover { background:var(--primary); color:var(--white); }
.btn-white { background:var(--white); color:var(--primary); box-shadow:0 4px 20px rgba(0,0,0,.15); }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.2); }
.btn-sm { padding:9px 20px; font-size:14px; }
.btn-lg { padding:16px 40px; font-size:17px; }
/* Sections */
.section { padding:100px 0; }
.section-light { background:var(--bg-light); }
.section-dark { background:var(--gradient-dark); position:relative; overflow:hidden; }
.section-dark::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 0%,rgba(0,88,214,.15) 0%,transparent 70%); pointer-events:none; }
.section-header { text-align:center; margin-bottom:64px; }
.section-tag { display:inline-block; padding:5px 16px; border-radius:50px; font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; background:rgba(0,88,214,.08); color:var(--primary); margin-bottom:16px; }
.section-dark .section-tag { background:rgba(59,130,246,.15); color:var(--accent); }
.section-title { font-size:clamp(28px,4vw,44px); font-weight:700; line-height:1.25; color:var(--text-primary); margin-bottom:16px; letter-spacing:-.5px; }
.section-dark .section-title { color:var(--white); }
.title-highlight { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-subtitle { font-size:17px; color:var(--text-muted); max-width:640px; margin:0 auto; line-height:1.7; }
.section-dark .section-subtitle { color:rgba(255,255,255,.65); }
/* Scroll reveal animations */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-left { opacity:0; transform:translateX(-32px); transition:opacity .7s ease,transform .7s ease; }
.reveal-left.visible { opacity:1; transform:none; }
.reveal-right { opacity:0; transform:translateX(32px); transition:opacity .7s ease,transform .7s ease; }
.reveal-right.visible { opacity:1; transform:none; }
/* Keyframes */
@keyframes fadeInUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes heroOrb { from{transform:translate(0,0) scale(1)} to{transform:translate(30px,-30px) scale(1.1)} }
@keyframes counterUp { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
/* Pagination */
.pagination { display:flex; justify-content:center; margin-top:48px; }
.pagination ul { display:flex; gap:8px; }
.pagination li a,
.pagination li span { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; color:var(--text-muted); border:1px solid #e2e8f0; transition:var(--t); }
.pagination li.active a,
.pagination li a:hover { background:var(--primary); color:var(--white); border-color:var(--primary); }
/* Alert */
.alert { padding:14px 18px; border-radius:var(--radius-md); font-size:14px; margin-bottom:20px; }
.alert-success { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
.alert-error { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
/* Part 2: 椤堕儴瀵艰埅 Header */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(4,13,30,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transition:background var(--t),box-shadow var(--t),padding var(--t);
}
.site-header .container { display:flex; align-items:center; gap:24px; height:72px; }
.site-header.scrolled {
  background:rgba(4,13,30,.98);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; }
.logo-icon svg { width:40px; height:40px; }
.logo-text { font-size:22px; font-weight:800; color:var(--white); letter-spacing:-.3px; }
.logo-img { height:44px !important; max-width:180px; object-fit:contain; }
.nav-spacer { flex:1; }
.main-nav {
  position:fixed; top:0; left:0; right:0; height:72px; z-index:1001;
  display:flex; align-items:center; gap:2px;
  max-width:1280px; margin:0 auto;
  pointer-events:none;
  padding-left:220px; padding-right:280px;
}
.main-nav > * { pointer-events:auto; }
.nav-link {
  padding:8px 14px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:500;
  color:rgba(255,255,255,.8); transition:var(--t);
}
.nav-link:hover,.nav-link.active { color:var(--white); background:rgba(255,255,255,.08); }
.header-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; margin-left:auto; }
/* Mobile toggle */
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:var(--t); }
.nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
/* Navigation dropdown */
.nav-dropdown { position:relative; }
.nav-dropdown-trigger { display:inline-flex; align-items:center; gap:4px; }
.nav-dd-arrow { transition:transform .2s ease; }
.nav-dropdown:hover .nav-dd-arrow { transform:rotate(180deg); }
.nav-dropdown-menu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px);
  min-width:180px; background:rgba(10,22,40,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:8px;
  opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 16px 48px rgba(0,0,0,.4); z-index:100;
  display:flex; flex-direction:column;
}
.nav-dropdown:hover .nav-dropdown-menu { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }
.nav-dd-item {
  display:block; padding:9px 16px; border-radius:8px; font-size:14px; font-weight:500;
  color:rgba(255,255,255,.7); transition:background .15s,color .15s; white-space:nowrap;
}
.nav-dd-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-dd-all { font-weight:700; color:var(--accent); border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:4px; padding-bottom:12px; }
/* Page hero banner (inner pages) */
.page-hero {
  background:var(--gradient-dark); padding:140px 0 80px; position:relative; overflow:hidden; text-align:center;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(0,88,214,.3) 0%,transparent 70%);
}
.page-hero-content { position:relative; z-index:2; }
.page-hero h1 { font-size:clamp(32px,5vw,52px); font-weight:800; color:var(--white); margin-bottom:16px; letter-spacing:-1px; }
.page-hero p { font-size:18px; color:rgba(255,255,255,.7); max-width:600px; margin:0 auto; }
/* Breadcrumb */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.5); margin-bottom:24px; justify-content:center; }
.breadcrumb a { color:rgba(255,255,255,.5); transition:var(--t); }
.breadcrumb a:hover { color:var(--white); }
.breadcrumb .sep { opacity:.4; }
/* Part 3: Hero 棣栭〉鑻遍泟鍖?*/
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden; background:var(--dark); padding-top:72px;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 60% -10%,rgba(0,88,214,.5) 0%,transparent 55%),
    radial-gradient(ellipse 50% 50% at -5% 80%,rgba(6,182,212,.3) 0%,transparent 55%),
    radial-gradient(ellipse 40% 40% at 110% 110%,rgba(139,92,246,.2) 0%,transparent 55%),
    var(--dark);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(59,130,246,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,130,246,.06) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at center,black 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at center,black 40%,transparent 100%);
}
.hero-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:.6; animation:heroOrb 8s ease-in-out infinite alternate; }
.hero-orb-1 { width:600px; height:600px; background:rgba(0,88,214,.4); top:-200px; right:-100px; animation-duration:10s; }
.hero-orb-2 { width:400px; height:400px; background:rgba(6,182,212,.3); bottom:-100px; left:-80px; animation-duration:13s; animation-delay:-4s; }
.hero-orb-3 { width:300px; height:300px; background:rgba(139,92,246,.25); top:30%; left:40%; animation-duration:7s; animation-delay:-2s; }
.hero .container { display:flex; align-items:center; gap:64px; position:relative; z-index:2; width:100%; padding-top:40px; padding-bottom:40px; }
.hero-content { flex:1; max-width:640px; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.25);
  border-radius:50px; padding:6px 16px; font-size:13px; font-weight:600;
  color:var(--accent); letter-spacing:.5px; margin-bottom:28px;
  animation:fadeInUp .6s ease forwards;
}
.hero-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite; }
.hero-title {
  font-size:clamp(36px,5.5vw,64px); font-weight:800; line-height:1.15;
  color:var(--white); letter-spacing:-1.5px; margin-bottom:24px;
  animation:fadeInUp .7s ease .1s both;
}
.hero-title .line2 {
  background:linear-gradient(90deg,var(--accent) 0%,var(--primary-light) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-desc {
  font-size:18px; color:rgba(255,255,255,.72); line-height:1.7;
  margin-bottom:40px; max-width:520px; animation:fadeInUp .7s ease .2s both;
}
.hero-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:60px; animation:fadeInUp .7s ease .3s both; }
.hero-stats { display:flex; gap:40px; animation:fadeInUp .7s ease .4s both; }
.hero-stat-num { font-size:36px; font-weight:800; color:var(--white); line-height:1; letter-spacing:-1px; }
.hero-stat-num .unit { font-size:22px; font-weight:700; }
.hero-stat-label { font-size:13px; color:rgba(255,255,255,.5); margin-top:4px; letter-spacing:.5px; }
/* Hero 鍙充晶娴姩鍗＄墖 */
.hero-visual { flex:0 0 440px; position:relative; height:500px; }
.hero-card {
  position:absolute; background:rgba(255,255,255,.05);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:24px;
}
.hero-card-main { width:320px; top:50px; left:0; z-index:3; animation:floatCard 6s ease-in-out infinite; }
.hero-card-side { width:240px; top:0; right:0; z-index:2; animation:floatCard 7s ease-in-out infinite .5s; opacity:.8; }
.hero-card-bottom { width:260px; bottom:30px; right:15px; z-index:4; animation:floatCard 5.5s ease-in-out infinite 1s; }
.hero-card-title { font-size:12px; font-weight:600; color:rgba(255,255,255,.5); letter-spacing:.8px; text-transform:uppercase; margin-bottom:12px; }
.hero-card-value { font-size:26px; font-weight:800; color:var(--white); letter-spacing:-1px; }
.hero-card-sub { font-size:13px; color:var(--accent); margin-top:4px; }
.hero-card-brands { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.brand-badge {
  padding:4px 10px; background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.3);
  border-radius:20px; font-size:12px; font-weight:600; color:var(--accent);
}
.progress-bar-wrap { margin-top:14px; }
.progress-label { display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.5); margin-bottom:6px; }
.progress-bar { height:4px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; border-radius:2px; background:var(--gradient); transition:width 1.5s ease; }
/* Part 4: 鍝佺墝Tabs + 浜у搧鍗＄墖 */
.brand-tabs-section {
  background:var(--dark-2); padding:28px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-tabs-row { display:flex; align-items:center; gap:16px; }
.brand-tabs { display:flex; gap:8px; flex-wrap:wrap; flex:1; min-width:0; }
.product-search-box {
  position:relative; flex-shrink:0;
}
.product-search-icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.4); pointer-events:none;
}
.product-search-input {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md); padding:9px 14px 9px 38px;
  color:var(--white); font-size:14px; width:220px; outline:none;
  transition:var(--t);
}
.product-search-input::placeholder { color:rgba(255,255,255,.35); }
.product-search-input:focus {
  border-color:rgba(0,88,214,.5); background:rgba(255,255,255,.12);
}
@media(max-width:768px){
  .brand-tabs-row { flex-direction:column; align-items:stretch; gap:12px; }
  .product-search-input { width:100%; }
}
.brand-tab {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 22px; border-radius:var(--radius-md); cursor:pointer;
  transition:var(--t); white-space:nowrap; border:1px solid transparent;
  color:rgba(255,255,255,.55); text-decoration:none;
}
.brand-tab:hover { background:rgba(255,255,255,.05); color:var(--white); }
.brand-tab.active { background:rgba(0,88,214,.2); border-color:rgba(0,88,214,.4); color:var(--white); }
.brand-tab-name { font-size:15px; font-weight:600; }
.brand-tab-models { font-size:11px; color:var(--accent); }
/* Product grid */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; }
.product-card {
  background:var(--bg-card); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,.06);
  transition:transform var(--t),box-shadow var(--t); display:flex; flex-direction:column;
}
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.product-card-img {
  position:relative; aspect-ratio:16/10;
  background:linear-gradient(135deg,#e8f0fe 0%,#dbeafe 100%); overflow:hidden;
}
.product-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.product-card:hover .product-card-img img { transform:scale(1.05); }
.product-card-img-placeholder {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
}
.product-card-img-placeholder svg { width:48px; height:48px; stroke:var(--primary-light); opacity:.5; }
.product-card-img-placeholder span { font-size:13px; color:var(--primary); font-weight:600; opacity:.7; }
.product-card-badge {
  position:absolute; top:14px; left:14px; padding:4px 12px; border-radius:50px;
  font-size:11px; font-weight:700; letter-spacing:.5px;
  background:var(--gradient); color:var(--white);
}
.product-card-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.product-card-cat { font-size:12px; font-weight:600; color:var(--primary); letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px; }
.product-card-name { font-size:19px; font-weight:700; color:var(--text-primary); margin-bottom:6px; line-height:1.3; }
.product-card-model { font-size:13px; color:var(--text-muted); margin-bottom:12px; }
.product-card-desc {
  font-size:14px; color:var(--text-muted); line-height:1.6; margin-bottom:16px; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card-features { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.feature-tag { padding:3px 10px; background:var(--bg-light); border-radius:20px; font-size:12px; color:var(--text-muted); border:1px solid rgba(0,0,0,.06); }
.product-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; border-top:1px solid rgba(0,0,0,.06);
}
.product-card-screen { font-size:13px; color:var(--text-muted); }
.product-card-screen strong { color:var(--primary); font-weight:700; font-size:14px; }
/* Empty state */
.empty-state { text-align:center; padding:80px 24px; }
.empty-state svg { width:64px; height:64px; stroke:var(--text-muted); margin:0 auto 16px; opacity:.4; }
.empty-state p { font-size:16px; color:var(--text-muted); }
/* Part 5: 浼樺娍鐗规€?+ 缁熻鏁板瓧 */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.feature-card {
  background:var(--dark-card); border:1px solid var(--dark-border);
  border-radius:var(--radius-lg); padding:32px; transition:var(--t);
  position:relative; overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gradient); transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.feature-card:hover { background:rgba(255,255,255,.07); transform:translateY(-4px); }
.feature-card:hover::before { transform:scaleX(1); }
.feature-icon {
  width:52px; height:52px; border-radius:var(--radius-md);
  background:rgba(59,130,246,.12); display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.feature-icon svg { width:24px; height:24px; stroke:var(--accent); stroke-width:1.8; fill:none; }
.feature-title { font-size:18px; font-weight:700; color:var(--white); margin-bottom:12px; }
.feature-list { display:flex; flex-direction:column; gap:9px; }
.feature-list li { font-size:14px; color:rgba(255,255,255,.62); padding-left:18px; position:relative; line-height:1.5; }
.feature-list li::before { content:'›'; position:absolute; left:0; color:var(--accent); font-weight:700; font-size:20px; line-height:1.1; }
/* Service Process */
.svc-process-grid {
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:20px;
}
.svc-step-card {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg); padding:24px 20px; text-align:center;
  transition:var(--t); position:relative; overflow:visible;
  backdrop-filter:blur(8px);
}
.svc-step-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.3); background:rgba(255,255,255,.12); }
.svc-step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; font-size:15px; font-weight:800;
  margin-bottom:12px;
}
.svc-step-icon { margin-bottom:10px; }
.svc-step-title { font-size:15px; font-weight:700; color:var(--white); margin-bottom:6px; }
.svc-step-desc { font-size:13px; color:rgba(255,255,255,.6); line-height:1.6; }
.svc-step-arrow { display:none; }
/* Light mode: service process cards use solid white */
:root:not([data-theme="dark"]) .svc-step-card {
  background:#ffffff; border-color:#e5e7eb; backdrop-filter:none;
  box-shadow:0 2px 8px rgba(0,88,214,.06);
}
:root:not([data-theme="dark"]) .svc-step-card:hover { box-shadow:var(--shadow-lg); background:#ffffff; }
:root:not([data-theme="dark"]) .svc-step-title { color:var(--text-primary); }
:root:not([data-theme="dark"]) .svc-step-desc { color:var(--text-muted); }
@media(max-width:900px) {
  .svc-process-grid { grid-template-columns:repeat(2, 1fr) !important; }
}
@media(max-width:540px) {
  .svc-process-grid { grid-template-columns:1fr !important; }
}
/* Stats */
.stats-section { padding:0; }
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.06); border-radius:var(--radius-lg); overflow:hidden;
}
.stat-item { padding:48px 32px; background:var(--dark-card); text-align:center; transition:var(--t); }
.stat-item:hover { background:rgba(255,255,255,.06); }
.stat-num {
  font-size:52px; font-weight:800;
  background:var(--gradient); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; letter-spacing:-2px; display:block;
}
.stat-unit { font-size:24px; font-weight:700; }
.stat-label { font-size:15px; color:rgba(255,255,255,.55); margin-top:10px; font-weight:500; }
/* About/Intro block */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-img-wrap { position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/3; }
.about-img-wrap img { width:100%; height:100%; object-fit:cover; }
.about-img-badge {
  position:absolute; bottom:24px; left:24px;
  background:rgba(4,13,30,.9); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md);
  padding:16px 20px;
}
.about-img-badge-num { font-size:28px; font-weight:800; color:var(--white); line-height:1; }
.about-img-badge-label { font-size:13px; color:rgba(255,255,255,.6); margin-top:4px; }
.about-content .section-tag { background:rgba(0,88,214,.08); color:var(--primary); }
.about-title { font-size:clamp(26px,3.5vw,38px); font-weight:700; color:var(--text-primary); margin-bottom:20px; line-height:1.3; letter-spacing:-.5px; }
.about-text { font-size:16px; color:var(--text-muted); line-height:1.8; margin-bottom:32px; }
.about-checks { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.about-check { display:flex; align-items:center; gap:12px; font-size:15px; color:var(--text-primary); font-weight:500; }
.about-check-icon { width:22px; height:22px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.about-check-icon svg { width:12px; height:12px; stroke:var(--white); stroke-width:3; }
/* Part 6: 瀹㈡埛璇勪环 + CTA */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.testimonial-card {
  background:var(--dark-card); border:1px solid var(--dark-border);
  border-radius:var(--radius-lg); padding:32px; transition:var(--t);
}
.testimonial-card:hover { background:rgba(255,255,255,.07); transform:translateY(-4px); }
.testimonial-stars { display:flex; gap:4px; margin-bottom:16px; }
.testimonial-stars svg { width:16px; height:16px; fill:#fbbf24; stroke:none; }
.testimonial-text { font-size:15px; color:rgba(255,255,255,.75); line-height:1.7; margin-bottom:24px; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar {
  width:44px; height:44px; border-radius:50%; background:var(--gradient);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--white); font-size:18px; flex-shrink:0;
}
.testimonial-name { font-weight:700; color:var(--white); font-size:15px; }
.testimonial-car { font-size:13px; color:rgba(255,255,255,.45); }
/* News / 鍔ㄦ€?*/
.news-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; }
.news-card {
  background:var(--bg-card); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,.06);
  transition:transform var(--t),box-shadow var(--t);
}
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.news-card-img { aspect-ratio:16/9; background:linear-gradient(135deg,#e8f0fe,#dbeafe); overflow:hidden; }
.news-card-img img { width:100%; height:100%; object-fit:cover; }
.news-card-body { padding:24px; }
.news-card-date { font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.news-card-title { font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:10px; line-height:1.4; }
.news-card-title:hover { color:var(--primary); }
.news-card-desc { font-size:14px; color:var(--text-muted); line-height:1.6; }
/* CTA */
.cta-section {
  background:var(--gradient); padding:80px 0; text-align:center;
  position:relative; overflow:hidden;
}
.cta-section::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='rgba(255,255,255,.06)' stroke-width='1'/%3E%3C/svg%3E") repeat;
  background-size:60px 60px;
}
.cta-title { font-size:clamp(28px,4vw,44px); font-weight:800; color:var(--white); margin-bottom:16px; letter-spacing:-.5px; position:relative; }
.cta-sub { font-size:17px; color:rgba(255,255,255,.82); margin-bottom:40px; position:relative; }
.cta-actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; position:relative; }
/* Footer */
.site-footer { background:var(--dark); }
.footer-top { padding:80px 0 60px; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:48px; }
.footer-brand .logo { margin-bottom:20px; }
.footer-desc { font-size:14px; color:rgba(255,255,255,.5); line-height:1.7; margin-bottom:20px; }
.footer-phone { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--accent); }
.footer-phone svg { width:16px; height:16px; stroke:var(--accent); }
.footer-title { font-size:14px; font-weight:700; color:var(--white); margin-bottom:20px; letter-spacing:.5px; text-transform:uppercase; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:14px; color:rgba(255,255,255,.5); transition:var(--t); }
.footer-links a:hover { color:var(--accent); padding-left:4px; }
.footer-contact-list { display:flex; flex-direction:column; gap:12px; }
.footer-contact-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:rgba(255,255,255,.5); }
.footer-contact-list li svg { width:16px; height:16px; stroke:var(--accent); flex-shrink:0; margin-top:3px; }
.footer-bottom { padding:24px 0; }
.footer-bottom p { font-size:13px; color:rgba(255,255,255,.3); text-align:center; }
.footer-bottom a { color:rgba(255,255,255,.4); transition:var(--t); }
.footer-bottom a:hover { color:var(--accent); }
/* Part 7: 浜у搧璇︽儏椤?*/
.product-detail-hero {
  background:var(--gradient-dark); padding:140px 0 80px;
  position:relative; overflow:hidden;
}
.product-detail-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 70% at 70% 50%,rgba(0,88,214,.25) 0%,transparent 70%);
}
.product-detail-content {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.product-detail-name {
  font-size:clamp(28px,4vw,44px); font-weight:800; color:var(--white);
  letter-spacing:-1px; margin-bottom:12px;
}
.product-detail-model { font-size:16px; color:var(--accent); margin-bottom:20px; }
.product-detail-price { display:flex; align-items:baseline; gap:4px; margin-bottom:20px; }
.price-value { font-size:32px; font-weight:800; color:#f59e0b; letter-spacing:-1px; }
.price-unit { font-size:16px; font-weight:700; color:#f59e0b; }
.price-label { font-size:13px; color:rgba(255,255,255,.45); margin-left:8px; }
.product-detail-short { font-size:16px; color:rgba(255,255,255,.72); line-height:1.7; margin-bottom:24px; }
.product-detail-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.pd-tag { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:600; color:var(--accent); background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.2); }
.pd-tag svg { stroke:var(--accent); }
.gallery-video-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .2s,background .2s; z-index:5; text-decoration:none; }
.gallery-video-btn:hover { background:rgba(0,88,214,.85); transform:translate(-50%,-50%) scale(1.1); }
.gallery-video-btn svg { fill:#fff; margin-left:3px; }
.gallery-main { position:relative; }
.product-specs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:32px; }
.spec-item {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md); padding:16px;
}
.spec-label { font-size:12px; color:rgba(255,255,255,.45); margin-bottom:4px; letter-spacing:.5px; text-transform:uppercase; }
.spec-value { font-size:18px; font-weight:700; color:var(--white); }
/* Gallery */
.gallery-main {
  aspect-ratio:4/3; background:rgba(255,255,255,.04);
  border-radius:var(--radius-xl); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.gallery-main-placeholder {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
}
.gallery-main-placeholder svg { width:80px; height:80px; stroke:rgba(255,255,255,.2); }
.gallery-main-placeholder span { font-size:16px; color:rgba(255,255,255,.3); }
.gallery-thumbs { display:flex; gap:12px; margin-top:12px; overflow-x:auto; scrollbar-width:none; }
.gallery-thumbs::-webkit-scrollbar { display:none; }
.gallery-thumb {
  width:80px; height:60px; border-radius:var(--radius-sm); overflow:hidden;
  cursor:pointer; border:2px solid transparent; transition:var(--t);
  flex-shrink:0; background:rgba(255,255,255,.06);
}
.gallery-thumb.active,.gallery-thumb:hover { border-color:var(--primary-light); }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; }
/* Detail body */
.product-detail-body { padding:80px 0; }
.product-detail-layout { display:grid; grid-template-columns:1fr 360px; gap:60px; align-items:start; }
.detail-section-title { font-size:22px; font-weight:700; color:var(--text-primary); margin-bottom:24px; padding-bottom:12px; border-bottom:2px solid var(--bg-light); }
.product-desc-content { font-size:15px; color:var(--text-muted); line-height:1.9; }
.product-desc-content p { margin-bottom:16px; }
.product-features-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
.pf-item {
  background:var(--bg-light); border-radius:var(--radius-md); padding:18px;
  border-left:3px solid var(--primary); transition:var(--t);
}
.pf-item:hover { box-shadow:var(--shadow-md); }
.pf-item h4 { font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.pf-item p { font-size:13px; color:var(--text-muted); }
/* Sidebar */
.product-sidebar { position:sticky; top:100px; display:flex; flex-direction:column; gap:20px; }
.sidebar-card {
  background:var(--bg-light); border-radius:var(--radius-lg); padding:28px;
  border:1px solid rgba(0,0,0,.06);
}
.sidebar-card h3 { font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:16px; }
.sidebar-contact-btn { width:100%; justify-content:center; margin-bottom:12px; }
.sidebar-contact-info { font-size:13px; color:var(--text-muted); text-align:center; margin-top:16px; line-height:1.6; }
.sidebar-contact-info a { color:var(--primary); font-weight:600; }
/* Related products */
.related-products { display:flex; flex-direction:column; gap:12px; }
.related-item {
  display:flex; gap:12px; align-items:center; padding:12px;
  background:var(--white); border-radius:var(--radius-md);
  border:1px solid rgba(0,0,0,.06); transition:var(--t); text-decoration:none;
}
.related-item:hover { box-shadow:var(--shadow-md); transform:translateX(4px); }
.related-img {
  width:64px; height:48px; border-radius:var(--radius-sm);
  background:var(--bg-light); object-fit:cover; flex-shrink:0;
}
.related-img-placeholder { width:64px; height:48px; border-radius:var(--radius-sm); background:linear-gradient(135deg,#e8f0fe,#dbeafe); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.related-img-placeholder svg { width:24px; height:24px; stroke:var(--primary-light); opacity:.6; }
.related-name { font-size:14px; font-weight:600; color:var(--text-primary); line-height:1.3; }
.related-model { font-size:12px; color:var(--text-muted); margin-top:2px; }
/* Part 8: 鑱旂郴椤甸潰 + 琛ㄥ崟 */
.contact-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:60px; align-items:start; }
.contact-info-title { font-size:22px; font-weight:700; color:var(--text-primary); margin-bottom:24px; }
.contact-info-item {
  display:flex; gap:16px; padding:20px 24px;
  background:var(--bg-light); border-radius:var(--radius-md); margin-bottom:14px;
  align-items:flex-start; border:1px solid rgba(0,0,0,.05);
  transition:var(--t);
}
.contact-info-item:hover { box-shadow:var(--shadow-md); transform:translateX(4px); }
.contact-info-icon {
  width:44px; height:44px; border-radius:var(--radius-md); background:var(--gradient);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-info-icon svg { width:20px; height:20px; stroke:var(--white); stroke-width:1.8; fill:none; }
.contact-info-label { font-size:12px; color:var(--text-muted); margin-bottom:4px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.contact-info-value { font-size:16px; font-weight:600; color:var(--text-primary); }
.contact-info-value a { color:var(--primary); transition:var(--t); }
.contact-info-value a:hover { color:var(--primary-dark); }
.contact-qr-tip { font-size:13px; color:var(--text-muted); margin-top:20px; text-align:center; padding:16px; background:var(--bg-light); border-radius:var(--radius-md); border:1px dashed #e2e8f0; }
/* Contact Form */
.contact-form-wrap {
  background:var(--white); border-radius:var(--radius-xl); padding:44px;
  box-shadow:var(--shadow-lg); border:1px solid rgba(0,0,0,.06);
}
.contact-form-title { font-size:22px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.contact-form-sub { font-size:14px; color:var(--text-muted); margin-bottom:32px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.form-label { font-size:14px; font-weight:600; color:var(--text-primary); }
.form-label .req { color:#ef4444; }
.form-control {
  padding:12px 16px; border:1.5px solid #e2e8f0; border-radius:var(--radius-md);
  font-size:15px; font-family:var(--font); color:var(--text-primary);
  transition:border-color var(--t),box-shadow var(--t); outline:none; width:100%;
  background:var(--white);
}
.form-control:focus { border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.form-control::placeholder { color:#bbb; }
textarea.form-control { resize:vertical; min-height:120px; }
.form-submit { width:100%; justify-content:center; font-size:16px; padding:15px 32px; margin-top:8px; }
.form-privacy { font-size:12px; color:var(--text-muted); text-align:center; margin-top:14px; }
/* Map placeholder */
.map-placeholder {
  height:280px; background:linear-gradient(135deg,#e8f0fe,#dbeafe);
  border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px; color:var(--primary); font-weight:600;
  border:1px solid rgba(0,88,214,.1); margin-top:24px;
}
.map-placeholder svg { width:40px; height:40px; stroke:var(--primary); opacity:.5; }
/* Part 9: 鍝嶅簲寮?+ 婊氬姩鏉?+ 鍏朵粬 */
/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,88,214,.3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,88,214,.5); }
/* Selection */
::selection { background:rgba(0,88,214,.2); color:var(--primary-dark); }
/* Back to top */
.back-to-top {
  position:fixed; bottom:32px; left:32px; width:44px; height:44px;
  border-radius:50%; background:var(--gradient); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); cursor:pointer; z-index:100;
  opacity:0; transform:translateY(20px); transition:var(--t); border:none;
}
.back-to-top.visible { opacity:1; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-3px); box-shadow:var(--shadow-xl); }
.back-to-top svg { width:20px; height:20px; stroke:var(--white); }
/* Loading spinner */
.spinner { width:40px; height:40px; border:3px solid rgba(0,88,214,.15); border-top-color:var(--primary); border-radius:50%; animation:spin 0.8s linear infinite; margin:40px auto; }
@keyframes spin { to { transform:rotate(360deg); } }
/* Tablet 鈮?1024px */
@media (max-width:1024px) {
  .hero .container { gap:40px; }
  .hero-visual { flex:0 0 360px; height:420px; }
  .hero-card-main { width:280px; }
  .hero-card-side { width:200px; }
  .hero-card-bottom { width:220px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .about-grid { gap:48px; }
  .product-detail-layout { grid-template-columns:1fr; }
  .product-sidebar { position:relative; top:auto; }
}
/* Mobile nav footer (hidden on desktop, shown inside drawer on mobile) */
.mobile-nav-footer { display:none; }

/* Mobile ≤768px */
@media (max-width:768px) {
  .section { padding:64px 0; }
  .section-header { margin-bottom:40px; }

  /* ── Header mobile ── */
  .site-header .container { height:60px; gap:12px; }
  .logo-text { font-size:17px; }
  .logo-img { height:34px !important; max-width:120px; }

  /* Hide desktop-only header items */
  .header-actions .lang-switcher,
  .header-actions .theme-toggle,
  .header-actions > .btn { display:none; }

  /* Hamburger */
  .nav-toggle { display:flex; }

  /* Nav drawer – full screen overlay (nav is outside header, so fixed works correctly) */
  .main-nav {
    position:fixed; top:60px; left:0; width:100%;
    height:calc(100vh - 60px); height:calc(100dvh - 60px);
    max-width:none; right:auto;
    background:rgba(4,13,30,.99);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    flex-direction:column; align-items:stretch;
    padding:16px 20px 24px; gap:2px;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    margin:0; pointer-events:auto;
    z-index:9999;
    box-sizing:border-box;
    padding-left:20px; padding-right:20px;
  }
  .main-nav.open { transform:translateX(0); }

  /* Nav links inside drawer */
  .nav-link {
    font-size:17px; padding:14px 16px; width:100%;
    border-radius:10px; color:rgba(255,255,255,.85);
  }
  .nav-link:hover,.nav-link.active { background:rgba(255,255,255,.08); color:#fff; }

  /* Dropdown inside drawer */
  .nav-dropdown { width:100%; }
  .nav-dropdown-trigger { width:100%; justify-content:space-between; }
  .nav-dd-arrow { transition:transform .25s ease; }
  .nav-dropdown.mobile-open .nav-dd-arrow { transform:rotate(180deg); }
  .nav-dropdown-menu,
  .nav-dropdown:hover .nav-dropdown-menu {
    position:static; transform:none; opacity:1; pointer-events:all;
    background:transparent; border:none; box-shadow:none; backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:0 0 0 12px; min-width:auto;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-dropdown.mobile-open .nav-dropdown-menu { max-height:500px; }
  .nav-dd-item { padding:10px 16px; font-size:15px; border-radius:8px; }
  .nav-dd-all { border-bottom:none; margin-bottom:0; padding-bottom:10px; }

  /* Mobile nav footer (lang/theme/CTA at bottom of drawer) */
  .mobile-nav-footer {
    display:flex; flex-direction:column; gap:12px;
    margin-top:auto; padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .mobile-nav-footer .mobile-nav-row {
    display:flex; align-items:center; gap:12px;
  }
  .mobile-nav-footer .lang-switcher { position:relative; }
  .mobile-nav-footer .lang-switcher-btn {
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    border-radius:10px; padding:10px 14px; color:rgba(255,255,255,.85);
    font-size:14px; display:flex; align-items:center; gap:8px; cursor:pointer;
  }
  .mobile-nav-footer .lang-dropdown {
    position:absolute; bottom:100%; left:0; margin-bottom:8px;
    background:rgba(10,22,40,.98); border:1px solid rgba(255,255,255,.12);
    border-radius:12px; padding:6px; min-width:160px;
    opacity:0; pointer-events:none; transition:opacity .2s;
    box-shadow:0 -8px 32px rgba(0,0,0,.4);
  }
  .mobile-nav-footer .lang-switcher.open .lang-dropdown { opacity:1; pointer-events:all; }
  .mobile-nav-footer .lang-dropdown a {
    display:flex; align-items:center; gap:8px; padding:9px 12px;
    border-radius:8px; font-size:14px; color:rgba(255,255,255,.7);
  }
  .mobile-nav-footer .lang-dropdown a:hover,
  .mobile-nav-footer .lang-dropdown a.active { background:rgba(255,255,255,.08); color:#fff; }
  .mobile-nav-footer .theme-toggle {
    width:42px; height:42px; border-radius:10px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:rgba(255,255,255,.85); flex-shrink:0;
  }
  .mobile-nav-footer .mobile-nav-cta {
    display:flex; padding:14px; border-radius:12px; font-size:15px; font-weight:600;
    background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;
    text-align:center; justify-content:center; gap:8px; text-decoration:none;
  }

  /* ── Hero mobile ── */
  .hero { padding-top:60px; }
  .hero .container { flex-direction:column; gap:40px; padding-top:20px; }
  .hero-content { max-width:100%; }
  .hero-visual { display:none; }
  .hero-stats { gap:24px; flex-wrap:wrap; }
  .hero-stat-num { font-size:28px; }
  /* Products */
  .products-grid { grid-template-columns:1fr; }
  /* Features */
  .features-grid { grid-template-columns:1fr; }
  /* Stats */
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat-num { font-size:40px; }
  /* About */
  .about-grid { grid-template-columns:1fr; gap:40px; }
  /* Testimonials */
  .testimonials-grid { grid-template-columns:1fr; }
  /* Product detail */
  .product-detail-content { grid-template-columns:1fr; gap:40px; }
  .product-specs { grid-template-columns:1fr 1fr; }
  .product-features-grid { grid-template-columns:1fr; }
  /* Contact */
  .contact-layout { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .contact-form-wrap { padding:28px 20px; }
  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .cta-actions { flex-direction:column; align-items:center; }
  /* Page hero */
  .page-hero { padding:120px 0 60px; }
}
/* Small mobile ≤480px */
@media (max-width:480px) {
  .container { padding:0 16px; }
  .logo-text { font-size:15px; }
  .logo-img { height:30px !important; }
  .btn-lg { padding:13px 28px; font-size:15px; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .section-title { font-size:26px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat-item { padding:32px 16px; }
  .stat-num { font-size:32px; }
  .back-to-top { bottom:20px; left:20px; }
}


/* ── 旧悬浮窗样式已移除，使用 includes/widgets.php 中的新系统 ── */

/* ============================================================
   深色模式 (Dark Mode) + RTL 支持
   ============================================================ */
[data-theme="dark"] { --text-primary:#e2e8f0; --text-muted:#94a3b8; --bg-light:#1a2744; --bg-card:#1e2a40; --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 4px 16px rgba(0,0,0,.35); --shadow-lg:0 12px 40px rgba(0,0,0,.4); --shadow-xl:0 24px 64px rgba(0,0,0,.5); }
[data-theme="dark"] body { background:#0f172a; color:var(--text-primary); }
[data-theme="dark"] .btn-white { background:rgba(255,255,255,.1); color:#e2e8f0; border:1px solid rgba(255,255,255,.15); }
[data-theme="dark"] .btn-outline-dark { color:#e2e8f0; border-color:rgba(255,255,255,.2); }
[data-theme="dark"] .btn-outline-dark:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
[data-theme="dark"] .section-light { background:var(--bg-light); }
[data-theme="dark"] .product-card { background:var(--bg-card); border-color:rgba(255,255,255,.07); }
[data-theme="dark"] .product-card-img { background:linear-gradient(135deg,#1e2a40 0%,#162035 100%); }
[data-theme="dark"] .product-card-name { color:var(--text-light); }
[data-theme="dark"] .product-card-footer { border-top-color:rgba(255,255,255,.07); }
[data-theme="dark"] .feature-tag { background:rgba(255,255,255,.06); color:var(--text-lighter); border-color:rgba(255,255,255,.08); }
[data-theme="dark"] .section-tag { background:rgba(0,88,214,.2); }
[data-theme="dark"] .section-title { color:var(--text-primary); }
[data-theme="dark"] .section-subtitle { color:var(--text-muted); }
[data-theme="dark"] .about-title,[data-theme="dark"] .about-text,[data-theme="dark"] .about-check { color:var(--text-primary); }
[data-theme="dark"] .about-img-badge { background:rgba(255,255,255,.06); }
[data-theme="dark"] .contact-form-wrap { background:var(--bg-card); border-color:rgba(255,255,255,.07); }
[data-theme="dark"] .contact-form-title,[data-theme="dark"] .contact-form-sub { color:var(--text-primary); }
[data-theme="dark"] .form-control { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); color:var(--text-primary); }
[data-theme="dark"] .form-control:focus { background:rgba(255,255,255,.07); border-color:var(--primary-light); }
[data-theme="dark"] .form-control::placeholder { color:rgba(255,255,255,.3); }
[data-theme="dark"] .form-label { color:var(--text-primary); }
[data-theme="dark"] .form-privacy { color:rgba(255,255,255,.4); }
[data-theme="dark"] .contact-info-item { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); }
[data-theme="dark"] .contact-info-label { color:rgba(255,255,255,.5); }
[data-theme="dark"] .contact-info-value,[data-theme="dark"] .contact-info-title { color:var(--text-primary); }
[data-theme="dark"] .detail-section-title { color:var(--text-primary); border-bottom-color:rgba(255,255,255,.07); }
[data-theme="dark"] .product-desc-content { color:var(--text-muted); }
[data-theme="dark"] .pf-item { background:rgba(255,255,255,.04); border-left-color:var(--primary-light); }
[data-theme="dark"] .pf-item h4 { color:var(--text-primary); }
[data-theme="dark"] .pf-item p { color:var(--text-muted); }
[data-theme="dark"] .sidebar-card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); }
[data-theme="dark"] .sidebar-card h3,[data-theme="dark"] .related-name { color:var(--text-primary); }
[data-theme="dark"] .related-item { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.07); }
[data-theme="dark"] .empty-state p { color:var(--text-muted); }
[data-theme="dark"] .alert-success { background:#052e16; color:#4ade80; border-color:#166534; }
[data-theme="dark"] .alert-error { background:#1c0505; color:#f87171; border-color:#7f1d1d; }
/* Theme toggle button */
.theme-toggle { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:var(--white); cursor:pointer; transition:var(--t); flex-shrink:0; }
.theme-toggle:hover { background:rgba(255,255,255,.15); }
.theme-toggle svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
.theme-toggle .icon-moon { display:block; }
.theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
/* Language switcher */
.lang-switcher { position:relative; flex-shrink:0; }
.lang-switcher-btn { display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.9); cursor:pointer; transition:var(--t); font-size:13px; font-weight:600; font-family:var(--font); white-space:nowrap; }
.lang-switcher-btn:hover { background:rgba(255,255,255,.15); }
.lang-switcher-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s ease; }
.lang-switcher.open .lang-switcher-btn svg { transform:rotate(180deg); }
.lang-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:#0f172a; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:8px; min-width:180px; z-index:999; box-shadow:0 16px 48px rgba(0,0,0,.5); opacity:0; transform:translateY(-8px) scale(.97); transition:opacity .2s ease,transform .2s ease; pointer-events:none; }
[data-theme="dark"] .lang-dropdown { background:#0a1628; }
.lang-switcher.open .lang-dropdown { opacity:1; transform:none; pointer-events:all; }
.lang-dropdown a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-size:14px; color:rgba(255,255,255,.75); transition:var(--t); }
.lang-dropdown a:hover { background:rgba(255,255,255,.08); color:#fff; }
.lang-dropdown a.active { background:rgba(0,88,214,.2); color:#fff; }
.lang-flag { font-size:18px; line-height:1; }
.lang-name { flex:1; font-weight:500; }
/* RTL Support */
[dir="rtl"] body { direction:rtl; text-align:right; }
[dir="rtl"] .main-nav { margin-left:0; margin-right:24px; flex-direction:row-reverse; }
[dir="rtl"] .header-actions { margin-left:0; margin-right:auto; flex-direction:row-reverse; }
[dir="rtl"] .logo { flex-direction:row-reverse; }
[dir="rtl"] .hero .container { flex-direction:row-reverse; }
[dir="rtl"] .hero-content { text-align:right; }
[dir="rtl"] .hero-actions,[dir="rtl"] .hero-stats,[dir="rtl"] .hero-eyebrow { flex-direction:row-reverse; }
[dir="rtl"] .section-header { text-align:right; }
[dir="rtl"] .section-subtitle { margin:0; text-align:right; }
[dir="rtl"] .products-grid,[dir="rtl"] .about-grid,[dir="rtl"] .features-grid,[dir="rtl"] .stats-grid,[dir="rtl"] .testimonials-grid { direction:rtl; }
[dir="rtl"] .product-card-body,[dir="rtl"] .feature-card,[dir="rtl"] .testimonial-card { text-align:right; }
[dir="rtl"] .product-card-features,[dir="rtl"] .product-card-footer,[dir="rtl"] .about-check,[dir="rtl"] .testimonial-author { flex-direction:row-reverse; }
[dir="rtl"] .feature-list li { padding-left:0; padding-right:18px; }
[dir="rtl"] .feature-list li::before { left:auto; right:0; }
[dir="rtl"] .breadcrumb { flex-direction:row-reverse; justify-content:flex-start; }
[dir="rtl"] .contact-layout,[dir="rtl"] .product-detail-content,[dir="rtl"] .product-detail-layout,[dir="rtl"] .product-specs,[dir="rtl"] .product-features-grid,[dir="rtl"] .footer-grid,[dir="rtl"] .form-row { direction:rtl; }
[dir="rtl"] .contact-info-item { flex-direction:row-reverse; text-align:right; }
[dir="rtl"] .contact-form-wrap,[dir="rtl"] .sidebar-card { text-align:right; }
[dir="rtl"] .pf-item { border-left:none; border-right:3px solid var(--primary); text-align:right; }
[dir="rtl"] .footer-links a:hover { padding-left:0; padding-right:4px; }
[dir="rtl"] .footer-contact-list li,[dir="rtl"] .footer-phone { flex-direction:row-reverse; text-align:right; }
[dir="rtl"] .hero-card-brands,[dir="rtl"] .gallery-thumbs,[dir="rtl"] .related-item { flex-direction:row-reverse; }
[dir="rtl"] .related-item:hover { transform:translateX(-4px); }
[dir="rtl"] .cta-actions { flex-direction:row-reverse; }
[dir="rtl"] .about-content { text-align:right; }
[dir="rtl"] .about-img-badge { left:auto; right:24px; }
[dir="rtl"] .spec-item,[dir="rtl"] .news-card-body { text-align:right; }
[dir="rtl"] .lang-dropdown { right:auto; left:0; }
[dir="rtl"] .back-to-top { right:auto; left:32px; }
@media(max-width:480px){[dir="rtl"] .back-to-top{right:auto;left:20px}}

/* ── 公告栏 ──────────────────────────────────────────────── */
.announcement-bar{padding:10px 0;font-size:13px;font-weight:500;text-align:center;position:fixed;top:0;left:0;right:0;z-index:1100}
.announcement-info   {background:#eff6ff;color:#1d4ed8;border-bottom:1px solid #bfdbfe}
.announcement-success{background:#f0fdf4;color:#15803d;border-bottom:1px solid #86efac}
.announcement-warning{background:#fffbeb;color:#92400e;border-bottom:1px solid #fcd34d}
.announcement-danger {background:#fef2f2;color:#b91c1c;border-bottom:1px solid #fca5a5}
[data-theme="dark"] .announcement-info   {background:rgba(59,130,246,.15);color:#93c5fd;border-color:rgba(59,130,246,.3)}
[data-theme="dark"] .announcement-success{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.3)}
[data-theme="dark"] .announcement-warning{background:rgba(245,158,11,.12);color:#fcd34d;border-color:rgba(245,158,11,.3)}
[data-theme="dark"] .announcement-danger {background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.3)}

/* ── 浅色模式增强（更明亮的视觉效果）──────────────────── */
/* Hero浅色模式更亮 */
:root:not([data-theme="dark"]) .hero {
  background:linear-gradient(135deg,#1a3a6e 0%,#1e4a8a 40%,#163866 100%);
}
:root:not([data-theme="dark"]) .hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 60% -10%,rgba(59,130,246,.55) 0%,transparent 55%),
    radial-gradient(ellipse 50% 50% at -5% 80%,rgba(6,182,212,.35) 0%,transparent 55%),
    radial-gradient(ellipse 40% 40% at 110% 110%,rgba(139,92,246,.2) 0%,transparent 55%),
    linear-gradient(135deg,#1a3a6e 0%,#1e4a8a 40%,#163866 100%);
}
:root:not([data-theme="dark"]) .hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
}
:root:not([data-theme="dark"]) .hero-desc { color:rgba(255,255,255,.85); }
:root:not([data-theme="dark"]) .hero-card { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); }
:root:not([data-theme="dark"]) .hero-orb-1 { background:rgba(59,130,246,.35); }
:root:not([data-theme="dark"]) .hero-orb-2 { background:rgba(6,182,212,.3); }
:root:not([data-theme="dark"]) .hero-orb-3 { background:rgba(139,92,246,.2); }
/* 导航栏浅色模式 */
:root:not([data-theme="dark"]) .site-header {
  background:rgba(4,13,30,.88);
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
/* 产品卡片图片区域更亮 */
:root:not([data-theme="dark"]) .product-card-img {
  background:linear-gradient(135deg,#f0f6ff 0%,#e8f2ff 100%);
}
:root:not([data-theme="dark"]) .product-card-img-placeholder svg { stroke:#3b82f6; opacity:.6; }
:root:not([data-theme="dark"]) .product-card {
  background:#fff;
  border-color:rgba(0,0,0,.05);
  box-shadow:0 2px 8px rgba(0,88,214,.06);
}
/* 浅色区块背景更亮 */
:root:not([data-theme="dark"]) .section-light {
  background:linear-gradient(180deg,#f8faff 0%,#ffffff 100%);
}
/* 关于区域图片占位更亮 */
:root:not([data-theme="dark"]) .about-img-wrap div {
  background:linear-gradient(135deg,#f0f6ff,#e0edff) !important;
}
/* 联系页表单卡片更亮 */
:root:not([data-theme="dark"]) .contact-form-wrap {
  background:#fff;
  box-shadow:0 8px 32px rgba(0,88,214,.08);
}
/* 联系方式卡片更亮 */
:root:not([data-theme="dark"]) .contact-info-item {
  background:#f8faff;
  border-color:rgba(0,88,214,.06);
}
/* 表单输入框更亮 */
:root:not([data-theme="dark"]) .form-control {
  background:#fff;
  border-color:#e2e8f0;
}
/* 侧边栏卡片更亮 */
:root:not([data-theme="dark"]) .sidebar-card {
  background:#f8faff;
}
/* 功能标签更亮 */
:root:not([data-theme="dark"]) .feature-tag {
  background:#f0f6ff;
  color:#3b82f6;
  border-color:rgba(59,130,246,.12);
}