/* ============================================================
   MIDNIGHT INDUSTRIAL — Shared light theme (redesign)
   Design system: navy / cobalt / blue-accent · Saira + IBM Plex
   Used by all site pages via <link rel="stylesheet" href="mi-theme.css">
   ============================================================ */
:root{
  --navy-50:#EAF1F7;--navy-100:#CBDCEC;--navy-200:#9DBAD6;--navy-300:#6E96BF;--navy-400:#3F6FA1;
  --navy-500:#1C5188;--navy-600:#104070;--navy-700:#0C3257;--navy-800:#082541;--navy-900:#05192C;
  --cobalt-600:#16276B;--cobalt-700:#101D52;
  --blue-accent:#2F6BD1;--blue-hover:#245AB6;--blue-glow:#4F9BF0;
  --steel-0:#FFFFFF;--steel-50:#F5F7F9;--steel-100:#EAEDF1;--steel-200:#D6DBE2;--steel-300:#B4BCC7;
  --steel-400:#8B95A3;--steel-500:#5E6878;--steel-600:#3D4654;--steel-700:#2A2F39;--steel-900:#0E1014;
  --font-display:'Saira','Arial Narrow',sans-serif;
  --font-body:'IBM Plex Sans','Noto Sans TC','Noto Sans JP','Noto Sans KR','Noto Sans Thai',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fff;color:var(--steel-900);font-family:var(--font-body);overflow-x:hidden;scroll-behavior:smooth}
a{-webkit-tap-highlight-color:transparent}
img{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes scanX{0%{transform:translateX(-130%)}55%{transform:translateX(130%)}100%{transform:translateX(130%)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--steel-100)}
::-webkit-scrollbar-thumb{background:var(--navy-300);border-radius:6px}
::selection{background:var(--navy-100)}

/* ---- NAV ---- */
.mi-nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,52px);height:66px;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--steel-200)}
.mi-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.mi-logo img{height:34px;opacity:.96}
.mi-logo span{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.34em;color:var(--navy-700);padding-left:12px;border-left:1px solid var(--steel-300)}
.mi-navlinks{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);font-family:var(--font-body);font-size:15px;letter-spacing:.02em}
.mi-navlink{color:var(--steel-600);text-decoration:none;font-weight:700;transition:color .2s}
.mi-dd-trigger{font-weight:700}
.mi-navlink:hover,.mi-navlink[data-active]{color:var(--blue-accent)}
.mi-dd-wrap{position:relative}
.mi-dd-trigger{color:var(--steel-600);cursor:pointer;display:flex;align-items:center;gap:5px}
.mi-dd{position:absolute;top:30px;left:-14px;min-width:210px;background:#fff;border:1px solid var(--steel-200);border-radius:12px;padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s ease;box-shadow:0 24px 50px rgba(16,64,112,.16)}
.mi-dd-wrap:hover .mi-dd{opacity:1;visibility:visible;transform:translateY(0)}
.mi-dd-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;text-decoration:none;color:var(--steel-600);font-size:12px;letter-spacing:.1em;transition:background .2s,color .2s}
.mi-dd-item:hover{background:var(--navy-50);color:var(--navy-700)}
.mi-dd-item .dot{width:5px;height:5px;border-radius:50%;background:var(--blue-accent)}
/* 僅限台灣中文顯示：語系明確設為非 zh 時隱藏（lang 未設時預設顯示，避免中文用戶初載閃爍） */
html[lang]:not([lang="zh"]) .mi-zh-only{display:none !important}
/* Hero 置中：標題群置中、藍框引言以區塊置中但內文靠左維持可讀性 */
.mi-hero-c{text-align:center}
.mi-hero-c .mi-lead{margin-left:auto;margin-right:auto;text-align:left}
.mi-enq{color:var(--blue-accent);text-decoration:none;border-bottom:1px solid rgba(47,107,209,.5);padding-bottom:2px}
/* language dropdown (12 langs) */
.mi-lang{position:relative}
.mi-lang-btn{display:flex;align-items:center;gap:7px;background:var(--steel-100);border:1px solid var(--steel-200);border-radius:999px;padding:7px 12px;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--navy-700);transition:all .2s}
.mi-lang-btn:hover{border-color:var(--blue-accent)}
.mi-lang-btn .glb{font-size:13px;color:var(--blue-accent)}
.mi-lang-menu{position:absolute;top:42px;right:0;width:172px;background:#fff;border:1px solid var(--steel-200);border-radius:12px;padding:7px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s ease;box-shadow:0 24px 50px rgba(16,64,112,.18);z-index:130;max-height:min(70vh,420px);overflow-y:auto}
.mi-lang-menu[data-open]{opacity:1;visibility:visible;transform:translateY(0)}
.mi-langbtn{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-body);font-size:12.5px;padding:8px 11px;border:none;border-radius:8px;cursor:pointer;background:transparent;color:var(--steel-600);transition:all .18s;text-align:left}
.mi-langbtn:hover{background:var(--navy-50);color:var(--navy-700)}
.mi-langbtn .code{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--steel-400)}
.mi-langbtn[data-on]{background:var(--blue-accent);color:#fff}
.mi-langbtn[data-on] .code{color:rgba(255,255,255,.7)}
.mi-hamb{display:none;font-family:var(--font-mono);font-size:15px;color:var(--navy-700);background:none;border:1px solid var(--steel-300);border-radius:8px;padding:6px 11px;cursor:pointer;line-height:1}
@media(max-width:1040px){.mi-navlinks{display:none}.mi-hamb{display:inline-block}}

/* social + taiwan badge */
.mi-social{display:flex;gap:10px}
.mi-social a{width:38px;height:38px;border:1px solid var(--steel-200);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--navy-600);text-decoration:none;transition:all .25s;background:#fff}
.mi-social a:hover{border-color:var(--blue-accent);background:var(--navy-50);color:var(--blue-accent);transform:translateY(-2px)}
.mi-social svg{width:17px;height:17px;fill:currentColor}
.mi-tw-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--navy-600);border:1px solid var(--navy-100);background:var(--navy-50);border-radius:999px;padding:6px 13px}
.mi-tw-badge .flag{font-size:13px}

