/* ============================================
   上海拉涂智能设备有限公司 — 纯 CSS 样式
   ============================================ */

:root {
  --c-bg-50: #fdfcfa;
  --c-bg-100: #f7f4f0;
  --c-bg-200: #eee9e2;
  --c-bg-300: #ddd5cc;
  --c-bg-400: #b8aea3;
  --c-bg-500: #958b80;
  --c-bg-600: #6e665e;
  --c-bg-700: #4a443e;
  --c-bg-800: #2d2a26;
  --c-bg-900: #1c1a17;
  --c-bg-950: #11100e;

  --c-pr-50: #fbf4f1;
  --c-pr-100: #f5e4db;
  --c-pr-200: #e9c9b8;
  --c-pr-300: #dba68d;
  --c-pr-400: #cc855f;
  --c-pr-500: #c45c2e;
  --c-pr-600: #a84e27;
  --c-pr-700: #8a4021;
  --c-pr-800: #6c331b;
  --c-pr-900: #522616;
  --c-pr-950: #33150d;

  --c-ac-50: #fdf8f2;
  --c-ac-100: #f5ead8;
  --c-ac-200: #e6d0aa;
  --c-ac-300: #d3b27c;
  --c-ac-400: #b89258;
  --c-ac-500: #9a7440;
  --c-ac-600: #7f5e34;
  --c-ac-700: #644b2a;
  --c-ac-800: #4d3a21;
  --c-ac-900: #3a2b19;
  --c-ac-950: #251c10;

  --c-fg-50: #faf8f6;
  --c-fg-100: #f0ece7;
  --c-fg-200: #ddd6cc;
  --c-fg-300: #bfb4a6;
  --c-fg-400: #9a8e7e;
  --c-fg-500: #7a6f62;
  --c-fg-600: #5e554c;
  --c-fg-700: #473f38;
  --c-fg-800: #302b25;
  --c-fg-900: #1e1b18;
  --c-fg-950: #110f0d;

  --font-head: "Barlow Condensed", "Noto Sans SC", sans-serif;
  --font-body: "Noto Sans SC", "Inter", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); color: var(--c-fg-950); background: var(--c-bg-50); line-height: 1.6; }

/* Accessibility */
html.a11y-lg { font-size: 19px; }
html.a11y-contrast { filter: contrast(1.35) saturate(1.15); }
html.a11y-grayscale { filter: grayscale(1); }
html.a11y-contrast.a11y-grayscale { filter: grayscale(1) contrast(1.35); }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'><path fill='%23000' stroke='%23fff' stroke-width='1.5' d='M4 2l6 18 3-8 8-3z'/></svg>") 0 0, auto !important; }

/* Utility */
.container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.whitespace-nowrap { white-space: nowrap; }

/* A11y Bar */
.a11y-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--c-fg-950); color: var(--c-bg-100); font-size: 12px; }
.a11y-inner { max-width: 1400px; margin: 0 auto; padding: 0.5rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.a11y-left, .a11y-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.a11y-left span { opacity: 0.65; }
.a11y-left i { margin-right: 4px; }
.a11y-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; border: none; background: rgba(255,255,255,0.1); color: var(--c-bg-100); font-size: 12px; cursor: pointer; transition: background .2s; }
.a11y-btn:hover { background: rgba(255,255,255,0.2); }
.a11y-btn-primary { background: var(--c-pr-500); }
.a11y-btn-primary:hover { background: var(--c-pr-600); }
.a11y-panel { display: none; border-top: 1px solid rgba(255,255,255,0.1); background: var(--c-fg-900); }
.a11y-panel.open { display: block; }
.a11y-row { display: flex; align-items: center; gap: 6px; }
.a11y-label { opacity: 0.65; }
.font-btn { padding: 4px 10px; border-radius: 6px; border: none; background: var(--c-bg-100); color: var(--c-fg-800); font-size: 12px; font-weight: 600; cursor: pointer; }
.font-btn.active { background: var(--c-pr-500); color: var(--c-bg-50); }
.a11y-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; border: none; background: var(--c-bg-100); color: var(--c-fg-800); font-size: 12px; cursor: pointer; transition: .2s; }
.a11y-toggle.on { background: var(--c-pr-500); color: var(--c-bg-50); }
.a11y-reset { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; border: none; background: rgba(255,255,255,0.1); color: var(--c-bg-100); font-size: 12px; cursor: pointer; margin-left: auto; }
.a11y-reset:hover { background: rgba(255,255,255,0.2); }

