:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; line-height: 1.7; }
.site-header { width: 100%; padding: .9rem max(1rem, calc((100% - 820px) / 2)); display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: #0f4c5c; color: #fff;  } .site-header nav { display: flex; flex-wrap: wrap; gap: .75rem; } .site-header a { color: #fff; }
.page-shell { width: min(100% - 2rem, 820px); margin: 0 auto; padding: 2rem 2rem 1rem; background: #fff; } .eyebrow { color: #075985; font-weight: 800; } .page-description { color: #52657d; } section { margin-block: 2rem; }
.flow-demo { display: grid; gap: .75rem; } .flow-card { padding: 1rem; border: 1px solid #b9cddd; border-radius: .6rem; background: #f8fafc; } .flow-card--moved { /* TODO-1：請加入 position: relative、top 與 left，觀察原本空間仍被保留。 */ border-color: #0f766e; background: #ecfdf5; }
.service-card { position: static; min-height: 10rem; padding: 1.25rem; border: 2px solid #b9cddd; border-radius: .75rem; background: #fff; } .service-card--featured { border-color: #0f766e; position: relative; } .featured-badge { position: absolute; top: .75rem; right: .75rem; padding: .25rem .6rem; border-radius: 999px; background: #9a3412; color: #fff; font-weight: 800; }
.long-content { min-height: 125vh; padding-block: 1rem; } .stack-demo { position: relative; min-height: 14rem; } .stack-card { position: absolute; width: min(70%, 22rem); padding: 1rem; border: 2px solid #17324d; border-radius: .75rem; } .stack-card--back { top: 1rem; left: 1rem; z-index: 1; background: #dbeafe; } .stack-card--front { top: 4rem; left: 4rem; background: #fed7aa;  }
.floating-contact { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; padding: .7rem 1rem; border-radius: .55rem; background: #9a3412; color: #fff; font-weight: 800; text-decoration: none; } button { padding: .65rem .9rem; border: 0; border-radius: .5rem; background: #0f4c5c; color: #fff; font: inherit; cursor: pointer; }
@media (max-width: 560px) { .site-header { align-items: flex-start; flex-direction: column; } .page-shell { width: min(100% - 1rem, 820px); padding-inline: 1rem; } .stack-card { width: calc(100% - 2rem); } .stack-card--front { left: 2rem; } }
/* TODO-4：請補上 page-shell 的底部安全距離與 front card 的 z-index。 */