:root{
    --bg:#07070a;
    --panel:rgba(12,12,18,.90);
    --txt:#f3f3fb;
    --mut:rgba(243,243,251,.78);
    --line:rgba(255,255,255,.10);
    --shadow: 0 22px 70px rgba(0,0,0,.55);
    --vio:#8b5cf6;
    --gold:#f7d98a;
    --max: 980px;
    --radius: 22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body, html {height:100%; margin:0; padding:0; width:100%;}
body{background:#191919; overflow:hidden;}
body.allow-scroll{overflow:auto; background:var(--bg);}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.page-body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
    background:var(--bg);
    color:var(--txt);
    line-height:1.55;
    overflow-y:auto;
    min-height:100vh;
}
.container{max-width:var(--max); margin:0 auto; padding:0 18px;}
.page{max-width:980px; margin:0 auto; background:#000;}

/* ===== 開屏頁面 (保留) ===== */
#intro-page{
    position:fixed; inset:0;
    background-color: rgba(25,25,25,1);
    z-index:1000;
    display:flex; align-items:center; justify-content:center;
    transition: opacity 1s ease-out, transform 1s ease-out;
}
#intro-page.hidden{opacity:0; transform:scale(1.1); pointer-events:none;}
#blackhole{height:100%; width:100%; position:relative; display:flex;}
.centerHover{
    width:255px; height:255px; background:transparent; border-radius:50%;
    position:absolute; left:50%; top:50%; margin-top:-128px; margin-left:-128px;
    z-index:2; cursor:pointer; line-height:255px; text-align:center;
    transition: opacity 500ms; -webkit-tap-highlight-color:transparent; user-select:none;
}
.centerHover.open{opacity:0; pointer-events:none;}
.centerHover span{
    color:#cfcfe6; opacity:.85;
    font-weight:700; letter-spacing:.22em;
    font-size:16px; position:relative; transition:all 500ms;
    padding:10px 16px; border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.25); backdrop-filter:blur(10px);
    box-shadow:0 18px 60px rgba(0,0,0,.5);
    text-transform:uppercase;
}
canvas{position:relative; z-index:1; width:100%; height:100%; margin:auto;}

/* ===== 主頁面容器 ===== */
#home-page{display:none; opacity:0; transition:opacity 1.2s ease-in;}
#home-page.visible{display:block; opacity:1;}

/* ===== Top bar ===== */
.topbar{
    position:fixed; inset:0 0 auto 0;
    z-index:20;
    padding:18px 0 10px;
    pointer-events:none;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .row{
    position:relative; display:flex; align-items:center; justify-content:center;
    min-height:44px;
}
.hamb{
    position:absolute; left:18px; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.25);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 38px rgba(0,0,0,.35);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; pointer-events:auto;
    -webkit-tap-highlight-color: transparent;
}
.hamb:active{transform:translateY(-50%) scale(.98)}
.hamb .bars{width:20px; height:14px; position:relative;}
.hamb .bars span{
    position:absolute; left:0; right:0; height:2px;
    background: rgba(255,255,255,.88);
    border-radius: 99px;
}
.hamb .bars span:nth-child(1){top:0}
.hamb .bars span:nth-child(2){top:6px; opacity:.92}
.hamb .bars span:nth-child(3){bottom:0; opacity:.82}

