:root{
    color-scheme:light;
    --brand:#00923A; --brand-2:#00AB46; --brand-deep:#05702F;
    --gold:#E0A500;
    --paper:#F7FBF8; --surface:#FFFFFF; --surface-2:#EDF6F0;
    --ink:#11271C; --ink-2:#48594F; --ink-3:#7E8F85;
    --line:#DCE8DF; --line-soft:#EAF1EC;
    --hero-ink:#0F2A1D; --hero-ink-2:#4E6458; --hero-line:rgba(0,125,55,.11);
    --radius:14px; --radius-s:9px;
    --sans:"Helvetica Neue","PingFang TC","PingFang SC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Code","Menlo","Roboto Mono",monospace;
    --maxw:1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; letter-spacing:-.003em}
  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:26px}
  .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--brand); font-weight:600; display:inline-flex; align-items:center; gap:10px; margin:0 0 18px}
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--brand); opacity:.75}
  h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.02em; line-height:1.08; font-weight:800}
  p{margin:0}
  .mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

  /* header */
  header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 84%, transparent); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line-soft)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:70px; gap:24px}
  .brand{display:flex; align-items:center}
  .brand img{height:34px; width:auto; display:block}
  .nav-links{display:flex; align-items:center; gap:30px; font-size:15px; font-weight:600; color:var(--ink-2)}
  .nav-links a{transition:color .18s} .nav-links a:hover{color:var(--brand)}
  .nav-cta{font-family:var(--mono); font-size:13px; letter-spacing:.02em; font-weight:600; padding:9px 15px; border:1px solid var(--line); border-radius:100px; color:var(--ink); display:inline-flex; align-items:center; gap:8px; transition:.18s}
  .nav-cta::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
  .nav-cta:hover{border-color:var(--brand); color:var(--brand)}
  @media(max-width:820px){ .nav-links{display:none} }

  /* hero — light & bright */
  .hero{position:relative; overflow:hidden; color:var(--hero-ink);
    background:
      radial-gradient(85% 75% at 90% 0%, #D4F1DE 0%, transparent 55%),
      radial-gradient(65% 95% at 2% 100%, #E4F4EA 0%, transparent 60%),
      linear-gradient(180deg,#FCFEFC 0%, #EFF8F2 100%);
  }
  .hero-grid-bg{position:absolute; inset:0;
    background-image:linear-gradient(var(--hero-line) 1px,transparent 1px),linear-gradient(90deg,var(--hero-line) 1px,transparent 1px);
    background-size:54px 54px; mask-image:radial-gradient(120% 100% at 75% 15%,#000 25%,transparent 78%);
  }
  .hero-inner{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding-top:88px; padding-bottom:88px}
  .hero h1{font-size:clamp(2.5rem,5.4vw,4.35rem); color:var(--hero-ink)}
  .hero h1 .accent{color:var(--brand)}
  .hero .lede{margin-top:24px; max-width:37ch; color:var(--hero-ink-2); font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.68}
  .cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
  .btn{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px; padding:14px 22px; border-radius:100px; transition:.2s; border:1px solid transparent; cursor:pointer}
  .btn-primary{background:var(--brand); color:#fff; box-shadow:0 8px 20px -10px rgba(0,146,58,.6)}
  .btn-primary:hover{background:var(--brand-2); transform:translateY(-1px)}
  .btn-ghost{border-color:var(--line); color:var(--ink); background:var(--surface)}
  .btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
  .btn svg{width:16px;height:16px}

  .hero-figure{position:relative; display:flex; justify-content:center; align-items:center}
  .schem-card{position:relative; width:100%; max-width:430px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px 22px 18px; box-shadow:0 30px 60px -34px rgba(6,60,35,.28)}
  .schem-card .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between}
  .schem-card .lbl b{color:var(--brand); font-weight:600}
  .schematic{width:100%; height:auto; margin-top:6px}
  .coil,.core,.lead{fill:none; stroke:var(--ink-2); stroke-width:2.1; stroke-linecap:round; opacity:.55}
  .pin{fill:var(--surface); stroke:var(--ink-2); stroke-width:2; opacity:.9}
  .pin-num{fill:var(--ink-3); font-family:var(--mono); font-size:12px; font-weight:600}
  .ratio{fill:var(--brand); font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:.05em}
  .sig{stroke:var(--brand); stroke-width:3.4; fill:none; stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(0,146,58,.55)); stroke-dasharray:14 162; animation:flow 2.4s linear infinite}
  .sig.s2{animation-delay:-1.2s}
  @keyframes flow{to{stroke-dashoffset:-176}}
  @media(max-width:900px){ .hero-inner{grid-template-columns:1fr; gap:22px; padding-bottom:64px} .hero-figure{order:-1} .schem-card{max-width:360px} }

  /* stat bar — light */
  .statbar{position:relative; border-top:1px solid var(--line); background:var(--surface)}
  .stats{display:grid; grid-template-columns:repeat(4,1fr)}
  .stat{padding:26px 30px; border-left:1px solid var(--line-soft)}
  .stat:first-child{border-left:0; padding-left:0}
  .stat .k{font-family:var(--mono); font-size:clamp(1.4rem,2.4vw,1.95rem); font-weight:700; color:var(--ink)}
  .stat .l{font-size:13px; color:var(--ink-2); margin-top:4px}
  @media(max-width:720px){ .stats{grid-template-columns:repeat(2,1fr)} .stat{border-left:1px solid var(--line-soft); padding:20px} .stat:first-child{padding-left:20px} .stat:nth-child(3){border-left:0} }

  section{padding:96px 0}
  .sec-head{max-width:640px; margin-bottom:52px}
  .sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
  .sec-head p{margin-top:16px; color:var(--ink-2); font-size:1.06rem}

  /* products */
  #products{background:var(--surface-2); border-block:1px solid var(--line-soft)}
  .series{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:40px}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; transition:.2s}
  .card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); box-shadow:0 20px 40px -28px rgba(6,60,35,.3)}
  .card .tag{font-family:var(--mono); font-size:12px; color:var(--brand); font-weight:600; letter-spacing:.06em}
  .card h3{font-size:1.5rem; margin-top:12px}
  .card .dim{font-family:var(--mono); font-size:14px; color:var(--ink-2); margin-top:6px}
  .card .desc{color:var(--ink-2); margin-top:14px; font-size:.98rem; line-height:1.6}
  .card .chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
  .chip{font-family:var(--mono); font-size:12px; padding:5px 10px; border-radius:100px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
  @media(max-width:720px){ .series{grid-template-columns:1fr} }

  .table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
  table{border-collapse:collapse; width:100%; min-width:660px; font-size:14.5px}
  thead th{text-align:left; font-family:var(--mono); font-weight:600; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding:15px 18px; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap}
  tbody td{padding:15px 18px; border-bottom:1px solid var(--line-soft); color:var(--ink-2)}
  tbody tr:last-child td{border-bottom:0}
  tbody tr:hover td{background:color-mix(in srgb,var(--brand) 6%,transparent)}
  td.pn{font-family:var(--mono); color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
  td.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
  .caption{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:14px}

  .decoder{margin-top:46px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px}
  .decoder .dh{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
  .pn-big{font-family:var(--mono); font-size:clamp(1.3rem,3vw,2rem); font-weight:700; letter-spacing:.02em; margin-top:10px; display:flex; flex-wrap:wrap; gap:0 2px}
  .pn-big b{color:var(--ink); font-weight:700}
  .decoder-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:22px}
  .dseg{border:1px solid var(--line); border-radius:var(--radius-s); padding:13px 12px; background:var(--surface-2)}
  .dseg .v{font-family:var(--mono); font-weight:700; color:var(--brand); font-size:15px}
  .dseg .n{font-size:12px; color:var(--ink-2); margin-top:5px; line-height:1.4}
  @media(max-width:720px){ .decoder-grid{grid-template-columns:repeat(2,1fr)} }

  /* applications */
  .app-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  .app{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; padding:26px 24px 24px; background:linear-gradient(165deg,var(--surface) 0%, color-mix(in srgb,var(--brand) 4%, var(--surface)) 100%); transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s}
  .app::before{content:""; position:absolute; right:-34px; top:-34px; width:118px; height:118px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--brand) 13%, transparent) 0%, transparent 70%); opacity:.55; transition:opacity .3s, transform .3s}
  .app::after{content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--brand); transform:scaleY(0); transform-origin:top; transition:transform .26s cubic-bezier(.2,.7,.2,1)}
  .app:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--line)); transform:translateY(-3px); box-shadow:0 24px 42px -26px rgba(6,60,35,.42)}
  .app:hover::before{opacity:1; transform:scale(1.12)}
  .app:hover::after{transform:scaleY(1)}
  .app svg{position:relative; width:52px; height:52px; padding:13px; box-sizing:border-box; background:color-mix(in srgb,var(--brand) 9%, transparent); border:1px solid color-mix(in srgb,var(--brand) 16%, transparent); border-radius:14px; stroke:var(--brand); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:background .22s, border-color .22s, stroke .22s, transform .22s}
  .app:hover svg{background:var(--brand); border-color:var(--brand); stroke:#fff; transform:translateY(-2px); box-shadow:0 10px 18px -8px rgba(0,146,58,.55)}
  .app h3{position:relative; font-size:1.08rem; margin-top:18px}
  .app .en{position:relative; font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:4px; letter-spacing:.02em}
  @media(max-width:860px){ .app-grid{grid-template-columns:repeat(2,1fr)} }
  .app-grid.a3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:860px){ .app-grid.a3{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:560px){ .app-grid.a3{grid-template-columns:1fr} }

  /* capabilities */
  #capabilities{background:var(--surface-2); border-block:1px solid var(--line-soft)}
  .cap-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
  .cap{display:flex; gap:18px; padding:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
  .cap .ic{flex:0 0 46px; height:46px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand)}
  .cap .ic svg{width:23px;height:23px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .cap h3{font-size:1.12rem} .cap p{color:var(--ink-2); margin-top:7px; font-size:.96rem; line-height:1.6}
  @media(max-width:720px){ .cap-grid{grid-template-columns:1fr} }

  /* contact — vibrant green block */
  .contact-card{background:linear-gradient(150deg,#00AE47 0%, #007A31 100%); color:#EAFBF0; border-radius:22px; padding:clamp(34px,5vw,64px); position:relative; overflow:hidden; box-shadow:0 40px 70px -40px rgba(0,120,50,.55)}
  .contact-card .ring{position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:50%; border:1px solid rgba(255,255,255,.22)}
  .contact-card .ring::after{content:""; position:absolute; inset:34px; border-radius:50%; border:1px solid rgba(255,244,200,.30)}
  .contact-card .eyebrow{color:#D8F8E2} .contact-card .eyebrow::before{background:#D8F8E2}
  .contact-card h2{font-size:clamp(1.8rem,3.6vw,2.7rem); color:#fff; max-width:none}
  .contact-card p{color:rgba(255,255,255,.88); margin-top:16px; max-width:44ch}
  .contact-rows{display:flex; flex-wrap:wrap; gap:16px 46px; margin-top:34px}
  .crow .cl{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72)}
  .crow .cv{font-size:1.12rem; font-weight:700; margin-top:5px; color:#fff}
  .crow .cv a:hover{color:#CFFBDD}
  .contact-card .btn-primary{background:#fff; color:var(--brand-deep); margin-top:34px; box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
  .contact-card .btn-primary:hover{background:#EAFBF0; transform:translateY(-1px)}

  footer{padding:44px 0 40px; border-top:1px solid var(--line-soft); color:var(--ink-3); font-size:14px}
  .foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
  .foot img{height:26px; width:auto}
  .foot .fl{display:flex; gap:22px; font-family:var(--mono); font-size:13px}
  .foot .fl a:hover{color:var(--brand)}

  .rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} .rv{opacity:1; transform:none} html{scroll-behavior:auto} }
  :focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}

/* ---- tech advantages (reuses .cap) ---- */
.cap .vs{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; font-family:var(--mono); font-size:12px}
.cap .vs .old{color:var(--ink-3); text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--ink-3) 60%,transparent)}
.cap .vs .arw{color:var(--ink-3)}
.cap .vs .new{color:var(--brand); font-weight:700}

/* ---- sub-page hero ---- */
.page-hero{background:linear-gradient(180deg,#FCFEFC 0%,#EFF8F2 100%); border-bottom:1px solid var(--line-soft); padding:66px 0 52px}
.page-hero .back{font-family:var(--mono); font-size:13px; color:var(--brand); display:inline-flex; gap:8px; align-items:center; margin-bottom:22px}
.page-hero .back:hover{gap:11px}
.page-hero h1{font-size:clamp(2rem,4vw,3rem); color:var(--hero-ink)}
.page-hero p{margin-top:16px; color:var(--ink-2); max-width:50ch; font-size:1.08rem; line-height:1.66}
.note-strip{margin-top:40px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; color:var(--ink-2); font-size:.98rem; line-height:1.6; display:flex; gap:16px; align-items:flex-start}
.note-strip .ic{flex:0 0 24px; color:var(--brand); margin-top:2px}
.note-strip .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.note-strip a{color:var(--brand); font-weight:600}

/* ---- homepage product-category cards ---- */
.prodcats{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.prodcat{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:32px; transition:.22s; color:inherit}
.prodcat:hover{border-color:var(--brand); transform:translateY(-3px); box-shadow:0 28px 54px -32px rgba(6,60,35,.34)}
.prodcat .pvis{height:118px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; border-radius:13px; background:radial-gradient(120% 120% at 30% 10%, #EAF6EE 0%, var(--surface-2) 70%); border:1px solid var(--line-soft)}
.prodcat .pvis svg{height:74px; width:auto}
.prodcat .pvis .flow{stroke:#18c95a; stroke-width:4.2; fill:none; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(24,201,90,.85)); stroke-dasharray:22 218; animation:flowsig 2.6s linear infinite}
.prodcat .pvis .flow.f2{animation-delay:-1.3s}
@keyframes flowsig{to{stroke-dashoffset:-240}}
@media (prefers-reduced-motion:reduce){ .prodcat .pvis .flow{animation:none; opacity:0} }
.prodcat .ptag{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--brand); font-weight:600}
.prodcat h3{font-size:1.55rem; margin-top:9px}
.prodcat .en{font-family:var(--mono); font-size:12.5px; color:var(--ink-3); margin-top:4px; letter-spacing:.01em}
.prodcat .psub{color:var(--ink-2); margin-top:14px; font-size:.97rem; line-height:1.6}
.prodcat .plist{margin-top:18px; display:flex; flex-direction:column; gap:9px}
.prodcat .plist span{display:flex; align-items:center; gap:11px; font-size:.94rem; color:var(--ink-2)}
.prodcat .plist span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); flex:0 0 auto}
.prodcat .go{margin-top:auto; padding-top:24px; font-weight:700; color:var(--brand); display:inline-flex; align-items:center; gap:8px; transition:gap .2s}
.prodcat:hover .go{gap:13px}
.prodcat .go svg{width:16px;height:16px}
@media(max-width:760px){ .prodcats{grid-template-columns:1fr} }

/* coil hero visual */
.coil-sig{stroke:var(--brand); stroke-width:3.6; fill:none; stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(0,146,58,.5)); stroke-dasharray:16 150; animation:flow 2.6s linear infinite}
.coil-wire{fill:none; stroke:var(--ink-2); stroke-width:2.2; stroke-linecap:round; opacity:.5}

/* ---- homepage hero product carousel ---- */
.carousel{position:relative; margin-top:16px}
.carousel .stage{position:relative; display:grid; min-height:224px}
.carousel .slide{grid-area:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease; pointer-events:none}
.carousel .slide.is-active{opacity:1; transform:none; pointer-events:auto}
.carousel .slide img{width:auto; max-width:72%; max-height:150px; height:auto; filter:drop-shadow(0 16px 22px rgba(6,60,35,.24))}
.carousel .slide figcaption{text-align:center; margin-top:16px}
.carousel .slide figcaption b{display:block; font-size:1.02rem; font-weight:800; color:var(--ink); letter-spacing:-.01em}
.carousel .slide figcaption span{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:3px; display:block}
.carousel .dots{display:flex; gap:8px; justify-content:center; margin-top:14px}
.carousel .dot{width:8px; height:8px; padding:0; border:0; border-radius:100px; background:var(--line); cursor:pointer; transition:.25s}
.carousel .dot:hover{background:var(--ink-3)}
.carousel .dot.is-active{width:22px; background:var(--brand)}
@media (prefers-reduced-motion:reduce){ .carousel .slide{transition:none} }

/* ---- sub-page: back link inside hero ---- */
.hero .back{font-family:var(--mono); font-size:13px; color:var(--brand); display:inline-flex; gap:8px; align-items:center; transition:gap .2s}
.hero .back:hover{gap:11px}

/* standalone table caption heading (reuses decoder .dh look) */
.table-wrap .dh{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}

/* ---- real product photo (hero) ---- */
.photo-frame{margin-top:14px; border-radius:14px; background:radial-gradient(120% 120% at 40% 20%, #FFFFFF 0%, #F1F7F3 100%); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; padding:26px 20px}
.photo-frame img{width:auto; max-width:78%; height:auto; filter:drop-shadow(0 14px 22px rgba(6,60,35,.22))}
.photo-cap{font-family:var(--mono); font-size:13px; letter-spacing:.03em; color:var(--brand); font-weight:700; text-align:center; margin-top:14px}

/* ---- product gallery (LAN page) ---- */
.ghead{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; display:flex; align-items:center; gap:12px}
.ghead::before{content:""; width:20px; height:1px; background:var(--brand); opacity:.7}
.gallery{display:grid; gap:16px}
.gallery.g2{grid-template-columns:repeat(2,1fr)}
.gallery.g4{grid-template-columns:repeat(4,1fr)}
.gallery.g3{grid-template-columns:repeat(3,1fr)}
.gtile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.2s}
.gtile:hover{border-color:var(--brand); transform:translateY(-2px); box-shadow:0 20px 40px -28px rgba(6,60,35,.3)}
.gtile .gimg{display:flex; align-items:center; justify-content:center; padding:22px 18px; background:radial-gradient(120% 120% at 40% 15%, #FFFFFF 0%, #EEF6F0 100%); border-bottom:1px solid var(--line-soft); min-height:150px}
.gtile .gimg img{width:auto; max-width:84%; max-height:150px; height:auto; filter:drop-shadow(0 10px 16px rgba(6,60,35,.2))}
.gtile .gmeta{padding:15px 18px}
.gtile h3{margin:0; font-size:1.02rem; font-weight:800; letter-spacing:-.01em}
.gtile .gsub{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:4px; letter-spacing:.01em}
@media(max-width:860px){ .gallery.g4,.gallery.g3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .gallery.g2,.gallery.g3,.gallery.g4{grid-template-columns:1fr} }

  /* ── 規格書連結 / datasheet links ────────────────────────────── */
  .table-wrap td a,
  a.dl{
    color:var(--brand); text-decoration:none; font-weight:650;
    border-bottom:1px solid rgba(0,146,58,.3);
    transition:border-color .18s ease, color .18s ease;
  }
  .table-wrap td a:hover,
  a.dl:hover{ color:var(--brand-deep); border-bottom-color:var(--brand); }
  .card a.dl{ display:inline-block; margin-top:15px; font-size:14.5px; }
  th .unit{ text-transform:none; letter-spacing:0; }

  /* ── 頁尾公司資訊 / company info ──────────────────────────── */
  .footco{
    display:flex; flex-wrap:wrap; gap:9px 28px; align-items:baseline;
    padding-bottom:22px; margin-bottom:22px;
    border-bottom:1px solid var(--line-soft);
    font-size:13.5px; line-height:1.7;
  }
  .footco .co{font-weight:700; color:var(--ink); font-size:15px; letter-spacing:.01em}
  .footco .row{display:flex; gap:9px; align-items:baseline}
  .footco .k{
    font-family:var(--mono); font-size:11px; letter-spacing:.07em;
    color:var(--brand); font-weight:600; text-transform:uppercase;
  }
  .footco a{color:var(--ink-2)}
  .footco a:hover{color:var(--brand)}

  /* ── WCAG AA 對比修正 ─────────────────────────────────────────
     品牌綠 #00923A 在白底只有 4.06:1(AA 普通文字需 4.5)。
     大標題(h1 .accent)維持品牌綠(大字門檻 3.0 已達標),
     小字文字與按鈕底色改用既有的 --brand-deep #05702F(6.24:1)。 */
  footer{ color:var(--ink-2) }
  .caption{ color:var(--ink-2) }
  .eyebrow, .card .tag, .dseg .v, .cap .vs .new,
  .prodcat .ptag, .prodcat .go,
  .hero .back, .page-hero .back, .photo-cap, .schem-card .lbl b,
  .note-strip a, .table-wrap td a, a.dl, .footco .k{ color:var(--brand-deep) }
  .btn-primary{ background:var(--brand-deep); box-shadow:0 8px 20px -10px rgba(5,112,47,.55) }
  .btn-primary:hover{ background:var(--brand) }
  .nav-links a:hover, .nav-cta:hover, .btn-ghost:hover,
  .foot .fl a:hover, .footco a:hover{ color:var(--brand-deep) }

  /* ── 語言切換 / language switcher ─────────────────────────── */
  .navend{display:flex; align-items:center; gap:10px}
  .langsw{
    font-size:12px; letter-spacing:.06em; font-weight:700;
    color:var(--ink-2); border:1px solid var(--line); border-radius:100px;
    padding:8px 12px; transition:.18s; white-space:nowrap;
  }
  .langsw:hover{ border-color:var(--brand-deep); color:var(--brand-deep) }
  @media(max-width:520px){
    .nav{gap:12px}
    .nav-cta{padding:8px 11px; font-size:12px}
    .langsw{padding:7px 10px; font-size:11.5px}
  }
  /* 極窄螢幕(<360px)放不下洽詢鈕,語言鈕優先保留;頁內仍有多處 CTA */
  @media(max-width:359px){ .nav-cta{display:none} }
  /* 英文版:應用領域卡片的英文副標與主標重複,隱藏之 */
  html[lang="en"] .app-grid .app .en{ display:none }
  /* power-inductor.png 原生只有 218×212,限制最大顯示尺寸避免放大失真 */
  img[width="218"]{ max-width:min(100%, 218px) }
  /* 頁尾連結列:英文標籤較長,窄螢幕需可換行 */
  .foot .fl{ flex-wrap:wrap; row-gap:10px }
  .foot{ row-gap:14px }
  /* 英文較長的單詞在極窄螢幕會撐開卡片,允許必要時斷行 */
  .cap{ min-width:0 }
  .cap > div{ min-width:0; overflow-wrap:break-word }

  /* ── 導覽:桌機產品下拉 ──────────────────────────────────── */
  .ddwrap{ position:relative; display:inline-flex; align-items:center }
  .ddwrap > a::after{ content:"\25BE"; font-size:9px; margin-left:5px; opacity:.5 }
  .ddwrap::after{ content:""; position:absolute; top:100%; left:-16px; right:-16px; height:20px }
  .ddwrap > .dd{
    position:absolute; top:100%; left:50%; margin-top:16px;
    transform:translateX(-50%) translateY(-6px);
    min-width:238px; padding:8px; display:flex; flex-direction:column; gap:2px;
    background:var(--surface); border:1px solid var(--line); border-radius:13px;
    box-shadow:0 26px 46px -28px rgba(6,60,35,.42);
    opacity:0; visibility:hidden;
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .ddwrap:hover > .dd, .ddwrap:focus-within > .dd{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }
  .dd a{
    font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink-2);
    padding:9px 12px; border-radius:9px; white-space:nowrap; transition:.14s;
  }
  .dd a:hover{ background:var(--surface-2); color:var(--brand-deep) }

  /* ── 導覽:手機漢堡選單(純 CSS,無 JS 也能開)─────────────── */
  .mnav-toggle{ position:absolute; width:1px; height:1px; opacity:0; margin:0 }
  .mnav-btn{
    display:none; cursor:pointer; width:40px; height:38px; place-items:center;
    border:1px solid var(--line); border-radius:100px; color:var(--ink); transition:.18s;
  }
  .mnav-btn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2;
                 stroke-linecap:round; grid-area:1/1 }
  .mnav-btn .x{ display:none }
  .mnav-toggle:checked ~ .wrap .mnav-btn{ border-color:var(--brand-deep); color:var(--brand-deep) }
  .mnav-toggle:checked ~ .wrap .mnav-btn svg:not(.x){ display:none }
  .mnav-toggle:checked ~ .wrap .mnav-btn .x{ display:block }
  .mnav-toggle:focus-visible ~ .wrap .mnav-btn{ outline:2px solid var(--brand); outline-offset:3px }

  .mnav-panel{
    display:none; background:var(--surface); border-top:1px solid var(--line-soft);
    box-shadow:0 26px 40px -30px rgba(6,60,35,.45);
    max-height:calc(100dvh - 70px); overflow-y:auto;
  }
  .mnav-toggle:checked ~ .mnav-panel{ display:block }
  .mnav-panel .wrap{ padding-block:4px 22px }
  .mnav-panel a{
    display:block; padding:13px 2px; font-weight:650; color:var(--ink);
    border-bottom:1px solid var(--line-soft);
  }
  .mnav-panel a.sub{
    font-family:var(--mono); font-size:13px; font-weight:600;
    color:var(--ink-2); padding-left:18px;
  }
  .mnav-panel a:active{ color:var(--brand-deep) }
  .mnav-panel .grp{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--brand-deep); padding:18px 0 4px;
  }
  @media(max-width:820px){ .mnav-btn{ display:grid } }
  @media(min-width:821px){ .mnav-panel{ display:none !important } }