/* ---- MOBILE DRAWER ---- */
.mi-overlay{position:fixed;inset:0;background:rgba(5,25,44,.4);backdrop-filter:blur(3px);z-index:150;opacity:0;pointer-events:none;transition:opacity .3s}
.mi-overlay[data-open]{opacity:1;pointer-events:auto}
.mi-drawer{position:fixed;top:0;right:0;height:100%;width:288px;background:#fff;border-left:1px solid var(--steel-200);z-index:200;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.16,1,.3,1);box-shadow:-20px 0 60px rgba(16,64,112,.14)}
.mi-drawer[data-open]{transform:translateX(0)}
.mi-drawer-head{padding:20px 26px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--steel-200)}
.mi-ni{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--steel-100);font-size:14px;font-weight:500;color:var(--steel-600);text-decoration:none;transition:color .2s}
.mi-ni:hover{color:var(--blue-accent)}
.mi-ni::after{content:'→';color:var(--navy-200);font-size:12px}

/* ---- LAYOUT / TYPE ---- */
.mi-section{position:relative;padding:clamp(44px,6vw,72px) clamp(18px,5vw,64px)}
.mi-wrap{max-width:1220px;margin:0 auto;position:relative}
.mi-wrap-narrow{max-width:900px;margin:0 auto;position:relative}
.mi-gridbg{background-image:linear-gradient(rgba(16,64,112,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(16,64,112,.045) 1px,transparent 1px);background-size:64px 64px}
.mi-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-accent)}
.mi-counter{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-accent);display:block}
.mi-h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:.9;color:var(--navy-800);margin:0}
.mi-h1 .lt{color:var(--navy-300);font-weight:300;font-style:italic}
.mi-h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,50px);line-height:1.06;letter-spacing:-.015em;color:var(--navy-800);margin:0}
.mi-h3{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.01em;color:var(--navy-800);margin:0}
.mi-lead{font-size:clamp(14px,1.4vw,15.5px);line-height:1.7;color:var(--steel-600);margin:0}
.mi-p{font-size:14px;line-height:1.65;color:var(--steel-500);margin:0}
.mi-rule{width:52px;height:2px;background:var(--blue-accent)}
.mi-vspec{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--navy-200);transform:rotate(180deg);white-space:nowrap}
.mi-param{font-family:var(--font-mono);font-size:10px;color:var(--steel-400);line-height:1.9;text-align:right}
.mi-param .h{color:var(--blue-accent);opacity:.7;margin-bottom:6px}