.brand{
    font-weight: 850;
    letter-spacing: .2px;
    font-size: 1.628rem;
    line-height:1;
    background: linear-gradient(90deg, var(--vio), var(--gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    pointer-events:auto;
    user-select:none;
}
@media (max-width:520px){
    .brand{font-size:1.4rem;}
}

.langSwitch{
    position:absolute; right:18px; top:50%; transform:translateY(-50%);
    display:flex; gap:4px; pointer-events:auto;
}
.langBtn{
    padding:6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(10px);
    color: rgba(255,255,255,.72);
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition: all 200ms;
    -webkit-tap-highlight-color:transparent;
}
.langBtn:hover{background: rgba(255,255,255,.08); color: rgba(255,255,255,.92);}
.langBtn.active{background: rgba(139,92,246,.3); border-color: rgba(139,92,246,.5); color:#fff;}
.langBtn span{display:none;}
.langBtn.active span{display:inline;}
@media (max-width:520px){.langSwitch{display:none;}}

/* ===== Mobile drawer ===== */
.drawer{
    position:fixed; inset:0;
    background: rgba(0,0,0,.55);
    display:none; align-items:flex-end;
    z-index:60;
}
.drawer.open{display:flex}
.panel{
    width:100%;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border:1px solid rgba(255,255,255,.10);
    background: rgba(12,12,18,.92);
    backdrop-filter: blur(16px);
    padding:16px;
}
.panel a{
    display:block;
    padding:12px 10px;
    color:rgba(233,233,242,.92);
    border-radius:12px;
}
.panel a:hover{background: rgba(255,255,255,.04)}
.panel .close{opacity:.82; margin-top:6px;}
.langSwitchMobile{
    display:none;
    justify-content:center;
    gap:8px;
    padding:12px 0;
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:8px;
}
@media (max-width:520px){.langSwitchMobile{display:flex}}
.langBtnMobile{
    flex:1;
    padding:10px;
    border-radius: 8px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.72);
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition: all 200ms;
    text-align:center;
}
.langBtnMobile:hover{background: rgba(255,255,255,.08); color: rgba(255,255,255,.92);}
.langBtnMobile.active{background: rgba(139,92,246,.25); border-color: rgba(139,92,246,.5); color:#fff;}

/* ===== 共用：全螢幕圖片段落 ===== */
.fullImage{
    position:relative;
    background:#000;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,.06);
}
.fullImage.minH{min-height:88vh;}
.fullImage img{width:100%; height:100%; object-fit:cover; object-position:center; filter:contrast(1.02) saturate(1.03);}
.fullImage::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.10) 42%, rgba(0,0,0,.50));
    pointer-events:none;
}

.overlay{
    position:absolute;
    left:18px; right:18px;
    bottom:34px;
    z-index:2;
    text-shadow: 0 14px 55px rgba(0,0,0,.75);
    text-align:center;
}
.overlay .h1{
    margin:0 0 10px;
    font-size: 2.25rem;
    font-weight:900;
    letter-spacing:.6px;
    color:rgba(255,255,255,.95);
}
.overlay .sub{
    margin:0;
    font-size:1.08rem;
    color:rgba(255,255,255,.90);
    letter-spacing:.2px;
}
@media (max-width:520px){
    .overlay{bottom:28px;}
    .overlay .h1{font-size:1.625rem;}
    .overlay .sub{font-size:1rem;}
}

/* ===== 文案區塊（疊在圖片上） ===== */
.captionTL{
    position:absolute;
    left:22px; top:24px;
    z-index:2;
    color:rgba(255,255,255,.92);
    text-shadow: 0 14px 55px rgba(0,0,0,.75);
    max-width:min(88%, 560px);
}
.captionTL .title{
    margin:0 0 12px;
    font-size: 1.625rem;
    font-weight: 900;
    letter-spacing:.6px;
    line-height:1.2;
}
.captionTL .para{
    margin:0;
    font-size: 1rem;
    color: rgba(255,255,255,.82);
    line-height:1.9;
    letter-spacing:.2px;
}
@media (max-width:520px){
    .captionTL{left:18px; top:18px;}
    .captionTL .title{font-size:1.625rem;}
    .captionTL .para{font-size:.98rem;}
}

/* ===== WHY content ===== */
.whyContent{
    position:absolute;
    left:18px; right:18px;
    bottom:34px;
    z-index:2;
    max-width: 980px;
    margin:0 auto;
    text-shadow: 0 14px 55px rgba(0,0,0,.75);
}
.whyContent .title{
    margin:0 0 12px;
    font-size: 1.625rem;
    font-weight: 900;
    letter-spacing:.6px;
    line-height:1.2;
    color: rgba(255,255,255,.92);
}
.whyContent .para{
    margin:0;
    font-size: 1rem;
    color: rgba(255,255,255,.82);
    line-height:1.9;
    letter-spacing:.2px;
}
@media (max-width:520px){
    .whyContent{left:18px; right:18px; bottom:20px;}
    .whyContent .title{font-size:1.9rem;}
    .whyContent .para{font-size:.98rem;}
}

