/**, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 */
    :root {
      --bg: #F7F5F0;
      --surface: #FFFFFF;
      --surface2: #F0EDE6;
      --surface4: #1A3C5E;
	  --surface3: #517693;
      --border: rgba(0,0,0,0.08);
      --border-strong: rgba(0,0,0,0.15);
      --text-primary: #1A1916;
      --text-secondary: #53524e;
	  --text-secondary2: #FFF;
      --text-muted: #53524e;
	  --text-muted2: #b2c0d4;
      --accent: #1A3C5E;
      --accent-light: #E8EFF6;
      --green: #2D6A4F;
      --green-light: #E8F4EE;
      --amber: #7D4E1A;
      --amber-light: #FBF0E4;
      --purple: #4A3580;
      --purple-light: #EEEAF8;
      --teal: #1A5C5A;
      --teal-light: #E4F2F2;
    }
 
   /* body {
      background: var(--bg);
      font-family: 'Noto Sans TC', sans-serif;
      color: var(--text-primary);
      font-size: 15px;
      line-height: 1.6;
    }*/
 
    /* ── Section wrapper ── */
    .portfolio-section {
      /*max-width: 1100px;*/
      margin: 0 auto;
      padding: 80px 24px;
    }
 
    /* ── Section header ── */
    .section-eyebrow {
      font-size: 12px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 12px;
    }
 
    .section-title {
      font-family: 'Noto Serif TC', serif;
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.3;
      margin-bottom: 16px;
    }
 
    .section-subtitle {
      font-size: 15px;
      color: var(--text-secondary);
      max-width: 520px;
      margin-bottom: 48px;
    }
 
    /* ── Filter bar ── */
    .filter-bar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }
 
    .filter-btn {
      padding: 7px 18px;
      font-size: 18px;
      font-family: 'Noto Sans TC', sans-serif;
      border-radius: 999px;
      border: 1px solid var(--border-strong);
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      letter-spacing: 0.02em;
	  line-height: 140%;
    }
 
    .filter-btn:hover {
      background: var(--surface);
      border-color: var(--accent);
      color: #000 !important;
    }
 
    .filter-btn.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
 
    /* ── Grid ── */
    .cases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 24px;
    }
 
    /* ── Card ── */
    .case-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeUp 0.5s ease forwards;
    }
 
    .case-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.10);
      border-color: var(--border-strong);
    }
 
    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }
 
    .case-card:nth-child(1) { animation-delay: 0.05s; }
    .case-card:nth-child(2) { animation-delay: 0.10s; }
    .case-card:nth-child(3) { animation-delay: 0.15s; }
    .case-card:nth-child(4) { animation-delay: 0.20s; }
    .case-card:nth-child(5) { animation-delay: 0.25s; }
    .case-card:nth-child(6) { animation-delay: 0.30s; }
 
    /* ── Card screen mockup ── */
    .card-screen {
      position: relative;
      padding: 20px 20px 0;
      height: 188px;
      overflow: hidden;
      display: flex;
      align-items: flex-start;
    }
 
    .card-screen.bg-blue   { background: #EEF4FB; }
    .card-screen.bg-green  { background: #EBF4EE; }
    .card-screen.bg-purple { background: #EEEAF8; }
    .card-screen.bg-amber  { background: #FBF2E6; }
    .card-screen.bg-teal   { background: #E4F2F0; }
 
    /* Browser frame */
    .browser {
      width: 100%;
      background: #fff;
      border-radius: 8px 8px 0 0;
      border: 1px solid rgba(0,0,0,0.10);
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
 
    .browser-bar {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 10px;
      background: #F3F3F3;
      border-bottom: 1px solid rgba(0,0,0,0.07);
    }
 
    .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .dot-r { background: #FF5F57; }
    .dot-y { background: #FFBD2E; }
    .dot-g { background: #28C840; }
 
    .url-pill {
      flex: 1;
      height: 17px;
      background: #fff;
      border-radius: 4px;
      margin-left: 6px;
      display: flex;
      align-items: center;
      padding: 0 8px;
      border: 1px solid rgba(0,0,0,0.07);
    }
 
    .url-text { font-size: 9px; color: #999; font-family: monospace; }
 
    /* Screen content lines */
    .sc { padding: 10px 10px 0; }
 
    .sh { height: 9px; border-radius: 2px; margin-bottom: 5px; background: #E0DDD6; }
    .sl { height: 6px; border-radius: 2px; margin-bottom: 4px; background: #EBEBEB; }
    .sl.s { width: 60%; }
    .sl.xs { width: 40%; }
 
    .stat-row { display: flex; gap: 5px; margin-bottom: 8px; }
    .stat-box { flex: 1; background: #F5F5F5; border-radius: 5px; padding: 6px; }
    .stat-n { height: 10px; border-radius: 2px; margin-bottom: 3px; }
    .stat-l { height: 5px; border-radius: 2px; background: #E0DDD6; width: 65%; }
 
    .tbl { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
    .tr { display: flex; gap: 4px; }
    .td { flex: 1; height: 7px; border-radius: 2px; background: #EBEBEB; }
    .td.hd { background: #D5D2CB; }
 
    .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
    .mini-card { background: #F5F5F5; border-radius: 5px; padding: 7px; height: 38px; }
    .mc-line { height: 6px; border-radius: 2px; margin-bottom: 3px; background: #E0DDD6; }
 
    .hero-block { background: #F5F5F5; border-radius: 5px; padding: 10px; margin-bottom: 6px; text-align: center; }
    .hero-h { height: 11px; border-radius: 2px; margin: 0 auto 4px; }
    .hero-s { height: 7px; border-radius: 2px; margin: 0 auto; background: #E0DDD6; width: 70%; }
 
    .story-item { display: flex; align-items: center; gap: 6px; background: #F5F5F5; border-radius: 5px; padding: 7px; margin-bottom: 5px; }
    .avatar { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
    .story-lines { flex: 1; }
    .story-l1 { height: 6px; border-radius: 2px; background: #E0DDD6; margin-bottom: 3px; }
    .story-l2 { height: 5px; border-radius: 2px; background: #EBEBEB; width: 75%; }
 
    /* ── Card body ── */
    .card-body {
      padding: 20px 22px 22px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
 
    .card-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
 
    .tag {
      font-size: 11px;
      font-weight: 500;
      padding: 3px 10px;
      border-radius: 999px;
      letter-spacing: 0.02em;
    }
 
    .tag-gov    { background: var(--accent-light);  color: var(--accent); }
    .tag-corp   { background: var(--green-light);   color: var(--green); }
    .tag-act    { background: var(--purple-light);  color: var(--purple); }
    .tag-plat   { background: var(--teal-light);    color: var(--teal); }
    .tag-ngo    { background: var(--amber-light);   color: var(--amber); }
 
    .card-client {
      font-family: 'Noto Serif TC', serif;
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 6px;
      line-height: 1.4;
    }
 
    .card-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.65;
      margin-bottom: 14px;
    }
 
    .card-modules {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
 
    .chip {
      font-size: 11px;
      padding: 4px 10px;
      background: var(--surface2);
      border-radius: 6px;
      color: var(--text-secondary);
      border: 1px solid var(--border);
    }
 
    /* ── Card footer ── */
    .card-footer {
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
 
    .outcome {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.4;
      flex: 1;
    }
 
    .outcome strong {
      font-weight: 500;
      color: var(--green);
    }
 
    .detail-btn {
      flex-shrink: 0;
      font-size: 12px;
      font-family: 'Noto Sans TC', sans-serif;
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid var(--border-strong);
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
      text-decoration: none;
      display: inline-block;
    }
 
    .detail-btn:hover {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
 
    /* ── Hidden ── */
    .case-card.hidden {
      display: none;
    }
 
    /* ── Responsive ── */
    @media (max-width: 600px) {
      .portfolio-section { padding: 60px 16px; }
      .cases-grid { grid-template-columns: 1fr; }
    }

	/* ────────────────────────────
       共用
    ──────────────────────────── */
    .section-wrap {
      /*max-width: 1100px;*/
      margin: 0 auto;
      padding: 80px 24px;
    }
 
    .section-eyebrow {
      font-size: 12px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 12px;
    }
 
    .section-title {
      font-family: 'Noto Serif TC', serif;
      font-size: clamp(26px, 3.5vw, 38px);
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.35;
      margin-bottom: 14px;
    }
 
    .section-subtitle {
      font-size: 15px;
      color: var(--text-secondary);
      max-width: 500px;
      margin-bottom: 52px;
    }
 
    /* ────────────────────────────
       LOGO 牆
    ──────────────────────────── */
    #clients {
      background: var(--surface3);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
 
    .logo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 2px;
      overflow: hidden;
    }
 
    .logo-cell {
      background: var(--surface3);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 28px 20px;
      gap: 10px;
      transition: background 0.2s ease;
      cursor: default;
    }
 
    .logo-cell:hover {
      background: var(--surface4);
    }
 
    /* 文字 Logo 佔位 — 等你有圖片就換成 <img> */
    .logo-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }
	.logo-icon img{ width: 80%;}
 
    .logo-name {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-secondary2);
      text-align: center;
      line-height: 1.4;
    }
 
    .logo-type {
      font-size: 14px;
      color: var(--text-muted2);
      text-align: center;
    }
 
    /* 顏色分類 */
    .ic-gov    { background: #E8EFF6; }
    .ic-corp   { background: #E8F4EE; }
    .ic-edu    { background: #EEEAF8; }
    .ic-ngo    { background: #FBF0E4; }
    .ic-transit { background: #E4F2F0; }
 
    /* ────────────────────────────
       聯絡表單
    ──────────────────────────── */
    #contact {
      background: var(--bg);
    }
 
    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 64px;
      align-items: start;
    }
 
    /* 左欄 info */
    .contact-info {}
 
    .info-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin-bottom: 40px;
    }
 
    .info-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
 
    .info-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--accent-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
      margin-top: 2px;
    }
 
    .info-label {
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 0.05em;
      margin-bottom: 3px;
    }
 
    .info-value {
      font-size: 14px;
      color: var(--text-primary);
      font-weight: 500;
      line-height: 1.5;
    }
 
    .info-value a {
      color: var(--accent);
      text-decoration: none;
    }
 
    .info-value a:hover { text-decoration: underline; }
 
    /* 特色說明 */
    .feature-cards {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
 
    .feature-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 16px;
    }
 
    .feature-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      flex-shrink: 0;
    }
 
    .feature-text {
      font-size: 15px;
      color: var(--text-secondary);
    }
 
    /* 右欄 表單 */
    .contact-form-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 40px 36px;
    }
 
    .form-title {
      font-family: 'Noto Serif TC', serif;
      font-size: 20px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 6px;
    }
 
    .form-desc {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 28px;
    }
 
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
 
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 16px;
    }
 
    .form-group.full { grid-column: 1 / -1; }
 
    label {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      letter-spacing: 0.03em;
    }
 
    label span.req {
      color: #C0392B;
      margin-left: 2px;
    }
 
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
      width: 100%;
      padding: 10px 14px;
      font-size: 14px;
      font-family: 'Noto Sans TC', sans-serif;
      color: var(--text-primary);
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      appearance: none;
      -webkit-appearance: none;
    }
 
    input::placeholder,
    textarea::placeholder { color: var(--text-muted); }
 
    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(26,60,94,0.08);
    }
 
    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239A9890' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
      cursor: pointer;
    }
 
    textarea {
      resize: vertical;
      min-height: 110px;
      line-height: 1.6;
    }
 
    /* checkbox 同意 */
    .consent-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 24px;
    }
 
    .consent-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
      /*border: 1px solid var(--border-strong);*/
	  border: 1px solid #53524e !important;
	  background-color: #838383 !important;
      border-radius: 4px;
      cursor: pointer;
      flex-shrink: 0;
      margin-top: 2px;
      accent-color: var(--accent);
    }
 
    .consent-text {
      font-size: 14px !important;
      /*color: var(--text-muted);*/
	  color: #838383 !important;
      line-height: 1.6;
    }
 
    /* 送出按鈕 */
    .submit-btn {
      width: 100%;
      padding: 14px;
      font-size: 15px;
      font-family: 'Noto Sans TC', sans-serif;
      font-weight: 500;
      color: #fff;
      background: var(--accent);
	  line-height: 140%;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.1s ease;
      letter-spacing: 0.05em;
    }
 
    .submit-btn:hover { background: #122D47; }
    .submit-btn:active { transform: scale(0.99); }
 
    /* 成功訊息 */
    .success-msg {
      display: none;
      text-align: center;
      padding: 32px 0 8px;
    }
 
    .success-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #E8F4EE;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin: 0 auto 16px;
    }
 
    .success-msg h3 {
      font-family: 'Noto Serif TC', serif;
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }
 
    .success-msg p {
      font-size: 13px;
      color: var(--text-muted);
    }
 
    /* ── RWD ── */
    @media (max-width: 768px) {
      .contact-layout { grid-template-columns: 1fr; gap: 40px; }
      .form-row { grid-template-columns: 1fr; }
      .contact-form-wrap { padding: 28px 20px; }
      .section-wrap { padding: 60px 16px; }
    }
 
    @media (max-width: 480px) {
      .logo-grid { grid-template-columns: repeat(2, 1fr); }
    }