/* ---- BADGES / BUTTONS ---- */
.mi-badge{display:inline-block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--blue-accent);border:1px solid rgba(47,107,209,.3);padding:4px 9px;border-radius:5px;background:rgba(47,107,209,.06)}
.mi-btn{display:inline-flex;align-items:center;gap:10px;background:var(--blue-accent);color:#fff;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:15px 28px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;transition:all .3s;box-shadow:0 12px 30px rgba(47,107,209,.24)}
.mi-btn:hover{background:var(--navy-700);box-shadow:0 16px 36px rgba(16,64,112,.32)}
.mi-btn-ghost{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--navy-700);font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:15px 28px;border-radius:999px;text-decoration:none;border:1px solid var(--steel-300);transition:all .3s}
.mi-btn-ghost:hover{border-color:var(--blue-accent);background:var(--steel-50)}

/* ---- CARDS ---- */
.mi-card{background:#fff;border:1px solid var(--steel-200);border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(16,64,112,.06);transition:all .35s}
.mi-card:hover{border-color:var(--blue-accent);box-shadow:0 22px 48px rgba(16,64,112,.16);transform:translateY(-4px)}
.mi-scanwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mi-scan{position:absolute;top:0;left:0;width:36%;height:100%;background:linear-gradient(90deg,transparent,rgba(79,155,240,.18),transparent);animation:scanX 5s infinite ease-in-out}
.mi-stat-num{font-family:var(--font-display);font-weight:600;font-size:clamp(44px,6vw,72px);line-height:1;letter-spacing:-.02em;background:linear-gradient(135deg,var(--navy-700),var(--blue-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.mi-stat-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-500);margin-top:12px}

/* ---- PRODUCT: laser cards ---- */
.mi-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,340px));gap:24px;justify-content:center}
.mi-prod-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--steel-200);border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(16,64,112,.06);transition:all .35s}
.mi-prod-card:hover{border-color:var(--blue-accent);box-shadow:0 22px 48px rgba(16,64,112,.16);transform:translateY(-4px)}
.mi-prod-img{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#fff,var(--steel-100));overflow:hidden;display:flex;align-items:center;justify-content:center}
.mi-prod-img img{width:100%;height:100%;object-fit:contain;padding:18px}
.mi-prod-body{padding:22px 22px 0;display:flex;flex-direction:column;flex:1}
.mi-prod-code{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.01em;color:var(--navy-800);margin:10px 0 0}
.mi-specbar{display:flex;flex-wrap:wrap;gap:14px;margin-top:auto;padding:16px 22px;border-top:1px solid var(--steel-100);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;color:var(--steel-500)}

/* ---- PRODUCT: press brake rows ---- */
.mi-press-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:80px}
.mi-press-img{position:relative;background:linear-gradient(135deg,#fff,var(--steel-100));border:1px solid var(--steel-200);border-radius:20px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 34px rgba(16,64,112,.08)}
.mi-press-img img{width:100%;height:100%;object-fit:contain;padding:24px}
.mi-press-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--steel-400)}
.mi-tag{font-family:var(--font-mono);font-size:11px;color:var(--steel-500);border:1px solid var(--steel-200);padding:5px 11px;border-radius:6px;background:var(--steel-50)}
.mi-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.mi-bullets li{display:flex;align-items:baseline;gap:9px;font-size:14px;color:var(--steel-600)}
.mi-bullets .ar{color:var(--blue-accent)}
@media(max-width:860px){.mi-press-row{grid-template-columns:1fr;gap:24px}.mi-press-row .mi-order1{order:-1}}
/* 手機：inline 寫死的雙欄圖文區塊自動收成單欄（technology / about 等頁共用）；跨欄子項一併還原 */
@media(max-width:860px){[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}[style*="grid-template-columns:1fr 1fr"]>*{grid-column:auto !important}}