/* ===== Key section (三欄說明) ===== */
.keyGrid{
    position:absolute;
    left:18px; right:18px;
    bottom:34px;
    z-index:2;
    display:grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
    align-items:center;
    max-width: 980px;
    margin:0 auto;
}
.keyGrid .captionTL{
    grid-column: 1 / -1;
    position:relative;
    margin-bottom: 14px;
    text-align:center;
    max-width:min(92%, 780px);
}
.keyGrid .item{
    padding: 14px 2px;
    border-radius: 16px;
    background: rgba(0,0,0,.20);
    backdrop-filter: blur(10px);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: flex-start;
    height: 100%;
}
.keyGrid .captionTL{
    position:relative;
    grid-column: 1 / -1;
    top:0;
    left:0;
    right:0;
    margin-bottom: 14px;
    text-align:left;
    max-width:min(92%, 780px);
}
.keyGrid .captionTL .title{
    margin:0;
    font-size: 1.625rem;
    font-weight: 900;
    letter-spacing:.6px;
    line-height:1.2;
    color: rgba(255,255,255,.92);
    text-shadow: 0 14px 55px rgba(0,0,0,.75);
}
.keyGrid .icon{
    width: 68px;
    height: 68px;
    margin-bottom: 10px;
    object-fit: contain;
    /*background-color: rgba(255,255,255,.10);*/
    border-radius: 8px;
}
.keyGrid .icon::before{
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.30);
    font-size: 20px;
}
.keyGrid .icon[src*="icon1.png"]::before{content: "1";}
.keyGrid .icon[src*="icon2.png"]::before{content: "2";}
.keyGrid .icon[src*="icon3.png"]::before{content: "3";}
.keyGrid .k{
    font-weight:900;
    letter-spacing:.4px;
    margin:0 0 8px;
    font-size: 1.05rem;
    color: rgba(255,255,255,.92);
}
.keyGrid .d{
    margin:0;
    font-size:.92rem;
    line-height:1.7;
    color: rgba(255,255,255,.78);
}
@media (max-width:820px){
    .keyGrid{bottom:20px;}
}

/* ===== 應用情境：文字段落 ===== */
.sceneBody{
    position:absolute;
    left:22px; right:22px;
    top:24px;
    z-index:2;
    text-shadow: 0 14px 55px rgba(0,0,0,.75);
    max-width: min(92%, 720px);
}
.sceneBody .badge{
    position:absolute;
    right:0; top:0;
    font-size:.9rem;
    letter-spacing:.2px;
    opacity:.92;
}
.sceneBody .stitle{
    margin:0 0 10px;
    font-size:2.15rem;
    font-weight:900;
    letter-spacing:.6px;
    line-height:1.15;
}
.sceneBody .sSub{
    margin:0 0 18px;
    color: rgba(255,255,255,.85);
    /*font-weight:700;*/
    letter-spacing:.2px;
}
.sceneBody .bullets{
    margin: 0;
    padding: 0;
    list-style:none;
    color: rgba(255,255,255,.82);
    line-height:1.9;
}
.sceneBody .bullets li{margin: 0 0 14px;}
.sceneBody .bullets b{color: rgba(255,255,255,.95);}
.fullImage .bullets{
    position:absolute;
    left:18px; right:18px;
    bottom:80px;
    z-index:2;
    max-width: 980px;
    margin:0 auto;
    padding: 16px 14px;
    border-radius: 16px;
    text-shadow: 0 14px 55px rgba(0,0,0,.75);
}
.fullImage .bullets{
    margin: 0;
    padding: 16px 14px;
    list-style:none;
    color: rgba(255,255,255,.82);
    line-height:1.9;
}
.fullImage .bullets li{margin: 0 0 12px;}
.fullImage .bullets b{color: rgba(255,255,255,.95);}
.callout{
    z-index:2;
    max-width: 980px;
    border-radius: 16px;
    border:2px solid rgba(255,255,255, 0.8);
    background: rgba(0,0,0,.30);
    padding: 14px 14px;
    margin-left: -14px;
    margin-right: -14px;
    color: rgba(255,255,255,.90);
    line-height:1.8;
    text-align:left;
    font-weight:700;
}
@media (max-width:520px){
    .sceneBody{left:18px; right:18px; top:18px;}
    .sceneBody .stitle{font-size:1.95rem;}
    .sceneBody .badge{font-size:.85rem;}
    .callout{bottom:18px; font-size:.95rem;}
    .fullImage .bullets{bottom:60px; padding: 12px 10px;}
    .fullImage .bullets li{margin: 0 0 10px;}
}

/* ===== 產品展示 ===== */
.sectionTitle{
    padding: 20px 0 18px;
    background-color: rgba(17,17,17);
    border-top:1px solid rgba(255,255,255,.06);
    text-align:center;
}
.sectionTitle h2{
    margin:0;
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing:.6px;
    color: rgba(255,255,255,.92);
    background-color: rgba(17,17,17);
}

