/* =============================================================
   首頁樣式 — 中文版 /index.html 與英文版 /en/index.html 共用
   ⚠ 首頁不引用 shared.css，header / footer 等共用樣式也在這份裡面，
     改動 header 樣式時記得 shared.css 也要同步（見 CLAUDE.md）
   ============================================================= */
  /* ============================================================
     Yes Way Design Tokens
     ============================================================ */
  :root {
    --ink: #0E1410;
    --ink-2: #1F2622;
    --paper: #F7F6F1;
    --paper-2: #EFEEE7;
    --green: #007F02;
    --green-deep: #00580A;
    --green-tint: #E8F1E5;
    --steel: #6B7268;
    --steel-2: #B5B9B1;
    --hair: #D8D6CC;
    --signal: #FF5A1F;
    --max-w: 1440px;
    --gutter: clamp(20px, 4vw, 64px);
    --rad: 2px;
    --easing: cubic-bezier(.2,.7,.2,1);
  }

  *,*::before,*::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Bricolage Grotesque', 'Noto Sans TC', system-ui, sans-serif;
    font-feature-settings: "ss01","cv11";
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; }
  .tc { font-family: 'Noto Sans TC', 'Bricolage Grotesque', sans-serif; }
  .grotesk { font-family: 'Bricolage Grotesque', 'Noto Sans TC', sans-serif; }

  a { color: inherit; text-decoration: none; }
  button { font: inherit; }
  img, svg { display: block; max-width: 100%; }
  /* 中文排版：避免段落／標題最後一行只剩一個字（孤字） */
  h1, h2, h3, h4, h5 { text-wrap: balance; }
  p, li { text-wrap: pretty; }

  .container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* Eyebrow / overline label — recurring brand element */
  .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--steel);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: "";
    width: 24px; height: 1px;
    background: var(--green);
  }
  .eyebrow.no-line::before { display: none; }

  /* Section headings */
  .h-section {
    font-family: 'Bricolage Grotesque', 'Noto Sans TC', sans-serif;
    font-weight: 500;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0;
  }
  .h-section em {
    font-style: normal;
    font-weight: 400;
    color: var(--green);
  }

  /* ============================================================
     Top Announcement Bar
     ============================================================ */
  .top-bar {
    background: var(--ink);
    color: var(--paper);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .top-bar-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    gap: 24px;
    flex-wrap: wrap;
  }
  .top-bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .top-bar .pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: #6BFF6E;
    box-shadow: 0 0 0 0 rgba(107,255,110,.6);
    animation: pulse 1.8s infinite;
    flex-shrink: 0;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(107,255,110,.5); }
    50%     { box-shadow: 0 0 0 6px rgba(107,255,110,0); }
  }
  .top-bar a { color: var(--paper); }
  .top-bar a:hover { color: #6BFF6E; }
  .top-bar .sep { opacity: .4; }
  .top-bar-right { display: flex; gap: 18px; opacity: .85; }

  /* ============================================================
     Header
     ============================================================ */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(247,246,241,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hair);
  }
  .header-track {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 96px;
    gap: 32px;
  }
  .brand { display: flex; align-items: center; gap: 18px; }
  .brand img { width: 221px; height: auto; }
  .brand-meta {
    border-left: 1px solid var(--hair);
    padding-left: 16px;
    line-height: 1.2;
  }
  .brand-meta .b1 { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; }
  .brand-meta .b2 { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--steel); letter-spacing: .16em; font-weight: 600; }

  .nav { display: flex; gap: 4px; justify-content: center; }
  .nav > li { list-style: none; position: relative; }
  .nav a {
    display: inline-block;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    position: relative;
  }
  .nav a:hover { color: var(--green); }
  .nav a::after {
    content: ""; position: absolute;
    left: 14px; right: 14px; bottom: 4px; height: 1px;
    background: var(--green);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--easing);
  }
  .nav a:hover::after { transform: scaleX(1); }
  .nav .has-sub > a::before {
    content: "+";
    margin-right: 4px;
    color: var(--green);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    opacity: .5;
  }

  .header-actions { display: flex; align-items: center; gap: 14px; }
  .lang-switch {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: .14em;
    color: var(--steel);
    border: 1px solid var(--hair);
    border-radius: 999px;
    padding: 6px 10px;
    display: flex; gap: 8px;
    background: transparent;
    cursor: pointer;
  }
  .lang-switch .on { color: var(--ink); font-weight: 600; }
  .nav .nav-lang { display: none; }
  .btn-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--ink); color: var(--paper);
    border: none;
    padding: 12px 18px;
    font-size: 13.5px; font-weight: 500;
    cursor: pointer;
    transition: background .25s var(--easing);
  }
  .btn-cta:hover { background: var(--green); }
  .btn-cta .arrow { transition: transform .3s var(--easing); }
  .btn-cta:hover .arrow { transform: translateX(3px); }
  /* Catalog button (header) — opens product catalog PDF in a new tab */
  .btn-catalog {
    display: inline-flex; align-items: center; gap: 9px;
    background: transparent; color: var(--ink);
    border: 1px solid var(--ink);
    padding: 11px 16px;
    font-size: 13.5px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: background .25s var(--easing), color .25s var(--easing), border-color .25s var(--easing);
  }
  .btn-catalog:hover { background: var(--green); color: var(--paper); border-color: var(--green); }
  .btn-catalog svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .3s var(--easing); }
  .btn-catalog:hover svg { transform: translateY(2px); }

  /* Mobile navigation — CSS-only hamburger (checkbox toggle) */
  .nav-toggle { display: none; }
  .nav-cb { display: none; }
  @media (max-width: 1180px) {
    .header-track {
      grid-template-columns: 1fr auto;
      height: auto;
      padding-top: 14px; padding-bottom: 14px;
      gap: 14px;
    }
    .brand img { width: 168px; }
    .brand-meta { display: none; }
    .header-actions { gap: 10px; }
    .lang-switch { display: none; }
    .nav-toggle {
      display: flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 46px; height: 42px;
      border: 1px solid var(--hair); background: var(--paper);
      padding: 0 11px; flex-shrink: 0;
    }
    .nav-toggle span {
      display: block; height: 2px; width: 100%;
      background: var(--ink);
      transition: transform .3s var(--easing), opacity .3s var(--easing);
    }
    .site-header nav {
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--hair);
      box-shadow: 0 22px 30px -22px rgba(14,20,16,.3);
      max-height: 0; overflow: hidden;
      transition: max-height .4s var(--easing);
    }
    .site-header .nav {
      flex-direction: column; align-items: stretch; gap: 0;
      padding: 4px var(--gutter) 14px;
    }
    .site-header .nav a {
      padding: 15px 2px; font-size: 16px;
      border-bottom: 1px solid var(--hair);
    }
    .site-header .nav a::after { display: none; }
    .site-header .nav li:last-child a { border-bottom: 0; }

    /* 手機選單底部的語言切換 */
    .nav .nav-lang { display: list-item; }
    .nav .nav-lang a {
      color: var(--green); font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px; letter-spacing: .08em;
    }
    .nav .nav-lang a::before { content: "⇄ "; opacity: .6; }
    .nav-cb:checked ~ nav { max-height: 75vh; overflow-y: auto; }
    .nav-cb:checked ~ .header-actions .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-cb:checked ~ .header-actions .nav-toggle span:nth-child(2) { opacity: 0; }
    .nav-cb:checked ~ .header-actions .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  }
  /* Slim band: horizontal nav is tight here — shrink the lang toggle instead of
     hiding it (it switches 中/EN and must stay reachable), make the catalog
     button icon-only, and tighten nav padding so the full menu fits. */
  @media (max-width: 1440px) {
    .lang-switch { padding: 5px 9px; gap: 5px; font-size: 10.5px; letter-spacing: .1em; }
    .btn-catalog { padding: 10px; gap: 0; }
    .btn-catalog .bc-label { display: none; }
    .nav a { padding: 10px 11px; }
  }
  @media (max-width: 600px) {
    .btn-catalog { padding: 10px; gap: 0; }
    .btn-catalog .bc-label { display: none; }
  }
  @media (max-width: 420px) {
    .brand img { width: 140px; }
    .btn-cta { padding: 10px 13px; font-size: 12.5px; }
  }

  /* ============================================================
     HERO CAROUSEL (產業應用 Banner — 3 張輪播)
     ============================================================ */
  .hero-carousel {
    position: relative;
    width: 100%;
    height: clamp(480px, 62vw, 720px);
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
    isolation: isolate;
  }
  .hc-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s var(--easing), visibility 0s linear .9s;
    z-index: 1;
  }
  @media (max-width: 900px) { .hc-slide { grid-template-columns: 1fr; grid-template-rows: 34% 66%; } }
  .hc-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    transition: opacity .9s var(--easing), visibility 0s linear 0s;
  }

  /* Left — Scene image (application scenario) */
  .hc-scene {
    position: relative;
    overflow: hidden;
    background: #0E1410;
  }
  .hc-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(14,20,16,.55) 0%, rgba(14,20,16,.15) 45%, rgba(14,20,16,0) 70%);
    pointer-events: none;
  }
  .hc-scene img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.08);
    transition: transform 7s linear;
  }
  .hc-slide.active .hc-scene img { transform: scale(1.0); }

  .hc-tag {
    position: absolute;
    top: clamp(20px, 3vw, 36px);
    left: clamp(20px, 3vw, 36px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(14,20,16,.7);
    backdrop-filter: blur(8px);
    padding: 9px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6BFF6E;
    border: 1px solid rgba(107,255,110,.35);
  }
  .hc-tag .num { color: rgba(247,246,241,.55); }

  /* Right — copy + animated product */
  .hc-copy {
    position: relative;
    background: linear-gradient(135deg, #11221a 0%, #0E1410 60%, #0a1612 100%);
    padding: clamp(36px, 5vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .hc-copy::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 80% 80%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at 80% 80%, #000 30%, transparent 75%);
    pointer-events: none;
  }

  .hc-copy-inner {
    position: relative;
    z-index: 4;             /* sits above the product image so text is always readable */
    max-width: 520px;
  }
  .hc-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6BFF6E;
    margin-bottom: 18px;
    display: inline-flex; align-items: center; gap: 10px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s var(--easing) .2s, transform .7s var(--easing) .2s;
  }
  .hc-eyebrow::before {
    content: ""; width: 28px; height: 1px; background: #6BFF6E;
  }
  .hc-title {
    font-family: 'Bricolage Grotesque','Noto Sans TC', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--paper);
    margin: 0 0 22px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--easing) .35s, transform .8s var(--easing) .35s;
  }
  .hc-title em { color: #6BFF6E; font-style: normal; font-weight: 400; }
  .hc-desc {
    font-size: clamp(14.5px, 1.05vw, 16.5px);
    line-height: 1.75;
    color: rgba(247,246,241,.82);
    margin: 0 0 28px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s var(--easing) .5s, transform .8s var(--easing) .5s;
  }
  .hc-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 32px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s var(--easing) .65s, transform .8s var(--easing) .65s;
  }
  .hc-chip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(247,246,241,.85);
    border: 1px solid rgba(247,246,241,.22);
    padding: 6px 10px;
    background: rgba(247,246,241,.04);
  }
  .hc-cta {
    display: inline-flex; align-items: center; gap: 12px;
    background: #6BFF6E;
    color: var(--ink);
    padding: 14px 22px;
    font-size: 14px; font-weight: 600;
    letter-spacing: .04em;
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s var(--easing) .8s, transform .8s var(--easing) .8s, background .25s var(--easing);
  }
  .hc-cta:hover { background: var(--paper); }
  .hc-cta .arr { transition: transform .25s var(--easing); }
  .hc-cta:hover .arr { transform: translateX(4px); }

  /* Active state — kick off entrance animations on copy */
  .hc-slide.active .hc-eyebrow,
  .hc-slide.active .hc-title,
  .hc-slide.active .hc-desc,
  .hc-slide.active .hc-tags,
  .hc-slide.active .hc-cta {
    opacity: 1;
    transform: translateY(0);
  }

  /* Product image — entrance animation (sits BEHIND the text via z-index) */
  .hc-product {
    position: absolute;
    bottom: clamp(-20px, -2vw, -40px);
    right: clamp(-20px, -2vw, -50px);
    width: clamp(220px, 30vw, 400px);
    max-width: 52%;
    height: auto;
    z-index: 1;             /* below .hc-copy-inner (z:4) so text always wins */
    pointer-events: none;
    opacity: 0;
    transform: translate(60px, 50px) rotate(-8deg) scale(0.85);
    filter: drop-shadow(0 28px 46px rgba(0,0,0,.55));
    /* Soft fade-out on the side closest to the copy text — graceful blend
       even where image meets text. */
    -webkit-mask-image: linear-gradient(to left, #000 70%, transparent 100%);
            mask-image: linear-gradient(to left, #000 70%, transparent 100%);
    transition:
      opacity 1s var(--easing) .55s,
      transform 1.2s cubic-bezier(.22,.9,.18,1) .55s;
  }
  .hc-slide.active .hc-product {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    animation: floatProduct 5.5s ease-in-out 1.8s infinite;
  }
  @keyframes floatProduct {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(0, -12px) rotate(.8deg); }
  }
  @media (max-width: 900px) {
    /* Taller carousel so scene + copy + product image all fit */
    .hero-carousel { height: clamp(680px, 160vw, 800px); }

    /* Give hc-copy more breathing room; don't clip the product image */
    .hc-copy { overflow: visible; }

    .hc-product {
      position: relative;
      right: 0; bottom: 0;
      margin: 24px auto 0;
      display: block;
      width: 72%;
      max-width: none;
      -webkit-mask-image: none;
              mask-image: none;
    }
  }

  /* Decorative spec corner inside copy */
  .hc-spec-corner {
    position: absolute;
    bottom: clamp(20px, 3vw, 36px);
    left: clamp(36px, 5vw, 80px);
    z-index: 4;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(247,246,241,.5);
    letter-spacing: .14em;
    text-transform: uppercase;
    display: flex; gap: 14px;
  }
  .hc-spec-corner .v { color: #6BFF6E; }
  @media (max-width: 900px) { .hc-spec-corner { display: none; } }

  /* Carousel controls */
  .hc-controls {
    position: absolute;
    bottom: clamp(20px, 2.5vw, 32px);
    right: clamp(20px, 3vw, 36px);
    z-index: 6;
    display: flex; align-items: center; gap: 14px;
  }
  .hc-dots {
    display: flex; gap: 10px;
    align-items: center;
  }
  .hc-dot {
    width: 36px; height: 2px;
    background: rgba(247,246,241,.25);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .3s var(--easing);
  }
  .hc-dot::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 0;
    background: #6BFF6E;
    transition: none;
  }
  .hc-dot.active { background: rgba(107,255,110,.2); }
  .hc-dot.active::after {
    width: 100%;
    transition: width 6.5s linear;
  }
  .hc-dot.paused.active::after { transition: none; }

  .hc-arrows { display: flex; gap: 6px; }
  .hc-arrow {
    width: 38px; height: 38px;
    background: rgba(247,246,241,.06);
    color: var(--paper);
    border: 1px solid rgba(247,246,241,.18);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .25s var(--easing);
  }
  .hc-arrow:hover {
    background: #6BFF6E;
    color: var(--ink);
    border-color: #6BFF6E;
  }

  /* Slide counter */
  .hc-counter {
    position: absolute;
    top: clamp(20px, 3vw, 36px);
    right: clamp(20px, 3vw, 36px);
    z-index: 6;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: .14em;
    color: rgba(247,246,241,.65);
  }
  .hc-counter .cur { color: var(--paper); font-weight: 600; }

  /* ============================================================
     Buttons (used by news / sections)
     ============================================================ */
  .btn-primary {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--green);
    color: var(--paper);
    padding: 16px 26px;
    font-size: 15px; font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background .25s var(--easing);
  }
  .btn-primary:hover { background: var(--green-deep); }
  .btn-text {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 4px;
    transition: gap .3s var(--easing);
  }
  .btn-text:hover { gap: 14px; color: var(--green); border-color: var(--green); }

  /* ============================================================
     Marquee Strip
     ============================================================ */
  .marquee {
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    background: var(--paper);
    overflow: hidden;
  }
  .marquee-track {
    display: flex;
    gap: 56px;
    padding: 18px 0;
    animation: scroll 40s linear infinite;
    white-space: nowrap;
  }
  @keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .marquee-item {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: .14em;
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .marquee-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

  /* ============================================================
     Section: Industries (industry-led showcase)
     ============================================================ */
  .industries {
    padding: clamp(80px, 9vw, 140px) 0;
    background: var(--paper);
    position: relative;
  }
  .industries-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 60px;
  }
  @media (max-width: 760px) {
    .industries-head { grid-template-columns: 1fr; }
  }
  .industries-head p {
    max-width: 460px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0 0 0 auto;
  }
  @media (max-width: 760px) {
    .industries-head p { margin: 0; }
  }

  .industry-tabs {
    border-top: 1px solid var(--ink);
    margin-top: 12px;
  }
  .industry-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
    border-bottom: 1px solid var(--hair);
    padding: clamp(50px, 6vw, 80px) 0;
    position: relative;
  }
  /* Alternate image / content position (zig-zag) */
  .industry-row:nth-child(even) .ind-img { order: 2; }
  .industry-row:nth-child(even) .ind-content { order: 1; }

  /* Photo card */
  .ind-img {
    position: relative;
    aspect-ratio: 4/3;
    background: var(--paper-2);
    overflow: hidden;
    border: 1px solid var(--hair);
  }
  .ind-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .8s var(--easing);
  }
  .industry-row:hover .ind-img img { transform: scale(1.04); }
  .ind-img .num-badge {
    position: absolute;
    top: 18px; left: 18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--paper);
    background: rgba(15,20,28,.78);
    backdrop-filter: blur(8px);
    padding: 7px 14px;
    z-index: 2;
  }

  /* Right-side text content */
  .ind-content .en {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--green);
    margin-bottom: 14px;
  }
  .ind-content .name {
    font-family: 'Bricolage Grotesque','Noto Sans TC',sans-serif;
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 20px;
  }
  .ind-content .desc {
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink-2);
    margin: 0 0 24px;
    max-width: 520px;
  }
  .ind-content .specs {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--steel);
    letter-spacing: .08em;
    line-height: 1.85;
    margin-bottom: 28px;
  }
  .ind-content .specs strong {
    color: var(--green);
    font-weight: 600;
  }
  .ind-content .specs .tag-light {
    opacity: .65;
  }

  /* Structured facets: 核心訴求 / 應用場景 / 產品運用 */
  .ind-facets {
    display: grid;
    gap: 14px;
    margin: 0 0 32px;
    max-width: 560px;
  }
  .facet {
    padding: 10px 0 10px 16px;
    border-left: 2px solid var(--hair);
    transition: border-left-color .35s var(--easing);
  }
  .industry-row:hover .facet { border-left-color: var(--green); }
  .facet .f-lbl {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .16em;
    color: var(--green);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .facet p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 0;
  }
  .facet p strong {
    color: var(--ink);
    font-weight: 600;
  }
  .ind-bottom {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--ink);
    transition: gap .3s var(--easing), color .3s;
  }
  .ind-bottom .lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .ind-bottom .arrow {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--hair);
    display: grid; place-items: center;
    transition: all .3s var(--easing);
  }
  .industry-row:hover .ind-bottom { gap: 18px; color: var(--green); }
  .industry-row:hover .ind-bottom .arrow {
    background: var(--green);
    border-color: var(--green);
    color: var(--paper);
    transform: rotate(-45deg);
  }

  @media (max-width: 800px) {
    .industry-row {
      grid-template-columns: 1fr;
      gap: 28px;
      padding: 40px 0;
    }
    .industry-row:nth-child(even) .ind-img { order: 0; }
    .industry-row:nth-child(even) .ind-content { order: 1; }
  }

  /* ============================================================
     Section: Products (7 categories) — light mode w/ line-art
     ============================================================ */
  /* ── Product Showcase (3D rotating carousel — Compal style) ── */
  .ps {
    /* Dark, but with a luminous green-tinted spotlight so products pop */
    background:
      radial-gradient(ellipse 70% 60% at 50% 42%, #18301F 0%, #102018 42%, var(--ink) 78%);
    color: var(--paper);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: clamp(60px, 7vw, 100px) 0 clamp(40px, 5vw, 80px);
  }
  .ps::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(107,255,110,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(107,255,110,.05) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
  }

  /* Section header at top (no longer centered in the stage) */
  .ps-head {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px) clamp(40px, 5vw, 70px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: end;
    position: relative;
    z-index: 6;
  }
  .ps-head .eyebrow { color: var(--green); }
  .ps-head .eyebrow::before { background: var(--green); }
  .ps-head h2 {
    font-family: 'Bricolage Grotesque','Noto Sans TC',sans-serif;
    font-size: clamp(36px, 4.5vw, 60px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--paper);
    margin: 14px 0 0;
  }
  .ps-head h2 em { color: var(--green); font-style: normal; }
  .ps-head p {
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(247,246,241,.55);
    max-width: 460px;
    margin: 18px 0 0;
  }
  .ps-head .ps-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--green);
    text-decoration: none;
    padding: 14px 26px;
    border: 1px solid rgba(107,255,110,.4);
    transition: background .25s, border-color .25s, gap .25s;
  }
  .ps-head .ps-cta:hover {
    background: rgba(107,255,110,.1);
    border-color: var(--green);
    gap: 14px;
  }

  /* 2D stage (JS animates each product's scale + opacity per frame) */
  .ps-stage {
    position: relative;
    width: 100%;
    height: clamp(440px, 50vw, 580px);
    overflow: hidden;
  }

  /* Floor spotlight — brighter so the front product stands out */
  .ps-stage::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 8%;
    width: 72%;
    height: 130px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(107,255,110,.42) 0%, rgba(107,255,110,.12) 45%, transparent 72%);
    filter: blur(26px);
    pointer-events: none;
  }
  /* Central glow halo behind the front product */
  .ps-stage::before {
    content: "";
    position: absolute;
    left: 50%; top: 46%;
    width: 46%; height: 60%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(107,255,110,.16) 0%, transparent 65%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
  }

  /* Ring container — products inside are positioned by JS */
  .ps-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
  }

  /* Each product (transform / opacity / filter set by JS) */
  .ps-prod {
    position: absolute;
    top: 0; left: 0;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    text-decoration: none;
    will-change: transform, opacity, filter;
    transform-origin: center;
    transition: filter .25s;
  }

  .ps-prod-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .ps-prod-inner img {
    max-width: 100%;
    max-height: 168px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(1.15) drop-shadow(0 16px 36px rgba(0,0,0,.55));
    transition: filter .35s, transform .35s;
  }
  /* Front product glows green so it reads as the highlight */
  .ps-prod.is-front .ps-prod-inner img {
    filter: brightness(1.15) drop-shadow(0 18px 40px rgba(107,255,110,.45)) drop-shadow(0 4px 14px rgba(0,0,0,.5));
  }

  .ps-prod-inner .ps-label {
    display: block;
    margin-top: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .14em;
    color: rgba(247,246,241,.55);
    text-align: center;
    text-transform: uppercase;
    transition: color .3s;
  }

  /* Hover: extra glow on the front product */
  .ps-prod.is-front:hover .ps-prod-inner img {
    transform: scale(1.05);
    filter: brightness(1.15) drop-shadow(0 28px 50px rgba(107,255,110,.5));
  }
  .ps-prod.is-front:hover .ps-prod-inner .ps-label { color: var(--green); }

  /* Tablet */
  @media (max-width: 1100px) {
    .ps-prod { width: 180px; height: 180px; margin: -90px 0 0 -90px; }
    .ps-prod-inner img { max-height: 138px; }
  }
  @media (max-width: 880px) {
    .ps-stage { height: clamp(380px, 60vw, 500px); }
    .ps-prod { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
    .ps-prod-inner img { max-height: 116px; }
  }

  /* Mobile — disable carousel, switch to 2-col grid */
  @media (max-width: 700px) {
    .ps-head { grid-template-columns: 1fr; gap: 24px; }
    .ps-head .ps-cta { justify-self: start; }
    .ps-stage {
      height: auto;
      padding: 8px 16px 0;
    }
    .ps-stage::after { display: none; }
    .ps-ring {
      position: static;
      width: 100%;
      height: auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 14px;
      justify-items: center;
    }
    .ps-prod {
      position: static;
      width: 100%;
      height: auto;
      margin: 0;
      transform: none !important;
      opacity: 1 !important;
      filter: none !important;
    }
    .ps-prod-inner img {
      max-width: 140px;
      max-height: 140px;
    }
  }

  /* ============================================================
     CATALOG DOWNLOAD CTA (placed after Products grid)
     ============================================================ */
  .catalog-cta {
    position: relative;
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
  }
  .catalog-cta::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 80% 50%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at 80% 50%, #000 30%, transparent 75%);
    pointer-events: none;
  }
  .catalog-cta::after {
    content: "CATALOG · PDF";
    position: absolute;
    bottom: -28px; right: -8px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(80px, 14vw, 200px);
    color: rgba(247,246,241,.05);
    letter-spacing: -.05em;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
  }
  .catalog-inner {
    position: relative;
    z-index: 1;
    padding: clamp(60px, 8vw, 110px) 0;
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  @media (max-width: 800px) { .catalog-inner { grid-template-columns: 1fr; } }
  .catalog-copy .eyebrow {
    color: rgba(107,255,110,.85);
    margin-bottom: 18px;
  }
  .catalog-copy .eyebrow::before { background: #6BFF6E; }
  .catalog-copy h2 {
    font-family: 'Bricolage Grotesque','Noto Sans TC', sans-serif;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0 0 22px;
    color: var(--paper);
    max-width: 540px;
  }
  .catalog-copy h2 em { color: #6BFF6E; font-style: normal; font-weight: 400; }
  .catalog-copy p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(247,246,241,.78);
    margin: 0;
    max-width: 460px;
  }
  .catalog-meta-list {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
    max-width: 460px;
  }
  .catalog-meta-list li {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(247,246,241,.7);
    padding-left: 18px;
    position: relative;
  }
  .catalog-meta-list li::before {
    content: "✓"; color: #6BFF6E; font-weight: 700;
    position: absolute; left: 0; top: 0;
  }

  /* File preview card on the right */
  .catalog-card {
    background: rgba(247,246,241,.04);
    border: 1px solid rgba(247,246,241,.18);
    padding: 34px 32px;
    position: relative;
    transition: border-color .3s var(--easing), background .3s var(--easing);
  }
  .catalog-card:hover {
    border-color: #6BFF6E;
    background: rgba(107,255,110,.05);
  }
  .catalog-card .file-row {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 22px;
  }
  .catalog-card .file-icon {
    width: 56px; height: 70px;
    background: linear-gradient(135deg, #6BFF6E 0%, #00C04F 100%);
    color: var(--ink);
    display: grid; place-items: center;
    flex-shrink: 0;
    position: relative;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
  }
  .catalog-card .file-icon::after {
    content: "";
    position: absolute; top: 0; right: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 14px 14px 0;
    border-color: transparent rgba(14,20,16,.18) transparent transparent;
  }
  .catalog-card .file-meta { flex: 1; min-width: 0; }
  .catalog-card .file-meta .fn {
    font-family: 'Bricolage Grotesque','Noto Sans TC', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--paper);
    line-height: 1.25;
    margin: 0 0 4px;
    word-break: break-all;
  }
  .catalog-card .file-meta .fs {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(247,246,241,.55);
  }
  .catalog-card .download-btn {
    width: 100%;
    background: #6BFF6E;
    color: var(--ink);
    border: none;
    padding: 16px 22px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: background .25s var(--easing), transform .25s var(--easing);
  }
  .catalog-card .download-btn:hover {
    background: var(--paper);
    transform: translateY(-2px);
  }
  .catalog-card .download-btn .arrow { transition: transform .3s var(--easing); }
  .catalog-card .download-btn:hover .arrow { transform: translateY(3px); }
  .catalog-card .alt-link {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(247,246,241,.6);
  }
  .catalog-card .alt-link:hover { color: #6BFF6E; }

  /* ============================================================
     Section: Capabilities / Spirit (6 pillars)
     ============================================================ */
  .capabilities {
    padding: clamp(80px, 9vw, 140px) 0;
    background: var(--paper);
  }
  .cap-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 56px;
  }
  @media (max-width: 760px) { .cap-head { grid-template-columns: 1fr; } }
  .cap-head p {
    max-width: 480px;
    margin: 0 0 0 auto;
    font-size: 16px; line-height: 1.65; color: var(--ink-2);
  }
  @media (max-width: 760px) { .cap-head p { margin: 0; } }

  .cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hair);
    border: 1px solid var(--hair);
  }
  @media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 540px) { .cap-grid { grid-template-columns: 1fr; } }

  .cap-card {
    background: var(--paper);
    padding: 36px 32px 32px;
    display: flex; flex-direction: column;
    gap: 18px;
    min-height: 280px;
    transition: background .3s var(--easing);
  }
  .cap-card:hover { background: var(--paper-2); }
  .cap-card .icon {
    width: 53px; height: 53px;          /* 44 × 1.2 ≈ 53 */
    border: 1px solid #007f02;
    display: grid; place-items: center;
    color: #007f02;                      /* SVG strokes inherit this green */
    transition: background .3s var(--easing), color .3s;
  }
  .cap-card:hover .icon {
    background: rgba(0,127,2,.08);
  }
  .cap-card .num {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--steel);
    letter-spacing: .12em;
  }
  .cap-card .top { display: flex; align-items: center; }
  .cap-card h3 {
    font-family: 'Bricolage Grotesque','Noto Sans TC',sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -.01em;
  }
  .cap-card p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-2);
    margin: 0;
  }

  /* ============================================================
     Section: Tech / Equipment band
     ============================================================ */
  .tech-band {
    background: var(--green);
    color: var(--paper);
    padding: 60px 0;
    overflow: hidden;
    position: relative;
  }
  .tech-band-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    position: relative;
    z-index: 1;
  }
  @media (max-width: 760px) { .tech-band-track { grid-template-columns: repeat(2,1fr); } }
  .tech-stat .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(247,246,241,.7);
    margin-bottom: 8px;
  }
  .tech-stat .big {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: clamp(36px, 4.4vw, 64px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
  }
  .tech-stat .desc {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(247,246,241,.8);
    max-width: 200px;
  }

  /* ============================================================
     Section: Latest News
     ============================================================ */
  .news {
    padding: clamp(80px, 9vw, 140px) 0;
    background: var(--paper);
  }
  .news-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 50px;
  }
  .news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Featured single Computex card — full-width on home */
  .news-feature-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    box-shadow: 0 30px 60px -28px rgba(14,20,16,.25);
  }
  @media (max-width: 800px) { .news-feature-card { grid-template-columns: 1fr; } }
  .news-feature-card .nf-img {
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #11221a;
  }
  .news-feature-card .nf-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--easing);
  }
  .news-feature-card:hover .nf-img img { transform: scale(1.05); }
  .news-feature-card .nf-body {
    padding: clamp(28px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .news-feature-card .nf-meta {
    display: flex; gap: 14px; align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .12em;
    color: rgba(247,246,241,.65);
  }
  .news-feature-card .nf-meta .tag {
    background: rgba(107,255,110,.15);
    color: #6BFF6E;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
  }
  .news-feature-card h3 {
    font-family: 'Bricolage Grotesque','Noto Sans TC', sans-serif;
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--paper);
  }
  .news-feature-card h3 em { color: #6BFF6E; font-style: normal; font-weight: 400; }
  .news-feature-card .lede {
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(247,246,241,.78);
    margin: 0;
  }
  .news-feature-card .bullets {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .news-feature-card .bullets li {
    position: relative;
    padding-left: 22px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(247,246,241,.85);
  }
  .news-feature-card .bullets li::before {
    content: "●";
    position: absolute; left: 0; top: 0;
    color: #6BFF6E;
    font-size: 10px;
    line-height: 1.5;
  }
  .news-feature-card .bullets li strong {
    display: block;
    color: var(--paper);
    font-family: 'Bricolage Grotesque','Noto Sans TC', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 3px;
    letter-spacing: -.005em;
  }
  .news-feature-card .venue {
    margin-top: 8px;
    padding: 18px 0 0;
    border-top: 1px dashed rgba(247,246,241,.18);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  @media (max-width: 540px) { .news-feature-card .venue { grid-template-columns: 1fr; } }
  .news-feature-card .venue .v-item .k {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(247,246,241,.55);
    margin-bottom: 4px;
  }
  .news-feature-card .venue .v-item .v {
    font-size: 13.5px;
    color: var(--paper);
    font-weight: 500;
  }
  .news-feature-card .nf-cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #6BFF6E;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 1px solid #6BFF6E;
    padding-bottom: 4px;
    align-self: flex-start;
    transition: gap .3s var(--easing);
  }
  .news-feature-card .nf-cta:hover { gap: 18px; }

  .news-card {
    border: 1px solid var(--hair);
    padding: 0;
    background: var(--paper);
    cursor: pointer;
    transition: all .3s var(--easing);
    display: flex; flex-direction: column;
    overflow: hidden;
    min-height: 320px;
  }
  .news-card .news-body { padding: 28px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
  .news-card .news-img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--hair); }
  .news-card.feature .news-img { border-bottom: 1px solid rgba(247,246,241,.15); }
  .news-card .news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--easing); }
  .news-card:hover .news-img img { transform: scale(1.04); }
  .news-card:hover {
    border-color: var(--ink);
    box-shadow: 0 24px 50px -28px rgba(14,20,16,.25);
  }
  .news-card.feature {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    grid-row: span 1;
  }
  .news-card .meta {
    display: flex; gap: 14px; align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--steel);
    letter-spacing: .12em;
  }
  .news-card.feature .meta { color: rgba(247,246,241,.7); }
  .news-card .tag {
    background: var(--green-tint);
    color: var(--green-deep);
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 600;
  }
  .news-card.feature .tag {
    background: rgba(107,255,110,.15);
    color: #6BFF6E;
  }
  .news-card h3 {
    font-family: 'Bricolage Grotesque','Noto Sans TC',sans-serif;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -.01em;
  }
  .news-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0;
    flex-grow: 1;
  }
  .news-card.feature p { color: rgba(247,246,241,.78); }
  .news-card .read {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: inline-flex; gap: 8px; align-items: center;
    color: var(--ink);
    margin-top: auto;
  }
  .news-card.feature .read { color: var(--paper); }
  .news-card.feature .read::after { content: "→"; color: #6BFF6E; }
  .news-card .read::after { content: "→"; color: var(--green); }

  /* ============================================================
     Certifications
     ============================================================ */
  .certs {
    background: var(--paper-2);
    padding: 70px 0;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
  }
  .certs-head { text-align: center; margin-bottom: 36px; }
  .certs-head h3 {
    font-size: 20px;
    font-weight: 500;
    margin: 12px 0 0;
    color: var(--ink);
  }
  .certs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 32px;
  }
  .cert-badge {
    border: 1px solid var(--hair);
    background: var(--paper);
    padding: 12px 18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .08em;
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s, color .2s;
  }
  a.cert-badge:hover { border-color: var(--green); color: var(--green); }
  .cert-badge::before {
    content: "✓"; color: var(--green); font-weight: 700;
  }
  .patents-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }
  .patent {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--steel);
    border-left: 2px solid var(--green);
    padding: 4px 10px;
    letter-spacing: .08em;
  }
  a.patent { transition: color .25s var(--easing), border-color .25s var(--easing); }
  a.patent:hover { color: var(--green); border-left-color: var(--green-deep); }

  /* ============================================================
     Final CTA
     ============================================================ */
  .cta {
    padding: clamp(80px, 9vw, 140px) 0;
    background: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden;
  }
  .cta::after {
    content: "YESWAY";
    position: absolute;
    bottom: -40px; left: 50%; transform: translateX(-50%);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(120px, 22vw, 320px);
    color: rgba(247,246,241,.04);
    letter-spacing: -.05em;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
  }
  .cta-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
  }
  @media (max-width: 800px) { .cta-inner { grid-template-columns: 1fr; } }
  .cta h2 {
    font-family: 'Bricolage Grotesque','Noto Sans TC',sans-serif;
    font-size: clamp(40px, 5.5vw, 80px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
    margin: 18px 0 0;
  }
  .cta h2 em {
    font-style: normal;
    font-weight: 400;
    color: #6BFF6E;
  }
  .cta-side p {
    color: rgba(247,246,241,.78);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 32px;
  }
  .cta-actions { display: flex; flex-direction: column; gap: 14px; }
  .cta-action-row {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid rgba(247,246,241,.15);
    padding: 18px 0;
    transition: padding-left .3s var(--easing);
    cursor: pointer;
  }
  .cta-action-row:last-child { border-bottom: 1px solid rgba(247,246,241,.15); }
  .cta-action-row:hover { padding-left: 12px; color: #6BFF6E; }
  .cta-action-row .lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(247,246,241,.6);
  }
  .cta-action-row .val { font-size: 17px; font-weight: 500; margin-top: 4px; }
  .cta-action-row .arrow { font-size: 22px; }

  /* ============================================================
     Footer
     ============================================================ */
  .footer {
    background: #06090A;
    color: rgba(247,246,241,.7);
    padding: 80px 0 28px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(247,246,241,.1);
  }
  @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  .footer h5 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--paper);
    margin: 0 0 16px;
  }
  .footer ul { list-style: none; padding: 0; margin: 0; }
  .footer li { margin-bottom: 10px; font-size: 14px; }
  .footer li a:hover { color: #6BFF6E; }
  .footer-brand img { width: 130px; margin-bottom: 18px; filter: brightness(0) invert(1); }
  .footer-brand p { font-size: 14px; line-height: 1.6; max-width: 320px; }
  .footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 28px;
    flex-wrap: wrap; gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: .12em;
    color: rgba(247,246,241,.45);
  }
  .footer-bottom .seo {
    display: flex; gap: 12px; flex-wrap: wrap;
    color: rgba(247,246,241,.35);
  }

  /* ============================================================
     Hover/Reveal niceties
     ============================================================ */
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s var(--easing), transform .9s var(--easing);
  }
  [data-reveal].in { opacity: 1; transform: none; }


  /* ============================================================
     Client feedback 0526 — enlarge only prominent green labels
     (eyebrows / category labels) ×1.5; card sub-labels stay original.
     Black card body text softened ×1.4.
     ============================================================ */
  .hc-eyebrow       { font-size: 17px; }    /* 11.5 → 17  (×1.5 carousel eyebrow) */
  .ind-content .en  { font-size: 16.5px; }  /* 11 → 16.5 (×1.5 category label) */
  .ps-head .eyebrow { font-size: 16.5px; }  /* 11 → 16.5 (×1.5 section eyebrow) */
  .facet p          { font-size: 20px; }    /* 14 → 20   (×1.4 card body) */
  /* green sub-labels ×1.2 */
  .hc-tag           { font-size: 13.2px; }  /* 11 → 13.2 */
  .facet .f-lbl     { font-size: 12px; }    /* 10 → 12   */

  /* ============================================================
     NEW PRODUCTS — 新產品資訊 (featured high-speed line)
     ============================================================ */
  .np {
    background: var(--paper);
    padding: clamp(64px, 7vw, 110px) 0 clamp(56px, 6vw, 96px);
    border-top: 1px solid var(--hair);
  }
  .np-inner {
    max-width: var(--max-w, 1440px);
    margin: 0 auto;
    padding: 0 var(--gutter, clamp(20px,4vw,64px));
  }
  .np-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: end;
    margin-bottom: clamp(40px, 5vw, 68px);
  }
  .np-head .eyebrow { color: var(--green); }
  .np-head .eyebrow::before { background: var(--green); }
  .np-head h2 {
    font-family: 'Bricolage Grotesque','Noto Sans TC',sans-serif;
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 16px 0 0;
  }
  .np-head h2 em { color: var(--green); font-style: normal; }
  .np-head p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--steel);
    max-width: 440px;
    margin: 18px 0 0;
  }

  .np-grid { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }

  .np-card {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 3vw, 56px);
    align-items: center;
    background: #fff;
    border: 1px solid var(--hair);
    padding: clamp(24px, 2.6vw, 40px);
    transition: box-shadow .4s var(--easing), transform .4s var(--easing);
  }
  .np-card:hover {
    box-shadow: 0 24px 60px -28px rgba(14,20,16,.28);
    transform: translateY(-3px);
  }
  /* alternate image side on even cards */
  .np-card:nth-child(even) .np-media { order: 2; }
  .np-card:nth-child(even) .np-body  { order: 1; }

  .np-media {
    background: var(--paper-2);
    border: 1px solid var(--hair);
    border-radius: 4px;
    padding: clamp(18px, 2vw, 30px);
    display: grid;
    gap: 14px;
    align-content: center;
  }
  .np-media.dual { grid-template-columns: 1fr 1fr; }
  .np-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 4/3;
    display: block;
  }
  .np-media.dual img { aspect-ratio: 3/4; }

  .np-body { min-width: 0; }
  .np-code {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--green-deep);
    background: var(--green-tint);
    border: 1px solid rgba(0,127,2,.22);
    padding: 6px 12px;
    border-radius: 3px;
    margin-bottom: 16px;
  }
  /* 料號右方的產品 PDF 預覽 CTA */
  .np-code-row {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
  }
  .np-code-row .np-code { margin-bottom: 0; }
  .np-pdf-group { display: inline-flex; gap: 8px; flex-wrap: wrap; }
  .np-pdf {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em;
    color: var(--green); background: transparent;
    border: 1px solid var(--hair); border-radius: 3px;
    padding: 5px 11px; white-space: nowrap;
    transition: background .25s var(--easing), color .25s var(--easing), border-color .25s var(--easing);
  }
  .np-pdf:hover { background: var(--green); color: var(--paper); border-color: var(--green); }
  .np-pdf svg { width: 13px; height: 13px; flex-shrink: 0; }
  .np-title {
    font-family: 'Bricolage Grotesque','Noto Sans TC',sans-serif;
    font-size: clamp(19px, 1.9vw, 25px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 18px;
  }
  .np-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 22px;
  }
  .np-apps .np-app {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--steel);
    background: var(--paper);
    border: 1px solid var(--hair);
    padding: 5px 10px;
    border-radius: 3px;
  }
  .np-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
  .np-feats li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
  }
  .np-feats li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 13px; height: 13px;
    background: var(--green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .np-feats li strong { color: var(--ink); font-weight: 600; }

  @media (max-width: 860px) {
    .np-head { grid-template-columns: 1fr; gap: 18px; }
    .np-card { grid-template-columns: 1fr; gap: 22px; }
    .np-card:nth-child(even) .np-media { order: 0; }
    .np-card:nth-child(even) .np-body  { order: 0; }
  }