/* ---- ARTICLE SHARING (articles.html / article.html) ---- */
.mi-art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px}
.mi-art-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--steel-200);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 6px 24px rgba(16,64,112,.06);transition:all .3s}
.mi-art-card:hover{border-color:var(--blue-accent);box-shadow:0 20px 44px rgba(16,64,112,.15);transform:translateY(-4px)}
.mi-art-cover{aspect-ratio:16/9;overflow:hidden;background:var(--steel-100)}
.mi-art-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.mi-art-card:hover .mi-art-cover img{transform:scale(1.05)}
.mi-art-cover-empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--steel-100),var(--steel-50));color:var(--steel-300);font-size:52px}
.mi-art-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.mi-art-meta{display:flex;align-items:center;gap:12px}
.mi-art-cat{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--blue-accent);border:1px solid var(--blue-accent);border-radius:5px;padding:3px 9px}
.mi-art-date{font-family:var(--font-mono);font-size:12px;color:var(--steel-400)}
.mi-art-title{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--navy-700);line-height:1.35;margin:2px 0}
.mi-art-sum{font-size:14px;color:var(--steel-600);line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mi-art-more{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--blue-accent);margin-top:auto;font-weight:600}
/* article detail */
.mi-art-detail-meta{font-family:var(--font-mono);font-size:13px;color:var(--steel-400);margin-top:14px}
.mi-art-detail-cover{margin-top:28px;border-radius:14px;overflow:hidden;border:1px solid var(--steel-200);box-shadow:0 12px 36px rgba(16,64,112,.10)}
.mi-art-detail-cover img{width:100%;height:auto;display:block}
.mi-art-rich{margin-top:8px}
/* case-specific bits (reuse .mi-art-* cards) */
.mi-case-cust{font-size:13px;font-weight:600;color:var(--navy-700)}
.mi-case-metrics{font-family:var(--font-mono);font-size:12.5px;color:var(--blue-accent);background:var(--steel-50);border:1px solid var(--steel-200);border-radius:6px;padding:6px 10px;align-self:flex-start}
.mi-case-metrics-lg{font-family:var(--font-mono);font-size:15px;color:var(--blue-accent);background:var(--steel-50);border-left:3px solid var(--blue-accent);border-radius:6px;padding:12px 16px;margin-top:16px}
.mi-case-machines{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px dashed var(--steel-200)}
.mi-case-machines-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--steel-500);text-transform:uppercase}
.mi-machine-chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--navy-700);background:#fff;border:1px solid var(--steel-200);border-radius:8px;padding:7px 14px;text-decoration:none;transition:all .2s}
.mi-machine-chip:hover{border-color:var(--blue-accent);color:var(--blue-accent);box-shadow:0 6px 16px rgba(16,64,112,.1);transform:translateY(-1px)}
@media(max-width:560px){.mi-art-grid{grid-template-columns:1fr}}

/* ---- machine card → detail link ---- */
.mi-card-link{display:block;height:100%;text-decoration:none;color:inherit}
.mi-card-link:focus-visible{outline:2px solid var(--blue-accent);outline-offset:3px;border-radius:18px}

/* ---- MACHINE DETAIL PAGE (machine.html) ---- */
.mi-machine-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:8px}
.mi-machine-hero .mi-press-img{aspect-ratio:4/3}
@media(max-width:860px){.mi-machine-hero{grid-template-columns:1fr;gap:26px}}
.mi-mtabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--steel-200);margin:0 0 30px}
.mi-mtab{padding:11px 20px;border:none;background:none;font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--steel-500);cursor:pointer;border-radius:9px 9px 0 0;transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-1px}
.mi-mtab:hover{color:var(--navy-700)}
.mi-mtab.active{background:var(--blue-accent);color:#fff}
.mi-mpanel{display:none}
.mi-mpanel.active{display:block;animation:miFade .3s ease}
@keyframes miFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* rich-text content rendered from CRM (wangEditor) */
.mi-rich{color:var(--steel-700);line-height:1.85;font-size:15.5px;max-width:820px}
.mi-rich>*:first-child{margin-top:0}
.mi-rich h1,.mi-rich h2,.mi-rich h3,.mi-rich h4{font-family:var(--font-display);color:var(--navy-700);line-height:1.3;margin:26px 0 12px}
.mi-rich h1{font-size:30px}.mi-rich h2{font-size:24px}.mi-rich h3{font-size:19px}.mi-rich h4{font-size:16px}
.mi-rich p{margin:12px 0}
.mi-rich a{color:var(--blue-accent);text-decoration:underline}
.mi-rich img{max-width:100%;height:auto;border-radius:10px;margin:16px 0;box-shadow:0 8px 28px rgba(16,64,112,.10)}
.mi-rich ul,.mi-rich ol{padding-left:24px;margin:12px 0}
.mi-rich li{margin:6px 0}
.mi-rich blockquote{border-left:3px solid var(--blue-accent);margin:16px 0;padding:6px 0 6px 18px;color:var(--steel-600);background:var(--steel-50)}
.mi-rich table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14.5px}
.mi-rich th,.mi-rich td{border:1px solid var(--steel-200);padding:9px 13px;text-align:left}
.mi-rich th{background:var(--steel-50);font-weight:600;color:var(--navy-700)}
.mi-rich hr{border:none;border-top:1px solid var(--steel-200);margin:24px 0}

