:root{
    --ink:#050b18;
    --ink-2:#0a1628;
    --navy:#1a3a5c;
    --navy-2:#24456a;
    --cyan:#4ac8e0;
    --cyan-2:#63d2e8;
    --paper:#f4f2ed;
    --paper-2:#ece8df;
    --white:#ffffff;
    --rule:#d4cfc5;
    --rule-dark:#1a2b45;
    --muted:#6b6b6b;
    --muted-dark:#8892a6;
    --serif:"Noto Serif TC", "Songti TC", serif;
    --sans:"Noto Sans TC", system-ui, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{font-size:16px;line-height:1.6;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  canvas{display:block}

  .wrap{max-width:1360px;margin:0 auto;padding:0 48px;position:relative}
  @media (max-width:720px){.wrap{padding:0 24px}}

  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
  .eyebrow.on-dark{color:var(--cyan)}
  .label-row{display:flex;align-items:center;gap:14px;margin-bottom:28px}
  .label-row .dash{width:40px;height:1px;background:var(--navy)}
  .label-row.on-dark .dash{background:var(--cyan)}

  /* ========== NAV ========== */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    background:color-mix(in oklab, var(--ink) 80%, transparent);
    backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid color-mix(in oklab, var(--cyan) 15%, transparent);
    transition:all .3s ease;
  }
  .nav.on-light{background:color-mix(in oklab, var(--paper) 92%, transparent);border-bottom-color:var(--rule)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px;transition:height .3s ease}
  .nav.scrolled .nav-inner{height:62px}
  .brand{display:flex;align-items:center;gap:14px}
  .brand img{height:36px;width:auto;transition:all .3s ease;filter:brightness(0) invert(1)}
  .nav.on-light .brand img{filter:none}
  .nav.scrolled .brand img{height:28px}
  .nav ul{display:flex;gap:36px;list-style:none}
  .nav ul a{font-size:14px;font-weight:500;color:#e8ecf2;padding:8px 0;position:relative;transition:color .2s}
  .nav.on-light ul a{color:var(--ink)}
  .nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
  .nav.on-light ul a::after{background:var(--navy)}
  .nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav-cta{
    font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
    color:var(--cyan);border:1px solid var(--cyan);padding:10px 22px;
    position:relative;overflow:hidden;isolation:isolate;text-transform:uppercase;
  }
  .nav.on-light .nav-cta{color:var(--navy);border-color:var(--navy)}
  .nav-cta::before{content:"";position:absolute;inset:0;background:var(--cyan);transform:translateY(100%);transition:transform .3s ease;z-index:-1}
  .nav.on-light .nav-cta::before{background:var(--navy)}
  .nav-cta:hover{color:var(--ink)}
  .nav.on-light .nav-cta:hover{color:var(--paper)}
  .nav-cta:hover::before{transform:translateY(0)}
  @media (max-width:1023px){.nav ul{display:none}}

  footer{background:var(--ink);color:#9ba5b5;padding:56px 0 48px;font-size:13px;position:relative;z-index:1}
  .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
  .foot-inner .mark{display:flex;align-items:center;gap:14px;color:var(--paper)}
  .foot-inner .mark .bar{width:1px;height:20px;background:var(--rule-dark)}
  .foot-inner .mark .en{font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--muted-dark)}
  .foot-links{display:flex;gap:28px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase}
  .foot-links a{position:relative}
  .foot-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--paper);transform:scaleX(0);transition:transform .25s ease;transform-origin:right}
  .foot-links a:hover{color:var(--paper)}
  .foot-links a:hover::after{transform:scaleX(1);transform-origin:left}
  .copy{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted-dark)}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-delay:0s !important;transition:none !important}
  }
  .inert{cursor:default}
  .foot-links{flex-wrap:wrap;gap:12px 28px}
  html.sub,html.sub body{background:var(--ink)}
  .sub .nav ul a.cur::after{transform:scaleX(1)}
  .foot-inner .mark .bar{flex:1;max-width:120px;position:relative;overflow:hidden}
  .foot-inner .mark .bar::after{content:"";position:absolute;inset:0;background:var(--cyan);transform:scaleX(var(--v,.7));transform-origin:left;box-shadow:0 0 10px var(--cyan);animation:bar-pulse 3s ease-in-out infinite}
  @keyframes bar-pulse{50%{transform:scaleX(calc(var(--v,.7) * 1.05))}}

  /* ===== CJK line breaking (every page) ===== */
  html:lang(zh-Hant) body,.vd{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
  :where(p,li,dd,td,figcaption,blockquote,h1,h2,h3,h4,h5){text-wrap:pretty}
  .nw{white-space:nowrap}
  /* ===== keyboard focus (every page) ===== */
  :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

  /* ===== prod: nav with mobile menu (same items and look as the live site's menu) ===== */
  .nav-right{display:flex;align-items:center;gap:16px}
  .nav-burger{display:none;align-items:center;justify-content:center;padding:8px;background:none;border:0;color:var(--paper);cursor:pointer}
  .nav-burger .ic-close{display:none}.nav-burger.open .ic-close{display:block}.nav-burger.open .ic-open{display:none}
  .nav-menu{border-top:1px solid color-mix(in oklab, var(--cyan) 15%, transparent);background:var(--ink-2)}
  .nav-menu[hidden]{display:none}
  .nav-menu .wrap{padding-top:16px;padding-bottom:16px}
  .nav-menu a{display:block;padding:12px 0;font-size:14px;color:var(--paper);border-bottom:1px solid var(--rule-dark)}
  .nav-menu a.mcta{margin-top:16px;padding:12px 22px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--cyan);border:1px solid var(--cyan)}
  @media (max-width:1023px){.nav-burger{display:flex}}
  @media (max-width:767px){.nav-right .nav-cta{display:none}}
  @media (min-width:1024px){.nav-menu,.nav-burger{display:none!important}}
  /* ===== prod: related service / knowledge-base links under each case ===== */
  .wrel{position:relative;z-index:1;background:var(--ink);color:#c9d3e3;padding:28px 0;border-top:1px solid var(--rule-dark)}
  .wrel .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;font-size:15px}
  .wrel b{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--cyan);font-weight:500}
  .wrel a{color:var(--paper);border-bottom:1px solid var(--cyan);padding-bottom:2px}
  .wrel a:hover{color:var(--cyan)}