:root {
      --lux-yellow: #d6a31a;
      --lux-yellow-deep: #b88700;
      --lux-yellow-soft: #fbf5e3;
      --lux-ink: #0f172a;
      --lux-text: #475569;
      --lux-subtle: #64748b;
      --lux-line: #e8dbc0;
      --lux-bg: #faf8f1;
      --lux-panel: #fffdf8;
      --lux-navy: #071322;
      --lux-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
      --radius-lg: 24px;
      --radius-md: 18px;
      --max: 1240px;
      --hero-title: clamp(44px, 5.6vw, 78px);
      --section-title: clamp(30px, 4vw, 58px);
      --body-copy: 16px;
      --header-height: 78px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'Inter', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
      color: var(--lux-ink);
      background: #fff;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; }

    .container {
      width: min(calc(100% - 36px), var(--max));
      margin: 0 auto;
    }

    .section {
      padding: 72px 0;
    }

    .section-light {
      background: var(--lux-bg);
      border-top: 1px solid var(--lux-line);
      border-bottom: 1px solid var(--lux-line);
    }

    .eyebrow {
      display: inline-block;
      margin: 0 0 14px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--lux-yellow-deep);
    }

    .section-title {
      margin: 0 0 18px;
      font-size: var(--section-title);
      line-height: 1.04;
      letter-spacing: -.045em;
      font-weight: 700;
      color: var(--lux-ink);
      max-width: 900px;
    }

    .section-copy {
      margin: 0;
      max-width: 780px;
      font-size: var(--body-copy);
      line-height: 1.85;
      color: var(--lux-text);
    }

    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid var(--lux-line);
      backdrop-filter: blur(10px);
    }

    .header-inner {
      min-height: var(--header-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

    .brand {
      display: flex;
      align-items: center;
      min-width: 0;
      flex: 0 0 auto;
    }

    .brand img {
      width: clamp(118px, 12vw, 164px);
      height: auto;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-left: auto;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .nav-link {
      position: relative;
      padding: 10px 0;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #23324b;
      transition: color .2s ease;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: var(--lux-yellow);
      opacity: 0;
      transform: scaleX(.3);
      transition: .22s ease;
    }

    .nav-link:hover,
    .nav-link:focus-visible,
    .nav-link.active-anchor {
      color: #0f172a;
    }

    .nav-link:hover::after,
    .nav-link:focus-visible::after,
    .nav-link.active-anchor::after {
      opacity: 1;
      transform: scaleX(1);
    }

    .lang-switch {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .lang-btn {
      min-width: 54px;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid #d7cdb8;
      background: #fff;
      color: #475569;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      cursor: pointer;
      transition: .2s ease;
    }

    .lang-btn:hover,
    .lang-btn.active {
      border-color: var(--lux-yellow);
      background: var(--lux-yellow-soft);
      color: #102033;
    }

    .menu-toggle {
      display: none;
      padding: 10px 12px;
      border: 1px solid #d7cdb8;
      background: #fff;
      color: #23324b;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      cursor: pointer;
    }

    .hero {
      background: linear-gradient(120deg, #071322 0%, #0b2037 48%, #102b4a 100%);
      color: #fff;
      overflow: hidden;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr);
      align-items: center;
      gap: 42px;
      min-height: calc(100vh - var(--header-height));
      padding: 64px 0 62px;
    }

    .hero-copy {
      max-width: 720px;
    }

    .hero .eyebrow { color: #e5b72a; }

    .hero-title {
      margin: 0 0 22px;
      font-size: var(--hero-title);
      line-height: .98;
      letter-spacing: -.055em;
      font-weight: 700;
      max-width: 720px;
    }

    html[lang="en"] .hero-title {
      font-size: clamp(30px, 3.9vw, 56px);
      max-width: 700px;
    }

    .hero-copy p:last-of-type {
      margin: 0;
      max-width: 690px;
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.7;
      color: #dbe4ee;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 30px;
    }

    .btn-primary,
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0 22px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .btn-primary {
      background: var(--lux-yellow);
      color: #0f172a;
      box-shadow: 0 14px 28px rgba(212,175,55,.18);
    }

    .btn-secondary {
      border: 1px solid rgba(255,255,255,.25);
      color: #fff;
      background: rgba(255,255,255,.04);
    }

    .btn-primary:hover,
    .btn-secondary:hover { transform: translateY(-1px); }

    .hero-visual {
      position: relative;
      min-height: 470px;
      display: grid;
      align-content: center;
      justify-items: end;
      padding: 10px 0;
    }

    .hero-card {
      position: relative;
      width: min(100%, 600px);
      margin-left: auto;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 24px;
      padding: 16px;
      box-shadow: 0 26px 52px rgba(0,0,0,.20);
      backdrop-filter: blur(8px);
    }

    .hero-card img {
      width: 100%;
      aspect-ratio: 4 / 3;
      height: auto;
      object-fit: cover;
      object-position: center;
      border-radius: 18px;
    }

    .hero-accent {
      position: absolute;
      border-radius: 18px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      overflow: hidden;
      box-shadow: 0 18px 40px rgba(0,0,0,.16);
    }

    .hero-accent img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-accent.one {
      width: clamp(132px, 24%, 180px);
      aspect-ratio: 1.58 / 1;
      height: auto;
      top: 24px;
      right: 20px;
    }

    .hero-accent.two {
      width: clamp(134px, 24%, 176px);
      aspect-ratio: 1.56 / 1;
      height: auto;
      bottom: 18px;
      left: -2px;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
      align-items: center;
      gap: 40px;
    }

    .media-frame {
      background: var(--lux-panel);
      border: 1px solid var(--lux-line);
      border-radius: var(--radius-lg);
      box-shadow: var(--lux-shadow);
      overflow: hidden;
    }

    .media-frame img {
      width: 100%;
      height: auto;
    }

    .about-media img {
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .bullet-panel {
      margin-top: 24px;
      display: grid;
      gap: 14px;
    }

    .bullet-pill {
      padding: 14px 18px;
      border: 1px solid var(--lux-line);
      border-radius: 18px;
      background: var(--lux-panel);
      color: var(--lux-text);
      font-size: 15px;
      line-height: 1.7;
    }

    .section-head {
      display: block;
      margin-bottom: 28px;
    }

    .section-side-note {
      padding: 18px 20px;
      border: 1px solid var(--lux-line);
      border-radius: 20px;
      background: var(--lux-panel);
      color: var(--lux-text);
      font-size: 14px;
      line-height: 1.8;
    }

    .cards-grid {
      display: grid;
      gap: 22px;
    }

    .support-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .industry-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .support-card,
    .industry-card {
      border: 1px solid var(--lux-line);
      border-radius: var(--radius-md);
      background: var(--lux-panel);
      box-shadow: var(--lux-shadow);
      overflow: hidden;
      min-height: 220px;
    }

    .support-card .card-top,
    .industry-card .card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 18px 0;
    }

    .support-index {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: var(--lux-yellow-soft);
      border: 1px solid rgba(212,175,55,.35);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      color: var(--lux-yellow-deep);
      flex: 0 0 auto;
    }

    .card-kicker {
      display: inline-block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--lux-yellow-deep);
      margin-bottom: 8px;
    }

    .card-title {
      margin: 0;
      font-size: clamp(22px, 2.4vw, 28px);
      line-height: 1.1;
      letter-spacing: -.04em;
      color: var(--lux-ink);
    }

    .card-copy {
      margin: 0;
      font-size: 15px;
      line-height: 1.8;
      color: var(--lux-text);
    }

    .support-card .card-body,
    .industry-card .card-body {
      padding: 18px;
      display: grid;
      gap: 14px;
    }

    .support-mini-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .support-mini-list li {
      position: relative;
      padding-left: 16px;
      font-size: 14px;
      line-height: 1.75;
      color: var(--lux-text);
    }

    .support-mini-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .7em;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--lux-yellow);
      transform: translateY(-50%);
    }

    .industry-card .card-media img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
    }

    .industry-card .card-body {
      padding-top: 16px;
    }

    .industry-card .card-title {
      font-size: clamp(20px, 2.1vw, 30px);
    }

    .process-wrap {
      display: grid;
      gap: 28px;
    }

    .steps-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .step-card {
      position: relative;
      padding: 24px 20px 22px;
      border-radius: var(--radius-md);
      background: var(--lux-panel);
      border: 1px solid var(--lux-line);
      box-shadow: var(--lux-shadow);
      min-height: 220px;
    }

    .step-num {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: var(--lux-yellow-soft);
      border: 1px solid rgba(212,175,55,.32);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      color: var(--lux-yellow-deep);
      margin-bottom: 16px;
    }

    .step-card h3 {
      margin: 0 0 12px;
      font-size: 24px;
      line-height: 1.08;
      letter-spacing: -.03em;
      color: var(--lux-ink);
    }

    .step-card p {
      margin: 0;
      font-size: 14px;
      line-height: 1.8;
      color: var(--lux-text);
    }

    .process-panel {
      display: grid;
      grid-template-columns: minmax(280px, 340px) minmax(360px, 1fr);
      gap: 32px;
      align-items: stretch;
      justify-content: start;
    }

    .process-graphic {
      align-self: start;
    }

    .process-graphic img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
      max-height: 340px;
    }

    .process-summary {
      padding: 26px 30px;
      border: 1px solid var(--lux-line);
      border-radius: 20px;
      background: var(--lux-panel);
      color: var(--lux-text);
      font-size: 15px;
      line-height: 1.8;
      box-shadow: var(--lux-shadow);
      display: grid;
      gap: 16px;
      align-content: center;
      min-height: 340px;
    }

    .process-summary h3 {
      margin: 0;
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: -.02em;
      color: var(--lux-ink);
    }

    .process-mini-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .process-mini-list li {
      position: relative;
      padding-left: 16px;
      font-size: 14px;
      line-height: 1.75;
      color: var(--lux-text);
    }

    .process-mini-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .7em;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--lux-yellow);
      transform: translateY(-50%);
    }

    .region-layout {
      display: grid;
      grid-template-columns: minmax(300px, 500px) minmax(0, 1fr);
      gap: 34px;
      align-items: center;
    }

    .region-media img {
      aspect-ratio: 16 / 10;
      object-fit: cover;
    }

    .region-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }


    .region-pill {
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(212,170,31,.42);
      background: var(--lux-yellow-soft);
      color: #3f3a2f;
      font-size: 13px;
      font-weight: 700;
    }

    .contact-wrap {
      background: linear-gradient(180deg, #faf8f2 0%, #f5f0e4 100%);
      border-top: 1px solid var(--lux-line);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(220px, .7fr) minmax(220px, .7fr);
      gap: 28px;
      align-items: start;
    }

    .mini-title {
      margin: 0 0 18px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--lux-subtle);
    }

    .contact-item,
    .contact-copy {
      margin: 0 0 12px;
      font-size: 16px;
      line-height: 1.8;
      color: var(--lux-text);
    }

    .contact-item strong { color: var(--lux-ink); }

    .footer-bottom {
      margin-top: 38px;
      padding-top: 18px;
      border-top: 1px solid var(--lux-line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      font-size: 13px;
      color: var(--lux-subtle);
    }

    [data-i18n="footer_note"] {
      display: none;
    }

    [data-lang-font="tc"] body,
    html[lang="zh-Hant"] body { font-family: 'Inter', 'Noto Sans TC', sans-serif; }
    html[lang="zh-Hans"] body { font-family: 'Inter', 'Noto Sans SC', sans-serif; }
    html[lang="jp"] body, html[lang="ja"] body { font-family: 'Inter', 'Noto Sans JP', sans-serif; }

    @media (max-width: 1180px) {
      .nav { gap: 22px; }
      .hero-inner,
      .split,
      .section-head,
      .process-panel,
      .region-layout,
      .contact-grid {
        grid-template-columns: 1fr;
      }
      .hero-inner {
        min-height: auto;
        padding: 58px 0 56px;
      }
      .hero-card,
      .hero-visual { margin-left: 0; justify-items: start; }
      .section-head { margin-bottom: 24px; }
    }

    @media (max-width: 980px) {
      .support-grid,
      .industry-grid,
      .steps-row { grid-template-columns: 1fr 1fr; }
      .process-panel { grid-template-columns: 1fr; max-width: 760px; }
      .process-summary { min-height: auto; }
      .process-graphic img { max-height: none; }
    }

    @media (max-width: 860px) {
      .header-inner { flex-wrap: wrap; min-height: auto; padding: 14px 0; }
      .header-right {
        width: 100%;
        align-items: flex-start;
        justify-content: space-between;
      }
      .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
      .nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 12px 0 4px;
      }
      .nav.open { display: flex; }
      .lang-switch { margin-left: auto; }
      .hero-title { font-size: clamp(40px, 10vw, 56px); }
      .hero-accent.one { right: 8px; }
      .hero-accent.two { left: 8px; }
      .hero-copy p:last-of-type { font-size: 18px; }
    }

    @media (max-width: 640px) {
      :root {
        --section-title: clamp(28px, 10vw, 40px);
      }
      .container { width: min(calc(100% - 24px), var(--max)); }
      .section { padding: 58px 0; }
      .support-grid,
      .industry-grid,
      .steps-row { grid-template-columns: 1fr; }
      .hero-inner { gap: 26px; padding: 42px 0 48px; }
      .hero-visual { min-height: auto; }
      .hero-card { padding: 12px; }
      .hero-card img { aspect-ratio: 4 / 3; height: auto; }
      .hero-accent.one { width: 108px; height: 70px; top: 14px; right: 10px; }
      .hero-accent.two { width: 102px; height: 66px; bottom: 14px; left: 10px; }
      .section-copy,
      .card-copy,
      .contact-item,
      .contact-copy,
      .process-summary,
      .bullet-pill { font-size: 15px; }
      .section-side-note { display: none; }
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }
      .lang-switch {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .lang-btn { min-width: 48px; padding: 8px 10px; }
    }