/* ---- PRODUCT: lubricant cards ---- */
.mi-lube-card{background:#fff;border:1px solid var(--steel-200);border-radius:18px;padding:28px;box-shadow:0 6px 24px rgba(16,64,112,.06);transition:all .3s;display:flex;flex-direction:column}
.mi-lube-card:hover{border-color:var(--blue-accent);transform:translateY(-4px);box-shadow:0 20px 44px rgba(16,64,112,.14)}
.mi-series-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--blue-accent);margin-bottom:10px}
.mi-feat{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--steel-600)}
.mi-feat .d{width:6px;height:6px;border-radius:50%;background:var(--blue-accent);flex:none}
.mi-appl{margin-top:auto;padding-top:16px;border-top:1px solid var(--steel-100);font-family:var(--font-mono);font-size:10.5px;color:var(--steel-400);letter-spacing:.04em}

/* ---- PORTFOLIO cards (about) ---- */
.mi-portfolio-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(150deg,#fff 0%,var(--navy-50) 140%);border:none;border-radius:36px 36px 36px 14px;padding:30px 28px 26px;text-decoration:none;box-shadow:0 10px 34px rgba(16,64,112,.08);transition:transform .35s ease,box-shadow .35s ease;overflow:hidden}
.mi-portfolio-card:nth-child(even){border-radius:36px 36px 14px 36px;background:linear-gradient(210deg,#fff 0%,var(--navy-50) 140%)}
.mi-portfolio-card::before{content:'';position:absolute;top:-52px;right:-52px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(47,107,209,.12),transparent 68%);transition:transform .5s ease}
.mi-portfolio-card:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(16,64,112,.16)}
.mi-portfolio-card:hover::before{transform:scale(1.6)}
.mi-portfolio-card .ic{width:52px;height:52px;flex:none;border-radius:18px 18px 18px 6px;background:linear-gradient(135deg,rgba(47,107,209,.16),rgba(47,107,209,.06));display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--blue-accent);margin-bottom:16px}
.mi-portfolio-card:nth-child(even) .ic{border-radius:18px 18px 6px 18px}
.mi-portfolio-card .mi-p{margin-bottom:20px}
/* 產品線卡（影片融合版）：影片取代 icon 作為卡片視覺 */
.mi-pl-card{padding:0}
.mi-pl-card::before{display:none}
.mi-pl-video{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy-50),rgba(47,107,209,.12));overflow:hidden;flex:none}
.mi-pl-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mi-pl-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--steel-400)}
.mi-pl-scan{position:absolute;top:0;left:0;right:0;height:3px;overflow:hidden;pointer-events:none}
.mi-pl-scan>div{position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--blue-glow),transparent);animation:scanX 4.5s infinite ease-in-out}
.mi-pl-body{padding:18px 22px 20px;display:flex;flex-direction:column;flex:1}
.mi-portfolio-card .ex{margin-top:auto;padding:9px 16px;width:max-content;border-radius:999px;background:rgba(47,107,209,.08);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--blue-accent);transition:background .3s,color .3s}
.mi-portfolio-card:hover .ex{background:var(--blue-accent);color:#fff}

/* ---- FEATURE cards / cert / timeline ---- */
.mi-feature-card{background:#fff;border:1px solid var(--steel-200);border-radius:18px;padding:30px;transition:all .3s;box-shadow:0 6px 24px rgba(16,64,112,.05)}
.mi-feature-card:hover{border-color:var(--blue-accent);transform:translateY(-4px);box-shadow:0 20px 44px rgba(16,64,112,.14)}
.mi-feature-icon{width:48px;height:48px;background:var(--navy-50);border:1px solid var(--navy-100);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px;color:var(--navy-600)}
.mi-cert-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:1px solid var(--steel-200);border-radius:14px;padding:24px 16px;width:150px;transition:all .3s}
.mi-cert-badge:hover{border-color:var(--blue-accent);background:var(--navy-50)}
.mi-cert-badge .big{font-family:var(--font-display);font-weight:800;color:var(--navy-700);margin-bottom:8px}
.mi-timeline-item{position:relative;padding-left:24px;padding-bottom:26px;border-left:1px solid var(--navy-100)}
.mi-timeline-item::before{content:'';position:absolute;left:-5px;top:5px;width:9px;height:9px;background:var(--blue-accent);border-radius:50%}
.mi-timeline-item:last-child{border-left-color:transparent;padding-bottom:0}

/* ---- FORM ---- */
.mi-field{display:flex;flex-direction:column;gap:7px}
.mi-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-accent)}
.mi-input{background:#fff;border:1px solid var(--steel-300);border-radius:11px;padding:13px 15px;color:var(--navy-800);font-family:var(--font-body);font-size:14px;transition:all .25s;outline:none;width:100%}
.mi-input:focus{border-color:var(--blue-accent);background:rgba(47,107,209,.03);box-shadow:0 0 0 3px rgba(79,155,240,.16)}
.mi-input::placeholder{color:var(--steel-400)}
textarea.mi-input{resize:vertical;min-height:130px}
.mi-quick-link{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--steel-200);text-decoration:none;color:var(--navy-800);transition:all .3s}
.mi-quick-link:hover{border-color:var(--blue-accent);padding-left:6px}
.mi-quick-link .ar{color:var(--blue-accent);font-size:18px}

