:root {
  --navy: #0b2545;
  --navy-2: #13315c;
  --blue: #2f6fed;
  --blue-light: #eaf1ff;
  --teal: #12b886;
  --coral: #ff6b45;
  --coral-2: #ff9166;
  --coral-dark: #e6512e;
  --coral-light: #fff0ea;
  --amber: #f59f00;
  --purple: #7c5cff;
  --ink: #1a2233;
  --gray: #5b6472;
  --gray-light: #8993a4;
  --border: #e6e9ef;
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --gradient-brand: linear-gradient(135deg, var(--blue) 0%, var(--coral) 100%);
  --gradient-warm: linear-gradient(135deg, var(--coral) 0%, var(--amber) 100%);
  --shadow: 0 10px 30px rgba(11, 37, 69, 0.08);
  --shadow-sm: 0 4px 14px rgba(11, 37, 69, 0.06);
  --shadow-glow: 0 14px 30px rgba(255, 107, 69, 0.28);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --maxw: 1180px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
/* Full-width variant (header + footer): content spans the whole browser width, with side margins
   that scale with the window, so the logo sits at the far left and the menu at the far right.
   When the window gets narrower the margins shrink and everything closes in toward the middle. */
.container.container-wide { max-width: none; padding-left: clamp(20px, 3.5vw, 72px); padding-right: clamp(20px, 3.5vw, 72px); }
.container.container-wide.footer-bottom { padding-left: 0; padding-right: 0; margin-left: clamp(20px, 3.5vw, 72px); margin-right: clamp(20px, 3.5vw, 72px); }

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: 0.01em; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.icon { width: 22px; height: 22px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }

/* ---------- Language toggle logic ---------- */
/* Both languages are real text in the page (selectable / copyable); the toggle only decides which one is shown. */
.i18n-en { display: none; }
/* A row whose value exists in only one language is hidden in the other language. */
body:not(.lang-en) li.only-en, body.lang-en li.only-zh { display: none; }
body.lang-en .i18n-zh { display: none; }
body.lang-en .i18n-en { display: inline; }
/* The toggle button's own label text is replaced (not hidden) so it always shows a
   readable "EN" / "中文" word next to the globe icon - previously this rule chain
   zeroed out the label's font-size without ever restoring it on the ::before content,
   so only the icon was visible. */
.lang-toggle-label { position: relative; display: inline-block; }
.lang-toggle-label { font-size: 0; }
.lang-toggle-label::before { content: "EN"; font-size: 0.78rem; font-weight: 700; }
body.lang-en .lang-toggle-label::before { content: "中文"; }

/* ---------- Access gate pages ---------- */
.gate-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top left, #13315c, #0b2545 60%);
  padding: 24px;
}
.gate-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 44px 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow);
}
.gate-logo { font-size: 1.5rem; font-weight: 800; color: var(--navy); letter-spacing: 0.05em; margin-bottom: 12px; }
.gate-logo span { color: var(--blue); }
.gate-desc { color: var(--gray); font-size: 0.92rem; margin-bottom: 22px; }
.gate-error { background: #fdecec; color: #c92a2a; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.gate-form { display: flex; flex-direction: column; gap: 12px; }
.gate-form input {
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
}
.gate-form input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-light); }
.gate-form button {
  padding: 13px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--shadow-glow);
  transition: transform .2s var(--ease-bounce), box-shadow .2s ease;
}
.gate-form button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 34px rgba(255,107,69,0.36); }
.gate-back { display: inline-block; margin-top: 18px; font-size: 0.85rem; color: var(--gray); }
.gate-back:hover { color: var(--coral); }
.admin-gate-body { background: radial-gradient(circle at top left, #2b2d42, #14151f 60%); }

/* ---------- Language toggle (sits right of the 聯絡我們 button in the header) ---------- */
.header-right { display: flex; align-items: center; gap: 14px; }
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--navy); color: var(--navy); padding: 8px 14px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; transition: background .2s ease, color .2s ease, transform .2s var(--ease-bounce); }
.lang-toggle:hover { background: var(--navy); color: #fff; transform: translateY(-1px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(255,107,69,0.06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; }
.brand { display: flex; align-items: center; gap: 14px; transition: transform .2s var(--ease-bounce); }
.brand:hover { transform: scale(1.03); }
.brand-mark { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; padding: 0 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(11,37,69,0.08) inset; }
.brand-mark-img { height: 84px; width: auto; max-width: 190px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 1.3rem; color: var(--navy); letter-spacing: 0.02em; }
.brand-text em { font-style: normal; font-size: 0.8rem; color: var(--gray); letter-spacing: 0.08em; }
.main-nav { display: flex; align-items: center; gap: 40px; }
.main-nav a { position: relative; font-size: 0.92rem; font-weight: 600; color: var(--ink); padding: 6px 2px; }
.main-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--gradient-brand); border-radius: 2px; transition: right .25s var(--ease-bounce);
}
.main-nav a:not(.nav-cta):hover { color: var(--coral); }
.main-nav a:not(.nav-cta):hover::after { right: 0; }
.nav-cta {
  background: var(--gradient-brand); color: #fff !important; padding: 10px 20px !important; border-radius: var(--radius-pill); border: none !important;
  box-shadow: 0 6px 16px rgba(255,107,69,0.25); transition: transform .2s var(--ease-bounce), box-shadow .2s ease;
}
.nav-cta:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 22px rgba(255,107,69,0.35); }
.nav-toggle { display: none; background: none; border: none; padding: 6px; }
/* Header shrinks once the page is scrolled (big logo at the top of the page, compact bar while reading) */
.header-inner { transition: padding .28s ease; }
.brand-mark-img { transition: height .28s ease; }
.brand-text strong, .brand-text em { transition: font-size .28s ease; }
.site-header { transition: box-shadow .28s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(11,37,69,0.10); }
.site-header.is-scrolled .header-inner { padding-top: 8px; padding-bottom: 8px; }
.site-header.is-scrolled .brand-mark-img { height: 52px; }
.site-header.is-scrolled .brand-text strong { font-size: 1.08rem; }
.site-header.is-scrolled .brand-text em { font-size: 0.7rem; }