.productShow{
    padding: 0 0 40px;
    background:rgba(17,17,17);
    /*border-bottom:1px solid rgba(255,255,255,.06);*/
}
.productCard{
    max-width: 860px;
    margin: 0 auto;
    padding: 18px;
}
.productCard .name{
    margin: 14px 0 14px;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing:.4px;
    text-align:center;
}
.flipWrap{
    width:min(720px, 100%);
    margin: 0 auto 14px;
    perspective: 1200px;
}
.flip{
    position:relative;
    width:100%;
    border-radius: var(--radius);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    overflow:hidden;
    background: rgba(255,255,255,.02);
    transform-style: preserve-3d;
    transition: transform 650ms ease;
}
.flip.isFlipped{transform: rotateY(180deg);}
.face.front{
    position:relative;
    transform: rotateY(0deg);
    opacity:1;
    z-index:2;
    transition: opacity 300ms;
}
.face.back{
    position:absolute;
    inset:0;
    transform: rotateY(-180deg);
    opacity:0;
    z-index:1;
    transition: opacity 300ms 325ms;
    background:#000;
}
.flip.isFlipped .face.front{opacity:0; z-index:1;}
.flip.isFlipped .face.back{opacity:1; z-index:2;}
.face img{width:100%; height:auto; display:block;}

.flipBtn{
    display:block;
    margin: 0 auto;
    width:min(280px, 92%);
    padding: 12px 14px;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    color: rgba(255,255,255,.90);
    font-weight: 800;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
}
.flipBtn:hover{background: rgba(255,255,255,.06);}
.productDesc{
    margin: 16px auto 0;
    max-width: 58ch;
    text-align:center;
    color: rgba(255,255,255,.80);
    line-height:1.9;
    font-size:1rem;
}
.divider{
    height:1px;
    background: rgba(255,255,255,.06);
    max-width: 860px;
    margin: 10px auto;
}

/* ===== 測試指南（黑底卡片） ===== */
.guide{
    padding: 44px 0 50px;
    background-color: rgba(17,17,17);
    /*border-top:1px solid rgba(255,255,255,.06);*/
    /*border-bottom:1px solid rgba(255,255,255,.06);*/
    text-align:center;
}
.guide h2{
    margin:0 0 42px;
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing:.6px;
    color:rgba(255,255,255,.95);
}
.guideGrid{
    display:grid;
    gap: 16px;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 18px;
}
.guideBox{
    position: relative;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(10px);
    padding: 45px 20px 20px 20px;
    text-align:center;
}
.guideBox .label{
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.7);
    padding: 5px 15px;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 900;
    letter-spacing:.4px;
    z-index: 999;
    box-sizing: border-box;
    color:rgba(255,255,255,.95);
}
.guideBox .big{
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing:.4px;
    margin: 0 0 8px;
    color:rgba(255,255,255,.95);
}
.guideBox .small{
    margin: 0;
    font-size: 0.95rem;
    color: #848484;
    line-height:1.9;
}

/* ===== FAQ ===== */
.faq{
    padding: 44px 0 46px;
    background-color: rgba(17,17,17);
    /*border-top:1px solid rgba(255,255,255,.06);*/
}
.faq h2{
    margin:0 0 18px;
    font-size: 2.3rem;
    font-weight: 900;
    letter-spacing:.6px;
    text-align:center;
    color:rgba(255,255,255,.95);
}
.faq .qa{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 18px;
    color:rgba(255,255,255,.95);
}
.faq .qna{
    margin-bottom: 25px;
}
.faq .question{
    font-weight: 900;
    font-size: 17px;
    margin-bottom: 12px;
}
.faq .answer{
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 12px;
    color: rgba(255,255,255,.78);
    white-space: pre-line;
}

/* ===== Contact ===== */
.contact{
    background:#0b0b10;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 44px 0 38px;
    text-align:center;
}
.lineIcon{
    width: 82px; height: 82px;
    margin: 0 auto 14px;
    border-radius: 20px;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    cursor:pointer;
}
.lineBubble{
    width: 62px; height: 62px;
    border-radius: 999px;
    background:#21c15a;
    display:flex; align-items:center; justify-content:center;
    font-weight: 900;
    color:#fff;
    letter-spacing:.6px;
    font-size: 22px;
}
.contact h3{
    margin:0;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing:.4px;
    color: rgba(255,255,255,.92);
    cursor:pointer;
}