/* enfer studio — AI film, animation & stage visuals. 深色、影片優先；紫＋青（LED／舞台燈光感），跟 TRABEAR 的酒紅米白分開 */
:root{
  --bg:#0B0B0C; --bg2:#141416; --card:#18181B; --line:#2A2A2E;
  --fg:#EDEAE4; --muted:#9A968F; --accent:#A98BFF; --accent2:#3DE0FF; --glow:#3DE0FF;   /* 紫＋青（2026-10-02 選定） */
  --max:1180px;
  --head:"Clash Display",system-ui,sans-serif; --body:"Satoshi","Noto Sans TC",system-ui,sans-serif; --mark:"Doto","Clash Display",monospace; --intro-font:Doto;   /* 字體 2026-10-02 定案 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* 頁首 */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:20px;padding:18px 24px;
  background:linear-gradient(#0B0B0Ccc,#0B0B0C00)}
.top .brand{font:900 27px/1 var(--mark);letter-spacing:.01em;text-decoration:none}
.top .brand b{color:var(--accent);font-weight:600}
.top nav{margin-left:auto;display:flex;gap:22px;font-size:14px}
.top nav a{text-decoration:none;color:var(--muted)}.top nav a:hover{color:var(--fg)}
@media (max-width:600px){.top{padding:14px 16px}.top .brand{font-size:23px}.top nav{gap:14px;font-size:13px}.top nav .hide-sm{display:none}}

/* 首頁 hero：全螢幕 showreel */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;display:flex;align-items:flex-end}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0B0B0Caa 0%,#0B0B0C00 16%,#0B0B0C00 38%,#0B0B0Cf2 100%),linear-gradient(90deg,#0B0B0Cd9 0%,#0B0B0C66 48%,#0B0B0C00 75%)}
.hero .wrap{position:relative;z-index:1;padding-bottom:64px;width:100%}
.hero h1{font:600 clamp(40px,8vw,96px)/1 var(--head);margin:0 0 16px;letter-spacing:.005em}
.hero p{font-size:clamp(16px,2vw,20px);color:#D8D4CC;max-width:640px;margin:0 0 26px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 22px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none;border:1px solid var(--fg)}
.btn.solid{background:linear-gradient(90deg,var(--accent),var(--accent2));border:0;padding:14px 23px;color:#0B0B14}
.btn:hover{opacity:.88}
.sound{position:absolute;right:24px;bottom:28px;z-index:2;background:#0008;border:1px solid #fff4;color:#fff;border-radius:999px;padding:8px 14px;font:13px var(--body);cursor:pointer}

/* 區塊 */
section{padding:96px 0}
@media (max-width:600px){section{padding:64px 0}}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--accent2);margin:0 0 14px}
h2{font:600 clamp(28px,4vw,44px)/1.1 var(--head);margin:0 0 18px;letter-spacing:.005em}
h3{font:600 20px/1.3 var(--head);margin:0 0 8px}
.lead{font-size:18px;color:#CFCBC3;max-width:720px}
.muted{color:var(--muted)}

/* 作品卡 */
.work{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));margin-top:36px}
.wcard{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s}
.wcard:hover{border-color:var(--accent)}
.wcard video{width:100%;aspect-ratio:1/1;object-fit:cover;background:#000}
.wcard .t{padding:18px 20px 22px}
.wcard .tag{font-size:12px;color:var(--accent2);letter-spacing:.08em;text-transform:uppercase}
.wcard p{margin:6px 0 0;color:var(--muted);font-size:15px}

/* 服務 */
.svc{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:32px}
.svc div{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:24px}
.svc ul{margin:12px 0 0;padding-left:18px;color:#CFCBC3}.svc li{margin:4px 0}
.svc .price{margin-top:16px;font:600 15px var(--head);color:var(--accent)}

/* 流程 */
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-top:32px;counter-reset:s}
.steps div{border-top:1px solid var(--line);padding-top:18px}
.steps div::before{counter-increment:s;content:"0" counter(s);font:600 14px var(--head);color:var(--accent);display:block;margin-bottom:8px}
.steps p{margin:0;color:#CFCBC3;font-size:15px}

/* 聯絡 */
.contact{background:var(--bg2);border-top:1px solid var(--line)}
.contact .mail{font:600 clamp(22px,4vw,40px)/1.2 var(--head);background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none;word-break:break-all}

footer{padding:36px 0;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* 案例頁 */
.case-head{padding-top:140px;padding-bottom:40px}
.case-head h1{font:600 clamp(34px,6vw,72px)/1.02 var(--head);margin:0 0 18px;letter-spacing:.005em}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:14px;color:var(--muted)}
.facts b{display:block;color:var(--fg);font-weight:600}
.media-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.media-grid figure{margin:0}
.media-grid video,.media-grid img{width:100%;border-radius:14px;background:#000}
.media-grid figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.sq{aspect-ratio:1/1;object-fit:cover}
.wide{aspect-ratio:16/9;object-fit:cover}
.tall{aspect-ratio:9/16;object-fit:cover;max-height:80vh;width:auto;margin:0 auto}
.two{display:grid;gap:40px;grid-template-columns:1fr 1fr;align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.notes p{margin:0 0 14px;color:#CFCBC3}
.notes h3{margin-top:26px}
.next{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:40px 0;border-top:1px solid var(--line)}
.next a{text-decoration:none;color:var(--accent);font:600 16px var(--head)}

/* ── A：LED 點陣（canvas 蓋在影片上；不支援時隱藏 canvas，影片照常播） ── */
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:crosshair}
.has-led .hero video{opacity:0}
.hero::after{pointer-events:none}
.hero .wrap{pointer-events:none}.hero .wrap a{pointer-events:auto}
.led-hint{display:none;position:absolute;right:24px;bottom:30px;z-index:2;margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff9;pointer-events:none;animation:hint 2.4s ease-in-out infinite}
.has-led .led-hint{display:block}
@keyframes hint{0%,100%{opacity:.35}50%{opacity:.9}}
@media (max-width:600px){.led-hint{bottom:auto;top:66px;right:16px}}

/* ── D：作品清單 ── */
.plist{margin-top:28px;border-top:1px solid var(--line)}
.plist a{display:grid;grid-template-columns:56px 1fr auto;align-items:baseline;gap:18px;padding:28px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:opacity .25s,padding .25s}
.plist .n{font:500 14px var(--head);color:var(--muted)}
.plist .tt{font:600 clamp(28px,5.4vw,68px)/1.04 var(--head);letter-spacing:.005em}
.plist .meta{font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.plist .thumb{display:none}
.plist.hovering a{opacity:.28}.plist.hovering a.active{opacity:1;padding-left:16px}
.plist a.active .tt{color:var(--accent)}
.pfloat{position:fixed;left:0;top:0;z-index:30;width:min(24vw,340px);aspect-ratio:1/1;border-radius:14px;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .25s;box-shadow:0 30px 80px #000c}
.pfloat.on{opacity:1;box-shadow:0 30px 80px #000c,0 0 0 1px #A98BFF55,0 0 60px #3DE0FF22}.pfloat video{width:100%;height:100%;object-fit:cover}
/* 手機：每列直接顯示小影片 */
.plist.touch a{grid-template-columns:1fr;gap:6px;padding:22px 0}
.plist.touch .thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-top:12px;order:4}
.plist.touch .n{order:1}.plist.touch .tt{order:2}.plist.touch .meta{order:3}
@media (prefers-reduced-motion: reduce){.plist a{transition:none}}

/* 紫＋青的光：hero 右下滲青光、服務區右上一抹靛紫 */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 60% at 85% 100%,#3DE0FF22,transparent 70%),radial-gradient(50% 50% at 100% 0%,#A98BFF1f,transparent 70%)}
#services{background:radial-gradient(60% 80% at 100% 0%,#1B1F4A 0%,#141416 60%)!important}
.contact{background:radial-gradient(70% 90% at 0% 100%,#22164A 0%,#141416 60%)}
.top .brand b{color:var(--accent2)}
::selection{background:#A98BFF;color:#0B0B14}

/* ── B：捲動控制影片（全運會頁的起飛） ── */
.scrub{position:relative;height:340vh;padding:0}
.scrub-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.scrub canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scrub-stick::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0B0B0Cd0 0%,#0B0B0C40 45%,#0B0B0C00 70%)}
.scrub .cap{position:absolute;left:max(24px,calc((100vw - var(--max))/2 + 24px));bottom:18vh;z-index:2;margin:0;max-width:440px;opacity:0;
  font:600 clamp(24px,3.4vw,40px)/1.15 var(--head);letter-spacing:-.01em;will-change:opacity,transform}
.scrub .cap span{display:block;font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--accent2);margin-bottom:12px}
.scrub .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff14;z-index:2}
.scrub .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left;transform:scaleX(0)}
@media (max-width:600px){.scrub{height:300vh}.scrub .cap{left:16px;right:16px;bottom:12vh}}

/* ── G：可轉的 3D 熊（TRABEAR 頁） ── */
.m3d-sec{padding-top:24px}
.m3d{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:28px}
@media (max-width:700px){.m3d{grid-template-columns:1fr}}
.m3d figure{margin:0}
.m3d model-viewer{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:16px;background:radial-gradient(circle at 50% 38%,#26203A 0%,#121016 70%);--poster-color:transparent;border:1px solid var(--line)}
.m3d figcaption{margin-top:10px;color:var(--muted);font-size:14px}.m3d figcaption b{color:var(--fg)}

/* 字標（Doto 點陣字）只用在 logo；標題 Clash Display 字重 600 */
.hero h1,.case-head h1,h2{font-weight:600}
.plist .tt{font-weight:600}

/* ── ① 開場 LED 動畫 ── */
.intro{position:fixed;inset:0;z-index:100;background:transparent;cursor:pointer}
.intro canvas{width:100%;height:100%;display:block}
.intro-on .hero .wrap,.intro-on .top{opacity:0}
.hero .wrap,.top{transition:opacity .8s ease .1s}

/* ── ③ LED 游標 ── */
.has-cursor,.has-cursor *{cursor:none!important}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:200;pointer-events:none;border-radius:50%}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--accent2);box-shadow:0 0 10px var(--accent2),0 0 22px #3DE0FF88}
.cur-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid #A98BFF99;transition:width .25s,height .25s,margin .25s,background .25s,border-color .25s}
.cur-hot .cur-ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:#A98BFF1f;border-color:var(--accent)}
.cur-led .cur-ring{width:120px;height:120px;margin:-60px 0 0 -60px;border-color:#3DE0FF66;background:radial-gradient(circle,#3DE0FF14,transparent 70%)}
.cur-down .cur-ring{width:24px;height:24px;margin:-12px 0 0 -12px}
.btn,.top nav a,.top .brand{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}

/* ── ⑤ 標題解碼時字色偏青 ── */
.decoding{color:#CFF7FF;text-shadow:0 0 18px #3DE0FF55}

/* ── ⑧ 底片顆粒＋LED 掃描線 ── */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
.grain::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000055 2px 3px);opacity:.6}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}
.fx-still .grain{animation:none}

/* ══ 10/2 參考 igloo／CoMinVi：HUD 小字、編輯式排版、配色收斂 ══ */
:root{--mono:"JetBrains Mono",ui-monospace,monospace}
/* 小標：等寬字＋編號 */
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow i{font-style:normal;color:var(--accent2);margin-right:6px}

/* HUD：四角等寬小字 */
.hud{position:fixed;inset:0;z-index:40;pointer-events:none;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#EDEAE4b3}
.hud span{position:absolute}
.hud b{font-weight:600;color:var(--fg)}
.hud-tl{left:24px;top:62px}
.hud-bl{left:24px;bottom:22px}
.hud-br{right:24px;bottom:22px}
.hud-br::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#3DE0FF;box-shadow:0 0 8px #3DE0FF;margin-right:8px;vertical-align:1px;animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.has-led .led-hint{bottom:46px}
@media (max-width:700px){.hud-tl{top:54px;left:16px}.hud-bl{display:none}.hud-br{right:16px;bottom:14px;font-size:10px}}
.intro-on .hud{opacity:0}.hud{transition:opacity .8s}

/* 數字統計帶 */
.stats{padding:56px 0;border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stats div{padding:6px 24px 6px 0;border-left:1px solid var(--line);padding-left:24px}
.stats div:first-child{border-left:0;padding-left:0}
.stats b{display:block;font:600 clamp(36px,5vw,64px)/1 var(--head);letter-spacing:.005em}
.stats span{display:block;margin-top:10px;font:500 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);max-width:220px}
@media (max-width:760px){.stats .wrap{grid-template-columns:1fr 1fr;gap:28px 0}.stats div:nth-child(3){border-left:0;padding-left:0}}

/* 淺色編輯區（服務、流程）：暗→亮的節奏 */
section.light{background:#ECEAE5!important;color:#141416}
section.light .lead,section.light .steps p,section.light .svc ul{color:#4A4741}
section.light .eyebrow{color:#6E6A63}section.light .eyebrow i{color:#7B5CF0}
section.light .svc{gap:0;border-top:1px solid #CFCBC3;grid-template-columns:repeat(4,1fr)}
section.light .svc div{background:none;border:0;border-right:1px solid #CFCBC3;border-radius:0;padding:28px 28px 32px 0;margin-left:0}
section.light .svc div+div{padding-left:28px}
section.light .svc div:last-child{border-right:0}
section.light .svc .price{color:#7B5CF0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
section.light .steps div{border-top-color:#CFCBC3}
section.light .steps div::before{color:#7B5CF0;font-family:var(--mono)}
#process.light{border-top:1px solid #CFCBC3}
@media (max-width:900px){section.light .svc{grid-template-columns:1fr}section.light .svc div{border-right:0;border-bottom:1px solid #CFCBC3;padding:24px 0}section.light .svc div+div{padding-left:0}}
section.light ::selection{background:#7B5CF0;color:#fff}
.has-cursor section.light ~ .cur-ring{border-color:#7B5CF0}

/* 配色收斂：主按鈕改白底黑字，紫青只留在重點 */
.btn.solid{background:#EDEAE4;color:#0B0B0C;border:0}
.btn.solid:hover{background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:1}
.hero::before{background:radial-gradient(60% 50% at 85% 100%,#3DE0FF14,transparent 70%)}
#services{background:#ECEAE5!important}

/* ⑥ 聲音開關（igloo 那種 Sound off 小字） */
.sound-btn{pointer-events:auto;margin-left:14px;background:none;border:0;padding:0;color:#EDEAE4b3;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.sound-btn:hover{color:#fff}
.sound-btn.solo{position:fixed;left:24px;bottom:22px;z-index:40;margin:0}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:9px;margin-right:8px;vertical-align:-1px}
.eq b{width:2px;height:3px;background:currentColor}
.eq.on b{background:var(--accent2);animation:eq .9s ease-in-out infinite}
.eq.on b:nth-child(2){animation-delay:.2s}.eq.on b:nth-child(3){animation-delay:.4s}
@keyframes eq{50%{height:9px}}
@media (max-width:700px){.hud-bl{display:block!important}.hud-bl > b,.hud-bl{font-size:0}.hud-bl .sound-btn{font-size:10px;margin:0}.sound-btn.solo{left:16px;bottom:14px}}

/* 開場程式載入前先用純黑蓋住，避免底下的 LED 牆先閃出來 */
.intro-cover body::before{content:"";position:fixed;inset:0;z-index:99;background:#0B0B0C}

/* ▶ Play reel 全螢幕播放 */
.reel-ov{position:fixed;inset:0;z-index:180;background:#000e;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
.reel-ov.on{opacity:1;pointer-events:auto}
.reel-ov video{width:min(92vw,calc(86vh*16/9));aspect-ratio:16/9;background:#000;border-radius:10px;box-shadow:0 0 0 1px #ffffff1a,0 40px 120px #000}
.reel-x{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff40;background:#0008;color:#fff;font-size:18px;cursor:pointer}
.reel-x:hover{border-color:var(--accent2)}
.reel-open .hud,.reel-open .cur-dot,.reel-open .cur-ring{opacity:0}
.reel-open,.reel-open body{overflow:hidden}
.has-cursor .reel-ov,.has-cursor .reel-ov *{cursor:auto!important}
.intro-skip{position:absolute;right:24px;bottom:22px;z-index:2;background:none;border:1px solid #ffffff33;border-radius:999px;color:#EDEAE4cc;padding:8px 16px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;animation:skipin .6s ease .5s both}
.intro-skip:hover{border-color:var(--accent2);color:#fff}
@keyframes skipin{from{opacity:0;transform:translateY(6px)}}
@media (max-width:700px){.intro-skip{right:16px;bottom:16px}}

/* 關於我 */
.about{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
.about h2{font-size:clamp(30px,4.2vw,52px)}
.about-body p{color:#CFCBC3;margin:0 0 16px}
.about-body .lead{color:var(--fg);font-size:20px}
.facts-list{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.facts-list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts-list span{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:16px}}

/* 詢價表 */
.inq{margin-top:34px;max-width:760px;background:#ffffff08;border:1px solid var(--line);border-radius:18px;padding:26px}
.inq-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.inq-count{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.inq-count b{color:var(--fg)}
.inq-bar{flex:1;height:2px;background:#ffffff14}.inq-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left;transition:transform .35s}
.inq-step{display:none;border:0;padding:0;margin:0;min-height:150px}.inq-step.on{display:block;animation:stepin .35s ease}
@keyframes stepin{from{opacity:0;transform:translateY(8px)}}
.inq legend{font:600 clamp(22px,3vw,30px)/1.2 var(--head);margin-bottom:18px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip-opt input{position:absolute;opacity:0;pointer-events:none}
.chip-opt span{display:inline-block;padding:12px 18px;border:1px solid #ffffff2e;border-radius:999px;font-size:15px;cursor:pointer;transition:all .2s}
.chip-opt span:hover{border-color:var(--accent)}
.chip-opt input:checked+span{background:linear-gradient(90deg,var(--accent),var(--accent2));border-color:transparent;color:#0B0B14;font-weight:600}
.chip-opt input:focus-visible+span{outline:2px solid var(--accent2);outline-offset:2px}
.inq textarea,.inq input:not([type=radio]):not([type=checkbox]){width:100%;background:#0B0B0C;border:1px solid #ffffff2e;border-radius:12px;color:var(--fg);font:16px var(--body);padding:13px 14px}
.inq textarea:focus,.inq input:focus{outline:none;border-color:var(--accent2)}
.inq-fields{display:grid;gap:14px}.inq-fields label{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.inq-fields input{margin-top:6px}
.tried .inq-fields input:invalid{border-color:#ff6b6b}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.inq-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.inq-nav .btn{cursor:pointer;font:600 15px var(--body)}
.inq-nav .btn:not(.solid){background:none;color:var(--fg)}
.inq-done,.inq-fail{display:none}
.inq.sent .inq-step,.inq.sent .inq-nav,.inq.sent .inq-top{display:none}
.inq.sent .inq-done{display:block}.inq-done h3{font-size:28px;margin:0 0 8px}
.inq.failed .inq-fail{display:block;color:#ff9b9b;margin:14px 0 0}
.inq-or{margin-top:18px;color:var(--muted);font-size:15px}.inq-or a{color:var(--accent2)}
@media (max-width:600px){.inq{padding:20px 16px}.chip-opt span{padding:10px 14px;font-size:14px}}
.inq-nav [hidden]{display:none!important}

@media (max-width:1100px) and (min-width:901px){section.light .svc{grid-template-columns:repeat(2,1fr)}section.light .svc div:nth-child(2){border-right:0}section.light .svc div:nth-child(3){padding-left:0}section.light .svc div:nth-child(-n+2){border-bottom:1px solid #CFCBC3}}
/* 商品圖案例：米白棚拍照，方形格子 */
.prod-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.prod-grid img,.prod-pair img{height:auto;aspect-ratio:1/1;object-fit:cover;background:#ECE8E0}
.prod-pair{grid-template-columns:1fr 1fr}
@media (max-width:600px){.prod-grid{grid-template-columns:1fr 1fr;gap:10px}.prod-grid img{border-radius:10px}}
/* 前後對比滑桿 */
.ba-row{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.ba-row figure{margin:0}.ba-row figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.ba{--x:50%;position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;background:#111}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 var(--x))}
.ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px #3DE0FF}
.ba i{position:absolute;top:50%;left:var(--x);width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#0B0B0C;border:2px solid #fff;z-index:2;box-shadow:0 0 18px #3DE0FF88}
.ba i::before{content:"‹ ›";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:600 14px/1 "JetBrains Mono",monospace;letter-spacing:2px}
.ba span{position:absolute;bottom:10px;z-index:2;font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:6px;background:#0B0B0Ccc;color:#fff}
.ba .l{left:10px}.ba .r{right:10px;background:#7B5CF0}
.ba:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
@media (max-width:900px){.ba-row{grid-template-columns:1fr}}
/* 10/2 手機修正：往下捲後頂欄變實心毛玻璃，不再字壓字；手機的 Sound 鈕改成小膠囊，看起來是浮動按鈕而不是疊字 */
.top{transition:opacity .8s ease .1s,background .3s,backdrop-filter .3s}
.top.solid{background:#0B0B0Cd9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 #ffffff12}
@media (max-width:700px){
  .sound-btn,.hud-bl .sound-btn{font-size:10px;padding:7px 10px;border-radius:99px;background:#0B0B0Cd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px #ffffff1a}
  .hud-bl{bottom:12px}
}
/* 衣服以外：成品大圖＋角落小張手機原圖 */
.beyond{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.beyond figure{margin:0;position:relative}
.beyond img.main{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block}
.beyond .src{position:absolute;left:12px;top:12px;width:24%;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px #0008,0 0 0 2px #fff}
.beyond .src img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.beyond .src span{position:absolute;left:6px;bottom:6px;font:600 9px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;padding:4px 5px;border-radius:4px;background:#0B0B0Ccc;color:#fff}
.beyond figcaption{font-size:14px;color:var(--muted);margin-top:8px}
@media (max-width:700px){.beyond{grid-template-columns:1fr}}
/* 網站案例：瀏覽器框＋手機框 */
.site-case{padding-top:40px}
.site-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;margin-bottom:22px}
.site-head .n{font:500 13px/1 var(--mono);color:var(--accent2)}
.site-head h2{margin:0;font-size:clamp(26px,3.2vw,40px)}
.site-head .meta{margin:0 0 0 auto;color:var(--muted);font-size:14px}
.site-head .meta a{color:var(--accent)}
.site-shots{display:grid;grid-template-columns:1fr 23%;gap:16px;align-items:end}
.browser{margin:0;border-radius:12px;overflow:hidden;background:#1a1a1d;box-shadow:0 0 0 1px #ffffff14,0 30px 60px #0007}
.browser i{display:block;height:26px;background:#1a1a1d;position:relative}
.browser i::before{content:"";position:absolute;left:12px;top:9px;width:8px;height:8px;border-radius:50%;background:#ff5f57;box-shadow:13px 0 #febc2e,26px 0 #28c840}
.browser img{display:block;width:100%;height:auto}
.phone{margin:0}
.phone img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 0 0 6px #1a1a1d,0 0 0 7px #ffffff1f,0 30px 60px #0007}
.phone figcaption{margin-top:14px;text-align:center;font-size:14px;color:var(--muted)}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:860px;margin:0 auto;padding:8px}
.site-case .notes{margin-top:22px}
.site-case .notes p{margin:0}
@media (max-width:700px){.site-shots{grid-template-columns:1fr}.site-shots .phone{width:56%;margin:8px auto 0}.phones{gap:12px}.site-head .meta{margin-left:0;width:100%}}
/* 服務 5 欄：寬螢幕一排 5 個，中等寬度 3＋2 */
section.light .svc div{padding-right:22px}section.light .svc div+div{padding-left:22px}
@media (min-width:901px){
  section.light .svc{grid-template-columns:repeat(3,1fr)}
  section.light .svc div:nth-child(3){padding-left:22px}
  section.light .svc div{border-bottom:0;border-right:1px solid #CFCBC3;padding-left:22px}
  section.light .svc div:nth-child(3n){border-right:0}
  section.light .svc div:nth-child(3n+1){padding-left:0}
  section.light .svc div:nth-child(-n+3){border-bottom:1px solid #CFCBC3}
  section.light .svc div:nth-child(2){border-right:1px solid #CFCBC3}
}
@media (max-width:900px){section.light .svc{grid-template-columns:1fr}}
.media-grid.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.media-grid.g2{grid-template-columns:1fr}}
@media (max-width:600px){.has-led .led-hint{display:none}}