.nav-toggle .icon { width: 26px; height: 26px; color: var(--navy); }

/* ---------- Hero ---------- */
.hero { position: relative; background: linear-gradient(180deg, var(--blue-light) 0%, #fff 100%); padding: 80px 0 64px; overflow: hidden; }
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.35; pointer-events: none; z-index: 0;
  animation: blob-float 9s ease-in-out infinite;
}
.hero::before { width: 340px; height: 340px; top: -120px; right: -60px; background: linear-gradient(135deg, var(--coral), var(--coral-2)); }
.hero::after { width: 260px; height: 260px; bottom: -100px; left: -60px; background: var(--blue); animation-delay: -4s; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; color: var(--coral-dark); background: var(--coral-light);
  font-weight: 800; font-size: 0.78rem; letter-spacing: 0.06em; margin-bottom: 16px; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.hero h1 { font-size: 2.7rem; color: var(--navy); margin-bottom: 18px; font-weight: 900; letter-spacing: -0.01em; }
.hero-sub { color: var(--gray); font-size: 1.08rem; max-width: 520px; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.95rem; border: 2px solid transparent; transition: transform .2s var(--ease-bounce), box-shadow .2s ease, background .2s ease; }
.btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 34px rgba(255,107,69,0.36); }
.btn-outline { border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; transform: translateY(-3px); }
.btn.full { width: 100%; justify-content: center; border: none; }

.hero-visual { display: flex; align-items: center; justify-content: center; }
.pellet-jar { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #dfeaff 65%, #c8d9f7); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 40px; animation: blob-float 7s ease-in-out infinite; }
.pellet { width: 22px; height: 22px; border-radius: 6px; background: var(--c); opacity: 0.92; transform: rotate(calc(var(--i) * 12deg)); box-shadow: 0 3px 6px rgba(0,0,0,0.15) inset, 0 4px 8px rgba(0,0,0,0.12); }
.hero-image { width: 100%; max-width: 440px; height: auto; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(11,37,69,0.18)); }
.hero-image.is-circle { max-width: 380px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid #fff; filter: none; box-shadow: var(--shadow); }

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10px, 14px) scale(1.05); }
}