/* TTS Float */
.tts-float { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: 999px; background: var(--c-fg-950); border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.tts-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-pr-500); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.tts-text { font-size: 12px; color: rgba(255,255,255,0.8); }
.tts-float button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: var(--c-pr-500); color: #fff; cursor: pointer; transition: .2s; }
.tts-float button:last-child { background: rgba(255,255,255,0.1); }
.tts-float button:hover { background: var(--c-pr-600); }

/* Navbar */
.navbar { position: fixed; top: 40px; left: 0; right: 0; z-index: 40; transition: .3s; }
.navbar.scrolled { background: rgba(253,252,250,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-bg-200); }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 2rem; height: 80px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--c-pr-500); color: var(--c-bg-50); font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: 2px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-cn { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: 1px; color: var(--c-bg-50); transition: color .3s; }
.logo-en { font-size: 10px; letter-spacing: 3px; color: rgba(255,255,255,0.7); transition: color .3s; }
.navbar.scrolled .logo-cn { color: var(--c-fg-950); }
.navbar.scrolled .logo-en { color: var(--c-fg-600); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.9); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--c-pr-300); }
.navbar.scrolled .nav-links a { color: var(--c-fg-800); }
.navbar.scrolled .nav-links a:hover { color: var(--c-pr-600); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-phone { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.95); text-decoration: none; }
.navbar.scrolled .nav-phone { color: var(--c-pr-600); }
.nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 6px; background: var(--c-pr-500); color: var(--c-bg-50); font-size: 14px; font-weight: 600; text-decoration: none; transition: .2s; }
.nav-btn:hover { background: var(--c-pr-600); }
.nav-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 6px; border: none; background: transparent; color: #fff; font-size: 22px; cursor: pointer; }
.navbar.scrolled .nav-burger { color: var(--c-fg-950); }
.nav-mobile { display: none; background: var(--c-bg-50); border-top: 1px solid var(--c-bg-200); padding: 1rem; }
.nav-mobile.open { display: block; }
.nav-mobile a { display: block; padding: 10px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--c-fg-800); text-decoration: none; }
.nav-mobile a:hover { background: var(--c-bg-100); }
.nav-mobile .nav-btn { display: block; text-align: center; margin-top: 8px; }

@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-inner { padding: 0 1rem; }
  .container { padding: 0 1rem; }
  .a11y-inner { padding: 0.5rem 1rem; }
  .a11y-hide-lg { display: none !important; }
}
@media (max-width: 768px) {
  .a11y-hide-md { display: none !important; }
}

/* Hero */
.hero { position: relative; width: 100%; height: 820px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17,15,13,0.8), rgba(17,15,13,0.6), rgba(17,15,13,0.85)); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; }
.hero-content { position: relative; z-index: 10; max-width: 1400px; margin: 0 auto; padding: 160px 2rem 4rem; height: 100%; display: flex; flex-direction: column; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); backdrop-filter: blur(4px); font-size: 13px; color: var(--c-bg-100); margin-bottom: 24px; width: fit-content; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-pr-500); animation: pulse 1.5s infinite; }
.hero-title { font-family: var(--font-head); font-weight: 800; font-size: 64px; line-height: 1.05; color: var(--c-bg-50); letter-spacing: -1px; margin-bottom: 24px; }
.hero-accent { color: var(--c-pr-400); }
.hero-desc { font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.7; margin-bottom: 40px; max-width: 640px; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 6px; background: var(--c-pr-500); color: var(--c-bg-50); font-size: 14px; font-weight: 600; text-decoration: none; transition: .2s; }
.btn-primary:hover { background: var(--c-pr-600); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.4); color: var(--c-bg-50); font-size: 14px; font-weight: 600; text-decoration: none; transition: .2s; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); }
.hero-stats { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; overflow: hidden; backdrop-filter: blur(10px); }
.stat-item { background: rgba(17,15,13,0.4); padding: 28px 32px; }
.stat-num { font-family: var(--font-head); font-weight: 800; font-size: 48px; color: var(--c-bg-50); }
.stat-unit { font-family: var(--font-head); font-weight: 700; font-size: 24px; color: var(--c-pr-400); }
.stat-label { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 4px; }

