*{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{ margin:0; font-family:"Noto Sans TC",sans-serif; -webkit-font-smoothing:antialiased; background:#0A0B0D; color:#E3E6E9; }
    image-slot{ display:block; }
    a{ text-decoration:none; }
    h1,h2,h3{ text-wrap:balance; }
    p,li,summary{ text-wrap:pretty; }

    @keyframes bob{ from{ transform:translateY(0); } to{ transform:translateY(6px); } }
    @keyframes glowPulse{ 0%{ transform:translateX(-50%) scale(1); } 100%{ transform:translateX(-50%) scale(1.08); } }
    @keyframes glowBreath{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.1); opacity:1; } }
    @keyframes glowDrift{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(0,18px) scale(1.06); } }

    /* H1 霓虹光暈（克制版） */
    .h1neon{ text-shadow:0 0 1px color-mix(in srgb, var(--accent,#34D8A0) 35%, transparent), 0 0 22px color-mix(in srgb, var(--accent,#34D8A0) 22%, transparent), 0 0 46px color-mix(in srgb, var(--accent-deep,#16A37B) 14%, transparent); }
    /* 掃描線掠過 */
    .scanwrap{ position:relative; display:inline-block; }
    .scanline{ position:absolute; left:-6%; top:0; width:112%; height:100%; pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--rog,#FF2740) 60%, transparent) 48%, color-mix(in srgb,#FFFFFF 78%, transparent) 50%, color-mix(in srgb, var(--rog,#FF2740) 60%, transparent) 52%, transparent); mix-blend-mode:screen; opacity:0; transform:translateX(-60%); }
    .scanline.run{ animation:scanSweep 1.05s cubic-bezier(.4,.1,.2,1) .25s 1 both; }
    @keyframes scanSweep{ 0%{ opacity:0; transform:translateX(-60%); } 12%{ opacity:.9; } 88%{ opacity:.9; } 100%{ opacity:0; transform:translateX(60%); } }

    /* 情境圖 focus-blur（模糊→清晰，模擬戴上 AR 校準） */
    .focusblur{ filter:blur(14px) saturate(1.08); transform:scale(1.04); opacity:.55; transition:filter 1.05s cubic-bezier(.2,.7,.2,1), transform 1.05s cubic-bezier(.2,.7,.2,1), opacity 1.05s ease; will-change:filter,transform,opacity; }
    .focusblur.sharp{ filter:blur(0px) saturate(1); transform:none; opacity:1; }
    @media (prefers-reduced-motion:reduce){ .focusblur{ filter:none !important; transform:none !important; opacity:1 !important; } .scanline{ display:none !important; } }
    @media print{ .focusblur{ filter:none !important; transform:none !important; opacity:1 !important; } .scanline{ display:none !important; } }

    /* Hero 科技氛圍層：透視點陣網格 + 對角光束 */
    .techgrid{ position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(color-mix(in srgb, var(--accent,#34D8A0) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent,#34D8A0) 9%, transparent) 1px, transparent 1px); background-size:46px 46px; background-position:center top; -webkit-mask-image:radial-gradient(120% 78% at 50% 8%, #000 0%, rgba(0,0,0,.55) 40%, transparent 72%); mask-image:radial-gradient(120% 78% at 50% 8%, #000 0%, rgba(0,0,0,.55) 40%, transparent 72%); opacity:.6; }
    .beam{ position:absolute; top:-12%; left:50%; width:160%; height:62%; pointer-events:none; transform:translateX(-50%) rotate(-14deg); transform-origin:center top; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent,#34D8A0) 7%, transparent) 42%, color-mix(in srgb,#FFFFFF 5%, transparent) 50%, color-mix(in srgb, var(--accent,#34D8A0) 7%, transparent) 58%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask-image:linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); }
    .atmo-minimal .techgrid{ opacity:.28; } .atmo-minimal .beam{ opacity:.5; }
    .atmo-cinematic .techgrid{ opacity:.85; }

    /* ROG 角落框 + 科技標記 */
    .corner{ position:absolute; width:26px; height:26px; pointer-events:none; border-color:color-mix(in srgb, var(--accent,#34D8A0) 55%, transparent); opacity:.55; }
    .corner.tl{ top:18px; left:18px; border-top:2px solid; border-left:2px solid; }
    .corner.tr{ top:18px; right:18px; border-top:2px solid; border-right:2px solid; }
    .corner.bl{ bottom:18px; left:18px; border-bottom:2px solid; border-left:2px solid; }
    .corner.br{ bottom:18px; right:18px; border-bottom:2px solid; border-right:2px solid; }
    .techmark{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.34em; color:color-mix(in srgb, var(--rog,#FF2740) 78%, #6A707A); opacity:.82; pointer-events:none; white-space:nowrap; }

    /* 徽章依序滑入 */
    .bdg{ opacity:0; transform:translateY(22px); animation:badgeIn .7s cubic-bezier(.2,.7,.2,1) forwards; }
    .bdg:nth-child(1){ animation-delay:.55s; } .bdg:nth-child(2){ animation-delay:.68s; } .bdg:nth-child(3){ animation-delay:.81s; }
    @keyframes badgeIn{ to{ opacity:1; transform:none; } }
    /* 預約成功打勾畫出 + 圓圈彈入 */
    @keyframes checkPop{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
    @keyframes checkDraw{ to{ stroke-dashoffset:0; } }
    .okcircle{ animation:checkPop .5s cubic-bezier(.2,.8,.2,1.2) both; }
    .okcheck{ stroke-dasharray:30; stroke-dashoffset:30; animation:checkDraw .45s ease .28s forwards; }
    @media (prefers-reduced-motion:reduce){ .techgrid,.beam{ display:none !important; } .bdg{ opacity:1 !important; transform:none !important; animation:none !important; } }
    @media print{ .techgrid,.beam,.corner,.techmark{ display:none !important; } .bdg{ opacity:1 !important; transform:none !important; animation:none !important; } }

    /* 圖03 產品揭示：捲動縮放 + 綠光斜掠 + 邊框微光 */
    .p03frame{ position:relative; border-radius:24px; overflow:hidden; will-change:transform; box-shadow:0 24px 50px rgba(0,0,0,.45); transition:box-shadow .6s ease; }
    .p03frame.revealed{ box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent,#34D8A0) 22%, transparent), 0 0 34px color-mix(in srgb, var(--accent-deep,#16A37B) 18%, transparent); }
    .p03sheen{ position:absolute; top:0; left:0; width:65%; height:100%; pointer-events:none; mix-blend-mode:screen; opacity:0; transform:translateX(-160%) skewX(-12deg); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent,#34D8A0) 34%, transparent) 42%, rgba(255,255,255,.6) 50%, color-mix(in srgb, var(--accent,#34D8A0) 34%, transparent) 58%, transparent); }
    .p03frame.revealed .p03sheen{ animation:p03sweep 2.8s cubic-bezier(.33,0,.25,1) .35s 1 forwards; }
    @keyframes p03sweep{ 0%{ opacity:0; transform:translateX(-160%) skewX(-12deg); } 12%{ opacity:.85; } 80%{ opacity:.85; } 100%{ opacity:0; transform:translateX(190%) skewX(-12deg); } }
    @media (prefers-reduced-motion:reduce){ .p03sheen{ display:none !important; } .p03frame{ transform:none !important; } }
    @media print{ .p03sheen{ display:none !important; } .p03frame{ transform:none !important; box-shadow:none !important; } }

    .p03-slot{ display:block; width:100%; max-width:100%; box-sizing:border-box; }
    .p03-hero-mb{ display:none; width:100%; height:auto; vertical-align:top; }

    @media (min-width:821px){
      .p03frame{ height:480px; }
      .p03frame > .p03-slot--pc,
      .p03frame > #lp-moment{
        position:static;
        inset:auto;
        width:100% !important;
        height:480px !important;
        min-height:480px;
      }
      .p03-hero-mb{ display:none !important; }
    }

    @media (max-width:820px){
      .p03frame{
        height:auto;
        min-height:0;
        width:100%;
      }
      .p03-slot--pc,
      .p03frame > #lp-moment{ display:none !important; }
      .p03-hero-mb{
        display:block;
        width:100%;
        height:auto;
      }
    }

    /* 流程連接線 */
    .steps-wrap{ position:relative; }
    .stepline{ position:absolute; left:67px; top:66px; bottom:66px; width:2px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent,#34D8A0) 55%, transparent), color-mix(in srgb, var(--accent,#34D8A0) 12%, transparent)); z-index:0; pointer-events:none; }
    @media(max-width:820px){ .stepline{ display:none !important; } }
    @media(max-width:520px){ .techmark{ display:none !important; } }
    @media(max-width:680px){ .footrow{ flex-direction:column !important; align-items:flex-start !important; gap:22px !important; } .footnav{ width:100%; justify-content:space-between !important; gap:18px !important; } }

    .rv{ opacity:0; transform:translateY(34px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
    .rv-l{ transform:translateX(-46px); }
    .rv-r{ transform:translateX(46px); }
    .rv-s{ transform:scale(.93); }
    .rv.in{ opacity:1; transform:none; }
    @media (prefers-reduced-motion:reduce){ .rv,.rv-l,.rv-r,.rv-s{ opacity:1 !important; transform:none !important; transition:none !important; } }
    @media print{ .rv,.rv-l,.rv-r,.rv-s{ opacity:1 !important; transform:none !important; } .scrollbar,.stickynav{ display:none !important; } }

    .scrollbar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none; }
    .scrollbar-fill{ height:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--accent,#34D8A0), var(--accent-deep,#16A37B)); transition:transform .12s linear; }
    .stickynav{ position:fixed; top:0; left:0; right:0; z-index:50; transform:translateY(-100%); opacity:0; transition:transform .42s cubic-bezier(.2,.7,.2,1), opacity .42s ease; background:rgba(10,11,13,.74); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid rgba(255,255,255,.07); }
    .stickynav.show{ transform:none; opacity:1; }

    .lift{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease; }
    .lift:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--accent,#34D8A0) 40%, transparent); box-shadow:0 24px 50px rgba(0,0,0,.46); background:rgba(255,255,255,.05); }
    .tile{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
    .lift:hover .tile{ transform:translateY(-2px) scale(1.04); }

    summary{ list-style:none; cursor:pointer; }
    summary::-webkit-details-marker{ display:none; }
    .faq{ transition:border-color .28s ease, background .28s ease; }
    .faq[open]{ border-color:color-mix(in srgb, var(--accent,#34D8A0) 30%, transparent) !important; background:rgba(255,255,255,.05) !important; }
    .faq[open] .faqIcon{ transform:rotate(45deg); }
    .faqIcon{ transition:transform .28s ease; }

    .glow{ transition:opacity .45s ease, filter .45s ease; }
    .atmo-minimal .glow{ opacity:.32; }
    .atmo-balanced .glow{ opacity:1; }
    .atmo-cinematic .glow{ opacity:1; filter:saturate(1.35) brightness(1.2); }

    .imgspec{ display:flex; align-items:center; gap:11px; margin:0 0 13px; flex-wrap:wrap; }

    /* form controls (pseudo-elements can't be inlined) */
    .bk input::placeholder, .bk textarea::placeholder{ color:#6A707A; }
    .bk select{ cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2334D8A0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 16px center; padding-right:46px; }
    .bk select option{ background:#14171B; color:#F4F5F7; }
    .bk input[type=date]::-webkit-calendar-picker-indicator{ filter:invert(.7); cursor:pointer; }
    .bk-field{ width:100%; background:#15191E; border:1px solid rgba(255,255,255,.18); color:#F4F5F7; border-radius:12px; padding:15px 16px; font-size:17px; font-family:inherit; outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
    .bk-field:hover{ border-color:color-mix(in srgb, var(--accent,#34D8A0) 36%, transparent); }
    .bk-field:focus{ border-color:var(--accent,#34D8A0); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#34D8A0) 18%, transparent); }

    @media(max-width:900px){ .dual{ flex-direction:column !important; } }
    @media(max-width:820px){
      .h1{ font-size:46px !important; }
      .h2{ font-size:32px !important; }
      .hsub{ font-size:24px !important; }
      .grid2{ grid-template-columns:1fr !important; }
      .grid3{ grid-template-columns:1fr !important; }
      .gridform{ grid-template-columns:1fr !important; }
      .wrap{ padding-left:22px !important; padding-right:22px !important; }
      .sec{ padding-top:78px !important; padding-bottom:78px !important; }
      .step{ flex-direction:column !important; align-items:flex-start !important; gap:16px !important; padding:26px 24px !important; }
      .topbar{ flex-direction:column !important; align-items:flex-start !important; gap:14px !important; }
      .topbar img{ height:auto !important; width:100% !important; }
      .price-card{ padding:34px 26px !important; }
      .ribbon{ display:none !important; }
      .price-card .ribbon-mob{ display:inline-flex !important; }
      .badges{ grid-template-columns:1fr !important; }
      .herocta{ flex-direction:column !important; align-items:stretch !important; }
      .p03sec{ padding-bottom:64px !important; }
      .p03frame{
        border-radius:28px;
        box-shadow:0 20px 44px rgba(0,0,0,.45),
          0 0 0 1px color-mix(in srgb, var(--accent,#34D8A0) 24%, transparent),
          0 0 32px color-mix(in srgb, var(--accent-deep,#16A37B) 20%, transparent);
      }
      .p03frame[data-p03]{ transform:none !important; }
    }
    @media(max-width:520px){
      .h1{ font-size:42px !important; }
      .h2{ font-size:34px !important; }
      .hsub{ font-size:21px !important; }
      .heroDesc{ font-size:17px !important; }
      .priceNum{ font-size:46px !important; }
      .stickyCta{ display:none !important; }
    }