/* ---- FOOTER ---- */
.mi-footer{background:#fff;padding:clamp(72px,9vw,110px) clamp(18px,5vw,64px) 44px;border-top:1px solid var(--steel-200)}
.mi-foot-cta{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-.02em;color:var(--navy-800)}
.mi-foot-cta .g{background:linear-gradient(120deg,var(--blue-accent),var(--navy-700));-webkit-background-clip:text;background-clip:text;color:transparent}
.mi-foot-link{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--steel-200);color:var(--navy-800);text-decoration:none;transition:all .3s;font-size:16px;font-weight:500}
.mi-foot-link:hover{border-color:var(--blue-accent);padding-left:8px}
.mi-foot-link .ar{color:var(--blue-accent);font-size:20px}
.mi-copy{margin-top:52px;padding-top:22px;border-top:1px solid var(--steel-200);text-align:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--steel-400)}

/* ---- TAIWAN BADGE ---- */
.mi-tw-badge{display:inline-flex;align-items:center;gap:7px;margin-left:16px;padding:5px 11px;border:1px solid var(--steel-200);border-radius:999px;background:var(--steel-50);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-600);white-space:nowrap}
.mi-tw-badge .fl{font-size:12px;line-height:1}
@media(max-width:1180px){.mi-tw-badge{display:none}}

/* ---- LANGUAGE DROPDOWN ---- */
.mi-lang{position:relative}
.mi-lang-toggle{display:flex;align-items:center;gap:7px;background:var(--steel-100);border:1px solid var(--steel-200);border-radius:999px;padding:7px 12px;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--navy-700);transition:all .2s}
.mi-lang-toggle:hover{border-color:var(--blue-accent)}
.mi-lang-toggle .gl{color:var(--blue-accent);font-size:13px;line-height:1}
.mi-lang-toggle .cx{color:var(--steel-400);font-size:8px}
.mi-lang-menu{position:absolute;top:42px;right:0;min-width:170px;background:#fff;border:1px solid var(--steel-200);border-radius:12px;padding:7px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s ease;box-shadow:0 24px 50px rgba(16,64,112,.18);z-index:130;max-height:min(70vh,460px);overflow-y:auto}
.mi-lang.open .mi-lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.mi-lang-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 12px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:13px;color:var(--steel-600);transition:all .18s;text-align:left}
.mi-lang-item:hover{background:var(--navy-50);color:var(--navy-800)}
.mi-lang-item .ck{opacity:0;color:var(--blue-accent);font-size:12px}
.mi-lang-item[data-active]{color:var(--blue-accent);font-weight:600;background:var(--navy-50)}
.mi-lang-item[data-active] .ck{opacity:1}
.mi-dd-trigger .cx{color:var(--blue-accent);font-size:8px}