@media (max-width: 1024px) {
  .hero { height: auto; min-height: 700px; }
  .hero-content { padding: 140px 1rem 3rem; }
  .hero-title { font-size: 48px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero-title { font-size: 36px; }
  .stat-num { font-size: 36px; }
  .stat-item { padding: 20px 24px; }
}

/* Marquee */
.marquee-section { background: var(--c-bg-100); border-top: 1px solid var(--c-bg-200); border-bottom: 1px solid var(--c-bg-200); padding: 24px 0; overflow: hidden; }
.marquee-track { display: flex; animation: marquee 40s linear infinite; white-space: nowrap; }
.marquee-track span { margin: 0 32px; font-family: var(--font-head); font-weight: 800; font-size: 28px; letter-spacing: 4px; color: var(--c-fg-400); transition: color .3s; }
.marquee-track span:hover { color: var(--c-pr-500); }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Sections common */
.section-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 3px; color: var(--c-pr-600); margin-bottom: 16px; }
.section-tag::before { content: ""; width: 32px; height: 1px; background: var(--c-pr-500); }
.section-tag-white { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 3px; color: var(--c-pr-400); margin-bottom: 16px; }
.section-tag-white::before, .section-tag-white::after { content: ""; width: 32px; height: 1px; background: var(--c-pr-400); }
.section-title { font-family: var(--font-head); font-weight: 800; font-size: 48px; line-height: 1.1; color: var(--c-fg-950); margin-bottom: 16px; }
.section-title-white { font-family: var(--font-head); font-weight: 800; font-size: 48px; line-height: 1.1; color: var(--c-bg-50); margin-bottom: 16px; }
.section-header { max-width: 640px; margin-bottom: 56px; }
.section-header-center { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.section-header-center .section-tag { margin-left: auto; margin-right: auto; }
.section-header-center .section-tag::before { display: none; }

@media (max-width: 768px) {
  .section-title, .section-title-white { font-size: 36px; }
}

/* About */
.about { padding: 112px 0; background: var(--c-bg-50); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-img-wrap { position: relative; }
.about-img-box { border-radius: 8px; overflow: hidden; }
.about-img-box img { width: 100%; height: 560px; object-fit: cover; object-position: top; }
.about-badge { position: absolute; bottom: -24px; right: -32px; background: var(--c-pr-500); color: var(--c-bg-50); padding: 20px 24px; border-radius: 8px; max-width: 240px; }
.badge-year { font-family: var(--font-head); font-weight: 800; font-size: 40px; line-height: 1; margin-bottom: 4px; }
.badge-name { font-size: 12px; opacity: 0.9; }
.about-deco { position: absolute; top: -16px; left: -16px; width: 96px; height: 96px; border: 4px solid var(--c-ac-400); border-radius: 8px; z-index: -1; }
.about-text p { color: var(--c-fg-700); line-height: 1.7; margin-bottom: 16px; }
.about-list { list-style: none; margin: 32px 0; }
.about-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.check { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--c-pr-100); color: var(--c-pr-700); font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.about-list span:last-child { font-weight: 500; color: var(--c-fg-900); }
.about-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-dark { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 6px; background: var(--c-fg-950); color: var(--c-bg-50); font-size: 14px; font-weight: 600; text-decoration: none; transition: .2s; }
.btn-dark:hover { background: var(--c-fg-800); }
.phone-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c-fg-950); text-decoration: none; }
.phone-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-pr-100); color: var(--c-pr-600); }

@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-badge { right: 16px; }
}

