/* R32 工厂品牌展示站 · 13色板 + 6场景 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.65;
  transition: background 0.35s, color 0.35s;
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
}
body.showcase-back-active { padding-top: calc(44px + env(safe-area-inset-top, 0)); }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

body[data-theme='metal'] { --primary:#64748B; --accent:#94A3B8; --bg:#F1F5F9; --bg-card:#FFF; --text:#0F172A; --text-light:#64748B; --border:#CBD5E1; --hero-overlay:rgba(15,23,42,.65); }
body[data-theme='steel'] { --primary:#1E3A5F; --accent:#3B82F6; --bg:#F8FAFC; --bg-card:#FFF; --text:#0F172A; --text-light:#475569; --border:#CBD5E1; --hero-overlay:rgba(15,23,42,.7); }
body[data-theme='tech'] { --primary:#0EA5E9; --accent:#38BDF8; --bg:#F0F9FF; --bg-card:#FFF; --text:#0C4A6E; --text-light:#0369A1; --border:#BAE6FD; --hero-overlay:rgba(12,74,110,.6); }
body[data-theme='chip'] { --primary:#6366F1; --accent:#A78BFA; --bg:#EEF2FF; --bg-card:#FFF; --text:#312E81; --text-light:#6366F1; --border:#C7D2FE; --hero-overlay:rgba(49,46,129,.65); }
body[data-theme='clean'] { --primary:#0891B2; --accent:#06B6D4; --bg:#FFFFFF; --bg-card:#F8FAFC; --text:#164E63; --text-light:#64748B; --border:#E2E8F0; --hero-overlay:rgba(8,145,178,.45); }
body[data-theme='foodgreen'] { --primary:#059669; --accent:#34D399; --bg:#ECFDF5; --bg-card:#FFF; --text:#064E3B; --text-light:#047857; --border:#A7F3D0; --hero-overlay:rgba(6,78,59,.55); }
body[data-theme='chemorange'] { --primary:#EA580C; --accent:#FB923C; --bg:#FFF7ED; --bg-card:#FFF; --text:#7C2D12; --text-light:#C2410C; --border:#FED7AA; --hero-overlay:rgba(124,45,18,.55); }
body[data-theme='textilerose'] { --primary:#DB2777; --accent:#F472B6; --bg:#FDF2F8; --bg-card:#FFF; --text:#831843; --text-light:#BE185D; --border:#FBCFE8; --hero-overlay:rgba(131,24,67,.5); }
body[data-theme='forest'] { --primary:#15803D; --accent:#4ADE80; --bg:#F0FDF4; --bg-card:#FFF; --text:#14532D; --text-light:#166534; --border:#BBF7D0; --hero-overlay:rgba(20,83,45,.55); }
body[data-theme='navy'] { --primary:#1E40AF; --accent:#60A5FA; --bg:#EFF6FF; --bg-card:#FFF; --text:#1E3A8A; --text-light:#2563EB; --border:#BFDBFE; --hero-overlay:rgba(30,58,138,.65); }
body[data-theme='amber'] { --primary:#D97706; --accent:#FBBF24; --bg:#FFFBEB; --bg-card:#FFF; --text:#78350F; --text-light:#B45309; --border:#FDE68A; --hero-overlay:rgba(120,53,15,.55); }
body[data-theme='slate'] { --primary:#475569; --accent:#94A3B8; --bg:#F8FAFC; --bg-card:#FFF; --text:#0F172A; --text-light:#64748B; --border:#E2E8F0; --hero-overlay:rgba(15,23,42,.6); }
body[data-theme='neo'] { --primary:#00E5FF; --accent:#FF007F; --bg:#0F172A; --bg-card:#1E293B; --text:#F8FAFC; --text-light:#94A3B8; --border:#334155; --hero-overlay:rgba(0,0,0,.55); }

.glass-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 4px 24px rgba(0,0,0,.04); }
.section { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.section__title { font-size: 1.4rem; text-align: center; margin-bottom: .35rem; color: var(--primary); letter-spacing: 0.08em; font-weight: 800; }
.section__subtitle { text-align: center; color: var(--text-light); font-size: .88rem; margin-bottom: 1.5rem; }

.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  color: #fff; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); }
.hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay, rgba(15,23,42,.62)); }
.hero__content { position: relative; z-index: 1; text-align: center; padding: 2rem 1.5rem; max-width: 720px; animation: fadeUp .8s ease; }
.hero__logo { width: 4rem; height: 4rem; border-radius: .75rem; margin: 0 auto .75rem; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; border: 1px solid rgba(255,255,255,.3); }
.hero__name { font-size: clamp(2rem, 8vw, 3.25rem); font-weight: 900; letter-spacing: 0.06em; margin-bottom: .35rem; }
.hero__tagline { font-size: 1.05rem; opacity: .92; margin-bottom: .5rem; color: var(--accent, #94A3B8); }
.hero__slogan { font-size: .92rem; opacity: .82; margin-bottom: 1.5rem; line-height: 1.7; }
.hero-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 1.75rem; }
.hero-stat { text-align: center; min-width: 4.5rem; }
.hero-stat__value { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; line-height: 1.1; }
.hero-stat__label { font-size: .75rem; opacity: .75; margin-top: .2rem; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.hero__scroll { display: inline-block; margin-top: 1.5rem; font-size: .82rem; opacity: .65; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1.35rem; border-radius: 999px; font-weight: 600; font-size: .88rem; transition: transform .15s; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-outline { border: 1.5px solid rgba(255,255,255,.75); color: #fff; background: transparent; }
.section .btn-outline { border-color: var(--primary); color: var(--primary); }

.narrative { color: var(--text-light); text-align: center; max-width: 640px; margin: 0 auto 1.5rem; line-height: 1.85; font-size: .92rem; }
.highlight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .highlight-grid { grid-template-columns: repeat(4, 1fr); } }
.highlight-card { padding: 1rem; text-align: center; }
.highlight-card__icon { font-size: 1.75rem; margin-bottom: .35rem; }
.highlight-card__title { font-size: .88rem; font-weight: 700; margin-bottom: .25rem; }
.highlight-card__desc { font-size: .75rem; color: var(--text-light); line-height: 1.5; }

.counter-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .counter-row { grid-template-columns: repeat(4, 1fr); } }
.counter-card { text-align: center; padding: 1rem .5rem; border-radius: .85rem; background: var(--bg-card); border: 1px solid var(--border); }
.counter-card__value { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.counter-card__label { font-size: .72rem; color: var(--text-light); margin-top: .2rem; }

.product-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.25rem; }
.product-filter { padding: .35rem .85rem; border-radius: 999px; font-size: .78rem; border: 1px solid var(--border); color: var(--text-light); background: var(--bg-card); }
.product-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card { border-radius: .85rem; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.product-card__img { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.product-card:hover .product-card__img img { transform: scale(1.05); }
.product-card__badge { position: absolute; top: .5rem; left: .5rem; font-size: .65rem; padding: .15rem .45rem; border-radius: 999px; background: var(--primary); color: #fff; }
.product-card__body { padding: .75rem; }
.product-card__name { font-size: .88rem; font-weight: 700; margin-bottom: .25rem; }
.product-card__spec { font-size: .72rem; color: var(--text-light); }

.advantage-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .advantage-grid { grid-template-columns: repeat(2, 1fr); } }
.advantage-card { padding: 1.25rem; display: flex; gap: .85rem; align-items: flex-start; }
.advantage-card__icon { font-size: 1.75rem; flex-shrink: 0; }
.advantage-card__title { font-size: .95rem; font-weight: 700; margin-bottom: .35rem; }
.advantage-card__desc { font-size: .82rem; color: var(--text-light); line-height: 1.65; }

.production-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .production-gallery { grid-template-columns: repeat(4, 1fr); } }
.production-item { border-radius: .65rem; overflow: hidden; position: relative; aspect-ratio: 1; }
.production-item img { width: 100%; height: 100%; object-fit: cover; }
.production-item__cap { position: absolute; inset: auto 0 0; padding: .5rem; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: .72rem; }

.process-track { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
.process-track::-webkit-scrollbar { display: none; }
.process-step { flex: 0 0 7.5rem; padding: .85rem .65rem; border-radius: .75rem; background: var(--bg-card); border: 1px solid var(--border); text-align: center; }
.process-step__num { font-size: 1.25rem; font-weight: 800; color: var(--primary); margin-bottom: .25rem; }
.process-step__name { font-size: .82rem; font-weight: 700; margin-bottom: .2rem; }
.process-step__desc { font-size: .68rem; color: var(--text-light); }

.client-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .client-grid { grid-template-columns: repeat(2, 1fr); } }
.client-card { padding: 1.15rem; }
.client-card__name { font-weight: 700; font-size: .92rem; margin-bottom: .25rem; }
.client-card__industry { font-size: .72rem; color: var(--primary); margin-bottom: .5rem; }
.client-card__result { font-size: .82rem; color: var(--text-light); }

.honor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
@media (min-width: 640px) { .honor-grid { grid-template-columns: repeat(3, 1fr); } }
.honor-card { padding: 1rem; text-align: center; }
.honor-card__icon { font-size: 1.75rem; margin-bottom: .35rem; }
.honor-card__name { font-size: .82rem; font-weight: 600; margin-bottom: .2rem; }
.honor-card__year { font-size: .72rem; color: var(--text-light); }

.cta-section { text-align: center; padding: 2.5rem 1.25rem; background: var(--bg-card); border-top: 1px solid var(--border); }
.cta-section__title { font-size: 1.25rem; font-weight: 800; color: var(--primary); margin-bottom: .35rem; }
.cta-section__sub { color: var(--text-light); font-size: .88rem; margin-bottom: 1.25rem; }
.cta-info { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; font-size: .85rem; color: var(--text-light); }
.cta-qr { display: inline-block; padding: 1rem; border-radius: 1rem; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.08); margin-bottom: 1rem; }
.cta-qr img { width: 8rem; height: 8rem; object-fit: cover; margin: 0 auto .5rem; border-radius: .5rem; }
.cta-qr__id { font-size: .78rem; color: var(--text-light); }

.site-footer { text-align: center; padding: 1.5rem 1rem; font-size: .78rem; color: var(--text-light); border-top: 1px solid var(--border); }

.detail-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.detail-modal[hidden] { display: none; }
.detail-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.detail-modal__box { position: relative; background: var(--bg-card); border-radius: 1rem; max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; animation: modalIn .3s ease; }
@keyframes modalIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.detail-modal__close { position: absolute; top: .65rem; right: .65rem; z-index: 2; font-size: 1.25rem; color: var(--text-light); background: rgba(255,255,255,.9); width: 2rem; height: 2rem; border-radius: 50%; }
.detail-modal__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.detail-modal__body { padding: 1.25rem; }
.detail-modal__title { font-size: 1.15rem; font-weight: 800; margin-bottom: .5rem; }
.detail-modal__specs { list-style: none; margin-bottom: .75rem; }
.detail-modal__specs li { font-size: .82rem; color: var(--text-light); padding: .25rem 0; border-bottom: 1px dashed var(--border); }
.detail-modal__desc { font-size: .88rem; line-height: 1.7; color: var(--text-light); }

.scene-panel, .theme-panel { position: fixed; z-index: 50; }
.scene-panel { bottom: calc(5.5rem + env(safe-area-inset-bottom)); left: 1rem; }
.theme-panel { bottom: calc(5.5rem + env(safe-area-inset-bottom)); right: 1rem; }
.scene-panel__toggle, .theme-panel__toggle {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,.15); font-size: 1.25rem;
}
.scene-panel__list, .theme-panel__list {
  position: absolute; bottom: calc(100% + .5rem); left: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem;
  padding: .5rem; min-width: 10rem; max-height: 50vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.theme-panel__list { left: auto; right: 0; min-width: 8rem; }
.scene-panel__list button, .theme-panel__list button {
  display: block; width: 100%; text-align: left; padding: .45rem .65rem; border-radius: .4rem; font-size: .82rem; color: var(--text);
}
.scene-panel__list button.active, .theme-panel__list button.active,
.scene-panel__list button:hover, .theme-panel__list button:hover { background: var(--primary); color: #fff; }

.back-top { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.1rem; box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 40; }
.back-top[hidden] { display: none; }

.contact-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background: rgba(0,0,0,.82); backdrop-filter: blur(8px); color: #fff; text-align: center; }
.contact-footer__btns { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: .35rem; }
.contact-footer__cta { padding: .45rem 1rem; border-radius: 999px; background: var(--primary, #64748B); color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600; }
.contact-footer__btn { padding: .45rem .85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #fff; background: transparent; font-size: .82rem; text-decoration: none; }
.contact-footer__brand { font-size: .68rem; opacity: .65; }
html.has-contact-footer body { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }

@media (min-width: 1024px) {
  .hero__content { text-align: left; max-width: 960px; width: 100%; padding-left: 2rem; }
  .hero-stats { justify-content: flex-start; }
  .hero__btns { justify-content: flex-start; }
}