/* ---- SOCIAL ---- */
.mi-social{display:flex;align-items:center;gap:12px;margin-top:26px}
.mi-social-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-400);margin-right:2px}
.mi-social-a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--steel-200);border-radius:10px;color:var(--navy-600);background:var(--steel-50);transition:all .25s}
.mi-social-a:hover{border-color:var(--blue-accent);background:var(--blue-accent);color:#fff;transform:translateY(-2px)}
.mi-ni-h{padding:16px 0 6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--blue-accent)}
.mi-ni.sub{padding-left:10px}

/* ============================================================
   HOMEPAGE REDESIGN — hero carousel / timeline / globe / trust / newsletter / 3D / reveal
   ============================================================ */

/* scroll-reveal */
.mi-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.mi-reveal.in{opacity:1;transform:none}

/* ---- HERO 多段影片輪播 ---- */
/* hero 為 flex 容器、overlay 入流：內容比視窗高時整個 hero 跟著長高，圓點/狀態列永遠在內容下方不重疊 */
.mi-hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--steel-50);display:flex;flex-direction:column}
.mi-hero-track{position:absolute;inset:0;z-index:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mi-hero-track::-webkit-scrollbar{display:none}
.mi-hero-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;height:100%}
.mi-hero-slide video{width:100%;height:100%;object-fit:cover;filter:brightness(1.08) saturate(1.12);display:block}
.mi-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 100% 78% at 50% 40%,rgba(255,255,255,.18),rgba(245,247,249,.6) 82%),linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.3) 45%,rgba(245,247,249,.9) 100%)}
.mi-hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(16,64,112,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(16,64,112,.055) 1px,transparent 1px);background-size:60px 60px;opacity:.8}
.mi-hero-overlay{position:relative;z-index:3;flex:1;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:96px 20px 120px;pointer-events:none}
.mi-hero-overlay a,.mi-hero-overlay button{pointer-events:auto}
.mi-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:1px solid var(--steel-200);background:rgba(255,255,255,.72);backdrop-filter:blur(6px);color:var(--navy-700);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;pointer-events:auto}
.mi-hero-arrow:hover{background:#fff;border-color:var(--blue-accent);color:var(--blue-accent)}
.mi-hero-arrow.l{left:clamp(10px,3vw,28px)}.mi-hero-arrow.r{right:clamp(10px,3vw,28px)}
/* 圓點放到底部狀態列的中央空位（左右是狀態文字），與置中內容/按鈕完全脫離不重疊 */
.mi-hero-dots{position:absolute;bottom:25px;left:0;right:0;z-index:4;display:flex;gap:10px;justify-content:center;pointer-events:none}
.mi-hero-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--navy-300);background:transparent;cursor:pointer;transition:all .2s;padding:0;pointer-events:auto}
.mi-hero-dot.on{background:var(--blue-accent);border-color:var(--blue-accent);transform:scale(1.2)}
.mi-hero-status{position:absolute;bottom:24px;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(18px,4vw,52px);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--steel-500);pointer-events:none}
@media(max-width:640px){.mi-hero-arrow{display:none}.mi-hero-status{font-size:9px}}

/* ---- 品牌歷程橫向時間軸 ---- */
.mi-htl{display:flex;gap:0;padding:10px 0 22px}
.mi-htl-item{flex:1 1 0;min-width:0;position:relative;padding:30px 18px 0;border-top:2px solid var(--steel-200)}
.mi-htl-item::before{content:'';position:absolute;top:-8px;left:22px;width:13px;height:13px;border-radius:50%;background:var(--blue-accent);box-shadow:0 0 0 4px var(--steel-50)}
.mi-htl-year{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--blue-accent);line-height:1}
.mi-htl-title{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--navy-700);margin:8px 0 5px}
.mi-htl-desc{font-size:12.5px;color:var(--steel-500);line-height:1.6}
@media(max-width:720px){.mi-htl{flex-direction:column;gap:2px}.mi-htl-item{flex:none;border-top:none;border-left:2px solid var(--steel-200);padding:0 0 26px 26px}.mi-htl-item::before{left:-8px;top:2px}}