/* Services */
.services { padding: 112px 0; background: var(--c-bg-100); }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-card { background: var(--c-bg-50); border-radius: 8px; overflow: hidden; border: 1px solid var(--c-bg-200); transition: .3s; }
.service-card:hover { border-color: var(--c-pr-500); }
.service-img { position: relative; width: 100%; height: 288px; overflow: hidden; }
.service-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.service-card:hover .service-img img { transform: scale(1.05); }
.service-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,15,13,0.7), transparent, transparent); }
.service-icon { position: absolute; top: 16px; left: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--c-pr-500); color: var(--c-bg-50); font-size: 20px; }
.service-num { position: absolute; top: 16px; right: 16px; font-family: var(--font-head); font-weight: 800; font-size: 28px; color: rgba(255,255,255,0.4); }
.service-body { padding: 24px; }
.service-body h3 { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--c-fg-950); margin-bottom: 8px; }
.service-body p { font-size: 14px; color: var(--c-fg-700); line-height: 1.6; }

@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }

/* Products */
.products { padding: 112px 0; background: var(--c-bg-50); }
.section-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.section-header-row > div { max-width: 640px; }
.btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 6px; border: 1px solid var(--c-fg-950); color: var(--c-fg-950); font-size: 14px; font-weight: 600; text-decoration: none; transition: .2s; align-self: flex-start; }
.btn-outline:hover { background: var(--c-fg-950); color: var(--c-bg-50); }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card { background: var(--c-bg-100); border-radius: 8px; overflow: hidden; border: 1px solid var(--c-bg-200); transition: .3s; }
.product-card:hover { border-color: var(--c-pr-500); }
.product-img { position: relative; width: 100%; height: 256px; overflow: hidden; background: var(--c-bg-200); }
.product-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.product-card:hover .product-img img { transform: scale(1.05); }
.product-tag { position: absolute; top: 16px; left: 16px; padding: 4px 12px; border-radius: 999px; background: var(--c-pr-500); color: var(--c-bg-50); font-size: 12px; font-weight: 600; }
.product-body { padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-name { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--c-fg-950); line-height: 1.3; }
.product-arrow { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--c-fg-950); color: var(--c-bg-50); text-decoration: none; transition: .2s; flex-shrink: 0; }
.product-arrow:hover { background: var(--c-pr-500); }

@media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .products-grid { grid-template-columns: 1fr; } }

/* Production Line */
.line { position: relative; padding: 112px 0; overflow: hidden; }
.line-bg { position: absolute; inset: 0; }
.line-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.line-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17,15,13,0.85), rgba(17,15,13,0.8), rgba(17,15,13,0.9)); }
.line-content { position: relative; z-index: 10; }
.line-desc { color: rgba(255,255,255,0.85); text-align: center; max-width: 640px; margin: 0 auto; }
.line-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 64px; }
.line-step { text-align: center; position: relative; }
.line-step-icon { position: relative; width: 96px; height: 96px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--c-pr-500); color: var(--c-bg-50); font-size: 32px; }
.step-badge { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-bg-50); color: var(--c-fg-950); font-family: var(--font-head); font-weight: 800; font-size: 13px; }
.line-step h4 { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--c-bg-50); }
.line-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.line-metric { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: 8px; padding: 24px; display: flex; align-items: center; gap: 16px; }
.metric-num { font-family: var(--font-head); font-weight: 800; font-size: 40px; color: var(--c-pr-400); }
.metric-label { color: rgba(255,255,255,0.9); font-size: 14px; }

@media (max-width: 1024px) {
  .line-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .line-steps { grid-template-columns: repeat(2, 1fr); }
  .line-metrics { grid-template-columns: 1fr; }
}

