:root {
      --ix-bg: #f5f4f0;
      --ix-text: #111;
      --ix-muted: #6e6e69;
      --ix-line: rgba(17,17,17,.12);
      --ix-card: rgba(255,255,255,.58);
      --ix-shadow: 0 26px 60px rgba(19,18,16,.08);
      --ix-radius-xl: 30px;
      --ix-radius-lg: 22px;
      --ix-max: 1120px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ix-text);
      background:
        radial-gradient(circle at 20% 5%, rgba(255,215,215,.34), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(224,224,216,.38), transparent 31%),
        var(--ix-bg);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Noto Sans TC", "PingFang TC", sans-serif;
    }

    a { color: inherit; text-decoration: none; }

    .ix-topbar-wrap {
      position: sticky;
      top: 16px;
      z-index: 30;
      width: min(calc(100% - 32px), var(--ix-max));
      margin: 16px auto 0;
    }

    .ix-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 58px;
      padding: 8px 12px 8px 22px;
      border: 1px solid rgba(17,17,17,.08);
      border-radius: 999px;
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 20px 40px rgba(20,20,20,.09);
    }

    .ix-logo {
      font-size: 15px;
      font-weight: 680;
      letter-spacing: .34em;
      white-space: nowrap;
    }

    .ix-nav {
      display: flex;
      align-items: center;
      gap: 22px;
      font-size: 14px;
      color: #555;
    }

    .ix-nav a:hover { color: #000; }

    .ix-nav-cta {
      padding: 10px 16px;
      border: 1px solid var(--ix-line);
      border-radius: 999px;
      color: #111 !important;
      background: rgba(255,255,255,.74);
    }

    .ix-page {
      width: min(calc(100% - 32px), var(--ix-max));
      margin: 0 auto;
      padding: 72px 0 0;
    }

    .ix-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
      gap: 64px;
      align-items: center;
      padding: 34px 0 76px;
    }

    .ix-hero-kicker {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 14px;
      border: 1px solid var(--ix-line);
      border-radius: 999px;
      color: #77736f;
      background: rgba(255,255,255,.45);
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    .ix-hero h1 {
      max-width: 760px;
      margin: 28px 0 22px;
      font-size: clamp(50px, 7vw, 96px);
      line-height: .94;
      letter-spacing: -.065em;
      font-weight: 780;
    }

    .ix-hero-lead {
      max-width: 690px;
      margin: 0;
      color: var(--ix-muted);
      font-size: clamp(19px, 2.1vw, 28px);
      line-height: 1.5;
      letter-spacing: -.02em;
    }

    .ix-hero-copy {
      max-width: 760px;
      margin-top: 32px;
      color: #77736f;
      font-size: 15px;
      line-height: 1.95;
    }

    .ix-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .ix-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 20px;
      border-radius: 999px;
      border: 1px solid var(--ix-line);
      font-weight: 650;
      font-size: 14px;
    }

    .ix-btn-primary {
      color: #fff;
      background: #111;
      border-color: #111;
    }

    .ix-hero-card {
      position: relative;
      min-height: 430px;
      padding: 28px;
      overflow: hidden;
      border: 1px solid rgba(17,17,17,.09);
      border-radius: var(--ix-radius-xl);
      background:
        linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,255,255,.42)),
        #eceae6;
      box-shadow: var(--ix-shadow);
    }

    .ix-hero-card::before {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 24px;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 10px),
        radial-gradient(circle at 30% 10%, rgba(176,109,59,.34), transparent 38%),
        linear-gradient(155deg, #161616, #2a2927 52%, #090909);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }

    .ix-hero-card-content {
      position: absolute;
      left: 52px;
      right: 52px;
      bottom: 48px;
      z-index: 2;
      color: #fff;
    }

    .ix-hero-card-label {
      margin-bottom: 8px;
      font-size: 11px;
      letter-spacing: .16em;
      color: rgba(255,255,255,.58);
    }

    .ix-hero-card-title {
      font-size: 25px;
      line-height: 1.35;
      font-weight: 600;
      letter-spacing: -.025em;
    }

    .ix-section {
      padding: 22px 0 72px;
    }

    .ix-section-title {
      margin: 0 0 12px;
      font-size: clamp(30px, 4vw, 50px);
      line-height: 1.06;
      letter-spacing: -.045em;
    }

    .ix-section-lead {
      max-width: 720px;
      margin: 0 0 30px;
      color: var(--ix-muted);
      font-size: 17px;
      line-height: 1.75;
    }

    .ix-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .ix-card {
      min-height: 210px;
      padding: 26px;
      border: 1px solid var(--ix-line);
      border-radius: var(--ix-radius-lg);
      background: var(--ix-card);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .ix-card-no {
      color: #e56f2d;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .14em;
    }

    .ix-card h3 {
      margin: 18px 0 10px;
      font-size: 23px;
      letter-spacing: -.03em;
    }

    .ix-card p,
    .ix-card li {
      color: var(--ix-muted);
      font-size: 15px;
      line-height: 1.75;
    }

    .ix-card ul {
      margin: 10px 0 0;
      padding-left: 18px;
    }

    .ix-contact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding-top: 10px;
    }

    .ix-contact-panel {
      padding: 28px;
      border: 1px solid var(--ix-line);
      border-radius: var(--ix-radius-lg);
      background: rgba(255,255,255,.54);
    }

    .ix-contact-panel h3 {
      margin: 0 0 16px;
      font-size: 22px;
      letter-spacing: -.025em;
    }

    .ix-contact-panel p {
      margin: 5px 0;
      color: var(--ix-muted);
      line-height: 1.75;
    }

    .ix-contact-email {
      display: inline-block;
      margin-top: 16px;
      font-size: clamp(18px, 2vw, 24px);
      font-weight: 700;
      letter-spacing: -.025em;
      border-bottom: 1px solid #111;
    }

    .ix-footer {
      width: min(calc(100% - 32px), 1240px);
      margin: 78px auto 0;
      padding: 28px 0 36px;
      border-top: 1px solid var(--ix-line);
    }

    .ix-footer-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 30px;
    }

    .ix-footer-company {
      color: #77736f;
      font-size: 12px;
      line-height: 1.8;
      letter-spacing: .04em;
    }

    .ix-footer-links {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 10px 18px;
      max-width: 760px;
      color: #77736f;
      font-size: 12px;
    }

    @media (max-width: 860px) {
      .ix-nav a:not(.ix-nav-cta) { display: none; }
      .ix-logo { font-size: 13px; letter-spacing: .24em; }
      .ix-page { padding-top: 44px; }
      .ix-hero { grid-template-columns: 1fr; gap: 34px; padding-bottom: 48px; }
      .ix-hero-card { min-height: 360px; }
      .ix-grid { grid-template-columns: 1fr; }
      .ix-contact { grid-template-columns: 1fr; }
      .ix-footer-row { flex-direction: column; }
      .ix-footer-links { justify-content: flex-start; }
    }

    @media (max-width: 520px) {
      .ix-topbar-wrap,
      .ix-page,
      .ix-footer { width: min(calc(100% - 20px), var(--ix-max)); }
      .ix-topbar { min-height: 52px; padding-left: 16px; }
      .ix-nav { gap: 8px; }
      .ix-nav-cta { padding: 8px 12px; }
      .ix-hero { padding-top: 12px; }
      .ix-hero h1 { font-size: 54px; }
      .ix-hero-lead { font-size: 19px; }
      .ix-hero-card { min-height: 320px; }
      .ix-hero-card-content { left: 36px; right: 36px; bottom: 34px; }
      .ix-section { padding-bottom: 52px; }
      .ix-card { min-height: auto; }
    }