/* ---- 全球足跡 ---- */
.mi-globe{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:820px){.mi-globe{grid-template-columns:1fr}}
.mi-globe-svg{max-width:440px;width:100%;margin:0 auto;display:block}
.mi-globe-canvas{width:100%;max-width:338px;aspect-ratio:1/1;display:block;margin:0 auto;cursor:grab;touch-action:none}
/* 技術影片展示卡（連機型介紹） */
.mi-vid-card{position:relative;display:block;border-radius:16px;overflow:hidden;border:1px solid rgba(79,155,240,.25);box-shadow:0 24px 60px rgba(0,0,0,.5);aspect-ratio:16/9;background:#04040a;text-decoration:none;transition:transform .3s,border-color .3s,box-shadow .3s}
.mi-vid-card:hover{transform:translateY(-4px);border-color:var(--blue-glow);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.mi-globe-canvas:active{cursor:grabbing}
.mi-globe-svg .dot{fill:var(--blue-accent)}
.mi-globe-svg .ring{fill:none;stroke:var(--navy-200);stroke-width:1}
.mi-region-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.mi-region{font-family:var(--font-mono);font-size:12px;color:var(--steel-600);border:1px solid var(--steel-200);border-radius:999px;padding:7px 14px;background:#fff}

/* ---- 認證 × 客戶信任 ---- */
.mi-logo-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:center;margin-top:10px}
.mi-logo-chip{height:56px;min-width:120px;display:flex;align-items:center;justify-content:center;padding:0 20px;border:1px dashed var(--steel-200);border-radius:12px;color:var(--steel-400);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;background:#fff}
.mi-logo-chip img{max-height:40px;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:all .3s}
.mi-logo-chip:hover img{filter:none;opacity:1}
.mi-quote{max-width:780px;margin:40px auto 0;text-align:center}
.mi-quote-mark{font-family:var(--font-display);font-size:64px;line-height:.5;color:var(--blue-accent);opacity:.28}
.mi-quote-text{font-size:clamp(18px,2.3vw,24px);font-weight:500;font-style:italic;color:var(--navy-700);line-height:1.5;margin-top:6px}
.mi-quote-cite{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--steel-500);margin-top:18px}

/* ---- 電子報 / 聯絡誘餌帶 ---- */
.mi-news{background:linear-gradient(135deg,var(--navy-700),var(--cobalt-600));border-radius:20px;padding:clamp(32px,5vw,56px);text-align:center;color:#fff;position:relative;overflow:hidden}
.mi-news h2{color:#fff}
.mi-news-form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.mi-news-form input{flex:1;min-width:240px;max-width:360px;padding:13px 18px;border-radius:11px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:15px}
.mi-news-form input::placeholder{color:rgba(255,255,255,.55)}
.mi-news-form input:focus{outline:none;border-color:var(--blue-glow);background:rgba(255,255,255,.16)}
.mi-news-note{font-size:12px;color:rgba(255,255,255,.6);margin-top:14px}

/* ---- 旗艦機 360° 3D 展示 ---- */
.mi-3d-wrap{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(79,155,240,.25);background:radial-gradient(circle at 50% 38%,#0c1a2e,#05101d);box-shadow:0 24px 60px rgba(0,0,0,.45);aspect-ratio:16/10}
.mi-3d-wrap model-viewer{width:100%;height:100%;background:transparent;--poster-color:transparent}
.mi-3d-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:rgba(255,255,255,.72);font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-align:center;transition:opacity .4s}
.mi-3d-poster .spin{width:34px;height:34px;border:2px solid rgba(79,155,240,.3);border-top-color:var(--blue-glow);border-radius:50%;animation:mi3dspin 1s linear infinite}
@keyframes mi3dspin{to{transform:rotate(360deg)}}
.mi-3d-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5);pointer-events:none;z-index:2}
.mi-3d-switch{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.mi-3d-btn{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--navy-700);background:#fff;border:1px solid var(--steel-200);border-radius:9px;padding:9px 15px;cursor:pointer;transition:all .2s}
.mi-3d-btn:hover{border-color:var(--blue-accent);color:var(--blue-accent)}
.mi-3d-btn.on{background:var(--blue-accent);border-color:var(--blue-accent);color:#fff}