/* Advantages */
.advantages { padding: 112px 0; background: var(--c-bg-100); }
.advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.adv-card { position: relative; background: var(--c-bg-50); border-radius: 8px; border: 1px solid var(--c-bg-200); padding: 32px; transition: .3s; overflow: hidden; }
.adv-card:hover { border-color: var(--c-pr-500); transform: translateY(-4px); }
.adv-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--c-pr-100); color: var(--c-pr-600); font-size: 24px; margin-bottom: 24px; transition: .3s; }
.adv-card:hover .adv-icon { background: var(--c-pr-500); color: var(--c-bg-50); }
.adv-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--c-fg-950); margin-bottom: 12px; }
.adv-card p { font-size: 14px; color: var(--c-fg-700); line-height: 1.6; }
.adv-num { position: absolute; bottom: 24px; right: 24px; font-family: var(--font-head); font-weight: 800; font-size: 40px; color: var(--c-bg-200); transition: .3s; }
.adv-card:hover .adv-num { color: rgba(196,92,46,0.3); }

@media (max-width: 1024px) { .advantages-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .advantages-grid { grid-template-columns: 1fr; } }

/* Applications */
.applications { padding: 96px 0; background: var(--c-bg-50); }
.apps-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.app-item { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; border-radius: 8px; background: var(--c-bg-100); border: 1px solid var(--c-bg-200); cursor: pointer; transition: .3s; }
.app-item:hover { background: var(--c-pr-500); border-color: var(--c-pr-500); }
.app-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-bg-50); color: var(--c-pr-600); font-size: 24px; transition: .3s; }
.app-item:hover .app-icon { background: rgba(255,255,255,0.15); color: var(--c-bg-50); }
.app-item span:last-child { font-size: 14px; font-weight: 600; color: var(--c-fg-900); transition: .3s; }
.app-item:hover span:last-child { color: var(--c-bg-50); }

@media (max-width: 1024px) { .apps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .apps-grid { grid-template-columns: repeat(2, 1fr); } }

/* Contact */
.contact { position: relative; padding: 112px 0; background: var(--c-fg-950); }
.contact-bg { position: absolute; inset: 0; opacity: 0.3; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.contact-content { position: relative; z-index: 10; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-desc { color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 40px; max-width: 520px; }
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.contact-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: inherit; text-decoration: none; transition: .2s; }
.contact-card:hover { border-color: var(--c-pr-500); background: rgba(255,255,255,0.08); }
.c-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--c-pr-500); color: var(--c-bg-50); font-size: 20px; flex-shrink: 0; }
.c-label { display: block; font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.c-value { display: block; font-size: 14px; font-weight: 600; color: var(--c-bg-50); }
.contact-card:hover .c-value { color: var(--c-pr-300); }
.contact-map { height: 480px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: var(--c-bg-100); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; } .contact-map { height: 360px; } }

/* Footer */
.footer { background: var(--c-fg-900); color: var(--c-bg-100); }
.footer-grid { max-width: 1400px; margin: 0 auto; padding: 64px 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.footer-logo .logo-icon { flex-shrink: 0; }
.footer-logo .logo-cn { color: var(--c-bg-50); font-size: 15px; }
.footer-logo .logo-en { color: rgba(255,255,255,0.6); }
.footer-slogan { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 20px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,0.1); color: var(--c-bg-50); text-decoration: none; transition: .2s; }
.footer-social a:hover { background: var(--c-pr-500); }
.footer-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--c-bg-50); margin-bottom: 20px; }
.footer-title a { color: inherit; text-decoration: none; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; font-size: 14px; color: rgba(255,255,255,0.7); }
.footer-links a { color: inherit; text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--c-pr-400); }
.footer-links i { margin-right: 6px; color: var(--c-pr-400); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.footer-bottom-inner { max-width: 1400px; margin: 0 auto; padding: 20px 2rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; color: rgba(255,255,255,0.6); }
.footer-bottom-right { display: flex; align-items: center; gap: 20px; }
.footer-download-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 6px; border: 1px solid var(--c-pr-500); background: transparent; color: var(--c-pr-400); font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s; }
.footer-download-btn:hover { background: var(--c-pr-500); color: var(--c-bg-50); }
.footer-download-btn i { font-size: 16px; }
.icon-spin { animation: icon-spin 1s linear infinite; display: inline-block; }
@keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2, 1fr); padding: 48px 1rem; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom-inner { flex-direction: column; text-align: center; } }