/* ===== 首頁版面（中文 / 與英文 /en 共用）。色票一律取自 style.css 的 :root，此處不新增色碼 =====
   2026-09-10 由 index.html 內嵌 <style> 原封不動搬出，供 en.html 共用；改版面只改這一份。 */

body.home{line-height:1.75}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}

/* 雙狀態切換 */
[data-appstore="review"] .when-live{display:none !important}
[data-appstore="live"]   .when-review{display:none !important}

/* ---------- 導航 ---------- */
.nav{position:sticky; top:0; z-index:50; background:var(--bg);
     backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:68px}
.nav .lockup{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.nav .lockup img{width:32px; height:32px}
.nav .lockup .name{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:20px; letter-spacing:-.02em}
.nav .lockup .div{width:1px; height:18px; background:var(--line)}
.nav .lockup .tag{font-size:10px; font-weight:700; letter-spacing:.36em; color:var(--ink-2)}
.nav-links{display:flex; align-items:center; gap:26px; font-size:14px}
.nav-links a{color:var(--ink-2); text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.status-pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500;
  padding:7px 14px; border-radius:999px; white-space:nowrap}
.status-pill.review{color:var(--ak); background:var(--asoft); border:1px solid var(--line)}
.status-pill.live{color:var(--gk); background:var(--gsoft); border:1px solid var(--line)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}

/* ---------- 通用區塊 ---------- */
section{padding:96px 0}
.eyebrow{font-family:"Space Grotesk",sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.28em; color:var(--ink-3); margin:0 0 14px}
.sec-title{font-family:"Space Grotesk","Noto Sans TC",sans-serif;
  font-size:clamp(25px,3.4vw,38px); font-weight:900; letter-spacing:-.01em;
  line-height:1.35; margin:14px 0 12px; padding:0; border:0; text-wrap:balance}
.sec-sub{color:var(--ink-2); font-size:16px; margin:0 0 48px; max-width:640px}

/* ---------- Hero ---------- */
.hero{padding:76px 0 88px}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.badge{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.16em; padding:8px 16px; border-radius:999px; margin-bottom:26px;
  color:var(--gk); background:var(--gsoft); border:1px solid var(--line)}
.hero h1{font-family:"Space Grotesk","Noto Sans TC",sans-serif;
  font-size:clamp(33px,5.6vw,60px); font-weight:900; line-height:1.2;
  letter-spacing:-.015em; margin:22px 0 16px; text-wrap:balance}
.hero .lead{font-size:17px; color:var(--ink-2); margin:0 0 26px; max-width:520px}
.checks{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px}
.check{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; padding:8px 15px;
  border-radius:999px; border:1px solid var(--line); color:var(--ink-2)}
.check b{color:var(--gk); font-weight:700}

/* 下載模組 */
.getbox{border:1px solid var(--line); border-radius:20px; padding:26px 28px; background:var(--surface)}
.getbox .row{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.soon{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:14px;
  border:1.5px dashed var(--line); color:var(--ak); font-weight:700; font-size:15.5px}
/* Apple 官方徽章：依 Apple 行銷規範不得改色、不得加框，僅控制尺寸與留白 */
.storebtn{display:inline-flex; align-items:center; text-decoration:none; line-height:0}
.storebtn img{height:60px; width:auto; display:block}
.storebtn:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:10px}
.getnote{font-size:13px; color:var(--ink-3); margin:16px 0 0}
/* 相容性提醒：刻意放在下載按鈕正下方——買前看不到就會變成退款與負評
   （2026-09-04 車友回報舊款 Model X 裝了才發現不支援）。 */
.compat{font-size:12.5px; line-height:1.7; color:var(--ink-2); margin:12px 0 0;
  padding:11px 14px; border-radius:12px; background:var(--asoft); border:1px solid var(--line)}
.compat b{color:var(--ink)}
.compat a{color:var(--ak); text-underline-offset:2px}
.qr{display:flex; align-items:center; gap:16px}
.qr .code{width:96px; height:96px; border-radius:12px; border:1px solid var(--line);
  background:#fff; padding:6px; flex:none; display:block}
.qr .cap{font-size:13px; color:var(--ink-2)}
.qr .cap b{display:block; color:var(--ink); font-weight:700; margin-bottom:3px}

/* ---------- 手機儀表示意 ---------- */
.phone{justify-self:center; width:100%; max-width:320px; border-radius:52px; padding:10px;
  border:1px solid var(--line); background:var(--bg3); box-shadow:0 44px 90px -42px rgba(0,0,0,.55)}
.phone .screen{background:var(--bg); border-radius:43px; padding:22px 18px 24px;
  border:1px solid var(--line-2)}
.phone .shot-screen{padding:0; overflow:hidden; background:#0b0c10}
.phone .shot-screen img{display:block; width:100%; height:auto; aspect-ratio:1284/2778}

/* ---------- 實際畫面 ---------- */
.shots{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.shot{margin:0; border-radius:24px; overflow:hidden; border:1px solid var(--line);
  background:#0b0c10; box-shadow:var(--cardsh); aspect-ratio:var(--shot-ar,1284/1840)}
.shot img{display:block; width:100%; height:100%; object-fit:cover; object-position:top}
.phone .statusbar{display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--ink-3); margin-bottom:16px}
.ble{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700;
  color:var(--gk); padding:4px 10px; border-radius:999px; background:var(--gsoft)}
.prnd{display:flex; gap:12px; font-size:12.5px; color:var(--ink-3); margin-bottom:6px; font-weight:700}
.prnd .on{color:var(--gk); background:var(--gsoft);
  padding:1px 7px; border-radius:6px}
.speed{display:flex; align-items:baseline; gap:8px; margin-bottom:20px}
.speed .n{font-family:"Space Grotesk",sans-serif; font-size:60px; font-weight:700;
  line-height:.95; letter-spacing:-.04em}
.speed .u{font-size:13px; color:var(--ink-3)}
.meter{margin-bottom:18px}
.meter .lbl{display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-3); margin-bottom:7px}
.meter .lbl b{color:var(--ink)}
.bar{height:7px; border-radius:99px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; width:78%; border-radius:99px; background:var(--gk)}
.tyres{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px}
.tyre{display:flex; justify-content:space-between; align-items:baseline;
  border:1px solid var(--line); border-radius:10px; padding:9px 12px}
.tyre .p{font-size:10px; color:var(--ink-3); letter-spacing:.1em}
.tyre .v{font-weight:700; font-size:15px}
.tyre .v small{font-size:9.5px; color:var(--ink-3); font-weight:400; margin-left:3px}
.states{display:flex; gap:8px; font-size:11.5px; color:var(--ink-2)}
.states span{flex:1; border:1px solid var(--line); border-radius:9px; padding:8px 10px; text-align:center}

/* ---------- 直連架構 ---------- */
.direct{background:var(--bg2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
#plans{background:var(--bg2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.node .ico{width:58px; height:58px; border-radius:17px; background:var(--bg3); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px}
.node .ico svg{width:26px; height:32px}
@keyframes evs-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes evs-dash{to{background-position:200% 0}}
.status-pill .dot,.soon .dot,.ble .dot{animation:evs-pulse 1.6s ease-in-out infinite}
.diagram{display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:center;
  border:1px solid var(--line); border-radius:20px; padding:34px 28px; background:var(--bg); margin-bottom:20px}
.node{text-align:center}
.node .t{font-weight:700; font-size:15.5px; margin-bottom:5px}
.node .s{font-size:12.5px; color:var(--ink-3)}
.link-mid{text-align:center; min-width:150px}
.link-mid .line{height:2px; border-radius:2px; margin-bottom:9px;
  background:linear-gradient(90deg,var(--gk),var(--ak)); background-size:200% 100%;
  animation:evs-dash 1.1s linear infinite}
.link-mid .s{font-size:11.5px; color:var(--ink-2); font-weight:700; letter-spacing:.06em}
.noserver{display:flex; align-items:center; gap:10px; justify-content:center; font-size:13.5px;
  color:var(--ink-2); margin-bottom:44px}
.noserver .x{color:var(--rk); font-weight:700}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.three .card{border:1px solid var(--line); border-radius:20px; padding:26px; background:var(--bg); box-shadow:var(--cardsh)}
.three h3{font-size:16px; font-weight:700; margin:0 0 8px}
.three p{font-size:14px; color:var(--ink-2); margin:0}

/* ---------- 模組 bento ---------- */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.mod{border:1px solid var(--line); border-radius:24px; padding:clamp(24px,3.2vw,36px);
  background:var(--bg2); box-shadow:var(--cardsh); display:flex; flex-direction:column}
.mod:nth-child(1){grid-column:span 7}
.mod:nth-child(2){grid-column:span 5}
.mod:nth-child(3){grid-column:span 5}
.mod:nth-child(4){grid-column:span 7}
.mod:nth-child(5){grid-column:span 12}
.mod .top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.mod h3{font-size:19px; font-weight:700; margin:0}
.tier{font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; white-space:nowrap}
.tier.free{color:var(--gk); background:var(--gsoft)}
.tier.sub{color:var(--ak); background:var(--asoft)}
.tier.once{color:var(--rk); background:var(--rsoft)}
.mod p{font-size:14.5px; color:var(--ink-2); margin:0 0 20px}
.mod .mod-note{font-size:12.5px; color:var(--ink-3); margin:-12px 0 18px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto}
.chip{font-size:12px; color:var(--ink-2); border:1px solid var(--line); border-radius:8px; padding:7px 11px}
.chip.hi{color:var(--gk); border-color:var(--gsoft); background:var(--gsoft)}

/* ---------- 方案 ---------- */
.plans-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.plan{border:1px solid var(--line); border-radius:24px; padding:clamp(24px,3vw,36px);
  background:var(--bg); box-shadow:var(--cardsh); display:flex; flex-direction:column}
.plan.feature{border-color:var(--gk)}
.plan .nm{font-size:17px; font-weight:700; margin:0 0 6px}
.plan .pr{font-family:"Space Grotesk",sans-serif; font-size:30px; font-weight:700;
  letter-spacing:-.02em; margin:8px 0 4px}
.plan .pr small{font-size:14px; font-weight:500; color:var(--ink-3); margin-left:2px}
.plan .tr{font-size:13.5px; color:var(--gk); font-weight:700; margin:0 0 14px}
.plan .ds{font-size:14px; color:var(--ink-2); margin:0}
.plan .ft{font-size:12px; color:var(--ink-3); margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line)}
.pricenote{font-size:12.5px; color:var(--ink-3); margin:22px 0 0; text-align:center}

/* ---------- CTA ---------- */
.cta{text-align:center; border-top:1px solid var(--line)}
.cta .sec-title{margin-bottom:14px}
.cta .sec-sub{margin:0 auto 34px}
.cta .getbox{max-width:560px; margin:0 auto; text-align:left}
/* 上架動畫（Apple 提供）＋下載模組：兩欄 */
.cta-grid{display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center;
  max-width:920px; margin:0 auto; text-align:left}
.launch{width:100%; max-width:250px; margin:0 auto}
.launch-video{display:block; width:100%; height:auto; aspect-ratio:9/16; border-radius:36px;
  border:1px solid var(--line); background:#0a0b0e; box-shadow:0 44px 90px -42px rgba(0,0,0,.55)}
@media (max-width:767px){
  .cta-grid{grid-template-columns:1fr; gap:28px}
  .launch{max-width:210px}
}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line); padding:52px 0 40px; background:var(--surface)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; margin-bottom:34px}
.site-foot h4{font-size:11.5px; font-weight:700; letter-spacing:.2em; color:var(--ink-3); margin:0 0 14px}
.site-foot ul{list-style:none; padding:0; margin:0}
.site-foot ul li{margin-bottom:9px; padding:0}
.site-foot ul li::before{display:none}
.site-foot a{font-size:14px; color:var(--ink-2); text-decoration:none}
.site-foot a:hover{color:var(--ink)}
.disclaimer{font-size:12.5px; color:var(--ink-3); line-height:1.8; max-width:520px; margin:14px 0 0}
.foot-btm{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3)}

/* ---------- 響應式 ---------- */
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr; gap:44px}
  .shots{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 4px 14px; margin:0 -4px; -webkit-overflow-scrolling:touch}
  .shot{flex:0 0 78%; max-width:340px; scroll-snap-align:start}
  .bento{grid-template-columns:repeat(2,1fr)}
  .mod:nth-child(n){grid-column:span 1}
  .mod:nth-child(1){grid-column:span 2}
  .plans-grid{grid-template-columns:1fr}
  .three{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .wrap{padding:0 18px}
  section{padding:64px 0}
  .nav-links{display:none}
  /* 窄螢幕：品牌副標與分隔線收起，否則「電車工作室」會被擠成直排三行 */
  .nav .lockup .div,.nav .lockup .tag{display:none}
  .nav .wrap{height:60px; gap:12px}
  .nav .lockup .name{font-size:19px}
  .status-pill{font-size:11.5px; padding:6px 12px}
  .hero{padding:44px 0 64px}
  .hero h1{margin:16px 0 14px}
  .bento{grid-template-columns:1fr}
  .mod:nth-child(n){grid-column:span 1}
  .diagram{grid-template-columns:1fr; gap:16px}
  .link-mid .line{height:2px; width:60%; margin:0 auto 9px}
  .foot-grid{grid-template-columns:1fr; gap:28px}
  .tyres{grid-template-columns:1fr 1fr}
}

/* ---------- 語言切換（2026-09-10 英文頁 /en 上線）----------
   刻意放在 .nav-links 之外：窄螢幕 .nav-links 整排隱藏，切換鈕仍要看得到。 */
.nav-end{display:flex; align-items:center; gap:10px}
.lang-switch{font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-2);
  text-decoration:none; padding:6px 12px; border-radius:999px; border:1px solid var(--line); white-space:nowrap}
.lang-switch:hover{color:var(--ink)}

/* ---------- 英文頁 hero：只取截圖上 57%，手機框底部淡出 ----------
   ⛔ 英文 01 儀表截圖下方胎壓區是車輛俯瞰渲染圖（README 硬約束 1 禁止上站），
   所以只能用裁掉底部的版本；勿改回整張。 */
.phone.phone-crop{padding-bottom:0; border-bottom:0; border-radius:52px 52px 0 0;
  -webkit-mask-image:linear-gradient(#000 70%,transparent); mask-image:linear-gradient(#000 70%,transparent)}
.phone.phone-crop .screen{border-radius:43px 43px 0 0; border-bottom:0}
.phone.phone-crop .shot-screen img{aspect-ratio:1284/1590}