/* ---------- Sub-page banner (top of standalone pages, no hero visual) ---------- */
.page-banner { position: relative; background: linear-gradient(180deg, var(--blue-light) 0%, #fff 100%); padding: 60px 0 44px; text-align: center; overflow: hidden; }
.page-banner::before {
  content: ""; position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 420px; height: 260px;
  background: var(--gradient-warm); opacity: 0.25; filter: blur(60px); border-radius: 50%; pointer-events: none;
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner .eyebrow { display: inline-flex; justify-content: center; color: var(--coral-dark); font-size: 0.78rem; max-width: none; }
.page-banner h1 { font-size: 2.2rem; color: var(--navy); font-weight: 900; margin-bottom: 12px; letter-spacing: -0.01em; }
.page-banner p { color: var(--gray); font-size: 1rem; max-width: 640px; margin: 0 auto; }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: 2.05rem; color: var(--navy); font-weight: 900; margin-bottom: 14px; letter-spacing: -0.01em; }
.section-desc { color: var(--gray); font-size: 1.02rem; }

/* Features / Why Choose Us */
.features { padding-top: 56px; padding-bottom: 56px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feature-card {
  position: relative; background: #fff; border-radius: var(--radius); padding: 30px 24px 26px; border: 1px solid var(--border);
  overflow: hidden; transition: transform .25s var(--ease-bounce), box-shadow .25s ease, border-color .25s ease;
}
.feature-card { --card-accent: linear-gradient(135deg, #0b2545, #2f5fb8); }
.feature-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-accent); }
.feature-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow); border-color: transparent; }
.feature-icon {
  width: 52px; height: 52px; border-radius: 16px; background: var(--card-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 6px 16px rgba(11,37,69,0.25);
}
.feature-card h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 8px; font-weight: 800; }
.feature-card p { color: var(--gray); font-size: 0.92rem; }

/* About */
.about { background: var(--bg-alt); }
.about-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.about .section-head { margin: 0 auto; }

/* Products */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .25s var(--ease-bounce), box-shadow .25s ease, border-color .25s ease; }
.product-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow); border-color: transparent; }
.product-swatch { height: 96px; display: flex; align-items: center; justify-content: center; color: var(--gray); background: var(--bg-alt); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.05em; }
.product-swatch.is-circle { width: 180px; height: 180px; margin: 28px auto 0; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--shadow-sm); }
.product-image { width: 100%; height: 180px; object-fit: contain; background: linear-gradient(180deg, var(--bg-alt) 0%, #fff 100%); padding: 10px; box-sizing: border-box; display: block; }
.product-image.is-circle { width: 180px; height: 180px; padding: 0; margin: 28px auto 0; object-fit: cover; border-radius: 50%; background: var(--bg-alt); border: 4px solid #fff; box-shadow: var(--shadow-sm); }
.product-body { padding: 22px; }
.product-body h3 { font-size: 1.08rem; color: var(--navy); margin-bottom: 8px; font-weight: 800; }
.product-body p { color: var(--gray); font-size: 0.9rem; margin-bottom: 14px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--coral-light); color: var(--coral-dark); font-size: 0.76rem; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); }

/* Sampling flow chart — one consistent brand color for every step; steps are joined by a
   connector line with an arrow (horizontal on desktop, vertical on tablet/phone). The step
   count is whatever the admin sets, so the row simply divides the width evenly. */
.process-grid { --flow-line: #c3d3f5; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.process-card { position: relative; text-align: center; padding: 0 14px; }
.process-num {
  width: 56px; height: 56px; border-radius: 50%; background: var(--gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem;
  margin: 0 auto 18px; box-shadow: var(--shadow-sm); position: relative; z-index: 1;
}
.process-card:not(:last-child)::after {
  content: ""; position: absolute; top: 27px; left: calc(50% + 38px); width: calc(100% - 82px); border-top: 3px solid var(--flow-line);
}
.process-card:not(:last-child)::before {
  content: ""; position: absolute; top: 20px; left: calc(150% - 48px); width: 0; height: 0;
  border-left: 10px solid var(--flow-line); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.process-card h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: 8px; font-weight: 800; }
.process-card p { color: var(--gray); font-size: 0.9rem; line-height: 1.7; }

/* Sampling (trial) process — alternates with the white Process section above */
.sampling { background: var(--bg-alt); }

/* Service flow: 8 illustrated cards laid out as a reversed "ㄈ" (top row 1→4 left to right, down on the right, bottom row 5→8
   right to left). Backgrounds alternate: equipment light → service white → sampling light.
   Each card's outgoing connector (→ ← ↓) is a pseudo-element; it changes direction per breakpoint. */
.service { background: #fff; }
.flow-grid { --gap: 64px; --line: #c3d3f5; --accent: var(--coral); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 58px; }
.flow-card { position: relative; background: #fff; border: 2px solid #dbe6fb; border-radius: 22px; padding: 12px 12px 18px; text-align: center; box-shadow: 0 10px 26px rgba(11,37,69,0.08); }
.flow-panel { position: relative; background: var(--bg-alt); border-radius: 14px; aspect-ratio: 340 / 182; display: flex; align-items: center; justify-content: center; }
.flow-panel img { display: block; width: 100%; height: 100%; object-fit: contain; }
.flow-card h3 { margin: 14px 8px 0; font-size: 1.12rem; font-weight: 800; color: var(--navy); }
.flow-badge {
  position: absolute; top: -16px; left: -12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.15rem; box-shadow: var(--shadow-sm);
}
/* layouts */
.flow-panel::after, .flow-card::after { content: none; position: absolute; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; }
@media (min-width: 1025px) {
.flow-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.flow-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.flow-card:nth-child(3) { grid-column: 3; grid-row: 1; }
.flow-card:nth-child(4) { grid-column: 4; grid-row: 1; }
.flow-card:nth-child(5) { grid-column: 4; grid-row: 2; }
.flow-card:nth-child(6) { grid-column: 3; grid-row: 2; }
.flow-card:nth-child(7) { grid-column: 2; grid-row: 2; }
.flow-card:nth-child(8) { grid-column: 1; grid-row: 2; }
.flow-card:nth-child(1) .flow-panel::after, .flow-card:nth-child(2) .flow-panel::after, .flow-card:nth-child(3) .flow-panel::after, .flow-card:nth-child(5) .flow-panel::after, .flow-card:nth-child(6) .flow-panel::after, .flow-card:nth-child(7) .flow-panel::after { content: ""; top: 50%; height: 30px; width: calc(var(--gap) - 8px); transform: translateY(-50%); }
.flow-card:nth-child(1) .flow-panel::after, .flow-card:nth-child(2) .flow-panel::after, .flow-card:nth-child(3) .flow-panel::after { left: calc(100% + 18px); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'><path d='M4 14H40' stroke='%23a9c0f1' stroke-width='5' stroke-linecap='round' fill='none'/><path d='M38 4L56 14L38 24Z' fill='%23ff6b45' stroke='%23ff6b45' stroke-width='3' stroke-linejoin='round'/></svg>"); }
.flow-card:nth-child(5) .flow-panel::after, .flow-card:nth-child(6) .flow-panel::after, .flow-card:nth-child(7) .flow-panel::after { right: calc(100% + 18px); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'><g transform='translate(60,0) scale(-1,1)'><path d='M4 14H40' stroke='%23a9c0f1' stroke-width='5' stroke-linecap='round' fill='none'/><path d='M38 4L56 14L38 24Z' fill='%23ff6b45' stroke='%23ff6b45' stroke-width='3' stroke-linejoin='round'/></g></svg>"); }
.flow-card:nth-child(4)::after { content: ""; left: 50%; top: calc(100% + 1px); width: 30px; height: 56px; transform: translateX(-50%); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 60'><path d='M14 4V40' stroke='%23a9c0f1' stroke-width='5' stroke-linecap='round' fill='none'/><path d='M4 38L14 56L24 38Z' fill='%23ff6b45' stroke='%23ff6b45' stroke-width='3' stroke-linejoin='round'/></svg>"); }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .flow-grid { --gap: 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flow-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.flow-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.flow-card:nth-child(3) { grid-column: 2; grid-row: 2; }
.flow-card:nth-child(4) { grid-column: 1; grid-row: 2; }
.flow-card:nth-child(5) { grid-column: 1; grid-row: 3; }
.flow-card:nth-child(6) { grid-column: 2; grid-row: 3; }
.flow-card:nth-child(7) { grid-column: 2; grid-row: 4; }
.flow-card:nth-child(8) { grid-column: 1; grid-row: 4; }
.flow-card:nth-child(1) .flow-panel::after, .flow-card:nth-child(5) .flow-panel::after, .flow-card:nth-child(3) .flow-panel::after, .flow-card:nth-child(7) .flow-panel::after { content: ""; top: 50%; height: 30px; width: calc(var(--gap) - 8px); transform: translateY(-50%); }
.flow-card:nth-child(1) .flow-panel::after, .flow-card:nth-child(5) .flow-panel::after { left: calc(100% + 18px); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'><path d='M4 14H40' stroke='%23a9c0f1' stroke-width='5' stroke-linecap='round' fill='none'/><path d='M38 4L56 14L38 24Z' fill='%23ff6b45' stroke='%23ff6b45' stroke-width='3' stroke-linejoin='round'/></svg>"); }
.flow-card:nth-child(3) .flow-panel::after, .flow-card:nth-child(7) .flow-panel::after { right: calc(100% + 18px); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 28'><g transform='translate(60,0) scale(-1,1)'><path d='M4 14H40' stroke='%23a9c0f1' stroke-width='5' stroke-linecap='round' fill='none'/><path d='M38 4L56 14L38 24Z' fill='%23ff6b45' stroke='%23ff6b45' stroke-width='3' stroke-linejoin='round'/></g></svg>"); }
.flow-card:nth-child(2)::after, .flow-card:nth-child(4)::after, .flow-card:nth-child(6)::after { content: ""; left: 50%; top: calc(100% + 1px); width: 30px; height: 56px; transform: translateX(-50%); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 60'><path d='M14 4V40' stroke='%23a9c0f1' stroke-width='5' stroke-linecap='round' fill='none'/><path d='M4 38L14 56L24 38Z' fill='%23ff6b45' stroke='%23ff6b45' stroke-width='3' stroke-linejoin='round'/></svg>"); }
}
@media (max-width: 760px) {
  .flow-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
.flow-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.flow-card:nth-child(2) { grid-column: 1; grid-row: 2; }
.flow-card:nth-child(3) { grid-column: 1; grid-row: 3; }
.flow-card:nth-child(4) { grid-column: 1; grid-row: 4; }
.flow-card:nth-child(5) { grid-column: 1; grid-row: 5; }
.flow-card:nth-child(6) { grid-column: 1; grid-row: 6; }
.flow-card:nth-child(7) { grid-column: 1; grid-row: 7; }
.flow-card:nth-child(8) { grid-column: 1; grid-row: 8; }
.flow-card:nth-child(1)::after, .flow-card:nth-child(2)::after, .flow-card:nth-child(3)::after, .flow-card:nth-child(4)::after, .flow-card:nth-child(5)::after, .flow-card:nth-child(6)::after, .flow-card:nth-child(7)::after { content: ""; left: 50%; top: calc(100% + 1px); width: 30px; height: 56px; transform: translateX(-50%); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 60'><path d='M14 4V40' stroke='%23a9c0f1' stroke-width='5' stroke-linecap='round' fill='none'/><path d='M4 38L14 56L24 38Z' fill='%23ff6b45' stroke='%23ff6b45' stroke-width='3' stroke-linejoin='round'/></svg>"); }
}

/* Technology & Equipment (alternates: why-choose-us white → equipment light → sampling white) */
.equipment { background: var(--bg-alt); }
.equipment-block { background: #fff; }
.equipment-block.alt { background: var(--bg-alt); }
.equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.equipment-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .25s var(--ease-bounce), box-shadow .25s ease, border-color .25s ease; }
.equipment-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.equipment-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-alt); }
.equipment-image-empty { aspect-ratio: 16 / 8; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #0b2545, #2f5fb8); }
.equipment-image-empty svg { width: 64px; height: 64px; stroke-width: 1.4; }
.equipment-body { padding: 22px 24px 26px; }
/* 技術設備／測試設備：純文字卡片（無照片、無圖示），以珊瑚色頂線做識別 */
.text-card { border-top: 4px solid var(--coral); }
.text-card:hover { border-top-color: var(--coral); }
.text-card .equipment-body { padding: 26px 26px 30px; }
.equipment-body h3 { font-size: 1.12rem; color: var(--navy); font-weight: 800; margin-bottom: 8px; }
.equipment-body p { color: var(--gray); font-size: 0.92rem; line-height: 1.75; margin-bottom: 0; }
.sampling-note { max-width: 860px; margin: 36px auto 0; background: #fff; border: 1px solid var(--border); border-left: 5px solid var(--coral); border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow-sm); }
.sampling-note h3 { font-size: 1.05rem; color: var(--navy); font-weight: 800; margin-bottom: 8px; }
.sampling-note p { color: var(--gray); font-size: 0.95rem; line-height: 1.8; white-space: pre-line; margin: 0; }

/* Sustainability */
.sustainability { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; position: relative; overflow: hidden; }
.sustainability::before {
  content: ""; position: absolute; top: -80px; right: -60px; width: 320px; height: 320px; border-radius: 50%;
  background: var(--gradient-warm); opacity: 0.18; filter: blur(60px); pointer-events: none;
}
.sustainability-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.sustainability h2 { color: #fff; }
.sustainability .section-desc { color: #c7d5ee; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 24px 16px; text-align: center; transition: transform .25s var(--ease-bounce); }
.stat-card:hover { transform: translateY(-4px); }
.stat-value { font-variant-numeric: tabular-nums; font-size: 2.1rem; font-weight: 900; background: var(--gradient-warm); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; }
.stat-label { font-size: 0.82rem; color: #c7d5ee; }

/* Applications — large photo (or large icon tile when no photo is uploaded) with the name underneath */
.applications-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.application-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-align: center;
  display: flex; flex-direction: column; transition: transform .25s var(--ease-bounce), box-shadow .25s ease, border-color .25s ease;
}
.application-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow); }
.application-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-alt); }
.application-image-empty { display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--blue), #6fa4ff); }
.application-image-empty svg { width: 84px; height: 84px; stroke-width: 1.4; }
.application-card .application-name { padding: 18px 16px 20px; font-size: 1.1rem; font-weight: 800; color: var(--navy); }

/* Testimonials */
.testimonials { background: var(--bg-alt); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; transition: transform .25s var(--ease-bounce), box-shadow .25s ease; }
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.testimonial-quote-icon { color: var(--coral); opacity: 0.4; margin-bottom: 10px; }
.testimonial-quote-icon .icon { width: 30px; height: 30px; }
.testimonial-quote { color: var(--ink); font-size: 0.96rem; margin-bottom: 16px; }
.testimonial-source { color: var(--gray); font-size: 0.85rem; font-weight: 600; }

/* Certifications (bg-alt so it visually separates from the dark Sustainability section
   right above it and from the navy footer right below it) */
.certifications { background: var(--bg-alt); }
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cert-card {
  display: flex; align-items: center; gap: 10px; background: var(--blue-light); color: var(--navy); border-radius: var(--radius);
  padding: 18px; font-weight: 700; font-size: 0.88rem; transition: transform .25s var(--ease-bounce), background .25s ease;
}
.cert-card:hover { transform: translateY(-4px); background: var(--coral-light); }
.cert-card .icon-sm { color: var(--blue); }

/* Contact */
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.contact-info li { display: flex; align-items: center; gap: 10px; color: var(--gray); font-size: 0.95rem; }
.contact-info .icon-sm { color: var(--blue); }
.contact-info a:hover { color: var(--blue); }
.contact-form { background: var(--bg-alt); border-radius: var(--radius); padding: 28px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.94rem; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-light); }
.form-note { font-size: 0.85rem; color: var(--teal); min-height: 18px; }
.form-note.error { color: #c92a2a; }
.map-embed { border: none; width: 100%; height: 340px; border-radius: var(--radius); display: block; margin-top: 30px; }

/* Footer */
.site-footer { background: var(--navy); color: #cfe0ff; padding: 72px 0 28px; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-brand); }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); margin-bottom: 40px; align-items: center; }
/* Brand column: the logo is exactly as wide as the Chinese company name under it (width:0 + min-width:100% keeps the image from widening its box, then stretches it to the box = name width). The English name sits beside the Chinese one and drops to the next line when the column is too narrow. */
.footer-brand { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 14px; row-gap: 4px; }
.footer-brand-main { display: grid; grid-template-columns: max-content; row-gap: 22px; }
.footer-logo { display: block; width: 0; min-width: 100%; height: auto; }
.footer-brand strong { color: #fff; font-size: 1.65rem; font-weight: 800; white-space: nowrap; }
.footer-brand em { color: #9fb6dd; font-style: normal; font-size: 1.2rem; letter-spacing: 0.02em; padding-bottom: 3px; }
.footer-col { justify-self: center; width: max-content; max-width: 100%; text-align: left; }
.footer-col ul { display: flex; flex-direction: column; gap: 18px; }
.footer-col ul.footer-links { display: grid; grid-template-columns: repeat(2, max-content); gap: 20px 52px; }
.footer-contact li { display: flex; gap: 14px; align-items: center; }
.footer-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.09); color: var(--coral-2); display: inline-flex; align-items: center; justify-content: center; }
.footer-icon .icon { width: 20px; height: 20px; }
/* Label text stays in the page for screen readers / copying, but is visually replaced by the icon. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.footer-col a, .footer-col li { color: #a9bfe0; font-size: 1.18rem; line-height: 1.5; transition: color .2s ease; }
.footer-col a:hover { color: var(--coral-2); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; font-size: 1rem; color: #8fa5c8; text-align: center; }
/* Wide windows keep the 3 equal columns above. Narrower than ~1240px the footer stacks top to bottom, centered: logo with Chinese name over English name → contact lines → one row of page links. */
@media (max-width: 1240px) {
  .footer-grid { display: flex; flex-direction: column; align-items: center; gap: 34px; }
  .footer-col { justify-self: auto; }
  .footer-brand { display: grid; grid-template-columns: max-content max-content; column-gap: 22px; row-gap: 2px; align-items: center; }
  .footer-brand-main { display: contents; }
  .footer-logo { grid-column: 1; grid-row: 1 / span 2; width: 130px; min-width: 0; margin: 0; }
  .footer-brand strong { grid-column: 2; grid-row: 1; align-self: end; }
  .footer-brand em { grid-column: 2; grid-row: 2; align-self: start; padding-bottom: 0; }
  .footer-col ul.footer-links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px 32px; }
}

/* Back to top */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; background: var(--gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-glow); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--ease-bounce); z-index: 60;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px) scale(1.06); }
.rotate-up { transform: rotate(-90deg); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .process-grid { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; max-width: 560px; margin: 0 auto; }
  .process-card { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; text-align: left; padding: 0 0 30px; }
  .process-num { grid-row: 1 / span 2; margin: 0; align-self: start; }
  .process-card h3 { margin: 4px 0 6px; align-self: end; }
  .process-card:not(:last-child)::after { top: 60px; left: 27px; width: 0; height: calc(100% - 64px); border-top: 0; border-left: 3px solid var(--flow-line); }
  .process-card:not(:last-child)::before { display: none; }
}
@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .applications-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .sustainability-inner { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; }
  .equipment-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .brand-mark-img { height: 54px; max-width: 120px; }
  .brand { gap: 10px; }
  .brand-text strong { font-size: 1.02rem; }
  .brand-text em { font-size: 0.7rem; }
  .header-inner { padding: 10px 16px; }
  .header-right { gap: 8px; }
  .site-header.is-scrolled .header-inner { padding-top: 6px; padding-bottom: 6px; }
  .site-header.is-scrolled .brand-mark-img { height: 38px; }
  .site-header.is-scrolled .brand-text strong { font-size: 0.95rem; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-actions { justify-content: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .main-nav { position: fixed; top: 0; right: 0; height: 100vh; width: 78%; max-width: 320px; background: #fff; flex-direction: column; align-items: flex-start; padding: 90px 28px 28px; gap: 22px; transform: translateX(100%); transition: transform .25s ease; box-shadow: -10px 0 30px rgba(0,0,0,0.1); }
  .main-nav.open { transform: translateX(0); }
  .nav-toggle { display: block; }
  .feature-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .applications-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .application-image-empty svg { width: 52px; height: 52px; }
  .application-card .application-name { padding: 14px 10px 16px; font-size: 1rem; }
  .cert-grid { grid-template-columns: 1fr; }
  .equipment-grid { grid-template-columns: 1fr; }
  .footer-brand { column-gap: 12px; }
  .footer-logo { width: 84px; }
  .footer-col ul.footer-links { gap: 12px 24px; }
  .footer-brand strong { font-size: 1.2rem; }
  .footer-brand em { font-size: 1rem; white-space: normal; }
  .form-row { grid-template-columns: 1fr; }
}


/* ---------- Admin dashboard ---------- */
.admin-body { background: #f2f4f8; min-height: 100vh; }
.admin-header { background: #14151f; color: #fff; padding: 16px 0; position: sticky; top: 0; z-index: 20; }
.admin-header-inner { display: flex; align-items: center; justify-content: space-between; }
.admin-header h1 { font-size: 1.1rem; }
.admin-header .tag-note { font-size: 0.75rem; color: #ffd43b; background: rgba(255,212,59,0.12); padding: 4px 10px; border-radius: 20px; margin-left: 10px; }
.admin-actions { display: flex; gap: 10px; align-items: center; }
.admin-actions a, .admin-actions button { font-size: 0.85rem; }
.admin-main { padding: 30px 0 80px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.admin-tab-btn { padding: 9px 16px; border-radius: 20px; border: 1px solid #d7dce5; background: #fff; font-size: 0.85rem; font-weight: 600; color: #444; }
.admin-tab-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.admin-card { background: #fff; border: 1px solid #e2e6ee; border-radius: 12px; padding: 22px; margin-bottom: 18px; }
.admin-card h3 { font-size: 1rem; color: var(--navy); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.admin-field { margin-bottom: 14px; }
.admin-field label { display: block; font-size: 0.8rem; font-weight: 700; color: #555; margin-bottom: 6px; }
.admin-field input, .admin-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #d7dce5; border-radius: 8px; font-family: inherit; font-size: 0.9rem;
}
.admin-field textarea { resize: vertical; }
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-item-card { border: 1px dashed #cfd6e4; border-radius: 10px; padding: 16px; margin-bottom: 14px; position: relative; background: #fafbfd; }
.admin-item-remove { position: absolute; top: 10px; right: 10px; background: #fdecec; color: #c92a2a; border: none; border-radius: 8px; padding: 5px 10px; font-size: 0.75rem; font-weight: 700; }
.admin-image-reset-btn { background: #fdecec; color: #c92a2a; border: none; border-radius: 8px; padding: 8px 16px; font-size: 0.85rem; font-weight: 700; }
.admin-add-btn { background: var(--blue-light); color: var(--blue); border: none; padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; }
.admin-image-upload-btn { background: var(--blue-light); color: var(--blue); border: none; padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; }
.admin-save-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e2e6ee; padding: 14px 24px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; z-index: 30; }
.admin-save-status { font-size: 0.85rem; color: var(--teal); }
.admin-save-status.error { color: #c92a2a; }
.admin-save-btn { background: var(--blue); color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-weight: 700; font-size: 0.92rem; }
.admin-save-btn:hover { background: var(--navy-2); }
.admin-password-note { font-size: 0.78rem; color: #888; margin-top: 4px; }

/* ---------- Justified long paragraphs ----------
   Chinese mode on desktop only: multi-line body text is justified (left AND right edges line up).
   English mode and tablet/phone widths stay left-aligned, because justified Latin text in
   narrow columns creates uneven word gaps. Headings, subtitles and centered blocks are untouched. */
@media (min-width: 1025px) {
  body:not(.lang-en) .hero-sub,
  body:not(.lang-en) .about .section-desc,
  body:not(.lang-en) .sustainability .section-desc,
  body:not(.lang-en) .feature-card p,
  body:not(.lang-en) .product-body p,
  body:not(.lang-en) .testimonial-quote,
  body:not(.lang-en) .sampling-note p,
  body:not(.lang-en) .equipment-body p {
    text-align: justify;
    text-justify: inter-character;
  }
}